So erstellen Sie mit Divi . eine Geschenklistenseite für Ihre Hochzeit

Veröffentlicht: 2017-05-18

Dieser Beitrag ist Teil 3 von 5 in unserer Miniserie Wie man mit Divi eine elegante Hochzeitswebsite erstellt. In dieser Serie führen wir Sie durch die wichtigsten Schritte beim Erstellen einer Hochzeitswebsite für sich selbst oder einen Kunden mit Divi.

In den ersten beiden Teilen unserer Miniserie haben wir Ihnen gezeigt, wie Sie mit Divi eine elegante Hochzeitsankündigungsseite und eine Galerieseite erstellen. Dieser dritte Teil widmet sich der Erstellung einer Geschenklistenseite auf Ihrer Hochzeitswebsite.

Wir zeigen Ihnen Schritt für Schritt, wie Sie mit dem Visual Builder von Divi folgendes Layout erstellen können:

Das Layout besteht aus fünf Abschnitten und jeder von ihnen trägt seinen eigenen Wert zum Ganzen bei. Tauchen wir in den ersten ein!

Die Heldenabteilung

Die Heldensektion ist wirklich simpel, aber genau das suchen wir in dieser Miniserie; Einfachheit und Eleganz. Wir verwenden dieselbe Farbpalette wie in den beiden vorherigen Hochzeits-Tutorials. Wenn Sie also weitermachen, können Sie diese Seite ganz einfach zu der Hochzeits-Website hinzufügen, die Sie bereits erstellt haben.

Loslegen

Beginnen Sie damit, Ihrer WordPress-Website eine neue Seite hinzuzufügen und ihr einen Namen zu geben. Aktivieren Sie danach den Divi Builder und wechseln Sie sofort zum Visual Builder.

Fügen Sie der gerade erstellten Seite einen neuen Abschnitt hinzu. Öffnen Sie die Abschnittseinstellungen und ändern Sie das Hintergrundbild in der Unterkategorie Hintergrund der Registerkarte Inhalt. In diesem Beispiel haben wir ein symmetrisches Bild für den Hintergrund des Abschnitts verwendet, um diesen zusätzlichen Effekt zu erzielen.

Fahren Sie fort, indem Sie dem Abschnitt eine Zeile mit voller Breite hinzufügen. Öffnen Sie die Einstellungen der Zeile und ändern Sie die Hintergrundfarbe in 'rgba(122,122,122,0.56)' in der Unterkategorie Hintergrund der Registerkarte Inhalt.

Gehen Sie weiter zur Registerkarte Design. Öffnen Sie die Unterkategorie Sizing, machen Sie die Zeile auf volle Breite und geben Sie '1' für Bundstegbreite ein.

Scrollen Sie nach unten und öffnen Sie die Unterkategorie Abstand. Wir müssen '200px' zum oberen und unteren Abstand für Desktops und '150px' zum oberen und unteren Abstand für Tablets und Telefone hinzufügen.

Fügen Sie in derselben Unterkategorie "-50px" am oberen und unteren Rand für Tablets und Telefone hinzu.

Erstes Textmodul

Fahren Sie fort und fügen Sie der Zeile ein neues Textmodul hinzu. Fügen Sie Ihren Text in der Unterkategorie Text der Registerkarte Inhalt hinzu. Wechseln Sie danach zur Registerkarte Design und nehmen Sie die folgenden Änderungen an der Unterkategorie Text vor:

  • Textausrichtung: Mitte
  • Textschriftart: Mandarine
  • Textschriftgröße: 100 (Desktop & Tablet), 68 (Telefon)
  • Textfarbe: #fffaf6
  • Textzeilenhöhe: 1.5em

Zweites Textmodul

Erstellen Sie direkt darunter ein weiteres Textmodul. Gehen Sie zur Registerkarte Inhalt und geben Sie Ihren Text in die Unterkategorie Text ein. Wechseln Sie als Nächstes zur Registerkarte Design und nehmen Sie die folgenden Änderungen an der Unterkategorie Text vor:

  • Textausrichtung: Mitte
  • Textschriftart: Raleway Light
  • Textschriftart: Fett
  • Schriftgröße des Textes: 20px (Desktop), 14px (Tablet & Telefon)
  • Textfarbe: #fffaf6
  • Textzeilenhöhe: 1.5em

Dein Header sollte bisher so aussehen:

Der Einführungsbereich

In diesem Layout möchten wir den Menschen die Wahl lassen. Sie können wählen, ob sie etwas für die Braut, den Bräutigam oder für beide kaufen möchten.

Erstellen Sie zunächst einen neuen Abschnitt und fügen Sie eine Zeile mit einer Spalte hinzu. Ändern Sie die Hintergrundfarbe in '#fffaf6' in der Unterkategorie Hintergrund der Registerkarte Inhalt. Öffnen Sie danach die Zeileneinstellungen und gehen Sie zur Registerkarte Design. Fügen Sie '5%' zum oberen und unteren Rand nur für Desktops hinzu.

