Eine der exklusiven Landingpages, die wir Ihnen als Lifetime-Mitglieder und neue Black Friday-Kunden dieses Jahr zur Verfügung stellen, ist die atemberaubende UI-Kit-Landing Page. Dieses Layout enthält einige der besten integrierten Designkombinationen von Divi und hochwertige Modelle, die Ihre Website auf die nächste Stufe heben. In diesem Beitrag zeigen wir Ihnen, wie Sie es in die Finger bekommen und effektiv einsetzen.

Wenn Sie bereits Kunde auf Lebenszeit sind oder während unseres Black Friday Sale ein neues Konto erworben oder ein Upgrade durchgeführt haben, können Sie dieses Layout jetzt herunterladen.

Holen Sie sich die exklusive Landing Page für das Black Friday UI-Kit

Bevor Sie in diesen Anwendungsfall einsteigen, müssen Sie die exklusive Landing Page des Black Friday UI-Kits in die Hände bekommen, die Sie erhalten, wenn Sie ein neues Elegant Themes-Mitglied werden, Ihr bestehendes Konto aktualisieren oder bereits ein lebenslanges Mitglied bei uns sind. Wenn Sie bereits ein Lifetime-Mitglied sind, können Sie sich in unseren Mitgliederbereich einloggen und alle unsere exklusiven Landingpages hier herunterladen. Alle anderen müssen die Schaltfläche unten zum Kaufen oder Upgraden verwenden, bevor sie dem Rest unseres Tutorials folgen können.

Fordern Sie den Deal an, bevor er verschwindet!

Verwenden der Spaltenstrukturen von Divi, um Produkte und Funktionen schön aufzulisten

Für den Rest dieses Beitrags gehen wir davon aus, dass Sie entweder unser Black Friday-Angebot genutzt haben oder bereits ein Lifetime-Mitglied sind und Zugriff auf die Black Friday UI-Kit-Landing Page haben.

Nachdem Sie die neue UI-Kit-Landing Page aus unserem Mitgliederbereich heruntergeladen haben, können Sie sich das folgende Video ansehen, um zu sehen, wie einfach die Einrichtung ist. Wir empfehlen Ihnen auch, dieses Tutorial zu befolgen, um Ihre Website für die weitere Anpassung vorzubereiten.

In diesem Use-Case-Post zeigen wir Ihnen, wie Sie Ihre Funktionen und/oder Produkte mit den neuen Spaltenstrukturen von Divi beeindruckend auflisten können. Das Design, das wir bearbeiten, sieht mit der UI-Kit-Landing Page gut aus und ermöglicht es Ihnen, den Platz auf Ihrer Seite effektiv und schön zu nutzen.

Vorschau

Schauen wir uns das Ergebnis auf verschiedenen Bildschirmgrößen an.

Schweben und Animation

Wir werden den verschiedenen Designelementen auch einige subtile Hover- und Animationseinstellungen hinzufügen. Dadurch ergibt sich folgende Interaktion:

Lass uns anfangen!

Hinzufügen einer neuen Seite mithilfe der UI-Kit-Landing Page

Als erstes müssen Sie eine neue Seite mit der UI-Kit-Landing Page erstellen, die Sie heruntergeladen und hochgeladen haben. Wenn Sie sich nicht sicher sind, wie das geht, sehen Sie sich das Video im vorherigen Teil dieses Beitrags an, das Sie Schritt für Schritt dorthin führt.

Suchen Sie den Abschnitt „Features“ auf der Seite

Scrollen Sie nach dem Hochladen des Layouts nach unten, bis Sie auf der Seite auf den Abschnitt mit den Funktionen stoßen.

Vorhandene Zeilen entfernen

Entfernen Sie die letzten beiden Zeilen, die Sie in diesem Abschnitt finden. Wir ersetzen den Inhalt dieser Zeilen durch unsere Feature-/Produktliste.

Neue Zeile unter Zeile mit Zeile hinzufügen

Spaltenstruktur

Fügen Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen auf der Registerkarte Design.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: Ja
• Spaltenhöhen ausgleichen: Ja

