Starten Sie Ihr Design in Divi: Vorgefertigte Layouts & eigene Bibliothek optimal nutzen

Divi liefert Ihnen einen riesigen Vorsprung beim Seitenaufbau. Mit vorgefertigten Layouts (Layout Packs) und einer flexiblen Bibliothek für eigene Entwürfe sparen Sie Zeit, halten Ihr Design konsistent und arbeiten deutlich effizienter – ob für eine einzelne Website oder als Agentur mit vielen Projekten. Unten finden Sie 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. Sie laden ein Layout, ersetzen Beispielinhalte durch Ihre Texte und Medien – fertig.

• So laden Sie ein Layout: Öffnen Sie eine Seite im Divi Builder → klicken Sie auf Layout laden → wählen Sie einen Layout Pack und die gewünschte Seite (z. B. „Landing Page“ oder „Kontakt“).
• Demo-Inhalte ersetzen: Klicken Sie Module an (Text, Bild, Call-to-Action) und fügen Sie Ihre Inhalte ein. Nutzen Sie Suche & Ersetzen (Rechtsklick → „Suchen & Ersetzen“) für globale Textaustausche wie Telefonnummern oder Markenbezeichnungen.
• Responsives Finetuning: Prüfen Sie Tablet- und Mobile-Ansicht mit dem Divi Responsive-Switcher und passen Sie Schriftgrößen, Abstände und Bilddarstellungen gezielt pro Gerät an.

Eigene Layouts in der Divi-Bibliothek speichern

Alles, was Sie entwerfen, können Sie als wiederverwendbares Element sichern – vom gesamten Seitenlayout über Abschnitte/Zeilen bis zu einzelnen Modulen.

• Speichern: Fahren Sie mit der Maus über ein Element → klicken Sie auf das Bibliothek-Icon → vergeben Sie einen Namen und (optional) eine Kategorie.
• Global machen: Aktivieren Sie 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 finden Sie Ihre gespeicherten Elemente unter „Aus Bibliothek hinzufügen“.

Bibliothek strukturieren: Ordnung spart Stunden

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

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

Portabilität: Layouts exportieren & importieren

Sie möchten Bausteine zwischen Websites teilen? Nutzen Sie 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: Erstellen Sie eine „Starter-Bibliothek“ mit Ihren 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: Verwenden Sie WebP (Fotos) und SVG (Logos/Icons) für geringe Dateigrößen bei hoher Qualität. Laden Sie SVGs nur aus vertrauenswürdigen Quellen.
• Bildgrößen: Skalieren Sie Bilder auf die tatsächlich benötigte Breite. Vermeiden Sie 4000 px breite Assets für einen 1200 px-Bereich.
• Lazy Loading: Aktivieren Sie verzögertes Laden für unterhalb des Falzes liegende Medien, um Core Web Vitals zu verbessern.
• Semantik: Nutzen Sie klare Überschriftenhierarchien (eine H1 pro Seite, danach H2/H3), sprechende Linktexte und strukturierte Abschnitte.
• Wiederverwendbare CTAs: Speichern Sie konversionsstarke Call-to-Action-Sektionen als globale Elemente und platzieren Sie sie an strategischen Punkten.

Pro-Workflows: Versionierung, Rollen & Sicherheit

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

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

1. Starten Sie mit einem passenden Layout Pack (z. B. „Dienstleistungen – Landing Page“).
2. Ersetzen Sie Beispieltexte, Medien (WebP/SVG) und definieren Sie die Markenfarben in den Design-Voreinstellungen.
3. Speichern Sie Hero, CTA, Kontaktbereich als Bibliothekselemente (mit Kategorien).
4. Machen Sie Footer-Elemente global und binden Sie sie im Theme Builder ein.
5. Exportieren Sie Ihre Bibliothek als JSON – das ist Ihr wiederverwendbarer Starter-Kit.

Fehler vermeiden: typische Stolpersteine

• Duplikate in der Bibliothek: Halten Sie eine saubere Struktur (Kategorien, Namensschema), löschen Sie veraltete Varianten.
• Inkonsistente Abstände: Legen Sie 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. Speichern Sie Ihre besten Bausteine konsequent in der Divi-Bibliothek, arbeiten Sie mit Kategorien, Presets und globalen Elementen – und Sie erstellen skalierbare, performante Websites in Rekordzeit. Unterstützung gewünscht? Schreiben Sie uns an hello@mikas.at.