So erstellen Sie mit Divi . eine virtuelle Summit-Landing Page
Veröffentlicht: 2020-07-02Die Förderung einer virtuellen Veranstaltung umfasst eine Reihe von Werbestrategien. Eine einladende Landingpage zu erstellen ist eine davon. Das Erstellen einer Landingpage für Ihren virtuellen Gipfel ist der perfekte Weg, um Ihr Publikum neugierig zu machen. Mit der richtigen Kombination der Bereiche können Sie registrierte Teilnehmer einladen, informieren und abholen. Heute zeigen wir Ihnen, wie Sie eine virtuelle Gipfel-Landingpage mit fünf Abschnitten erstellen. Das Design umfasst Duotone-Bilder und scrollende Abschnittsteiler. Wir haben auch eine herunterladbare JSON-Datei hinzugefügt, wenn Sie die Schritt-für-Schritt-Anleitung überspringen möchten. Im Ordner finden Sie auch die Kopf- und Fußzeilengrafiken in PNG und AI.
Lasst uns anfangen!
Vorschau
Schauen wir uns das Landingpage-Design auf verschiedenen Bildschirmgrößen an.
Desktop
Tablette
Handy, Mobiltelefon
Laden Sie die Landing Page des virtuellen Gipfels KOSTENLOS herunter
Um das kostenlose Landingpage-Layout für den virtuellen Gipfel in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.
Kostenlos herunterladen
Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.
Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!
Virtuelle Gipfel-Landing-Page-Abschnitte
Damit Ihre Zielseite ihre Aufgabe erfüllen kann, benötigt sie einen bestimmten Satz von Abschnitten. Landing Pages müssen nicht nur die Aufmerksamkeit des Betrachters auf sich ziehen, sondern auch konvertieren. Eine virtuelle Gipfel-Landingpage muss beispielsweise relevante Informationen und einen Call-to-Action enthalten. Alle Abschnitte müssen nahtlos von einem zum anderen übergehen, damit sich der Zuschauer zum Handeln und Anmelden inspiriert fühlt.
Wir haben die folgenden Abschnitte in die Virtual Summit Landing Page aufgenommen:
Header
Der Kopfbereich enthält wichtige Informationen wie den Titel des Gipfels und das Datum der Veranstaltung. Das ist die wichtigste Information, deshalb steht sie ganz oben. Kein Header ist vollständig ohne einen Call-to-Action und eine einfache Navigation zum Rest der Seite.
In unserem Design haben wir zwei Schaltflächen mit Ankerlinks integriert, die zu den Referenten- und Terminplanabschnitten navigieren. Am wichtigsten ist, dass wir eine Schaltfläche mit einem Link zum Registrierungsbereich eingefügt haben. Auf der gesamten Seite sehen alle „Registrieren“-Buttons gleich aus, um eine visuelle Einheit im Design zu haben.
Information
Der zweite Abschnitt ist ein Informationsabschnitt, der den Betrachter dazu anregt, die Teilnahme am virtuellen Gipfel in Betracht zu ziehen. Im Design haben wir vier Klappentexte und ein Bild hinzugefügt, das leicht in ein Video umgewandelt werden kann. Die Klappentexte listen vier Gründe auf, an dem Gipfel teilzunehmen, und das Bild (oder Video) ist das Bild, das die Entscheidung unterstützt.
Die Sprecher
Im nächsten Abschnitt finden Sie einen Satz von sechs Personenmodulen. Hier stellen Sie die Referenten vor, die am Summit teilnehmen werden. Jedes Modul beinhaltet die folgenden Elemente:
- Bild
- Name
- Position
- Beschreibung
- Social-Media-Links
Achten Sie darauf, alle relevanten Informationen für jeden Lautsprecher einzugeben. Versuchen Sie auch, die gleiche Anzahl von Zeilen im Fließtext zu verwenden, damit das Design klar aussieht. Wie Sie sehen, haben wir auf allen Fotos der Lautsprecher einen Duoton-Farbeffekt verwendet, um dem Design ein interessantes Aussehen und Gefühl zu verleihen. Unten finden Sie eine Schritt-für-Schritt-Anleitung, wie Sie diesen Effekt in Photoshop erzielen.
Wenn Sie mehr als sechs Lautsprecher haben, duplizieren Sie einfach die Reihen- oder Klonmodule in Reihen mit mehr oder weniger Spalten.
Der Stundenplan
Der Zeitplan-Abschnitt ist als nächstes. In diesem Bereich haben wir den Zeitplan des Gipfels elegant geteilt und darauf geachtet, dass er strukturell ist. Um den Stil des Textdesigns beizubehalten, stellen Sie sicher, dass Sie den Inhalt ändern, aber nicht die Überschriftenebenen. Versuchen Sie, den Inhalt ungefähr gleich lang zu halten, damit das Design ordentlich bleibt.
Zeilen sind nach Tagen mit einem Titelbild und einer Gruppe von Klappentexten organisiert. Unten in der letzten Spalte finden Sie einen Call-to-Action-Button, mit dem sich das Publikum registrieren kann.
Registrieren
Zu guter Letzt ist der Registrierungsbereich. Wir haben einen Countdown-Timer eingebaut, um ein Gefühl der Dringlichkeit zu erzeugen. Das Kontaktformular sollte direkt mit Ihrer RSVP-Liste verknüpft sein, damit jeder Eingeladene automatisch registriert wird.
Im gesamten Design der Zielseite des virtuellen Gipfels finden Sie drei Schaltflächen, die zu diesem Abschnitt für eine optimierte Lead-Generierung navigieren.
Erstellen Sie eine Duotone-Verlaufskarte mit Photoshop
Bild in Adobe Photoshop öffnen
Wenn Sie die Duotone-Bilder in unserem Design nachahmen möchten, führen Sie die folgenden Schritte aus. Öffnen Sie zunächst ein Bild in Photoshop.
Öffnen Sie Anpassungen und wählen Sie Verlaufskarte
Öffnen Sie die Anpassungssymbolleiste und klicken Sie auf die Verlaufskarte. Doppelklicken Sie auf der Registerkarte Eigenschaften auf die Farbverlaufsleiste, um das Einstellungs-Popup zu öffnen.
Verlaufsfarben anpassen
Doppelklicken Sie in den Verlaufseinstellungen auf jede Farbe, um die Einstellungen anzupassen.
Um den Effekt unseres Designs zu erzielen, passen Sie den Farbverlauf wie folgt an:
- Verlaufstyp: Solid
- Glätte: 100%
- Deckkraftstopp Nr. 1: 100 %
- Farbstopp #2
- Dunkellila #202060
- Position: 19%
- Mittelpunkt:
- Deckkraftmittelpunkt: 85%
- Farbmittelpunkt: 50%
- Deckkraftstopp #2: 55%
- Farbstopp #
- Violett #f895f8
- Position: 100%
Als benutzerdefinierte Verlaufskarte speichern
Fügen Sie einen Namen für Ihren Farbverlauf hinzu und klicken Sie auf Neu, um ihn zu speichern. Es wird dann in Ihrer Verlaufsbibliothek gespeichert. Speichern Sie das Bild für das Web mit einer Höhe von 700 px. Wiederholen Sie den Vorgang mit so vielen Bildern, wie Sie benötigen. Wählen Sie nach dem Anwenden der Verlaufskarte Ihren gespeicherten Verlauf aus.
1. Kopfzeile erstellen
Neuen Abschnitt hinzufügen
Hintergrund
Beginnen wir mit der Neuerstellung der virtuellen Gipfel-Landingpage. Erstellen Sie eine neue Seite und öffnen Sie sie mit dem Divi Builder. Bevor Sie Zeilen hinzufügen, fügen Sie einem neuen Abschnitt ein Hintergrundbild und einen Farbverlauf hinzu. Die Hintergrundgrafik finden Sie oben im Download-Ordner.
- Hintergrundverlauf
- Farbe 1: #1f4068
- Farbe 2: #202040
- Hintergrundbild: Header-Grafik
Größe
Passen Sie als nächstes die Mindesthöhe an.
- Mindesthöhe: 1050px
Abstand
Auch der Abstand.
- Polsterung oben und unten
- Tisch und Telefon: 90px
Sichtweite
Passen Sie abschließend die Sichtbarkeitseinstellungen auf der Registerkarte "Erweitert" an.
- Horizontaler und vertikaler Überlauf: Ausgeblendet
Neue Zeile hinzufügen
Spaltenstruktur
Fügen Sie eine Zeile mit drei Spalten hinzu. Wählen Sie die Spaltenstruktur 1/2, 1/4, 1/4 aus.
Größe
Passen Sie die Größe der Reihe wie folgt an:
- Breite: 90%
- Maximale Breite: 1800px
- Ausrichtung: Mitte
Abstand
\Fügen Sie auch etwas oberen Rand hinzu.
- Oberer Rand: 200px
Spalte 2, 3 Einstellungen
Abstand
Passen Sie die Einstellungen für die Spalten 2 und 3 an. Zuerst den Abstand
- Oberer Rand: 30px
Sichtweite
Blenden Sie dann die Spalten auf dem Telefon aus.
- Deaktivieren auf: Telefon
1. Textmodul zu Spalte 1 hinzufügen
Text
Fügen Sie in Spalte 1 einen ersten Textbaustein hinzu. Fügen Sie den Titel als H1-Inhalt ein.
- Körper: H1-Gehalt
Überschriftstext
Gestalten Sie auf der Registerkarte Design als nächstes den Überschriftentext.
- Überschriftsebene: H1
- Schriftart: Alata
- Gewicht: Fett
- Ausrichtung: Mitte
- Farbe: Off White #eaeaea
- Größe
- Desktop: 85px
- Tablet: 70px
- Telefon: 44px
- Buchstabenabstand: 2px
- Linienhöhe: 1.1em
- Textschatten: 1. Option
- Schattenfarbe: rgba(o,0,0,0.26)
2. Textmodul zu Spalte 1 hinzufügen
Text
Fügen Sie einen zweiten Textbaustein hinzu. Fügen Sie das Datum als H2-Inhalt ein.
- Text: H2 Content, 15.+16. Juli 2020
Überschriftstext
Stylen Sie den Überschriftstext als nächstes.
- Überschriftsebene: H2
- Schriftart: Alata
- Gewicht: Normal
- Ausrichtung: Mitte
- Farbe: Fuchsia #b030b0
- Größe
- Desktop und Tablet: 60px
- Telefon: 45 px
- Linienhöhe: 1,3em
Abstand
Fügen Sie auch etwas Abstand hinzu.
- Untere Polsterung: 20px
Schaltflächenmodul zu Spalte 1 hinzufügen
Text
Fügen Sie ein Tastenmodul für den Call-to-Action hinzu.
- Schaltfläche: Registrieren
Verknüpfung
Fügen Sie den Ankerlink hinzu.
- Link-URL: #Registrieren
Ausrichtung
Wechseln Sie zur Registerkarte Design und legen Sie die Ausrichtung fest.
- Tastenausrichtung: Mitte
Benutzerdefinierte Schaltflächenstile
Stylen Sie auch den Button.
- Textgröße
- Desktop: 30px
- Tablet: 25 px
- Telefon: 20px
- Textfarbe: Weiß #ffffff
- Hintergrund: Lila #602080
- Randradius: 35px
- Buchstabenabstand: 1px
- Schriftart: Alata
Abstand
Passen Sie abschließend den Abstand an.
- Oberer Rand
- Tablet und Telefon: 15px
- Obere Polsterung: 2px
Schaltflächenmodul zu Spalte 2 hinzufügen
Text
Wechseln Sie zu Spalte 2 und fügen Sie ein Tastenmodul hinzu. Fügen Sie die Kopie Ihrer Wahl hinzu.
- Schaltfläche: Lautsprecher
Verknüpfung
Fügen Sie als Nächstes einen Ankerlink hinzu.
- Link-URL: #Lautsprecher
Ausrichtung
Legen Sie auf der Registerkarte Design die Ausrichtung fest.
- Tastenausrichtung
- Desktop: Rechts
- Tablet und Telefon: Mitte
Schaltfläche Benutzerdefinierter Stil
Passen Sie auch die benutzerdefinierten Schaltflächenstile an.
- Textgröße: 24px
- Textfarbe: Weiß #ffffff
- Hintergrund: Transparent
- Buchstabenabstand: 1px
- Schaltflächenschriftart: Alata
- Randradius: 0px
Box Schatten
Fügen Sie schließlich einen Boxschatten hinzu.
- Kastenschatten: 4. Option
- Horizontale Position: 0px
- Vertikale Position: 5 px
- Schattenfarbe: Fuchsia: #b030b0
Schaltflächenmodul in Spalte 3 klonen
Klon-Schaltfläche
Klonen Sie die Schaltfläche in Spalte 2 und platzieren Sie das duplizierte Modul in Spalte 3.
Tastenmodul anpassen
Text
Ändern Sie den Text in der geklonten Schaltfläche.
- Schaltfläche: Zeitplan
Verknüpfung
Ändern Sie auch den Ankerlink.
- Link-URL: #Zeitplan
Ausrichtung
Vergessen Sie nicht, auch die Ausrichtung zu ändern.
- Tastenausrichtung
- Desktop links
Neue Zeile hinzufügen
Spaltenstruktur
Fügen Sie eine neue Zeile mit zwei gleichen Spalten hinzu.
Größe
Passen Sie zuerst die Rinnenbreite an.
- Benutzerdefinierte Dachrinnenbreite: 2
Abstand
Fügen Sie als nächstes Abstand hinzu.
- Oberer Rand
- Telefon: -35px
Sichtweite
Passen Sie dann die Sichtbarkeit der Zeile an.
- Deaktivieren auf: Tablet und Desktop
Schaltflächenmodul klonen und Duplikat in Spalte 1 platzieren
Klon-Schaltfläche
Klonen Sie das Tastenmodul in Spalte 2 der vorherigen Zeile und platzieren Sie das duplizierte Modul in Spalte 1 der neuen Zeile.
Tastenmodul anpassen
Schaltfläche Benutzerdefinierter Stil
Passen Sie den Text in der neuen Schaltfläche an.
- Textgröße: 20px
Box Schatten
Ändern Sie auch den Boxschatten.
- Vertikale Position: 4px
Geklontes Schaltflächenmodul zu Spalte 2 hinzufügen
Klon-Schaltfläche
Tastenmodul aus Spalte 3 in der vorherigen Zeile duplizieren. Fügen Sie es in Spalte 2 dieser Zeile ein.
Tastenmodul anpassen
Text
Passen Sie den Textinhalt in der geklonten Schaltfläche an.
- Text: Zeitplan
2. Infobereich erstellen
Neuen Abschnitt hinzufügen
Hintergrund
Um den Informationsabschnitt zu erstellen, fügen Sie einen neuen Abschnitt hinzu und gestalten Sie zuerst den Hintergrund.
- Hintergrundverlauf
- Farbe 1: #202040
- Farbe 2: #202060
Abstand
Fügen Sie auch etwas Polsterung hinzu.
- Obere Polsterung: 170px
- Untere Polsterung: 5px
Sichtweite
Passen Sie abschließend die Sichtbarkeitseinstellungen auf der Registerkarte "Erweitert" an.
- Horizontaler und vertikaler Überlauf: Ausgeblendet
Neue Zeile hinzufügen
Spaltenstruktur
Fügen Sie eine neue Zeile mit einer Spalte hinzu. Wir nennen dies die Titelzeile.
Größe
Legen Sie als nächstes die Größe fest.
- Breite: 80%
- Maximale Breite: 1800px
Textmodul hinzufügen
Text
Fügen Sie ein Textmodul hinzu.
- Body: H2 Content – Warum am Digital Marketing Virtual Summit teilnehmen?
Überschriftstext
Gestalten Sie auf der Registerkarte Design den Überschriftentext.
- Überschriftsebene: H2
- Schriftart: Alata
- Textfarbe: Weiß #ffffff
- Größe
- Desktop: 55px
- Tablet: 45px
- Telefon: 40px
- Buchstabenabstand: 2px
- Linienhöhe: 1,1 em
Trennmodul hinzufügen
Leitung
Fügen Sie nun ein Trennmodul hinzu und stylen Sie die Linie im Design-Tab.
- Linienfarbe: Fuchsia #b030b0
Größe
Passen Sie als nächstes die Größe an.
- Teilergewicht: 50px
- Maximale Höhe: 50px
Scroll-Effekte
Fügen Sie auf der Registerkarte "Erweitert" einen horizontalen Bildlaufeffekt hinzu.
- Horizontale Bewegung aktivieren
- Desktop
- Startversatz: -6
- Mittlerer Offset: 50% / 0
- Endversatz: 6
- Tablet und Telefon
- Angabe-Offset: -4
- Mittlerer Offset: 50% /0
- Endversatz: 4
Neue Zeile hinzufügen
Spaltenstruktur
Fügen Sie nun eine neue Zeile mit drei Spalten hinzu. Wählen Sie die Spaltenstruktur 1/2, 1/4, 1/4 aus.
Größe
Passen Sie vor dem Hinzufügen von Modulen die Zeilengröße an.
- Breite: 80%
- Maximale Breite: 1800px
Spalte 1 Einstellungen
Abstand
Passen Sie auch den Abstand der ersten Spalte an.
- Obere Polsterung: 20px
Bildmodul zu Spalte 1 hinzufügen
Bild
Fügen Sie nun in Spalte 1 ein Bildmodul hinzu. Verwenden Sie eines Ihrer Bilder mit dem Duotone-Effekt.
- Bild: Foto mit Duotone-Effekt
Grenze
Passen Sie auch die Ränder an.
- Abgerundete Ecken: 15px
Blurb-Modul zu Spalte 2 hinzufügen
Text
Gehen Sie zu Spalte 2 und fügen Sie ein Klappenmodul hinzu. Fügen Sie den Inhalt ein.
- Titel: Neue Verbindungen knüpfen
- Text: Beschreibender Inhalt
Bild
Laden Sie das Bild Nummer 1 hoch, das Sie im herunterladbaren Ordner finden.
- Bild: PNG von #1
Bild & Symbol
Passen Sie als nächstes die Platzierung des Bildes an.
- Platzierung: Oben
- Ausrichtung: Links
Titeltext
Stylen Sie auch den Titeltext.
- Überschriftsebene: H4
- Schriftart: Alata
- Farbe: Weiß #ffffff
- Größe: 23px
Hauptteil
Vergessen Sie nicht, den Fließtext zu formatieren.
- Schriftart: Open Sans
- Farbe: Weiß #ffffff
- Größe: 14px
- Buchstabenabstand: 1px
Benutzerdefinierte CSS
Schließlich fügen Sie dem Klappentitel auf der Registerkarte "Erweitert" einige zusätzliche Auffüllungen mit benutzerdefiniertem CSS hinzu.
- Klappentext: Padding-Bottom: 15px;
padding-bottom: 15px;
Blurb-Modul klonen und Duplikat in Spalte 2 platzieren
Klappentext klonen
1. Klappentext in Spalte 2 duplizieren.
Inhalt
Aktualisieren Sie den Inhalt.
- Titel: Neuer Titel
- Hauptteil: Neuer beschreibender Text
Bild
Ändern Sie dann das Zahlenbild. Sie finden das neue im herunterladbaren Ordner.
- Bild: PNG von #2
Spalte 3 löschen & Spalte 2 klonen
Spalte klonen
Löschen Sie in den Zeileneinstellungen die 3. Spalte und duplizieren Sie die 2. Stellen Sie sicher, dass Sie die Spaltenstruktur auf 1/2, 1/4, 1/4 zurücksetzen.
Passen Sie Blurb 1 in Spalte 3 an
Inhalt
Aktualisieren Sie den Textinhalt im geklonten Klappentext.
- Titel: Neuer Titel
- Hauptteil: Neuer beschreibender Text
Bild
Ändern Sie auch das Zahlenbild.
- Bild: PNG von #3
Passen Sie Blurb 2 in Spalte 3 an
Inhalt
Ändern Sie auch den Inhalt dieses Klappentextes. Zuerst der Text.
- Titel: Neuer Titel
- Hauptteil: Neuer beschreibender Text
Bild
Ändern Sie dann das Zahlenbild.
- Bild: PNG von #4
3. Lautsprecherbereich erstellen
Neuen Abschnitt hinzufügen
Hintergrund
Weiter zum Abschnitt für die Lautsprecher. Fügen Sie einen neuen Abschnitt hinzu und gestalten Sie den Hintergrund.
- Hintergrundverlauf
- Farbe 1: #202060
- Farbe 2: #162447
Sichtweite
Passen Sie die Sichtbarkeitseinstellungen auf der Registerkarte "Erweitert" an.
- Horizontaler und vertikaler Überlauf: Ausgeblendet
Titelzeile klonen und Duplikat in neuen Abschnitt platzieren
Doppelte Zeile
Duplizieren Sie die Titelzeile aus dem obigen Abschnitt und platzieren Sie das Duplikat im geklonten Abschnitt. Wir nennen das Titelzeile 2.
Textmodul anpassen
Text
Stylen Sie dann die H3-Texteinstellungen auf der Registerkarte Design. Passen Sie auch die CSS-ID im geklonten Textmodul an. Als nächstes ändern Sie die Linienfarbe des Teilermoduls. Fügen Sie nun eine neue Reihe mit 5 gleich großen Modulen hinzu. Passen Sie die Größe der Reihe wie folgt an: Fügen Sie auch etwas Abstand hinzu. Fügen Sie das First-Person-Modul zu Spalte 1 hinzu. Laden Sie das Bild des Lautsprechers mit dem Farbeffekt hoch. Wir empfehlen eine Bildgröße von 550 x 770 px. Fügen Sie dem Bild als nächstes einige abgerundete Ecken hinzu. Dann formatieren Sie den Titeltext. Gestalten Sie auch den Fließtext. Vergiss den Positionstext nicht. Fügen Sie schließlich benutzerdefiniertes CSS für zusätzliches Auffüllen hinzu. Löschen Sie in den Zeileneinstellungen die Spalten 2-5. Spalte 1 viermal duplizieren. Aktualisieren Sie den Inhalt in allen geklonten Modulen. Zuerst der Text. Dann das Bild. Jetzt erstellen wir den Zeitplanabschnitt. Fügen Sie einen neuen Abschnitt hinzu und gestalten Sie den Hintergrund wie folgt: Passen Sie die Sichtbarkeitseinstellungen auf der Registerkarte "Erweitert" an. Klonen Sie die Titelzeile aus dem obigen Abschnitt und fügen Sie sie in diesen Abschnitt ein. Ändern Sie den Titelinhalt. Ändern Sie die CSS-ID im geklonten Textmodul. Ändern Sie auch die Farbe des Teilers. Fügen Sie nun eine neue Zeile mit drei gleich großen Spalten hinzu. Passen Sie die Größe der Zeile an. Fügen Sie auch etwas Abstand hinzu. Fügen Sie der ersten Spalte einen Textbaustein hinzu. Fügen Sie den Inhalt ein. Wechseln Sie zur Registerkarte Design und gestalten Sie den Überschriftentext. Fügen Sie als nächstes etwas Abstand hinzu. Fügen Sie nun ein Call-to-Action-Modul mit Inhalten Ihrer Wahl hinzu. Fügen Sie auch einen Bildhintergrund hinzu. Gestalten Sie auf der Registerkarte Design den Überschriftentext. Stylen Sie als nächstes den Fließtext. Fügen Sie auch etwas Abstand hinzu. Dann stylen Sie den Rand. Fügen Sie schließlich benutzerdefiniertes CSS für zusätzliches Styling hinzu. Wechseln Sie zu Spalte 2 und fügen Sie ein Textmodul hinzu. Folgen Sie dieser Inhaltsstruktur: Gestalten Sie den Text auf der Registerkarte Design. Dann formatieren Sie alle Überschriftenebenen. Stylen Sie auch die Grenze. Duplizieren Sie den 1. Textbaustein zweimal. Ändern Sie den Inhalt in den geklonten Textbausteinen. Entfernen Sie den Rahmen des letzten Moduls in der Spalte. In den Zeileneinstellungen Spalte 3 löschen. Spalte 2 duplizieren. Löschen Sie das dritte Textmodul in der geklonten Spalte. Aktualisieren Sie den Inhalt in jedem neuen Textbaustein. Kopieren Sie die Schaltfläche „Registrieren“ im Kopfbereich und fügen Sie sie unterhalb des letzten Textbausteins in Spalte 3 ein. Ändern Sie die Ausrichtung der Schaltfläche nach links. Passen Sie die Textgröße ein wenig an. Duplizieren Sie die erste Zeile im Zeitplanabschnitt. Ändern Sie den Inhalt im geklonten Textmodul. Passen Sie den Inhalt des Call-to-Action-Moduls an. Ändern Sie auch das Hintergrundbild. Passen Sie auch die Inhalte in den Textbausteinen an. Der letzte Abschnitt ist der Registrierung gewidmet. Fügen Sie einen neuen Abschnitt hinzu und gestalten Sie den Hintergrund wie folgt. Die Fußzeilengrafik finden Sie oben im Download-Ordner. Passen Sie auch den Abstand des Abschnitts an. Und ändern Sie die Sichtbarkeitseinstellungen auf der Registerkarte "Erweitert". Fügen Sie nun eine neue Zeile mit einer Spalte hinzu. Fügen Sie eine unsichtbare Trennlinie hinzu, die als Ankerlink für den Abschnitt dient. Fügen Sie die CSS-ID ein, die auf alle Schaltflächen „Registrieren“ verweist. Fügen Sie eine zweite Zeile mit zwei gleichen Spalten hinzu. Passen Sie die Größeneinstellungen der Zeile an. Fügen Sie der ersten Spalte ein Countdown-Timer-Modul hinzu. Fügen Sie den Inhalt und das Datum der Veranstaltung hinzu. Style den Hintergrund als nächstes. Gestalten Sie auf der Registerkarte Design den Titeltext. Gestalten Sie auch den Zahlentext. Auch der Beschriftungstext. Passen Sie dann die Größe der Reihe an. Fügen Sie auch etwas Polsterung hinzu. Zum Schluss stylen Sie den Rand. Fügen Sie in Spalte 2 ein neues Kontaktformular-Modul hinzu. Entfernen Sie das Nachrichtenfeld. Geben Sie die Einstellungen für jedes Feld ein. Klicken Sie im Design-Tab unter Layout auf „Vollbreite machen“. Machen Sie dasselbe für das zweite Feld. Gehen Sie zurück zu den allgemeinen Kontaktformular-Einstellungen und fügen Sie Inhalte hinzu. Dann formatieren Sie die Felder wie folgt: Stylen Sie auch den Titeltext. Passen Sie auch die benutzerdefinierten Schaltflächenstile an. Vergessen Sie nicht, den Randradius anzupassen. Fügen Sie schließlich benutzerdefiniertes CSS für zusätzliches Padding hinzu. Wir sind fertig! Schauen wir uns noch einmal das Landingpage-Design für verschiedene Bildschirmgrößen an. Sie haben es geschafft! Wie sieht Ihre virtuelle Gipfel-Landingpage aus? Verwenden Sie dieses Design für Ihren eigenen virtuellen Gipfel oder für einen Webdesign-Client. Die Navigation ist für die Konvertierung mit genau der richtigen Menge an Informationen optimiert. Wir haben auch scrollende Abschnittsteiler für ein kleines visuelles Extra hinzugefügt. Lass uns in den Kommentaren wissen, was du denkst. Hast du das Layout heruntergeladen oder die Schritte befolgt?
Überschriftstext
Benutzerdefinierte CSS
Teiler anpassen
Leitung
Neue Zeile hinzufügen
Spaltenstruktur
Größe
Abstand
Personenmodul zu Spalte 1 hinzufügen
Text
Bild
Bild
Titeltext
Hauptteil
Positionstext
Benutzerdefinierte CSS
padding-bottom: 10px;
padding-bottom: 20px;
padding-bottom: 20px;
Spalte duplizieren 1
Spalte klonen
Inhalte für neue Personenmodule anpassen
Text
Bild
4. Zeitplanabschnitt erstellen
Neuen Abschnitt hinzufügen
Hintergrund
Sichtweite
Titelzeile 2 klonen
Doppelte Zeile
Textmodul anpassen
Text
Benutzerdefinierte CSS
Teiler anpassen
Leitung
Neue Zeile hinzufügen
Spaltenstruktur
Größe
Abstand
Textmodul zu Spalte 1 hinzufügen
Text
Überschriftstext
Abstand
Call-to-Action zu Spalte 1 hinzufügen
Text
Hintergrund
Überschriftstext
Hauptteil
Abstand
Grenze
Benutzerdefinierte CSS
border-radius: 15px;
background-color: #162447;
margin-top: 500px;
padding-bottom: 40px;
padding-bottom: 40px;
background-color: #q62447;
margin-top: 500px;
padding-bottom: 40px;
padding-bottom: 40px;
Textmodul zu Spalte 2 hinzufügen
Text
Text
Überschriftstext
Grenze
Textmodul 2 Mal klonen
Textmodul klonen
Neue Textbausteine anpassen
Text
Rahmen des dritten Textmoduls entfernen
Grenze
Spalte 3 löschen & Spalte 2 klonen
Spalten klonen
Entfernen und Anpassen von Textmodulen
Textmodul löschen
Inhalt anpassen
Schaltflächenmodul klonen und Duplikat in Spalte 3 platzieren
Klon-Schaltfläche
Tastenmodul anpassen
Ausrichtung
Schaltfläche Benutzerdefinierter Stil
1. Reihe des Zeitplanabschnitts klonen
Zeile klonen
Textmodul in Spalte 1 anpassen
Text
Call-to-Action-Modul anpassen
Text
Hintergrund
Textbausteine anpassen
Text
5. Registerbereich erstellen
Neuen Abschnitt hinzufügen
Hintergrund
Abstand
Sichtweite
Neue Zeile hinzufügen
Spaltenstruktur
Trennmodul hinzufügen
Sichtweite
CSS-ID
Neue Zeile hinzufügen
Spaltenstruktur
Größe
Countdown-Timer-Modul zu Spalte 1 hinzufügen
Text
Hintergrund
Titeltext
Zahlentext
Beschriftungstext
Größe
Abstand
Grenze
Kontaktformular-Modul zu Spalte 2 hinzufügen
Elemente
Felder-Layout
Text
Felder
Titeltext
Benutzerdefinierte Schaltflächenstile
Grenze
Benutzerdefinierte CSS
padding-bottom: 30px;
Vorschau
Desktop
Tablette
Handy, Mobiltelefon
Das ist ein Wrap