Abstand

Um sicherzustellen, dass dieses Design auf allen Bildschirmgrößen gut aussieht, verwenden wir verschiedene benutzerdefinierte Werte für Rand und Abstand:

• Oberer Rand: 100px
• Unterer Rand: 100px
• Obere Polsterung: 87px
• Spalte 1 oberer Abstand: 100px (Desktop), 0px (Tablet & Telefon)
• Spalte 2 obere Polsterung: 100px (Desktop), 0px (Tablet & Telefon)
• Spalte 3 obere Polsterung: 100px (Desktop). 0px (Tablet & Telefon)
• Spalte 3 untere Polsterung: 50px (Tablet & Telefon)
• Spalte 4 linker Abstand: 10px (nur Telefon)
• Spalte 4 rechter Abstand: 10px
• Spalte 5 linker Abstand: 5 Pixel (Desktop und Tablet), 10 Pixel (Telefon)
• Spalte 5 rechter Abstand: 5px (Desktop & Tablet), 10px (Telefon)
• Spalte 6 linker Abstand: 10px
• Spalte 6 linker Abstand: 10px (nur Telefon)

Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen! Fügen Sie der ersten Spalte mit einer Zahl ein Textmodul hinzu.

Standardhintergrundfarbe

Fügen Sie diesem Modul eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #0f0f0f

Hintergrundfarbe schweben

Und ändern Sie die Hintergrundfarbe beim Schweben.

• Hintergrundfarbe: #ff5400

Hintergrundbild

Sie können dem Hintergrund auch eines der Symbolbilder hinzufügen, die Sie in Ihrer Medienbibliothek finden:

• Hintergrundbildgröße: Tatsächliche Größe
• Position des Hintergrundbilds: Mitte
• Hintergrundbild wiederholen: Keine Wiederholung

Standardtexteinstellungen

Fahren Sie fort, indem Sie die Texteinstellungen ändern.

• Textschriftart: Muli
• Schriftstärke des Textes: Leicht
• Textfarbe: #ffffff
• Textgröße: 80px (Desktop & Telefon), 40px (Telefon)
• Textzeilenhöhe: 1em

• Textschattenfarbe: ##ffffff
• Textausrichtung: Links

Standardabstand

Fügen Sie einige benutzerdefinierte Polster hinzu, um ein Quadrat zu erstellen.

• Obere Polsterung: 200px
• Linke Polsterung: 50px (nur Telefon)
• Rechte Polsterung: 50px (nur Telefon)

Hover-Abstand

Ändern Sie die Abstandseinstellungen beim Schweben.

• Linke Polsterung: 100px

Grenze

Passend zur Landing Page des UI-Kits fügen wir auch einige subtile abgerundete Ecken hinzu. Fügen Sie '20px' zu jeder der Ecken hinzu.

Box Schatten

Verwenden Sie den folgenden Kastenschatten, um auch dem Modul etwas Farbe hinzuzufügen:

• Horizontale Position des Kastenschattens: 20px
• Vertikale Position des Boxschattens: -50px
• Stärke der Box-Schattenausbreitung: 17px
• Schattenfarbe: #593aff

Animation

Zu guter Letzt fügen Sie dem Textmodul eine sehr subtile Folienanimation hinzu.

• Animationsstil: Folie
• Animationsrichtung: Rechts
• Animationsintensität: 3%

Trennmodul zu Spalte 2 hinzufügen

Sichtweite

Das nächste Modul, das wir brauchen, ist ein Teilermodul. Fahren Sie fort und fügen Sie eins in die zweite Spalte ein. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Farbe

Ändern Sie als nächstes die Teilerfarbe.

• Farbe: #ffffff

Abstand

Um das Textmodul in der ersten Spalte zu überlappen, verwenden wir einige benutzerdefinierte Randwerte, die wir an die verschiedenen Bildschirmgrößen anpassen.

• Oberer Rand: 30px
• Linker Rand: -200px (Desktop & Tablet), 0px (Telefon)
• Rechter Rand: 200px (Desktop & Tablet), 0px (Telefon)

