Entwerfen Sie einen einzigartigen Funktionsbereich in Divi mit Symbolen, die von Kreiszählern animiert werden

Die meisten Websites benötigen einen gut gestalteten Funktionsbereich, um die Funktionen von Produkten oder Dienstleistungen anzuzeigen. In diesem Tutorial zeige ich Ihnen, wie Sie in Divi einen einzigartigen Funktionsabschnitt erstellen. Um dies zu tun, werden wir mit Divis Circle Counter-Modul ein wenig kreativ, um Ihren Klappensymbolen Animationen hinzuzufügen. Und indem Sie benutzerdefinierten Abstand verwenden, zeige ich Ihnen, wie Sie Ihre Klappentexte einfach so positionieren können, dass sie gut mit einem Trennhintergrund übereinstimmen. Das endgültige Design ist sowohl sauber als auch einzigartig. Und mit ein paar kleinen Handgriffen kann es eine großartige Ergänzung für Ihr nächstes Projekt sein.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kleiner Vorgeschmack auf das Design und das GIF, um das Animationselement zu veranschaulichen.

Erstellen einer neuen Seite und Bereitstellen des Visual Builder

Um zu beginnen, gehen Sie zu Ihrem WordPress-Dashboard und gehen Sie zu Seiten > Neu hinzufügen. Geben Sie dann der Seite einen Titel und klicken Sie, um den Divi Builder zu verwenden. Klicken Sie dann auf , um den Visual Builder zu verwenden. Sie werden mit drei Optionen aufgefordert. Wählen Sie die Option „Von Grund auf neu erstellen“.

Ihre leere Leinwand wartet!

Erstellen der Feature-Abschnittsüberschrift

Der obere Header für Ihren Feature-Bereich ist ziemlich einfach. Das einzigartige Element ist der subtile Kastenschatten, der darunter angezeigt wird, um dem Design ein wenig Tiefe zu verleihen.

Um es zu erstellen, fügen Sie eine einspaltige Zeile in Ihren regulären Abschnitt ein.

Fügen Sie dann der Zeile einen Textbaustein hinzu und aktualisieren Sie die Einstellungen wie folgt:

Inhalt:

<h1>Our Features</h2>
Everything you need.

Textschriftart: Montserrat
Schriftstärke des Textes: Halbfett
Text Textgröße: 22px
Textausrichtung: Mitte
Schriftstärke der Überschrift: Ultra Bold
Überschrift Textgröße: 6vw (Desktop), 50px (Tablet), 30px (Smartphone)

Speichern Sie nun Ihre Einstellungen und springen Sie zu den Abschnittseinstellungen und fügen Sie wie folgt einen Boxschatten hinzu:

Box Shadow: siehe Screenshot
Vertikale Position des Kastenschattens: 19px
Stärke der Box-Schattenunschärfe: 80px
Stärke der Box-Schattenausbreitung: -16px
Schattenfarbe: rgba (136,150,171,0,13)

Einstellungen speichern.

Ziemlich einfache Sache. Kommen wir nun zum spaßigen Teil.

Erstellen des Hauptfunktionsbereichs und des Hintergrunddesigns

Wir müssen einen neuen Abschnitt hinzufügen, um unsere Funktionen zu speichern. Normalerweise können Sie dem vorherigen Abschnitt einfach eine neue Zeile hinzufügen, aber in diesem Fall müssen wir einen Teilerhintergrund hinzufügen, der im Abschnittselement verfügbar ist.

Fahren Sie fort und fügen Sie direkt unter dem gerade fertiggestellten Abschnitt einen neuen Abschnitt hinzu. Fügen Sie dann der Zeile ein vierspaltiges Layout hinzu.

Wir werden diesen Spalten Klappentexte hinzufügen, aber vorerst aktualisieren wir unsere Abschnittseinstellungen.

Für diesen Abschnitt müssen wir ihm eine benutzerdefinierte maximale Breite zuweisen. Dies ist wichtig, um das Design bei größeren Browsergrößen beizubehalten. Wir müssen auch einen Abschnittsteiler hinzufügen, der als Hintergrund dient, der mit der Anordnung unserer Klappentexte übereinstimmt (mehr dazu später).

Gehen Sie zu den Abschnittseinstellungen und aktualisieren Sie Folgendes:

Breite: 1080px
Abschnittsausrichtung: Mitte
Teiler: Oben
Teilerstil: siehe Screenshot
Teilerfarbe: rgba (136,150,171,0,07)
Teilerhöhe: 52%

Einstellungen speichern.

Wenn Sie dem Abschnitt eine benutzerdefinierte Breite (oder maximale Breite) von 1080px geben, werden Ihre Zeilen standardmäßig innerhalb eines Abschnitts eingerichtet. Im Wesentlichen machen wir also unseren gesamten Abschnitt auf die Größe einer Standardzeile.

Hinzufügen von Blurbs zur vierspaltigen Zeile