Abschnittsüberschrift

In dieser Reihe. Das einzige, was wir hinzufügen müssen, ist ein Textmodul. Geben Sie den Titel ein, der in der Unterkategorie Text der Registerkarte Inhalt angezeigt werden soll. Wechseln Sie zur Registerkarte Design und nehmen Sie die folgenden Änderungen an der Unterkategorie Text vor:

  • Textausrichtung: Mitte
  • Textschriftart: Mandarine
  • Textschriftart: Fett
  • Schriftgröße des Textes: 60px (Desktop), 50px (Tablet & Telefon)
  • Textfarbe: #9b857b
  • Textzeilenhöhe: 1.7em

Öffnen Sie nun die Unterkategorie Größenanpassung und ändern Sie die maximale Breite in '500px'.

Fahren Sie fort, indem Sie die Unterkategorie Abstand auf derselben Registerkarte öffnen und '3%' zum oberen und unteren Abstand hinzufügen.

Wechseln Sie als Nächstes zur Registerkarte Erweitert und fügen Sie den folgenden Code zum Hauptelement in der Unterkategorie Benutzerdefiniertes CSS hinzu: 

background: #fae4de;
-webkit-clip-path: polygon(13% 0, 88% 0, 100% 100%, 0% 100%);
clip-path: polygon(13% 0, 88% 0, 100% 100%, 0% 100%);
border-top: 1px solid #9b857b;
border-bottom: 1px solid #9b857b;

Fügen Sie nun dem gleichen Abschnitt eine weitere Zeile mit einer Spalte hinzu. An den Einstellungen dieser Zeile müssen wir nichts ändern.

Bildmodul

Fügen Sie der Zeile ein Bildmodul hinzu und laden Sie das Bild in die Unterkategorie Bild der Registerkarte Inhalt hoch. Gehen Sie dann zur Registerkarte Design, entfernen Sie den Platz unter dem Bild, wählen Sie "Center" für die Bildausrichtung und zentrieren Sie das Bild immer auf dem Handy.

Wechseln Sie als Nächstes zur Registerkarte Erweitert und fügen Sie den folgenden Code zum Feld Hauptelement in der Unterkategorie Benutzerdefiniertes CSS hinzu: 

height: 100px;
width: 150px;

Erstes Textmodul

Fügen Sie unter dem Bildmodul das erste Textmodul des Abschnitts hinzu. Geben Sie den Text in das Textfeld in der Unterkategorie Text der Registerkarte Inhalt ein und wechseln Sie zur Registerkarte Design. Nehmen Sie in der Unterkategorie Text die folgenden Anpassungen vor:

  • Textausrichtung: Mitte
  • Textschriftart: Raleway Light
  • Schriftgröße des Textes: 24px
  • Textfarbe: #9b857b
  • Textzeilenhöhe: 1.5em

Scrollen Sie auf derselben Registerkarte nach unten und fügen Sie '30px' am oberen Rand in der Unterkategorie "Abstand" hinzu.

Gehen Sie zu guter Letzt zur Registerkarte Erweitert desselben Textmoduls und fügen Sie den folgenden Code zum Hauptelement in der Unterkategorie Benutzerdefiniertes CSS hinzu: 

font-weight:400;

Zweites Textmodul

Fügen Sie dem Abschnitt ein weiteres Textmodul hinzu und geben Sie den Text in das Textfeld in der Unterkategorie Text der Registerkarte Inhalt ein. Wechseln Sie dann zur Registerkarte Design und nehmen Sie die folgenden Änderungen vor:

  • Textausrichtung: Mitte
  • Textschriftart: Raleway Light
  • Textschriftart: Fett
  • Schriftgröße des Textes: 16px
  • Textfarbe: #9b857b
  • Textzeilenhöhe: 1.5em

Scrollen Sie auf derselben Registerkarte nach unten und ändern Sie die maximale Breite in "300px" in der Unterkategorie "Größe". Ändern Sie den oberen Rand auch in der Unterkategorie Abstand auf '5%'.

Wechseln Sie als Nächstes zur Registerkarte Erweitert und fügen Sie den folgenden Code zum Hauptelement in der Unterkategorie Benutzerdefiniertes CSS hinzu: 

font-weight: 300;

Bildmodul und Textmodule klonen

Fügen Sie dem gleichen Abschnitt eine weitere Zeile hinzu, diesmal jedoch mit drei Spalten.

Die erste Spalte und die letzte Spalte der Reihe benötigen die gleichen Module wie die vorherige Reihe; ein Bildmodul und zwei Textmodule. Diese Module müssen die gleichen Einstellungen haben wie die, die wir zuvor erstellt haben, also müssen wir sie nur klonen. Nachdem Sie jedes Modul zweimal geklont haben, fügen Sie es in die linke und rechte Spalte der neuen Zeile ein und ändern Sie das Bild und den Text.