Textmodul Nr. 1 zu Spalte 3 hinzufügen

Inhalt hinzufügen

Auf zur nächsten Spalte! Hier benötigen wir als erstes Modul ein Titel-Textmodul. Fahren Sie fort und fügen Sie den Titel Ihres ersten Features oder Produkts hinzu.

Überschriftstexteinstellungen

Gehen Sie dann zu den Überschriftentexteinstellungen und nehmen Sie einige Änderungen vor, die dem UI-Kit-Layout-Pack entsprechen.

• Überschrift 3 Schriftart: Muli
• Überschrift 3 Schriftstärke: Leicht
• Überschrift 3 Textfarbe: #ffffff
• Überschrift 3 Textgröße: 30px (Desktop & Tablet), 18px (Telefon)

Abstand

Um dieses Modul nach links zu verschieben, verwenden wir einige benutzerdefinierte Abstandswerte.

• Oberer Rand: 20px
• Unterer Rand: 20px
• Linker Rand: -180px (Desktop & Tablet), 0px (Telefon)
• Linke Polsterung: 20px (Desktop & Tablet), 50px (Telefon)
• Rechte Polsterung: 20px (Desktop & Tablet), 50px (Telefon)

Textmodul #2 zu Spalte 3 hinzufügen

Inhalt hinzufügen

Das nächste Modul, das wir benötigen, ist ein Beschreibungstextmodul. Fahren Sie fort und geben Sie die Beschreibung Ihrer Funktion oder Ihres Produkts ein.

Texteinstellungen

Ändern Sie als nächstes die Texteinstellungen.

• Textfarbe: rgba(255,255,255,0.5)
• Textzeilenhöhe: 2.2em

Abstand

Schieben Sie dieses Modul ebenfalls nach links, indem Sie einige benutzerdefinierte Abstandswerte verwenden.

• Linker Rand: -180px (Desktop & Tablet), 0px (Telefon)
• Linke Polsterung: 20px (Desktop & Tablet), 50px (Telefon)
• Rechte Polsterung: 20px (Desktop & Tablet), 50px (Telefon)

Schaltflächenmodul klonen und in Spalte 3 platzieren

Das letzte Modul, das wir in Spalte 3 benötigen, ist ein Button-Modul. Um Zeit zu sparen, klonen wir eine vorhandene Schaltfläche auf der Seite und platzieren das Duplikat direkt unter den beiden anderen hinzugefügten Modulen.

Inhalt ändern

Ändern Sie den Inhalt des Tastenmoduls.

Abstand ändern

Auch dieses Modul schieben wir nach links. Wie Sie sehen, nehmen alle Module in Spalte 3 den Platz von zwei Spalten ein. Diese Art von Ansatz ermöglicht es uns, eine andere Spaltenstruktur zu erstellen, die dem gewünschten Ergebnis entspricht.

• Oberer Rand: 50px
• Linker Rand: -160px (Desktop & Tablet), 50px (Telefon)
• Rechter Rand: 50px (nur Telefon)

Bildmodul zu Spalte 4 hinzufügen

Bild hochladen

Auf zur nächsten Spalte! Fügen Sie ein Bildmodul zu Spalte 4 hinzu und laden Sie ein Bild Ihrer Wahl hoch. Für dieses Beispiel haben wir die Bildabmessungen 500×500 verwendet, können aber auch mit anderen Bildgrößen herumspielen.

Box Schatten

Fügen Sie diesem Modul einen subtilen Kastenschatten hinzu.

• Schattenfarbe: #ffffff

Animation

Und um das Ganze abzurunden, fügen Sie dem Bild auch eine Folienanimation hinzu.

• Animationsstil: Folie
• Animationsrichtung: Links
• Animationsverzögerung: 100ms
• Animationsintensität: 3%

Textmodul Nr. 1 zu Spalte 4 hinzufügen

Inhalt hinzufügen

Fahren Sie direkt unter dem Bildmodul fort und fügen Sie ein Titel-Textmodul mit einem Inhalt Ihrer Wahl hinzu.

Standardhintergrundfarbe

