So erstellen Sie eine Hochzeitsankündigungs-Homepage mit Divi

Veröffentlicht: 2017-05-16

Dieser Beitrag ist Teil 1 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.

Das Einrichten einer Hochzeitsankündigungsseite ist eine kreative Möglichkeit, Ihre Gäste darüber zu informieren, dass Sie heiraten. Indem Sie ihnen Ihre Website-URL zur Verfügung stellen, bleiben sie in Kontakt. Sie können die Hochzeitsdetails auch online einsehen, wann immer sie möchten.

Schauen wir uns das Homepage-Layout an, das wir Ihnen Schritt für Schritt helfen werden:

Erstellen Ihres Navigationsmenüs

Wir zeigen Ihnen genau, wie Sie eine Ankündigungsseite, eine Galerieseite und eine Geschenklistenseite für Ihre Hochzeitswebsite erstellen. Dieser erste Beitrag ist der Erstellung der Ankündigungsseite gewidmet. Aber bevor wir dorthin gehen, möchten wir sicherstellen, dass sich die Gäste reibungslos auf Ihrer Website zurechtfinden.

Deshalb müssen Sie zuerst ein ordentliches und elegantes Navigationsmenü erstellen.

Gehen Sie zunächst zu Divi > Themenoptionen > und laden Sie das Logo hoch, das Sie auf Ihrer gesamten Website verwenden möchten.

Klicken Sie auf Änderungen speichern und gehen Sie zu den Seiten Ihrer WordPress-Website. Fügen Sie eine neue Seite hinzu, auf der Sie die Ankündigungsseite erstellen. Machen Sie dasselbe für die Galerieseite und die Geschenklistenseite, die wir Ihnen in den kommenden Beiträgen zeigen, wie Sie sie erstellen.

Lassen Sie den Inhalt vorerst leer und gehen Sie zum Theme Customizer Ihrer Website, um das Navigationsmenü zu ändern. Beginnen Sie damit, die Seiten Ihrer Website zu Ihrem Menü hinzuzufügen, indem Sie auf Menüs > Menü hinzufügen > Seiten zu Ihrem Menü hinzufügen klicken . Dieses Menü sollte das Hauptmenü Ihrer Website sein.

Gehen Sie als Nächstes zu Kopfzeile & Navigation > Primäre Menüleiste und nehmen Sie die folgenden Änderungen vor:

  • Menühöhe: 66
  • Passen Sie die Logo Max Height je nach den Abmessungen des Bildes an
  • Textgröße: 16
  • Buchstabenabstand: 2
  • Schriftart: Raleway Light
  • Schriftstil: Fett
  • Textfarbe: #9b7461
  • Hintergrundfarbe: rgba(155,116,97,0.13)

Gehen Sie nun zurück zu Kopfzeile & Navigation und ändern Sie den Kopfzeilenstil innerhalb des Kopfzeilenformats auf 'Zentriert'.

Speichern und veröffentlichen Sie die vorgenommenen Änderungen.

Erste Schritte auf der Ankündigungsseite

Die Website besteht aus vier Abschnitten, und jeder von ihnen trägt seinen Wert zur Website bei – und macht Ihre Hochzeitsankündigung komplett. Wir erklären jeden Abschnitt im Detail und zeigen Ihnen, wie Sie genau das gleiche Design wie das oben gezeigte Layout erstellen können.

Heldenabschnitt (einschließlich Countdown)

Der erste Teil des Designs ist der Header. Wir haben uns entschieden, den Gästen das Gefühl zu geben, dass sie sofort mit der Website und der Hochzeit interagiert haben, indem wir ein Countdown-Modul eingebaut haben. Im Divi-Builder sieht der Header-Abschnitt so aus:

Wir werden in diesem Teil der Website einen Standardabschnitt mit einer vollen Zeile im Vollbreitenmodus verwenden. Im Zeilenabschnitt müssen Sie drei Module hinzufügen; zwei Textmodule und ein Countdown-Modul. Das Countdown-Modul befindet sich in der Mitte der beiden Textmodule.