An diesem Punkt können wir fortfahren und unsere Klappentexte zu jeder der vier Spalten hinzufügen. Klicken Sie auf das graue Symbol in der ersten Spalte, um Ihren ersten Klappentext hinzuzufügen. Aktualisieren Sie den Inhalt des Felds so, dass er weniger Text enthält (2 Sätze), und verwenden Sie dann ein Symbol anstelle eines Bilds (ich habe das Bildsymbol ausgewählt).

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

Symbolfarbe: #974450
Kreissymbol: JA
Kreisfarbe: rgba (255,255,255,0.5)
Symbolschriftgröße verwenden: JA
Symbolschriftgröße: 48px
Textausrichtung: Mitte

Einstellungen speichern.

Kopieren Sie nun das Klappenmodul und fügen Sie es in jede der verbleibenden Spalten ein, sodass Sie in jeder Spalte einen Klappentext haben.

Sie können an dieser Stelle zurückgehen und die Symbole aktualisieren, wenn Sie möchten, müssen dies jedoch nicht.

Kreiszähler zu überlappenden Blurb-Symbolen hinzufügen

Um die Animation zu unseren Klappensymbolen hinzuzufügen, überlappen wir jedes Symbol mit einem Kreiszähler, der einen anderen Zahlenwert hat. Dadurch wird die Kreisanimation mit jedem Symbol allmählich größer, um den Fortschritt anzuzeigen. Sie können jedoch für jeden Kreiszähler einen beliebigen Zahlenwert verwenden.

Klicken Sie unter dem Klappenmodul in der ersten Spalte auf das graue Symbol „Neues Modul hinzufügen“ und fügen Sie dann das Zählermodul hinzu.

Bevor Sie mit der Bearbeitung der Kreismoduleinstellungen beginnen, ziehen Sie es über das Klappenmodul. Jetzt können Sie die Inhaltseinstellungen wie folgt aktualisieren:

Löschen Sie den Text im Titelfeld
Anzahl: 25

Aktualisieren Sie dann die Einstellungen der Registerkarte „Design“ wie folgt:

Hintergrundfarbe der Leiste: #974450 (gleiche Farbe wie Ihre Klappensymbole)
Zahlentextfarbe: rgba(0,0,0,0) (dies ist vollständig transparent, so dass die Zahl verdeckt wird)
Nummerntextgröße: 0px (um unerwünschten Textraum innerhalb des Kreises zu entfernen)
Breite: 109px (dies wurde basierend auf der Größe des Symbols festgelegt, das es überlappen wird)
Modulausrichtung: Mitte
Rand-unten: -102px (dies wird das Symbol perfekt überlappen)

Einstellungen speichern.

Jetzt müssen Sie nur noch das Kreiszählermodul kopieren und in jede der verbleibenden Spalten einfügen und es dann an den Anfang jedes Klappentextes ziehen. Nachdem die duplizierten Kreiszähler vorhanden sind, aktualisieren Sie die zweite Kreiszählernummer auf 50, die dritte Zählernummer auf 75 und die vierte Zählernummer auf 100. Das Ergebnis sollte nach Abschluss der Animation so aussehen.

Verwenden Sie den Zeilenabstand, um die Symbole so zu positionieren, dass sie mit dem Teiler übereinstimmen

Der letzte Schritt bei diesem Design besteht darin, die Symbole so zu positionieren, dass sie mit dem Bogen des Teilerhintergrunds übereinstimmen. Dazu müssen wir der Zeile einige benutzerdefinierte Auffüllungen hinzufügen. Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

Machen Sie diese Zeile in voller Breite: JA
Spalte 2 Benutzerdefinierte Polsterung: 9 % oben (Desktop), 0 % oben (Tablet)
Spalte 3 Benutzerdefinierte Polsterung: 9 % oben (Desktop), 0 % oben (Tablet)

Das ist es!

Sehen Sie sich das Endergebnis an.

Beachten Sie, wie die Symbole jetzt vom Kreiszähler mit unterschiedlichen Zahlenwerten animiert werden. Und die Symbole stimmen mit dem Teilerhintergrund überein.

So sieht der Feature-Bereich auf Mobilgeräten aus

Hier sehen Sie, wie das Design auf Tablet- und Smartphone-Displays aussieht.

Abschließende Gedanken

Die einzigartigen Elemente dieses Feature-Bereich-Designs sind leicht und dezent, was es Ihnen leicht machen sollte, mit einigen kleinen Anpassungen in Ihre eigenen Layouts zu integrieren. Und wenn die Kreiszähler-Animationen nicht Ihr Ding sind, können Sie diese gerne weglassen und einfach das Kreissymbol des Klappenmoduls verwenden. Oder Sie können nur die Kreiszähler mit den sichtbaren Zahlenwerten für ein Creative-Layout verwenden, um Statistiken anzuzeigen. Wenn überhaupt, hoffe ich, dass dies Ihnen ein paar Anregungen gibt, die Sie selbst erkunden können.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!