Wie nutze ich fertige Layout-Vorlagen auf einer Landingpage?

Entfalte das volle Potenzial deiner Spreadmind Plattform und wähle aus über 1500 fertigen Layout-Vorlagen das passende Design für deine Seite. Das muss nicht unbedingt eine Landingpage sein, sondern kann auch eine einfache Über-Mich Seite oder ein besonderer Blog-Artikel sein.

Die fertigen Layout-Vorlagen lassen sich über das Frontend ganz bequem direkt aus der Bibliothek laden.

Login Spreadmind Plattform & visuellen Builder aktivieren

Um fertige Layout-Vorlagen für eine Landingpage nutzen zu können, loggst du dich zunächst im Backend deiner Spreadmind Plattform ein. Wie das geht, erfährst du in dieser Anleitung. Nachdem du dich eingeloggt hast, wählst du die gewünschte Seite aus, die du bearbeiten möchtest und aktivierst im Frontend den visuellen Builder. Wie das geht, zeigt dir diese Anleitung. 

1. Video: Wie du eine Divi Layout Vorlage auf deiner Spreadmind Plattform nutzt

In diesem ausführlichen Video zeigt dir Anke, wie du eine Layout Vorlage auf deiner Spreadmind hinzufügen und auf deine Bedürfnisse anpassen kannst.

Anke geht darauf ein, wie du Bilder, Hintergrundbilder, Button-Links und Text-Inhalte bei einer Divi Vorlage anpassen kannst. Sie zeigt aber auch hier und da ein paar Tipps & Tricks für das Arbeiten im visuellen Builder. Denn gerade der Aufbau einer bereits vorgefertigten Layout Vorlage kann manchmal auf den ersten Blick nicht gleich zu erfassen sein. Auch zeigt sie dir gegen Ende des Videos, wie du in einem Abschnitt die bereits veröffentlichten Online Kurse darstellen kannst.

Nachfolgend findest du eine Kurz-Anleitung, wie du eine Divi Layout Vorlage hinzufügst:

2. Divi Builder-Option: Aus der Bibliothek laden

Wenn du den visuellen Builder aktiviert hast, öffnest du die Builder-Optionen per Klick auf den lila Button mit den drei horizontal angeordneten Punkten. Daraufhin klappt ein Menü auf, in dem du den linken Button mit dem Plus-Symbol auswählst.

3. Fertige Layout-Vorlage auswählen

Über den Tab “Vordefinierte Layouts” kannst du nun aus über 200 Layout-Packs (Bündel) das für dich passende Design aussuchen. Nutze dafür links die Kategorie-Funktion, suche gezielt nach einem bestimmten Layout oder scrolle dich einfach durch die Packs durch.

Hast du einen passenden Layout-Pack für dich gefunden, so klickst du einfach auf diesen und kannst nun die verschiedenen Layout-Vorlagen für die Seiten Start, Über mich, Blog, Blog-Beitrag usw. betrachten.

TIPP: Innerhalb der Vorschau im linken Bereich des Fensters kannst du durch das Design scrollen oder du klickst auf den blauen Button “View Live Demo”, um das Design in seiner vollen Pracht betrachten zu können.

Wie im oberen Bild erkennbar, stellt dir Divi ganze Layout-Pakete zur Verfügung. Meistens bestehen diese unter Anderem aus folgenden Seiten:

• About (Über mich/uns)
• Blog
• Contact (Kontakt)
• Home (Startseite)
• Landing (Landingpage, normale Unterseite)

Wenn du also beispielsweise das Layout “Landing” laden möchtest, klickst du dieses in der rechten Ansicht einfach an. Eine große Vorschau wir dir dann in der Ansicht im linken Bereich des Fensters angezeigt.

3.1 Hilfe – Ich erhalte die Fehlermeldung "Dieser Inhalt ist blockiert", was kann ich tun?

Anstelle der Divi Layout Vorlagen wird dir folgende Meldung angezeigt:

• Dieser Inhalt ist blockiert. Wenden Sie sich an den Besitzer der Website, um das Problem zu beheben.

Diese Meldung erscheint dann, wenn du beim Cookie Hinweis Banner nicht auf "Alles zulassen" geklickt hast. Da womöglich im Backend unter "DSGVO" > "Medien" die Option "Datenkontrolle" aktiviert ist, blockiert nun diese Einstellung das Laden der Divi Layout Vorlagen. 

So kannst du die Fehlermeldung beheben:

1. Schließe das Popup Fenster und speicher deine Anpassungen. Verlasse den visuellen Builder. 
2. Klicke am unteren linken Browserrand auf "Cookies", damit der Cookie Hinweis Banner wieder angezeigt wird.
3. Bestätige die Cookies über den Button "Alles zulassen".
4. Aktiviere den visuellen Builder erneut. 
5. Die Divi Layout Vorlagen sollten nun angezeigt werden.

4. Layout-Vorlage laden

Wenn du dich für ein Layout für deine Landingpage entschieden hast, kannst du dieses per Klick auf den grünen Button "Use This Layout" laden und auf deiner Seite verwenden. Dieser Vorgang kann einen Moment dauern, da auch die im Layout enthaltenen Bilder geladen werden müssen. 

Vorsicht! Du findest links unten die Funktion "Replace existing content". Wenn diese Option markiert ist, dann wird alles, was du bisher auf der Seite mit dem Divi Builder erstellt hast, automatisch gelöscht und durch das neue Layout ersetzt. Wenn du also deinen bisherigen Aufbau behalten möchtest, solltest du den Haken unbedingt entfernen.

Nachdem das neue Layout vollständig geladen und auf deine Seite übertragen wurde, kannst du dich nun ganz nach deinen Wünschen ausleben und alle Inhalte der Seite wie Texte, Bilder etc. an deine Bedürfniss anpassen. 

5. Raster Modus aktivieren

Aktiviere im visuellen Builder zusätzlich den „Raster Modus“, um zu sehen, wie das Layout mit seinen Sektionen, Zeilen und Modulen aufgebaut ist. Dazu klickst du wieder auf den lila Button mit den drei Punkten, der sich unten mittig auf deiner Seitenansicht befindet. Im sich daraufhin öffnenden Menü wählst du ganze links die drei vertikalen Punkte aus. Es öffnen sich die erweiterten Builder-Einstellungen und du kannst den "Raster Modus" zu deiner unteren Werkzeugleiste hinzufügen, indem du diesen rechts oben in der Auswahl per Klick auf das Gitter aktivierst. Die Aktivierung erkennst du anhand der dunkelgrauen Farbe. Falls der Raster Modus nicht aktiv ist, ist das Gitter ausgegraut. 

Wenn der Raster Modus aktiviert ist, siehst du das an den verschiedenen Boxen um die einzelnen Elemente des Seitenaufbaus:

Seite speichern & Visueller Builder verlassen

Ganz wichtig: Bevor du den visuellen Builder im Frontend wieder verlässt, also deaktivierst, musst du die Änderungen an der Seite speichern. Wie das geht, zeigt dir diese Anleitung.