Erste Schritte mit dem ersten Textmodul

Beginnen Sie damit, der Zeile ein Textmodul hinzuzufügen. Schreiben Sie den Text, den Sie verwenden möchten, ändern Sie die Textausrichtung auf „Mitte“ und wenden Sie die folgenden Änderungen auf der Registerkarte „Erweiterte Designeinstellungen“ an:

  • Schriftgröße des Textes: 100px (Desktop), 80px (Tablet), 66px (Telefon)
  • Textschriftart: Mandarine
  • Textfarbe: #9b857b

Scrollen Sie auf derselben Registerkarte nach unten und ändern Sie die Ränder Ihres Textmoduls, indem Sie oben „10%“ und unten „5%“ hinzufügen.

Klicken Sie auf Speichern und beenden.

Zählmodul (Desktop)

Fügen Sie unter dem gerade erstellten Textmodul ein Countdown-Modul hinzu. Fügen Sie auf der Registerkarte Allgemeine Einstellungen Datum und Uhrzeit der Hochzeit hinzu und ändern Sie die Hintergrundfarbe in '#fae4de'. Wir verwenden diesen Countdown nur auf Desktops, deaktivieren Sie ihn für Tablets und Telefone.

Wechseln Sie zu den erweiterten Designeinstellungen und nehmen Sie die folgenden Änderungen vor:

  • Zahlen Schriftart: Tangerine
  • Zahlen Schriftgröße: 74px
  • Zahlen Schriftfarbe: #9b857b
  • Zahlenzeilenhöhe: 70px
  • Beschriftungsschriftart: Raleway Light
  • Schriftgröße des Etiketts: 14px
  • Beschriftungstextfarbe: #9b857b
  • Höhe der Etikettenzeile: 25px

Scrollen Sie auf derselben Registerkarte nach unten und stellen Sie die obere benutzerdefinierte Auffüllung auf „10 %“ und die untere benutzerdefinierte Auffüllung auf „10 %“ ein.

Wechseln Sie als Nächstes zum dritten benutzerdefinierten CSS-Tab und fügen Sie den folgenden Code zum Hauptelement hinzu: 

max-width: 50%;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 12px 50px #a9a9a9;

Ihr Countdown sieht jetzt genau so aus wie im Layoutbild, das wir Ihnen oben gezeigt haben.

Countdown-Modul (Tablet & Telefon)

Klonen Sie nun den vorherigen Countdown, den Sie erstellt haben, und deaktivieren Sie ihn auf dem Desktop (anstelle von Tablet und Telefon). Nehmen Sie als Nächstes die folgenden Änderungen am Modul vor:

  • Zahlen Schriftgröße: 72px (sowohl Tablet als auch Telefon)
  • Zahlenzeilenhöhe: 70px
  • Schriftgröße des Etiketts: 14px (Tablet), 12px (Telefon)

Und ändern Sie den Code im Hauptelement des CSS-Tabs in: 

margin-left: auto;
margin-right: auto;
box-shadow: 0px 12px 50px #a9a9a9;

Zweites Textmodul

Fügen Sie nun unter dem Countdown-Modul ein weiteres Textmodul hinzu. Ändern Sie auf der Registerkarte Allgemeine Einstellungen die Textausrichtung auf 'Mitte'. Fahren Sie fort, indem Sie den Namen des Bräutigams und der Braut hinzufügen und zur Registerkarte Erweiterte Designeinstellungen gehen.

Nehmen Sie in den erweiterten Designeinstellungen die folgenden Änderungen vor:

  • Textschriftart: Mandarine
  • Schriftgröße des Textes: 50px
  • Textfarbe: #9b857b
  • Textzeilenhöhe: 1.7em

Scrollen Sie weiter auf der Registerkarte Erweiterte Designeinstellungen zu Benutzerdefinierter Rand und fügen Sie '10%' zum oberen Rand hinzu.

Teiler

