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)

4.3 Footer-Template

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.