Hauptseite
Dokumentation zu Elementor und den individuellen Templates
(Entwurf – Grundlage für gemeinsame Weiterentwicklung)
1. Einführung
Diese Dokumentation beschreibt, wie Elementor und die internen CallunaLabs-Templates eingesetzt werden. Ziel ist eine einheitliche Struktur, klare Workflows und konsistente Qualität. Sie dient als Nachschlagewerk für das Team sowie als Onboarding-Dokument für neue Kolleginnen und Kollegen.
Elementor ist unser Hauptwerkzeug für moderne, flexible und responsive Websites. Unsere eigenen Templates erweitern die Standardfunktionen um optimierte Layouts, wiederverwendbare Module und CI-konforme Komponenten.
2. Elementor – Grundlagen
2.1 Was ist Elementor?
Elementor ist ein visueller Page-Builder für WordPress. Inhalte werden per Drag-and-Drop erstellt und responsiv angepasst, ohne programmieren zu müssen.
Vorteile:
Visuelle Bearbeitung in Echtzeit
Hohe Designfreiheit
Dynamische Inhalte über Custom Fields
Schnelles Prototyping und CI-konforme Layouts
2.2 Elementor Pro – wichtige Features
Elementor Pro erweitert das System u. a. um:
Theme Builder (Header, Footer, Archive, Single, 404 …)
Forms
Loop Builder
Popup Builder
Global Styles für Farben, Typografie und Layouts
2.3 Globale Einstellungen
Unsere globalen Vorgaben definieren das Grundsystem jeder Website:
Globale Farben (CI-konform)
Globale Typografie (H1–H6, Absätze, Buttons, Meta)
Breakpoints: Desktop, Tablet, Smartphone
Standard-Templates im Theme Builder
3. Arbeitsweise mit Elementor
3.1 Seitenaufbau & Layout-System
Unsere Struktur basiert auf Containern:
Container sind Hauptelemente
Spalten nur verwenden, wenn unterschiedlich breite Bereiche nötig sind
Modularer Einsatz von Widgets (Heading, Text, Button, Image, Loop-Elemente usw.)
Responsives Verhalten wird containerweise gepflegt
Layout orientiert sich am 12-Spalten-System
Ziel: wartbare, logische und erweiterbare Seiten.
3.2 Versionierung & Workflows
Standardprozess:
Entwicklung im Staging
Dokumentation aller Änderungen im Ticket
Review durch zweiten Kollegen
Deployment auf Live
Visuelle Endkontrolle
4. Individuelle Templates der CallunaLabs
4.1 Übersicht unserer Templates
Unsere Templates bilden die Basis jedes Webprojekts:
Header
Footer
Landingpages
Blog (Loop, Single, Archive)
Content-Blöcke
Eigene Widgets/Logiken
4.2 Header-Template
Der Header ist modular und flexibel:
Logo links
Navigation rechts, mobil Offcanvas
Optionaler CTA-Button
Sticky Header
Dynamische Varianten (z. B. andere Farben auf Landingpages)
Struktur:
Optionaler oberer Info-Bereich
Mehrspaltige Navigation
Kontakt/Adresse
Social Icons
Rechtstexte + dynamisches Copyright
4.4 Landingpage-Template
Elemente:
Großes Hero-Modul (Headline, Subline, CTA)
Flexible Abschnitte (Vorteile, Features, Testimonials, CTAs)
Conversion-orientiertes Layout
Minimaler Header, reduzierter Footer
4.5 Blog-Templates
Umfasst:
Loop-Template (Artikelübersicht)
Single-Template (Artikelansicht)
Archive (Kategorie, Tag, Autor)
ACF-Felder für dynamische Inhalte
SEO-optimiert
4.6 Custom Widgets & Erweiterungen
Eigene Entwicklungen bei Bedarf:
Dynamische Listen
Custom Cards
Erweiterte Slider
Strukturierte Daten (Schema.org)
Alle Custom-Elemente sind dokumentiert und versionsgeführt.
5. Best Practices
5.1 Sauberes Arbeiten
Unsere Grundprinzipien:
Zuerst globale Styles verwenden
Einheitliche Abstandslogik (keine zufälligen Werte)
Sinnvolle Klassen, wenn Custom CSS nötig ist
Keine Inline-Styles
Wiederverwendbare Templates statt Kopien
5.2 Performance
Performance sichern:
Optimierte Bilder
Lazy Loading
Flacher DOM (wenig Verschachtelung)
Keine unnötigen Widgets
Server-Caching aktiv
6. Pflege & Weiterentwicklung
6.1 Updates
Ablauf:
Backup
Updates im Staging testen
Visuellen Regressionstest
Deployment
6.2 Erweiterungen & neue Templates
Neue Templates werden:
als Entwurf angelegt
dokumentiert
getestet
erst nach Review veröffentlicht
So bleibt das System stabil und erweiterbar.