Der letzte Teil dieses Heldenabschnitts ist der Teiler. Fügen Sie eine Trennlinie hinzu und ändern Sie die Farbe auf der Registerkarte „Allgemein“ in „#9b857b“. Stellen Sie sicher, dass der Teiler auch "sichtbar" ist.

Als nächstes gehen Sie zum Design-Tab und stellen Sie den Trenner-Stil 'Solid', die Trenner-Position 'Oben', ändern Sie das Trenner-Gewicht auf '1px' und verstecken Sie es auf dem Handy.

Wechseln Sie zum CSS-Tab und fügen Sie den folgenden Code zum Hauptelement hinzu: 

margin-left: auto;
margin-right: auto;
width: 30%;

Klicken Sie auf Speichern und beenden. Sie haben den ersten Abschnitt der Website fertiggestellt, der so aussehen sollte:

Wir können nun zum zweiten Teil dieses Layouts übergehen, in dem Sie beginnen können, den Gästen Ihre Geschichte zu erzählen.

Storytelling Die Ankündigung: Zweiter Abschnitt

Dieser zweite Abschnitt hat zwei symmetrische Reihen, die einen Teil der Hochzeitshomepage bilden. Dieser Teil hat eine etwas kleinere Breite, die etwas mehr Perspektive auf Ihrer Website schafft.

Erste Reihe des Abschnitts

Beginnen Sie damit, einen Standardabschnitt zu erstellen, ändern Sie die Hintergrundfarbe in '#fffaf6' und fügen Sie '5%' zum Bottom Padding hinzu. Fügen Sie als Nächstes diesem Abschnitt eine zweispaltige Zeile hinzu.

Öffnen Sie als Nächstes die Zeileneinstellungen. Wählen Sie in den Allgemeinen Einstellungen „JA“, um die benutzerdefinierte Breite zu verwenden, ändern Sie die Einheit in Prozent und geben Sie „90%“ ein. Scrollen Sie in derselben Registerkarte nach unten, aktivieren Sie die Bundstegbreite und blenden Sie sie für Telefon und Tablet aus.

Gehen Sie dann zur Registerkarte Erweiterte Designeinstellungen, gleichen Sie die Spaltenhöhen aus und fügen Sie '#9b857b' als Hintergrundfarbe der ersten Spalte hinzu. Ändern Sie auf derselben Registerkarte den Abstand von Spalte 1 in "5%" oben, "10%" rechts, "5%" unten und "10%" links.

Für die zweite Spalte müssen wir keine Hintergrundfarbe einrichten, sondern laden stattdessen ein Hintergrundbild hoch.

Textmodul

Fügen Sie nun in der ersten Spalte der Zeile einen Textbaustein hinzu. Setzen Sie auf der Registerkarte Allgemeine Einstellungen die Textausrichtung auf 'Mitte' und geben Sie den Text, den Sie freigeben möchten, in das Textfeld ein. Gehen Sie dann zur Registerkarte Erweiterte Designeinstellungen.

Nehmen Sie auf der Registerkarte Erweiterte Designeinstellungen die folgenden Änderungen vor:

  • Max. Breite: 500px (nur für Desktop)
  • Textschriftart: Mandarine
  • Schriftgröße des Textes: 44
  • Textfarbe: #fffaf6

Und fügen Sie 5% zur unteren Polsterung hinzu.

Drücken Sie Speichern & Beenden und fügen Sie ein weiteres Textmodul hinzu. Machen Sie die Textausrichtung 'ausgerichtet'. Fahren Sie fort, indem Sie in den Designeinstellungen die folgenden Änderungen am Textmodul vornehmen:

  • Maximale Breite: 500px
  • Schriftgröße des Textes: 14px
  • Textschriftart: Raleway Light
  • Schriftstil: Fett
  • Schriftfarbe des Textes: #fffaf6
  • Textzeilenhöhe: 1.7em

Drücken Sie Speichern und Beenden.

Klonen Sie die vorherige Zeile

