Hauptseite

Dokumentation zu Elementor und den individuellen Templates

‘’(Entwurf – bitte ergänzen und strukturieren wir gemeinsam.)’’

1. Einführung

Diese Dokumentation beschreibt umfassend, wie Elementor bei uns eingesetzt wird – sowohl in der täglichen Arbeit als auch innerhalb unserer individuellen CallunaLabs-Templates. Ziel ist es, klare Standards, wiederholbare Workflows und verbindliche Strukturen zu schaffen, die eine konsistente Qualität gewährleisten. Die Dokumentation dient als Nachschlagewerk für bestehende Teammitglieder und als Onboarding-Grundlage für neue Kolleginnen und Kollegen.

Elementor ist unser Hauptwerkzeug zur Erstellung moderner, flexibler und responsiver Websites. Unsere eigenen Templates und Komponenten bauen auf dem Standard-Elementor-Ökosystem auf, erweitern es jedoch um optimierte Layoutsysteme, wiederverwendbare Module und CI-konforme Strukturen.

2. Elementor – Grundlagen ==. Elementor – Grundlagen

2.1 Was ist Elementor?

Elementor ist ein visueller Page-Builder für WordPress, der es ermöglicht, Seiten, Templates und dynamische Layouts ohne Programmierung zu erstellen. Durch Drag-and-Drop können Inhalte strukturiert, gestaltet und responsiv angepasst werden. Elementor ersetzt die klassische WordPress-Theme-Logik weitgehend und bietet volle Kontrolle über den gesamten Aufbau einer Website.

Hauptvorteile: • Visuelle Bearbeitung in Echtzeit • Vollständige Designfreiheit ohne Coding • Integration dynamischer Inhalte über Custom Fields • Schnelles Prototyping und präzise Umsetzung von CI-Designs

2.2 Elementor Pro – wichtige Features

Elementor Pro erweitert die Basisversion um professionelle Tools: • Theme Builder – Erstellung globaler Templates für Header, Footer, Archive, Single-Posts, 404-Seiten uvm. • Forms – Kontakt- und Lead-Formulare inklusive Integrationen. • Loop Builder – Eigene Loop-Templates für Blog, Archive und dynamische Listen. • Popup Builder – Erstellung von Popups für Marketing, Hinweise oder Interaktionen. • Global Styles – Typografie-, Farb- und Layouteinstellungen an zentraler Stelle.

2.3 Globale Einstellungen

Unsere globalen Einstellungen definieren, wie jede Website strukturiert ist: • Globale Farben – Primärfarbe, Sekundärfarbe, Akzent- und Textfarben passend zur CI • Globale Typografie – H1–H6, Absätze, Buttons und Meta-Texte einheitlich definiert • Breakpoints – Desktop, Tablet, Smartphone; zusätzliche Breakpoints bei Bedarf • Theme Builder Vorgaben – Standardtemplates, die in allen neuen Projekten genutzt werden

3. Arbeitsweise mit Elementor == Elementor Pro – wichtige Features =

• Wichtige Widgets • Theme Builder • Forms • Loop Builder

2.3 Globale Einstellungen

• Globale Farben • Globale Typografie • Breakpoints • Einstellungen im Theme Builder

3. Arbeitsweise mit Elementor

3.1 Seitenaufbau

Elementor arbeitet containerbasiert. Unsere Struktur folgt festen Regeln: • Container als Hauptelemente statt klassischer Sektionen • Spalten nur, wenn unterschiedliche Breiten notwendig sind • Widgets werden modular eingesetzt (Heading, Text, Button, Image, Loop-Elemente etc.) • Responsive Verhalten wird pro Container gepflegt (Padding, Margin, Schriftgrößen) • Layout-Gitter folgt einem 12-Spalten-System zur besseren Reproduzierbarkeit

Unser Ziel: klare, wartbare, logisch aufgebaute Seiten, die sich flexibel erweitern lassen.

3.2 Versionierung & Workflows

Wir nutzen einen festen Workflow für alle Elementor-Projekte: 1. Entwicklung im Staging – Änderungen werden niemals direkt live erstellt. 2. Dokumentation der Änderungen im Ticket-System. 3. Abnahme durch einen zweiten Kollegen. 4. Deployment auf Live. 5. Visuelle Prüfung auf allen Endgeräten.

Dadurch stellen wir sicher, dass jede Änderung transparent, reproduzierbar und qualitätsgesichert ist.