Wechseln Sie als Nächstes zur Registerkarte Design der Zeile und fügen Sie '5%' zum unteren Rand in der Unterkategorie Abstand hinzu.

Bildmodul der Braut

Fügen Sie nun der zweiten Spalte der Zeile ein Bildmodul hinzu. Laden Sie das Bild hoch und gehen Sie zur Registerkarte Design. Stellen Sie die Bildausrichtung auf „Links“ und aktivieren Sie die Option „Bild immer auf dem Handy zentrieren“ in der Unterkategorie „Ausrichtung“.

Scrollen Sie auf der gleichen Registerkarte nach unten und fügen Sie "5%" zum oberen Rand innerhalb der Unterkategorie "Abstand" hinzu.

Wechseln Sie dann zur Registerkarte Erweitert und fügen Sie den folgenden Code zum Hauptelement in der Unterkategorie Benutzerdefiniertes CSS hinzu: 

height: 200px;
width: 200px;
-webkit-clip-path: circle(48.2% at 50% 50%);
clip-path: circle(48.2% at 50% 50%);

Deaktivieren Sie schließlich das Bildmodul auf Telefonen und Tablets.

Bildmodul des Bräutigams

Klonen Sie das vorherige Bildmodul und platzieren Sie es in derselben Spalte wie das vorherige. Ändern Sie das hochgeladene Bild und wechseln Sie zur Registerkarte Design. Öffnen Sie die Unterkategorie Ausrichtung und ändern Sie die Bildausrichtung auf „Rechts“.

Passen Sie außerdem den oberen Rand innerhalb der Unterkategorie „Abstand“ auf „-60%“ an.

Wir können jetzt zum Abschnitt mit der Geschenkliste des Layouts wechseln. Dein Layout sollte bisher so aussehen:

Wunschliste/Geschenkliste

Fügen Sie einen neuen Standardabschnitt hinzu und ändern Sie die Hintergrundfarbe in '#fae4de' in der Unterkategorie Hintergrund der Registerkarte Inhalt.

Textmodul: Titel

Fügen Sie dem Abschnitt eine Zeile mit voller Breite hinzu und machen Sie sie in voller Breite. Klonen Sie anschließend das Textmodul, das wir im zweiten Abschnitt erstellt haben, und platzieren Sie es in diesem Zeilenmodul. Ändern Sie den Text in den Textbeiträgen und ändern Sie die Hintergrundfarbe in '#fffaf6' im Feld Hauptelement in der Unterkategorie Benutzerdefiniertes CSS der Fortgeschrittenen Tab.

Geschenkliste/Wunschliste: Verwenden des Slider-Moduls

Fügen Sie dem Abschnitt eine neue Zeile mit 3 Spalten hinzu und ändern Sie die benutzerdefinierte Breite '65%' in der Unterkategorie Größenanpassung der Registerkarte Design. Fahren Sie fort, indem Sie der ersten Zeile ein Textmodul hinzufügen, und nehmen Sie die folgenden Anpassungen an der Unterkategorie Text der Registerkarte Design vor:

  • Textausrichtung: Mitte
  • Textschriftart: Raleway Light
  • Textschriftart: Fett
  • Schriftgröße des Textes: 24px
  • Textfarbe: #9b857b
  • Textzeilenhöhe: 1.5em

Scrollen Sie auf derselben Registerkarte nach unten und fügen Sie '30px' am oberen Rand in der Unterkategorie "Abstand" hinzu.

Klonen Sie nun das Textmodul zweimal und fügen Sie eines in jede Spalte ein.

Als nächstes fügen Sie ein Slider-Modul hinzu. Gehen Sie zur Registerkarte Erweitert des Schiebereglers und fügen Sie den folgenden Code zum Hauptelement in der Unterkategorie Benutzerdefiniertes CSS hinzu: 

border: 2px solid #FFFFFF;
border-radius: 15px;
margin-left: 20px;

Fahren Sie fort, fügen Sie eine neue Folie hinzu. Laden Sie innerhalb der Folie ein Hintergrundbild von einem der Artikel hoch, die Sie in die Geschenkliste in der Unterkategorie Hintergrund der Registerkarte Inhalt einfügen möchten. Geben Sie als Nächstes den Namen des Elements und den Schaltflächentext in der Unterkategorie Text derselben Registerkarte ein. Ändern Sie auch die URL in der Unterkategorie Link. Fügen Sie innerhalb einer Kategorie so viele Folien hinzu, wie Sie benötigen, und wiederholen Sie dasselbe.

Fahren Sie fort, indem Sie eine neue Zeile hinzufügen, aber jetzt mit nur 2 Spalten.