Klonen Sie nun die gerade erstellte Zeile. Die geklonte Zeile wird automatisch unter der gerade erstellten Zeile platziert. Aber in diesem Fall müssen sich die Module auf der gegenüberliegenden Seite befinden. Platzieren Sie die beiden Textbausteine ​​in der zweiten Spalte statt in der ersten.

Öffnen Sie dann die Zeileneinstellungen und fügen Sie der ersten Spalte ein Hintergrundbild hinzu. Löschen Sie alle Padding-Einstellungen, die wir in der ersten Spalte-Padding vorgenommen haben, und platzieren Sie sie in der zweiten Spalte-Padding.

Drücken Sie auf Speichern & Beenden und Sie können loslegen.

Zeile für Telefon und Tablet

Erstellen Sie eine weitere zweispaltige Zeile und blenden Sie sie für den Desktop aus. Machen Sie die Zeile in voller Breite und ändern Sie die Bundstegbreite auf '3'.

Gehen Sie als Nächstes zur Registerkarte Design und laden Sie ein Hintergrundbild für beide Spalten hoch und nehmen Sie die folgenden Änderungen am benutzerdefinierten Padding beider Spalten vor:

  • Top 5%
  • Rechts: 10%
  • Unten: 5%
  • Links: 10%

Nachdem Sie diesen zweiten Abschnitt hinzugefügt haben, sollte Ihr Layout jetzt so aussehen:

Trauzeuge, Trauzeugin, Brautleute und Trauzeugen

Warum stellen Sie nicht die wichtigsten Menschen in Ihrem Leben auf Ihre Hochzeitswebsite? Wenn Sie verraten, wer der Trauzeuge, die Trauzeugin, die Brautleute und die Trauzeugen sein werden, können Sie Ihrer Website einen kleinen zusätzlichen Schub verleihen.

Um diesen Teil zu Ihrer Website hinzuzufügen, fügen Sie Ihrer Seite zunächst einen neuen Standardabschnitt hinzu. In diesem neuen Abschnitt müssen Sie drei Zeilen mit unterschiedlichen Spalten und Modulen erstellen.

Nachdem Sie nun den Abschnitt erstellt haben, der ein Standardabschnitt ist, geben Sie ihm die folgende Hintergrundfarbe: '#fae4de'. Sie müssen in den Einstellungen des Abschnitts nichts mehr ändern, sodass Sie auf Speichern & Beenden klicken können.

Erstellen des Textmoduls

Erstellen Sie als Nächstes Ihre erste Zeile mit voller Breite. Das einzige, was Sie dort einfügen müssen, ist ein Textmodul. Öffnen Sie das Textmodul, füllen Sie das Textfeld aus und wählen Sie 'Center' im Feld Text Orientation.

Gehen Sie dann zu den erweiterten Designeinstellungen, stellen Sie die Textschriftart auf 'Tangerine', die Textschriftgröße auf '100px' (Desktop & Tablet) und '68%' (Telefon) und die Textschriftfarbe auf '#9b857b'. Scrollen Sie auf derselben Registerkarte nach unten und ändern Sie die Ränder auf "10%" oben und "5%" unten.

Klicken Sie auf Speichern und beenden. Ihr erstes Modul und Ihre erste Zeile sind jetzt fertig.

Fügen Sie eine weitere Zeile hinzu, in diesem Fall mit zwei Spalten, und addieren Sie 5% zum oberen und unteren Rand. Fügen Sie als Nächstes ein Personenmodul in der ersten Spalte der Zeile hinzu.

Das Modul Bild und Person

Öffnen Sie anschließend die Einstellungen des Personenmoduls. Laden Sie ein Bild hoch, geben Sie die URL der Social-Media-Kanäle in die Felder ein und schreiben Sie ein wenig darüber in das Textfeld. Wenn Sie sich nicht sicher sind, welche Abmessungen Ihre Bilder haben sollen, werfen Sie einen Blick in diesen Blogbeitrag.