4. Individuelle Templates der CallunaLabs == Versionierung & Workflows =

• Änderungen dokumentieren • Entwicklungs- und Live-Umgebung

4. Individuelle Templates der CallunaLabs

4.1 Übersicht unserer Templates

Unsere internen Templates bilden die Grundlage aller Website-Projekte. Sie stellen sicher, dass wir effizient, konsistent und CI-konform arbeiten.

Zu unseren Kern-Templates gehören: • Header-Template • Footer-Template • Landingpage-Template • Blog-Templates (Loop, Single, Archive) • Content-Blöcke und modulare Abschnitte • Custom Widgets und Logiken

4.2 Header-Template

Unser Header ist modular aufgebaut: • Logo-Bereich links • Menübereich rechts, mobil als Offcanvas • CTA-Button (optional) • Sticky Header für bessere UX • Dynamische Anzeige (z. B. farbliche Änderungen für Landingpages)

Der Header ist so konzipiert, dass er auf allen Geräten stabil funktioniert und flexibel erweitert werden kann.

4.3 Footer-Template

Unser Footer besteht aus mehreren Bereichen: • Obere Infobox (optional) • Mehrspaltiges Layout für Menüs • Kontaktbereich • Social-Media-Links • Rechtstexte und dynamisches Copyright

Alle Elemente sind global einheitlich gestaltet und leicht anpassbar.

4.4 Landingpage-Template

Das Landingpage-Template basiert auf: • Großem Hero-Bereich mit Headline, Subline und CTA • Flexiblen Content-Modulen (Vorteile, Features, Testimonials, CTAs) • Klarem Conversion-Fokus • Minimalem Header, reduziertem Footer

Strukturierte Abschnitte ermöglichen schnelle Erstellung performanter Landingpages.

4.5 Blog-Template

Unser Blogsystem umfasst: • Loop-Template – Darstellung mehrerer Artikel inkl. Titel, Meta, Bild • Single-Template – Artikelansicht mit klarer Typografie • Archive – Kategorien, Schlagwörter, Autorenseiten • Dynamische Felder über ACF

Alle Blogbereiche sind SEO-optimiert und visuell konsistent.

4.6 Custom Widgets oder Erweiterungen

Wir setzen eigene Widgets ein, wenn Standard-Widgets nicht ausreichen. Beispiele: • Dynamische Listen • Erweiterte Slider • Custom Cards • Strukturierte Daten (Schema.org)

Eigenentwicklungen sind dokumentiert und versionsgeführt.

5. Best Practices == Header-Template =

• Besonderheiten • Struktur • Einsatzbereiche

4.3 Footer-Template

• Besonderheiten • Widgets

4.4 Landingpage-Template

• Hero-Bereich • Layout-System • Wiederverwendbare Abschnitte

4.5 Blog-Template

• Loop • Single • Archive • Dynamische Felder

4.6 Custom Widgets oder Erweiterungen

• Eigene Widgets • Snippets • Erweiterte Logiken

5. Best Practices

5.1 Sauberes Arbeiten

Unsere Grundregeln für konsistente Elementor-Arbeit: • Globale Styles zuerst verwenden, bevor lokale Styles gesetzt werden • Einheitliche Abstände: Padding/Margin nach System, nicht zufällig • Klare Klassen-Namen, wenn Custom CSS genutzt wird • Keine Inline-Styles • Wiederverwendbare Templates statt duplizierte Inhalte

5.2 Performance

Performance ist entscheidend – auch mit Elementor: • Bilder immer optimiert hochladen • Lazy Loading konsequent aktiv • DOM flach halten (keine verschachtelten Container) • Keine unnötigen Widgets • Caching auf Hosting-Ebene

6. Pflege & Weiterentwicklung == Performance =

• Lazy Loading • Optimierte Medien • Strukturierter DOM

6. Pflege & Weiterentwicklung

6.1 Updates

Updates werden ausschließlich strukturiert durchgeführt: 1. Backup erstellen 2. Updates zuerst im Staging testen 3. Visuellen Regressionstest durchführen 4. Live-Deployment

Damit vermeiden wir Layoutbrüche und Plugin-Konflikte.

6.2 Erweiterungen

Neue Templates werden zunächst als Entwurf erstellt und dokumentiert. Erst nach Review und Test werden sie als offizielles Template übernommen. Dadurch bleibt unser System stabil, konsistent und leicht erweiterbar.