Ändern Sie die benutzerdefinierte Breite auf „55%“ in der Unterkategorie „Größen“ der Registerkarte „Design“ und ändern Sie den unteren Rand in „5 %“ in der Unterkategorie „Abstand“.

Das Textmodul und das Slider-Modul, das wir im vorherigen Zeilenmodul erstellt haben, haben die gleichen Einstellungen, die wir in allen anderen Textmodulen und Slidern benötigen. Machen Sie weiter und klonen Sie beide viermal und platzieren Sie sie in den verbleibenden Spalten jedes Zeilenmoduls.

Ihr Layout sollte jetzt so aussehen:

Das Kontaktformular (Desktop)

Der Zweck des Kontaktformulars im Layout besteht darin, dass die Leute weitergeben können, welches Geschenk sie für das Paar kaufen. Sobald ein Geschenk angenommen wird, kann es auf der Website durch ein anderes ersetzt werden. Dadurch wird es weniger wahrscheinlich, dass zwei Gäste das gleiche Geschenk mitbringen.

Erstellen Sie einen neuen Standardabschnitt und ändern Sie die Hintergrundfarbe in #fffaf6 in der Unterkategorie Hintergrund der Registerkarte Inhalt.

Erste Reihe

Die Zeile, die wir in diesem Abschnitt benötigen, ist dieselbe wie in den anderen Abschnitten. Klonen Sie einfach das zuvor verwendete Zeilenmodul mit dem Textmodul darin und platzieren Sie es innerhalb des Abschnitts. Sie müssen lediglich einige Änderungen an den Einstellungen des Textmoduls vornehmen. Ändern Sie die Text- und Hintergrundfarbe im Hauptelement in #fae4de.

Zweite Reihe

Fügen Sie nun eine Zeile mit zwei Spalten hinzu und blenden Sie die Zeile auf Tablets und Telefonen in der Unterkategorie Sichtbarkeit der Registerkarte Erweitert aus. Fügen Sie ein Kontaktformular-Modul in die erste Spalte ein und nehmen Sie die folgenden Änderungen an den verschiedenen Unterkategorien der Registerkarte Design vor.

Formularfeldtext:

  • Formularfeldschriftart: Raleway Light
  • Schriftgröße des Formularfeldes: 18px
  • Textfarbe des Formularfelds: #9b857b
  • Höhe der Formularfeldlinie: 1,7 em

Grenze:

  • Eingaberandradius: 15
  • Rand verwenden: Ja
  • Rahmenfarbe: #d7dce1
  • Randbreite: 1px
  • Rahmenstil: Solid

Taste:

  • Schaltflächentextgröße: 15
  • Schaltflächentextgröße: 15
  • Schaltflächentextfarbe: #fffaf6
  • Schaltflächenhintergrundfarbe: #9b857b
  • Breite der Knopfleiste: 9
  • Farbe der Knopfleiste: #9b857b
  • Knopfrandradius: 4

Auf der Registerkarte Inhalt des Kontaktformulars können Sie jetzt drei Felder hinzufügen; Name, E-Mail und Nachricht.

Ändern Sie die Hintergrundfarbe jedes Felds manuell in #fae4de.

Zu guter Letzt fügen wir der zweiten Spalte ein Textmodul hinzu, um Ihre Gäste über den Vorgang zu informieren. Gehen Sie zur Registerkarte Design und nehmen Sie die folgenden Änderungen an der Kategorie Text vor:

  • Textausrichtung: Mitte
  • Textschriftart: Raleway Light
  • Tet-Schriftart: Fett
  • Schriftgröße des Textes: 16
  • Textfarbe: #9b857b
  • Höhe der Buchstabenlinie: 1,5 em

Scrollen Sie auf derselben Registerkarte nach unten und fügen Sie "300 px" zur Max Width in der Unterkategorie "Größen" hinzu.

Geben Sie schließlich '5px' am oberen Rand in der Unterkategorie Abstand ein.

Das Kontaktformular (Tablet & Telefon)

Klonen Sie die zuvor erstellte Zeile und lassen Sie einfach das Kontaktformularmodul und das Textmodul die Plätze (und Spalten) wechseln. Gehen Sie zur Registerkarte Erweitert und blenden Sie die Zeile für Desktops aus.

Ihr Layout sollte nun endlich so aussehen:

Next Up

Im vierten Teil dieser Miniserie zeigen wir Ihnen, wie Sie mit Divi und Auto-Testimonials ein Online-Gästebuch für Ihre Hochzeit erstellen. Wenn Sie Kommentare zu diesem Tutorial haben oder Anfragen für zukünftige Tutorials haben; Stellen Sie sicher, dass Sie einen Kommentar im Kommentarbereich dieses Blogbeitrags hinterlassen, damit wir uns bei Ihnen melden können!

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!