Gehen Sie als Nächstes zu den erweiterten Designeinstellungen und nehmen Sie die folgenden Anpassungen vor:

  • Header-Schriftart: Raleway Light
  • Kopfzeilen-Schriftart: Fett
  • Header-Schriftgröße: 14
  • Kopfzeilentextfarbe: #9b857b
  • Höhe der Kopfzeile: 1em
  • Körperschriftart: Raleway Light
  • Körperschriftart: Fett
  • Schriftgröße des Körpers: 14
  • Textkörperfarbe: #9b857b
  • Körperlinienhöhe: 1.7em

Öffnen Sie die Einstellungen des Personenmoduls und wechseln Sie zum Reiter CSS. Fügen Sie im Feld Mitgliedsbild den folgenden Code hinzu: 

-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
margin-left: 5%;
margin-right: 5%;

Machen Sie nun weiter und klonen Sie sowohl das Image- als auch das Person-Modul und fügen Sie sie in die rechte Spalte ein.

Fahren Sie fort, indem Sie eine neue Zeile mit vier Spalten hinzufügen und das Bild- und Personenmodul erneut (vier Mal) klonen und in jede Spalte einfügen. Der Code und die Einstellungen, die wir beim ersten Mal verwendet haben, gelten für alle.

Ihr Layout sollte jetzt so aussehen:

Wo und wann

Dies ist der letzte Teil Ihrer Hochzeitshomepage, in dem Sie Ihr Publikum über Ort und Zeit Ihrer Hochzeit informieren. Für diesen Abschnitt benötigen wir eine Zeile mit 3 Spalten (1/2, 1/4, 1/4) mit der folgenden Hintergrundfarbe: '#fffaf6'.

Hinzufügen einer Karte

Fügen Sie in der ersten Spalte dieses Abschnitts ein Kartenmodul hinzu. Um die Kartenfunktion nutzen zu können, müssen Sie einen Google API-Schlüssel eingeben. Wenn Sie keinen API-Schlüssel haben, lesen Sie hier, wie Sie einen erstellen. Geben Sie die Adresse Ihrer Hochzeit ein und lassen Sie das Modul den Ort finden. Um einen Pin auf Ihrer Karte zu erstellen, fügen Sie einen neuen Pin hinzu und geben Sie den Standort erneut ein. Der Pin wird dann auf der Karte angezeigt.

In den anderen Spalten verwenden wir Textbausteine ​​und Klappentexte. Fügen Sie ein Textmodul hinzu und setzen Sie die Einstellungen der Textausrichtung in den Allgemeinen Einstellungen auf 'Mitte'. Gehen Sie als Nächstes zu den erweiterten Designeinstellungen und nehmen Sie die folgenden Änderungen vor:

  • Textschriftart: Mandarine
  • Schriftgröße des Textes: 50px
  • Textfarbe: #9b857b
  • Textzeilenhöhe: 1.7em

Die Einstellungen dieses Textbausteins gelten für die Textbausteine ​​in beiden Spalten.

Blurb-Modul

Fügen Sie unter dem Textmodul ein Blurb-Modul hinzu. Wählen Sie das Standortsymbol aus, ändern Sie seine Farbe in '#f9c8b8', fügen Sie den Standort in das Textfeld ein und ändern Sie die Textausrichtung in 'Mitte'. Gehen Sie dann zu den erweiterten Designeinstellungen und nehmen Sie die folgenden Änderungen vor:

  • Symbolschriftgröße: 42px
  • Körperschriftart: Raleway Light
  • Schriftstil: Fett
  • Schriftgröße des Körpers: 14
  • Textkörperfarbe: #9b857b
  • Körperlinienhöhe: 1em

Machen Sie in der nächsten Spalte genau dasselbe. Ändern Sie nur das Klappensymbol in eine Uhr und fügen Sie die "Wann"-Details in das Textfeld ein.

Das ist es. Ihr Layout sollte jetzt so glatt aussehen wie das Layout in diesem Tutorial:

Next Up

Im zweiten Teil dieser Miniserie werden wir sehen, wie Sie eine Galerieseite erstellen, die dazu dient, Bilder mit Ihren Gästen nach der Hochzeit zu teilen. 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!