Hauptseite: Unterschied zwischen den Versionen

Aus Paqato Doku
Zur Navigation springen Zur Suche springen
← Zum vorherigen Versionsunterschied
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
Zeile 1: Zeile 1:
= Dokumentation zu Elementor und den individuellen Templates =
= Dokumentation zu Elementor und den individuellen Templates =
‘’(Entwurf – bitte ergänzen und strukturieren wir gemeinsam.)’’
 
''(Entwurf – Grundlage für gemeinsame Weiterentwicklung)''


== 1. Einführung ==
== 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.
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.


== 2. Elementor – Grundlagen ==. Elementor – Grundlagen ==
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? ===
=== 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:
Elementor ist ein visueller Page-Builder für WordPress. Inhalte werden per Drag-and-Drop erstellt und responsiv angepasst, ohne programmieren zu müssen.
• Visuelle Bearbeitung in Echtzeit
 
• Vollständige Designfreiheit ohne Coding
Vorteile:
• Integration dynamischer Inhalte über Custom Fields
 
• Schnelles Prototyping und präzise Umsetzung von CI-Designs
Visuelle Bearbeitung in Echtzeit
 
Hohe Designfreiheit
 
Dynamische Inhalte über Custom Fields
 
Schnelles Prototyping und CI-konforme Layouts


=== 2.2 Elementor Pro – wichtige Features ===
=== 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.
Elementor Pro erweitert das System u. a. um:
• Forms – Kontakt- und Lead-Formulare inklusive Integrationen.
 
• Loop Builder – Eigene Loop-Templates für Blog, Archive und dynamische Listen.
Theme Builder (Header, Footer, Archive, Single, 404 …)
• Popup Builder – Erstellung von Popups für Marketing, Hinweise oder Interaktionen.
 
• Global Styles – Typografie-, Farb- und Layouteinstellungen an zentraler Stelle.
Forms
 
Loop Builder
 
Popup Builder
 
Global Styles für Farben, Typografie und Layouts


=== 2.3 Globale Einstellungen ===
=== 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 ===
Unsere globalen Vorgaben definieren das Grundsystem jeder Website:
• Wichtige Widgets
• Theme Builder
• Forms
• Loop Builder


=== 2.3 Globale Einstellungen ===
Globale Farben (CI-konform)
• Globale Farben
 
• Globale Typografie
Globale Typografie (H1–H6, Absätze, Buttons, Meta)
• Breakpoints
 
• Einstellungen im Theme Builder
Breakpoints: Desktop, Tablet, Smartphone
 
Standard-Templates im Theme Builder


== 3. Arbeitsweise mit Elementor ==
== 3. Arbeitsweise mit Elementor ==
=== 3.1 Seitenaufbau ===
=== 3.1 Seitenaufbau & Layout-System ===
Elementor arbeitet containerbasiert. Unsere Struktur folgt festen Regeln:
 
• Container als Hauptelemente statt klassischer Sektionen
Unsere Struktur basiert auf Containern:
• Spalten nur, wenn unterschiedliche Breiten notwendig sind
 
• Widgets werden modular eingesetzt (Heading, Text, Button, Image, Loop-Elemente etc.)
Container sind Hauptelemente
• Responsive Verhalten wird pro Container gepflegt (Padding, Margin, Schriftgrößen)
 
• Layout-Gitter folgt einem 12-Spalten-System zur besseren Reproduzierbarkeit
Spalten nur verwenden, wenn unterschiedlich breite Bereiche nötig sind


Unser Ziel: klare, wartbare, logisch aufgebaute Seiten, die sich flexibel erweitern lassen.
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 ===
=== 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.
Standardprozess:
 
Entwicklung im Staging
 
Dokumentation aller Änderungen im Ticket


== 4. Individuelle Templates der CallunaLabs == Versionierung & Workflows ===
Review durch zweiten Kollegen
• Änderungen dokumentieren
 
• Entwicklungs- und Live-Umgebung
Deployment auf Live
 
Visuelle Endkontrolle


== 4. Individuelle Templates der CallunaLabs ==
== 4. Individuelle Templates der CallunaLabs ==
=== 4.1 Übersicht unserer Templates ===
=== 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:
Unsere Templates bilden die Basis jedes Webprojekts:
• Header-Template
 
• Footer-Template
Header
• Landingpage-Template
 
• Blog-Templates (Loop, Single, Archive)
Footer
• Content-Blöcke und modulare Abschnitte
 
• Custom Widgets und Logiken
Landingpages
 
Blog (Loop, Single, Archive)
 
Content-Blöcke
 
Eigene Widgets/Logiken


=== 4.2 Header-Template ===
=== 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.
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 ===
=== 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.
Struktur:
 
Optionaler oberer Info-Bereich
 
Mehrspaltige Navigation
 
Kontakt/Adresse
 
