Calmety

Blog über alternative Gesundheits- und Hausmittel – von Name, Logo, Icons bis zur Website aus einer Hand

WordPress – Blog

Theme: Ocean WP
Child-Theme
Builder: Elementor (Seiten)
Builder: Gutenberg (Beiträge)
Custom CSS

Design & Layout

Illustrator
Figma | Wireframe
Photoshop
Logo- & Icon-Design
Name & Slogan

Plugins

WP Recipe Maker
YOAST SEO
Complianz
OMGF
Div. Ocean Plugins

Andere Tools

Substanzensuche – kleines Side-Project
KI – Texte optimieren & Bilder generieren

Projektüberblick

Im Rahmen meiner Webdesign-Fortbildung habe ich im 2-monatigen Modul Webdesign mit WordPress eine Rezeptseite für das Projekt Calmety entwickelt. Ziel war es, eine ansprechende Mischung aus Storytelling, Produktpräsentation und interaktiven Funktionen zu gestalten – von Rezepten bis zur Nutzerfreundlichkeit.

Das Thema habe ich gewählt, weil ich selbst auf alternative Gesundheits- und Hausmittel setze und hier meine persönlichen Interessen einfließen lassen konnte. Das Projekt wurde als Blog konzipiert – es handelt sich nicht um einen Shop oder Produktverkauf, sondern um eine inhaltlich geprägte Seite.

www.calmety.com

Gestaltung

Logo & Icons

Das Design orientierte sich an einem klaren, natürlichen Look: natürliche Farben, weiche Formen und viel Weißraum, um den Fokus auf die Rezeptinhalte zu legen.

Mit Illustrator, Photoshop und Figma habe ich Logo, Icons, Bildmaterial und Wireframes entwickelt. Gutenberg, Elementor und Custom CSS ermöglichen die flexible Umsetzung der Layoutideen in WordPress.

Details

Neben Logo und Icons habe ich kleine dekorative Hintergrundelemente gestaltet, die sich perfekt in das Layout einfügen. In Illustrator habe ich die Wellen-Pinselform aus den Elementor-Sections aufgegriffen und in denselben Stil eigene grafische Formen entwickelt. Diese Elemente wurden im Hintergrund eingesetzt, sodass Design & Inhalt harmonisch ineinandergreifen.

ZUM PROJEKT

Technische Umsetzung

Plugins

Für das Projekt habe ich verschiedene Plugins eingesetzt, u. a. YOAST zur Suchmaschinenoptimierung. Auch wenn das Tool nur an der Oberfläche kratzt, bietet es eine gute Basis für Struktur, Lesbarkeit und Keyword-Fokus – perfekt für den Einstieg. Ein Beispiel: Beim Beitrag Effektiver Essigreiniger habe ich alle SEO-Signale optimiert (grüne Bewertung), was im Screenshot deutlich sichtbar wird.

Für die Rezepte nutze ich das Plugin „WP Recipe Maker“, das Zutaten und Zubereitung übersichtlich darstellt.

In der Free-Version lassen sich die Mengenangaben leider nicht anpassen. Daher denke ich über interaktive Features nach, z. B. Mengenanpassungen über JavaScript, die ohne kostenpflichtige Plugin-Version funktionieren. Die SEO-Optimierung ist auf Kochrezepte ausgelegt, Angaben wie Kalorien bei einem Raumduft lassen sich hier schlecht unterbringen 😉

Gutenberg & Elementor

Substanzensuche

Ein Kleines Side-Project. Neben den eingesetzten Plugins habe ich ein eigenes kleines Tool entwickelt: eine interaktive Substanzensuche, programmiert mit reinem HTML, CSS und JavaScript. Damit können Nutzer:innen bestimmte Inhaltsstoffe eingeben und erhalten sofort Informationen über Nachteile und mögliche Alternativen.

