Starte dein Design mit vorgefertigten Layouts

Starte dein Design in Divi: Vorgefertigte Layouts & eigene Bibliothek optimal nutzen

Divi liefert dir einen riesigen Vorsprung beim Seitenaufbau. Mit vorgefertigten Layouts (Layout Packs) und einer flexiblen Bibliothek für eigene Entwürfe sparst du Zeit, hältst dein Design konsistent und arbeitest deutlich effizienter – ob für eine einzelne Website oder als Agentur mit vielen Projekten. Unten findest du eine praxisnahe Schritt-für-Schritt-Anleitung, Tipps für Performance & SEO sowie clevere Workflows für Wiederverwendung und Teamarbeit.

Vorgefertigte Layouts: in Minuten zur fertigen Seite

Divi bringt zahlreiche vorkonfigurierte Layouts für typische Seitentypen wie Über uns, Kontakt, Blog oder Portfolio mit. Diese Layouts kombinieren professionelle Typografie, Abstände und Module zu kompletten Seiten. Du lädst ein Layout, ersetzt Beispielinhalte durch deine Texte und Medien – fertig.

• So lädst du ein Layout: Öffne eine Seite im Divi Builder → klicke auf Layout laden → wähl einen Layout Pack und die gewünschte Seite (z. B. „Landing Page“ oder „Kontakt“).
• Demo-Inhalte ersetzen: Klick Module an (Text, Bild, Call-to-Action) und füg deine Inhalte ein. Nutz Suche & Ersetzen (Rechtsklick → „Suchen & Ersetzen“) für globale Textaustausche wie Telefonnummern oder Markenbezeichnungen.
• Responsives Finetuning: Prüf Tablet- und Mobile-Ansicht mit dem Divi Responsive-Switcher und pass Schriftgrößen, Abstände und Bilddarstellungen gezielt pro Gerät an.

Eigene Layouts in der Divi-Bibliothek speichern

Alles, was du entwirfst, sicherst du als wiederverwendbares Element – vom gesamten Seitenlayout über Abschnitte/Zeilen bis zu einzelnen Modulen.

• Speichern: Fahr mit der Maus über ein Element → klicke auf das Bibliothek-Icon → vergib einen Namen und (optional) eine Kategorie.
• Global machen: Aktiviere beim Speichern „Als globales Element“, wenn künftige Änderungen überall synchron wirken sollen (z. B. für Fußzeilen-Blöcke oder wiederkehrende CTA-Module).
• Aus Bibliothek einfügen: Beim Hinzufügen neuer Abschnitte/Zeilen/Module findest du deine gespeicherten Elemente unter „Aus Bibliothek hinzufügen“.

Bibliothek strukturieren: Ordnung spart Stunden

Mit Kategorien, klaren Benennungen und Presets wächst deine Bibliothek sinnvoll mit:

• Kategorien: Leg z. B. „Hero“, „CTA“, „Kontakt“, „FAQs“, „Produkt“ an. So findest du Bausteine in Sekunden.
• Namenskonvention: „CTA/Primär/Rot – Kontakt“ ist aussagekräftiger als „CTA 3“.
• Modul-Presets: Definier globale Presets (Standard-Schaltflächenstil, Standard-Abstände etc.), damit neue Module sofort im markenkonformen Stil erscheinen.

Portabilität: Layouts exportieren & importieren

Du möchtest Bausteine zwischen Websites teilen? Nutz die Divi-Portabilität.

• Export: Seiten öffnen → Portabilität (Doppelpfeil-Icon) → Export wählen → JSON-Datei sichern.
• Import: Auf Zielseite oder in die Bibliothek gehen → Portabilität → Import → JSON wählen → importieren.
• Tipp für Agenturen: Erstell eine „Starter-Bibliothek“ mit deinen Best-Practice-Abschnitten (Hero, Trust-Badges, USP-Leisten, Preis-Tabellen). Das beschleunigt jeden Projektstart.

Theme Builder vs. Seitenlayouts: Was gehört wohin?

• Theme Builder: Globale Templates für Header, Footer, Blog-Archiv, Beitragsseiten, WooCommerce-Templates. Einmal definieren, siteweit konsistent nutzen.
• Seitenlayouts: Content-Seiten wie Start, Leistungen, Über uns, Landing-Pages – individuell kombinierbar aus Bibliothekselementen.

Performance & SEO: Medien & Struktur optimieren

• Bildformate: Verwende WebP (Fotos) und SVG (Logos/Icons) für geringe Dateigrößen bei hoher Qualität. Lade SVGs nur aus vertrauenswürdigen Quellen.
• Bildgrößen: Skalier Bilder auf die tatsächlich benötigte Breite. Vermeide 4000 px breite Assets für einen 1200 px-Bereich.
• Lazy Loading: Aktiviere verzögertes Laden für unterhalb des Falzes liegende Medien, um Core Web Vitals zu verbessern.
• Semantik: Nutz klare Überschriftenhierarchien (eine H1 pro Seite, danach H2/H3), sprechende Linktexte und strukturierte Abschnitte.
• Wiederverwendbare CTAs: Speicher konversionsstarke Call-to-Action-Sektionen als globale Elemente und platzier sie an strategischen Punkten.

Pro-Workflows: Versionierung, Rollen & Sicherheit

• Versionierung: Divi speichert Revisionen. Bei Fehlern rollst du Änderungen pro Modul/Raster zurück (Uhr-Icon in den Moduleinstellungen).
• Rollen-Editor: Begrenz Rechte für Redakteure (z. B. nur Texte tauschen, keine Layoutänderungen). So bleibt das Design konsistent.
• Global-Elemente mit Bedacht: Nutz globale Elemente für identische wiederkehrende Blöcke. Für leicht variierende Varianten speicherst du Kopien als nicht-global.

Schritt-für-Schritt: Eigene Bibliothek in 10 Minuten

1. Starte mit einem passenden Layout Pack (z. B. „Dienstleistungen – Landing Page“).
2. Ersetz Beispieltexte, Medien (WebP/SVG) und definier die Markenfarben in den Design-Voreinstellungen.
3. Speicher Hero, CTA, Kontaktbereich als Bibliothekselemente (mit Kategorien).
4. Mach Footer-Elemente global und bind sie im Theme Builder ein.
5. Exportier deine Bibliothek als JSON – das ist dein wiederverwendbarer Starter-Kit.

Fehler vermeiden: typische Stolpersteine

• Duplikate in der Bibliothek: Halt eine saubere Struktur (Kategorien, Namensschema), lösch veraltete Varianten.
• Inkonsistente Abstände: Leg Modul-Presets für Abstände/Typografie fest, statt jedes Element separat zu stylen.
• Unskalierte Medien: Riesige Bilder verlangsamen Seiten. Reduzieren, komprimieren, WebP nutzen.

Fazit: Mit vorgefertigten Layouts sind erste Seiten blitzschnell umgesetzt. Speicher deine besten Bausteine konsequent in der Divi-Bibliothek, arbeite mit Kategorien, Presets und globalen Elementen – und du erstellst skalierbare, performante Websites in Rekordzeit. Unterstützung gewünscht? Schreib uns an hello@mikas.at.