Social Icons
 
Rechtstexte + dynamisches Copyright


=== 4.4 Landingpage-Template ===
=== 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.
Elemente:
 
Großes Hero-Modul (Headline, Subline, CTA)


=== 4.5 Blog-Template ===
Flexible Abschnitte (Vorteile, Features, Testimonials, CTAs)
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.
Conversion-orientiertes Layout


=== 4.6 Custom Widgets oder Erweiterungen ===
Minimaler Header, reduzierter Footer
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.
=== 4.5 Blog-Templates ===


== 5. Best Practices == Header-Template ===
Umfasst:
• Besonderheiten
• Struktur
• Einsatzbereiche


=== 4.3 Footer-Template ===
Loop-Template (Artikelübersicht)
• Besonderheiten
 
• Widgets
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


=== 4.4 Landingpage-Template ===
Erweiterte Slider
• Hero-Bereich
• Layout-System
• Wiederverwendbare Abschnitte


=== 4.5 Blog-Template ===
Strukturierte Daten (Schema.org)
• Loop
• Single
• Archive
• Dynamische Felder


=== 4.6 Custom Widgets oder Erweiterungen ===
Alle Custom-Elemente sind dokumentiert und versionsgeführt.
• Eigene Widgets
• Snippets
• Erweiterte Logiken


== 5. Best Practices ==
== 5. Best Practices ==
=== 5.1 Sauberes Arbeiten ===
=== 5.1 Sauberes Arbeiten ===
Unsere Grundregeln für konsistente Elementor-Arbeit:
 
• Globale Styles zuerst verwenden, bevor lokale Styles gesetzt werden
Unsere Grundprinzipien:
• Einheitliche Abstände: Padding/Margin nach System, nicht zufällig
 
• Klare Klassen-Namen, wenn Custom CSS genutzt wird
Zuerst globale Styles verwenden
• Keine Inline-Styles
 
• Wiederverwendbare Templates statt duplizierte Inhalte
Einheitliche Abstandslogik (keine zufälligen Werte)
 
Sinnvolle Klassen, wenn Custom CSS nötig ist
 
Keine Inline-Styles
 
Wiederverwendbare Templates statt Kopien


=== 5.2 Performance ===
=== 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 ===
Performance sichern:
• Lazy Loading
 
• Optimierte Medien
Optimierte Bilder
• Strukturierter DOM
 
Lazy Loading
 
Flacher DOM (wenig Verschachtelung)
 
Keine unnötigen Widgets
 
Server-Caching aktiv


== 6. Pflege & Weiterentwicklung ==
== 6. Pflege & Weiterentwicklung ==
=== 6.1 Updates ===
=== 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.
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


=== 6.2 Erweiterungen ===
So bleibt das System stabil und erweiterbar.
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.

Aktuelle Version vom 18. November 2025, 14:10 Uhr

Dokumentation zu Elementor und den individuellen Templates[Bearbeiten]

(Entwurf – Grundlage für gemeinsame Weiterentwicklung)

1. Einführung[Bearbeiten]

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[Bearbeiten]

2.1 Was ist Elementor?[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

3.1 Seitenaufbau & Layout-System[Bearbeiten]

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[Bearbeiten]

Standardprozess:

Entwicklung im Staging

Dokumentation aller Änderungen im Ticket

Review durch zweiten Kollegen

Deployment auf Live

Visuelle Endkontrolle

4. Individuelle Templates der CallunaLabs[Bearbeiten]

4.1 Übersicht unserer Templates[Bearbeiten]

Unsere Templates bilden die Basis jedes Webprojekts:

Header

Footer

Landingpages

Blog (Loop, Single, Archive)

Content-Blöcke

Eigene Widgets/Logiken

4.2 Header-Template[Bearbeiten]

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[Bearbeiten]

Struktur:

Optionaler oberer Info-Bereich

Mehrspaltige Navigation

Kontakt/Adresse

Social Icons

Rechtstexte + dynamisches Copyright

4.4 Landingpage-Template[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

5.1 Sauberes Arbeiten[Bearbeiten]

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[Bearbeiten]

Performance sichern:

Optimierte Bilder

Lazy Loading

Flacher DOM (wenig Verschachtelung)

Keine unnötigen Widgets

Server-Caching aktiv

6. Pflege & Weiterentwicklung[Bearbeiten]

6.1 Updates[Bearbeiten]

Ablauf:

Backup

Updates im Staging testen

Visuellen Regressionstest

Deployment

6.2 Erweiterungen & neue Templates[Bearbeiten]

Neue Templates werden:

als Entwurf angelegt

dokumentiert

getestet

erst nach Review veröffentlicht

So bleibt das System stabil und erweiterbar.

Abgerufen von „https://paqato-doku.calluna.ai/index.php?title=Hauptseite&oldid=4“