Die Idee entstand aus meinem persönlichen Interesse an alternativen Gesundheits- und Hausmitteln – und zeigt, dass ich neben Design und WordPress auch eigene Funktionalitäten entwickeln kann.

ZUR SUBSTANZENSUCHE

Code Snippet

    <!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Substanzen Suche</title>
    <style>

        .search-container {
            position: relative;
            margin-bottom: 30px;
        }

        #searchInput {
            width: 100%;
            padding: 12px;
            font-size: 16px;
            border: 2px solid #ebf2d080;
            border-radius: 4px;
            box-sizing: border-box;
        }

        #searchInput:focus {
            outline: none;
            border-color: #D8E5A0;
        }

        #autocompleteList {
            position: absolute;
            width: 100%;
            background: white;
            border: 1px solid #ebf2d080;
            border-radius: 0 0 4px 4px;
            max-height: 200px;
            overflow-y: auto;
            display: none;
            z-index: 1000;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .autocomplete-item {
            padding: 10px;
            cursor: pointer;
        }

        .autocomplete-item:hover {
            background-color: #f0f0f0;
        }

        #searchResults {
            background: white;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            display: none;
        }

        .substance-list {
            margin-top: 30px;
        }

        .substance-item {
            margin-bottom: 20px;
            padding: 15px;
            background: white;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .substance-name {
            font-weight: bold;
            color: #9fb249;
            margin-bottom: 5px;
        }

        h2 {
            color: #455600;
            text-align: center;
            margin-bottom: 30px;
        }
    </style>
</head>
<body>

    <div class="search-container">
        <input type="text" id="searchInput" placeholder="Suche nach Substanzen, Fachbegriffen, Nachteilen oder Alternativen...">
        <div id="autocompleteList"></div>
    </div>

    <div id="searchResults"></div>

    <div class="substance-list" id="substanceList"></div>

    <script>
         const substances = {     
    'Acrylate': 'Synthetische Polymere, die als Verdickungsmittel und Filmbildner fungieren.<br><strong>Nachteile:</strong> Hautreizungen, nicht biologisch abbaubar, umweltbelastend.<br><strong>Alternative:</strong> Xanthan Gum (natürliches Verdickungsmittel aus Bakterienfermentation) oder Guarkernmehl (pflanzlicher Verdicker aus der Guarbohne)',
    'Alkylbenzolsulfonate (ABS)': 'Tenside in Reinigungsmitteln.<br><strong>Nachteile:</strong> Schlechte Abbaubarkeit, umweltschädlich, hautreizend.<br><strong>Alternative:</strong> Saponine aus Waschnüssen oder Efeu, Seifenkraut-Extrakt',
    'Allyl Stearate': '(..........)',
      
       };

        const searchInput = document.getElementById('searchInput');
        const autocompleteList = document.getElementById('autocompleteList');
        const searchResults = document.getElementById('searchResults');
        const substanceList = document.getElementById('substanceList');

        let autocompleteOptions = [];
        populateAutocompleteOptions();

        function populateAutocompleteOptions() {
    autocompleteOptions = [];

    Object.entries(substances).forEach(([name, description]) => {
        autocompleteOptions.push(name);  // Substanznamen

        // Extrahiere Nachteile, Alternativen, Kategorie und Anwendung aus den Beschreibungen
        const disadvantageMatch = description.match(/<strong>Nachteile:<\/strong>(.*?)<br>/);
        const alternativeMatch = description.match(/<strong>Alternative:<\/strong>(.*?)$/);
        const categoryMatch = description.match(/<strong>Kategorie:<\/strong>(.*?)<br>/);
        const applicationMatch = description.match(/<strong>Anwendung:<\/strong>(.*?)$/);

        if (disadvantageMatch) {
            disadvantageMatch[1].split(',').forEach(word => {
                autocompleteOptions.push(`${name}: ${word.trim()}`);
            });
        }

        if (alternativeMatch) {
            alternativeMatch[1].split(',').forEach(word => {
                autocompleteOptions.push(`${name}: ${word.trim()}`);
            });
        }

        if (categoryMatch) {
            categoryMatch[1].split(',').forEach(word => {
                autocompleteOptions.push(`${name}: ${word.trim()}`);
            });
        }

        if (applicationMatch) {
            applicationMatch[1].split(',').forEach(word => {
                autocompleteOptions.push(`${name}: ${word.trim()}`);
            });
        }
    });

    autocompleteOptions = [...new Set(autocompleteOptions)];  // Duplikate entfernen
}


        searchInput.addEventListener('input', function(e) {
            const input = e.target.value.toLowerCase();
            
            if (input.length === 0) {
                autocompleteList.style.display = 'none';
                searchResults.style.display = 'none';
                return;
            }

            const matches = autocompleteOptions.filter(option =>
                option.toLowerCase().includes(input)
            );

            if (matches.length > 0) {
                autocompleteList.innerHTML = '';
                autocompleteList.style.display = 'block';
                
                matches.forEach(match => {
                    const div = document.createElement('div');
                    div.className = 'autocomplete-item';
                    div.textContent = match;
                    div.onclick = () => selectSubstance(match.split(':')[0]);
                    autocompleteList.appendChild(div);
                });
            } else {
                autocompleteList.style.display = 'none';
            }
        });

        function selectSubstance(keyword) {
            searchInput.value = keyword;
            autocompleteList.style.display = 'none';
            
            searchResults.style.display = 'block';
            searchResults.innerHTML = '';

            let found = false;

            Object.entries(substances).forEach(([name, description]) => {
                if (name.toLowerCase().includes(keyword.toLowerCase()) || description.toLowerCase().includes(keyword.toLowerCase())) {
                    const div = document.createElement('div');
                    div.className = 'substance-item';
                    div.innerHTML = `
                        <div class="substance-name">${name}</div>
                        <div>${description}</div>
                    `;
                    searchResults.appendChild(div);
                    found = true;
                }
            });

            if (!found) {
                searchResults.innerHTML = `<p>Keine Ergebnisse gefunden für: ${keyword}</p>`;
            }
        }

        document.addEventListener('click', function(e) {
            if (!searchInput.contains(e.target) && !autocompleteList.contains(e.target)) {
                autocompleteList.style.display = 'none';
            }
        });

        displaySubstances();
        
        function displaySubstances() {
            substanceList.innerHTML = '';
            Object.entries(substances).forEach(([name, description]) => {
                const div = document.createElement('div');
                div.className = 'substance-item';
                div.innerHTML = `
                    <div class="substance-name">${name}</div>
                    <div>${description}</div>
                `;
                substanceList.appendChild(div);
            });
        }
    </script>
</body>
</html>

Ergebnis

Das Projekt Calmety zeigt, wie sich mit einfachen Mitteln in WordPress ein ansprechendes, funktionales und nutzerfreundliches Rezept-Layout umsetzen lässt. Es diente mir als Testfeld, um Designideen, Plugins und mögliche Erweiterungen auszuprobieren – eine wichtige Basis für zukünftige Webdesign-Projekte.

Meine Rolle

Texterstellung (Rezepttexte, Einleitungen, Produktbeschreibung)
Bildauswahl & Bildideen (teils eigene Fotografien, größtenteils erstellt und verfeinert mit KI-Tools sowie Bildbearbeitung in Photoshop)
Strukturierung & Design in WordPress (Elementor)
Technische Integration des Rezept-Plugins
Erste Erweiterungsideen für mehr Interaktivität

Das Projekt Calmety entstand während meiner 2-monatigen Fortbildung Webdesign mit WordPress. Parallel zur theoretischen Prüfungsvorbereitung habe ich in kurzer Zeit Name, Logo, Icons, Design und Website entwickelt. Da die Fortbildung noch läuft, ist das Projekt bisher ein Zwischenstand – die geplante Ausarbeitung, Weiterentwicklung und Optimierung folgt.