Ändern Sie die Hintergrundfarbe dieses Moduls.

• Hintergrundfarbe: #0f0f0f

Hintergrundfarbe schweben

Und verwenden Sie eine andere Hintergrundfarbe beim Schweben.

• Hintergrundfarbe: #593aff

Überschriftstexteinstellungen

Fahren Sie fort, indem Sie die Texteinstellungen für die Überschrift so ändern, dass sie der Landing Page des UI-Kits entsprechen.

• Überschrift 4 Schriftart: Muli
• Überschrift 4 Schriftstärke: Leicht
• Überschrift 4 Textfarbe: #ffffff
• Überschrift 4 Textgröße: 23px (Desktop & Tablet), 18px (Telefon)

Standardabstand

Fügen Sie als nächstes einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 50px
• Linke Polsterung: 30px
• Rechte Polsterung: 30px

Hover-Abstand

Und ändern Sie diese Werte beim Bewegen der Maus, um einen schönen Übergang zu erstellen.

• Unterer Rand: 50px
• Obere Polsterung: 20px
• Untere Polsterung: 20px

Textmodul #2 zu Spalte 4 hinzufügen

Inhalt hinzufügen

Das zweite und letzte Modul, das wir in Spalte 4 benötigen, ist ein Beschreibungstextmodul. Geben Sie einen Inhalt Ihrer Wahl ein.

Hintergrundfarbe

Ändern Sie als nächstes die Hintergrundfarbe.

• Hintergrundfarbe: #0f0f0f

Texteinstellungen

Und ändern Sie die Texteinstellungen.

• Textfarbe: rgba(255,255,255,0.5)
• Textzeilenhöhe: 2.2em

Abstand

Fügen Sie diesem Modul benutzerdefinierte Polster hinzu, um ein sauberes Erscheinungsbild zu erzielen.

• Untere Polsterung: 50px
• Linke Polsterung: 30px
• Rechte Polsterung: 30px

Grenze

Zu guter Letzt fügen Sie '20px' an den unteren beiden Ecken des Moduls hinzu.

Alle Module in Spalte 4 zweimal klonen und in verbleibende Spalten platzieren

Bild & Inhalt ändern

Da Sie nun alle benötigten Module in Spalte 4 haben, können Sie alle diese Module zweimal klonen und die Duplikate in die beiden verbleibenden Spalten einfügen. Ändern Sie den Inhalt und die Bilder, um Abwechslung zu schaffen.

Zeile beliebig oft klonen (je nach Anzahl der Listenelemente)

Wir haben unseren ersten Listenpunkt abgeschlossen! Jetzt können Sie diese Zeile beliebig oft klonen, abhängig von der Anzahl der Funktionen und/oder Produkte, die Sie präsentieren möchten.

Inhalt des Klons ändern

Für jedes der Duplikate müssen Sie den Inhalt ändern.

Farbe suchen und ersetzen

Sie können auch die Funktion Suchen und Ersetzen von Divi verwenden, um die Farbpalette eines Listenelements schnell zu ändern.

Hover-Hintergrundfarbe ändern

Stellen Sie sicher, dass Sie nach dem Ändern der Farbpalette auch die Hover-Hintergrundfarbe des Zahlentextmoduls ändern.

• Hintergrundfarbe: #593aff

Hintergrundbild ändern

Zu guter Letzt können Sie auch ein anderes Symbol in der Liste auswählen, abhängig von der Funktion und/oder dem Produkt, die Sie anzeigen lassen.

Abschließende Gedanken

Dieser Anwendungsfall ist Teil unseres Black Friday Deals, bei dem wir 6 KOSTENLOSE Landingpages in limitierter Auflage mit Black Friday-Kunden und Mitgliedern auf Lebenszeit teilen. Wenn Sie in diesen Tagen unserer selbstbewussten Community beitreten und Mitglied werden, erhalten Sie:

• 25% RABATT AUF ALLES
• Alle 6 Landingpages kostenlos
• Zugriff auf unsere tollen Themes und Plugins
• Bonuspreise

Nutzen Sie die Chance und werden Sie noch heute Mitglied!