Ein hilfreicher Leitfaden zum Entwerfen kreisförmiger Elemente in Divi
Veröffentlicht: 2019-05-01Hin und wieder erfordert ein Website-Design einige kreisförmige Elemente. Es ist eine schöne Möglichkeit, aus der Monotonie der Standard-Box-Designs auf einer Webseite auszubrechen. Das Erstellen von kreisförmigen Elementen mag einfach klingen (und ist es tatsächlich!), aber wenn Sie mit ein paar Grundregeln nicht vertraut sind, können Sie auf ein paar unnötige Hürden stoßen, die ziemlich frustrierend sein können.
Beispielsweise ist es manchmal schwierig, den Inhalt mit dem richtigen Abstand auszurichten und in ein kreisförmiges Element einzupassen. Oder Sie finden es möglicherweise schwierig, den Kreis für mobile Geräte reaktionsfähig zu machen. Aus diesem Grund haben einige auf einen kreisförmigen Bildhintergrund für den Inhalt zurückgegriffen. Wenn Sie jedoch keinen benutzerdefinierten Bildhintergrund verwenden möchten, verwenden Sie am besten CSS. Die gute Nachricht ist, dass Divi die Notwendigkeit beseitigt, Ihr eigenes benutzerdefiniertes CSS für die Erstellung kreisförmiger Elemente zu entwickeln, was den Prozess erheblich vereinfacht. Wenn Sie also schon immer einem Element in Divi eine Kreisform geben wollten, ist dies der richtige Beitrag für Sie.
In diesem Tutorial führe ich Sie durch die Grundlagen zum Erstellen von kreisförmigen Elementen in Divi (einschließlich Abschnitten, Zeilen und Modulen). Dann zeige ich Ihnen, wie einfach es ist, diese Techniken auf einem vorgefertigten Layout zu implementieren.
Hör zu!
Vorgeschmack
Laden Sie das Beispiel-Layout für kreisförmige Elemente KOSTENLOS herunter
Um die in diesem Tutorial entworfenen kreisförmigen Beispielelemente in die Hände zu bekommen, müssen Sie sie 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!
Um das Layout auf Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.
Kommen wir zum Tutorial, sollen wir?
Was Sie brauchen, um loszulegen
Erstellen Sie zunächst eine neue Seite in Divi. Geben Sie dann der Seite einen Titel und stellen Sie den Divi-Builder am Frontend bereit. Wählen Sie die Option „von Grund auf neu erstellen“.
Wir werden unserer Seite etwas später auch ein vorgefertigtes Layout hinzufügen, aber vorerst können wir mit dem Bauen von Grund auf beginnen.
Jetzt sind Sie bereit zu gehen!
Die drei grundlegenden Schritte zum Erstellen eines kreisförmigen Elements
Es gibt wirklich drei einfache Schritte, um ein kreisförmiges Element zu erstellen. Um diese Schritte zu veranschaulichen, werde ich diese Schritte mit dem Divi Builder auf ein Call-to-Action-Modul anwenden.
Schritt 1: Größenelement mit gleichen Höhen- und Breitenwerten
Der erste Schritt besteht darin, die Höhe und Breite auf denselben Wert einzustellen. Grundsätzlich wollen wir das Element zu einem perfekten Quadrat machen, bevor wir es zu einem perfekten Kreis machen. In diesem Beispiel geben wir dem Call-to-Action-Modul eine Höhe und Breite von 10vw.
Schritt 2: Fügen Sie einen Randradius von 50% für alle vier Ecken hinzu
Der zweite Schritt besteht darin, den Randradius des Elements (oder Moduls) an allen vier Ecken auf 50 % zu setzen. In Divi können Sie den Randradius eines Elements unter der Option „Abgerundete Ecken“ ändern.
Schritt 3: Inhalt innerhalb des kreisförmigen Elements ausrichten
Der dritte Schritt besteht darin, den Inhalt des kreisförmigen Elements auszurichten. Wir können dies tun, indem wir die Polsterung des Elements anpassen. (Außerdem beschreibe ich später in diesem Beitrag eine Möglichkeit, den Inhalt mithilfe von Flex vertikal zu zentrieren.)
In diesem Beispiel können wir die folgende Auffüllung hinzufügen, um unseren Inhalt näher an die Mitte des kreisförmigen Elements zu bringen:
Benutzerdefinierte Polsterung: 18vw oben, 3vw links, 3vw rechts
Natürlich müssen möglicherweise noch Anpassungen vorgenommen werden, um sicherzustellen, dass der Text/Inhalt auf dem Handy in das kreisförmige Element passt, aber dies deckt die grundlegende Einrichtung ab.
Sie werden vielleicht feststellen, dass ich die vw-Längeneinheit verwendet habe, um mein kreisförmiges Element zu dimensionieren und zu beabstanden. Dies ist hilfreich, um ein konsistenteres responsives Design zu erstellen. Ich erkläre es.
Verwenden von relativen Längeneinheiten, um kreisförmige Elemente reaktionsfähig zu machen
Verwenden der VW-Längeneinheit für Höhe und Breite
Von allen relativen Längeneinheiten ist die VW-Längeneinheit einer meiner Favoriten für responsives Design. Da die vw-Längeneinheit relativ zur Breite des Browserfensters (nicht des übergeordneten Elements) ist, erhalten Sie ein konsistentes Design, das sich nahtlos an die Größe des Browserfensters anpasst.
Sehen wir uns an, wie unser Beispiel für ein zirkuläres Call-to-Action-Modul aussieht, wenn ich die Browserbreite verkleinere.
Verwenden der VW-Längeneinheit für kreisförmige Elementinhalte
Die Verwendung der vw-Längeneinheit für kreisförmige Elementgröße und Inhalt ist eine gute Kombination für responsives Design. Im Grunde ermöglicht dies, dass sich der Inhalt (wie Text oder Bilder) nahtlos an die Größe des Kreiselements anpasst, um ein einheitliches Design in allen Browsern zu gewährleisten. Sie müssen jedoch vorsichtig sein, wenn Sie die vw-Längeneinheit für den Fließtext verwenden, da der Text auf Mobilgeräten möglicherweise viel zu klein wird. Ich verwende gerne die vw-Längeneinheit für Überschriften und passe dann die Größe des Fließtextes nach Bedarf mit Pixeln an.
Wenn Sie das Design des kreisförmigen Elements auf dem Telefondisplay beibehalten möchten, müssen Sie Ihren Inhalt auf ein Minimum beschränken und die Größe des kreisförmigen Elements für maximalen Platz anpassen.
In unserem aktuellen Beispiel können Sie Ihrem Titeltext einen vw-Längenwert zuweisen und dann die Größe des Moduls auf dem Handy wie folgt ändern:
Titeltextgröße: 4vw
Breite (Telefon): 70vw
Höhe (Telefon: 70vw
Wie Sie sehen, sitzt der gesamte Inhalt jetzt auch gut im kreisförmigen Element auf dem Telefondisplay.
Was ist mit Pixeln?
Wenn Sie absolute Längeneinheiten (wie Pixel) verwenden möchten, um Ihren Kreis zu vergrößern, ist das völlig in Ordnung. Sie müssen nur sicherstellen und an jedem Haltepunkt für die Tablet- und Telefonanzeige die erforderlichen Größenanpassungen vornehmen, um sicherzustellen, dass das kreisförmige Element in das Browserfenster passt. In einigen Fällen kann die Verwendung von Pixeln einfacher sein, um die richtige (oder genauere) Größe auf Tablet- und Telefondisplays zu erreichen.
Nehmen wir zum Beispiel das gleiche Call-to-Action-Modul und verwenden Pixel (anstelle von vw), um die Größe und den Abstand unseres Moduls zu bestimmen.
Sie können die Höhe, Breite und den Abstand wie folgt aktualisieren:
Breite: 500px
Höhe: 500px
Benutzerdefinierte Polsterung: 200 Pixel oben, 20 Pixel links, 20 Pixel rechts
Dieses Design sieht auf dem Desktop ähnlich aus, aber das Problem tritt immer dann auf, wenn Sie das kreisförmige Element auf dem Telefondisplay anzeigen. Da das kreisförmige Element mithilfe von Pixeln (einer absoluten Längeneinheit) bemessen wird, erstreckt sich das kreisförmige Element außerhalb des Containers und des Browsers auf dem Telefondisplay.
Deshalb ist es wichtig, die Pixelwerte für Breite und Padding auf mobilen Displays anzupassen. Möglicherweise müssen Sie stattdessen die Breite und Höhe auf 300 Pixel ändern.
Warum die Längeneinheit % für die Dimensionierung von kreisförmigen Elementen nicht wirklich gut funktioniert
Wenn Sie eine reaktionsschnellere Lösung für kreisförmige Elemente wünschen, denken Sie vielleicht, dass die Verwendung von Prozentsätzen die Antwort ist. Bei der Größenanpassung von Elementen auf einer Webseite funktioniert die prozentuale Längeneinheit für die Höhe jedoch nicht auf dieselbe Weise wie die prozentuale Längeneinheit für die Breite. Dies liegt daran, dass die Standardhöhe von Elementen normalerweise auf der Standardhöhe belassen wird (Höhe: auto). Wenn Sie also beispielsweise versuchen, einem Divi-Modul 100% Höhe zu geben, wird das Modul nicht angepasst, da die übergeordneten Container (Spalte, Zeile, Abschnitt usw.) alle einen undefinierten Wert für die Höhe haben. Der Browser versucht im Grunde nicht, das Modul auf 100% von nichts zu setzen (was er nicht kann). Bei der Breite ist dies nicht der Fall. Die Standardbreite jedes Blockelements (oder div) beträgt 100 %. Alle Abschnitte, Zeilen und Module haben also diese Standardbreite von 100 %, es sei denn, dies wird durch die Einstellungen geändert. Aus diesem Grund ist die Längeneinheit % nicht die beste Option, wenn Sie versuchen, ein ansprechendes kreisförmiges Element zu erstellen. Das kreisförmige Element muss in allen Browsergrößen die gleiche Höhe und Breite haben, daher ist es schwierig, dies mit einer prozentualen Längeneinheit für die Höhe zu erreichen. Es gibt jedoch Möglichkeiten, mit mehr benutzerdefiniertem CSS, das auf die übergeordneten Elemente angewendet wird, 100 % Höhe und Breite zum Laufen zu bringen. Aber um kreisförmige Elemente in Divi zu erstellen, ist die vw-Längeneinheit möglicherweise einfacher zu handhaben.
Ausrichten von Inhalten innerhalb eines kreisförmigen Elements
Wenn Sie Inhalte innerhalb eines kreisförmigen Elements ausrichten möchten, haben Sie wirklich zwei Optionen, die ich bei der Verwendung von Divi für einfach halten würde. Sie können das Auffüllen verwenden, um den Inhalt auszurichten, wodurch Sie mehr Kontrolle darüber haben, wo der Inhalt innerhalb des Kreiselements angezeigt werden soll. Oder Sie können die flex-Eigenschaft (mit Auffüllung) verwenden, um sicherzustellen, dass der Inhalt direkt in der Mitte des Kreises angezeigt wird.
Ausrichten von kreisförmigen Elementinhalten mit Padding
Um Inhalt innerhalb eines Kreiselements mit Padding auszurichten, würde ich vorschlagen, eine relative Längeneinheit (wie % oder vw) zu verwenden, damit die Padding mit der Größe des Containers oder der Browserbreite zu- oder abnimmt. Sie möchten keine absoluten Längeneinheiten zum Auffüllen innerhalb eines kreisförmigen Elements verwenden, das mit relativen Einheiten bemessen ist. Das Ergebnis wäre inkonsistent und das Design würde auf dem Handy kaputt gehen. Beispiel: Sie haben ein kreisförmiges Element mit einer Höhe von 10vw und einer Breite von 10vw. Dieses Element würde in der Größe schrumpfen, wenn der Browser in der Breite schrumpft. Wenn Sie am oberen Rand des Elements 100px-Padding hinzugefügt haben, bleiben die 100px erhalten, wenn Sie die Browserbreite anpassen und das Design unterbrechen. Wenn Sie jedoch eine 3vw-Auffüllung hinzufügen, würde sich diese Auffüllung gut an das Element anpassen.
Aus diesem Grund habe ich in unserem Beispiel für das Call-to-Action-Modul vorgeschlagen, vw padding zu verwenden.
Ausrichten von kreisförmigen Elementinhalten mit der Flex-Eigenschaft
Wenn Sie sich nicht so viele Gedanken über die Platzierung der oberen und unteren Polster machen möchten, um sicherzustellen, dass der Inhalt vertikal zentriert ist, können Sie die Flex-Eigenschaft verwenden. Durch Hinzufügen einiger CSS-Schnipsel zum übergeordneten Element (kreisförmiges Element) können Sie sicherstellen, dass der gesamte Inhalt vertikal zentriert bleibt. Dann können Sie Ausrichtung, Auffüllung oder Rand verwenden, um sicherzustellen, dass der Inhalt auch horizontal zentriert bleibt.
Hier ist, was ich meine.
Öffnen Sie in unserem Beispiel die Einstellungen des Call-to-Action-Moduls.
Setzen Sie dann die obere und untere Auffüllung auf 0px.
Gehen Sie dann zur Registerkarte "Erweitert" und fügen Sie das folgende CSS-Snippet zum Hauptelement hinzu:
display:flex; align-items: center;
Für dieses spezielle Modul gibt es unter der Promo-Beschreibung einige zusätzliche Polsterungen, die die Ausrichtung ein wenig aufheben. Sie können es also loswerden, indem Sie der Promo-Beschreibung das folgende CSS hinzufügen:
padding-bottom: 0px
Weitere Informationen finden Sie in diesem Beitrag zum vertikalen Ausrichten von Inhalten.
In die Praxis umsetzen: Kreisförmige Elemente zu einem vorgefertigten Layout hinzufügen
Nachdem Sie nun ein besseres Verständnis für das Erstellen von kreisförmigen Elementen in Divi haben, sehen wir uns an, wie dies bei einem tatsächlichen Layout-Design funktionieren könnte. Für dieses Beispiel verwende ich Divis Farmer Landing Page aus dem Farmer Layout Pack.
Laden Sie das Farmer Landing Page Layout auf Ihre Seite
Um zu beginnen, fügen wir der Seite zunächst das Landing Page-Layout für Landwirte hinzu. Öffnen Sie dazu das Einstellungsmenü und den unteren Rand des Divi Builders und klicken Sie auf die Schaltfläche Aus Bibliothek laden. Suchen Sie im Popup „Aus Bibliothek laden“ das Farmer Layout Pack und wählen Sie es aus. Klicken Sie dann auf , um die Landing Page für Landwirte zu verwenden.
Dadurch wird das Layout auf die Seite geladen.
Erstellen einer kreisförmigen Abschnittsüberschrift
Für das erste Beispiel werden wir den oberen Kopfbereich des Layouts in ein kreisförmiges Element umwandeln. Dazu verwenden wir unsere drei Grundregeln:
1: Größenelement mit gleichen Höhen- und Breitenwerten
2: Fügen Sie einen Randradius von 50% für alle vier Ecken hinzu
3: Inhalte innerhalb des kreisförmigen Elements ausrichten
Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:
Breite: 70vw (Desktop), 70vw (Tablet), 80vw (Telefon)
Maximale Breite: 1080px
Abschnittsausrichtung: Mitte
Höhe: 70vw (Desktop), 70vw (Tablet), 80vw (Telefon)
Maximale Höhe: 1080px
Beachten Sie, dass ich zusätzliche Höhen- und Breitenwerte für Tablet und Telefon sowie eine maximale Höhe und maximale Breite hinzugefügt habe. Wichtig ist, dass Sie sicherstellen, dass alle Höhenwerte und alle Breitenwerte gleich sind.
Jetzt müssen wir unseren Randradius von 50% an allen vier Ecken hinzufügen.
Abgerundete Ecken: 50% (alle vier Ecken)
Da es sich um einen Abschnitt handelt, enthält der Inhalt eine zweispaltige Zeile mit mehreren Modulen. Bei so vielen Inhalten müssen wir einige Größenanpassungen an den Modulen vornehmen, um sicherzustellen, dass der Inhalt in den Abschnitt passt.
Öffnen Sie zunächst die Einstellungen des obersten Textbausteins in Spalte 1, der den Titel des Abschnitts enthält. Aktualisieren Sie dann die Titeltextgröße wie folgt:
Überschrift Textgröße: 4vw
Verringern Sie dann die Textmenge im Textbaustein direkt unter dem Textbaustein, der die Kopfzeile enthält.
Jetzt können wir den Inhalt ausrichten, indem wir den Zeilenabstand anpassen. Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:
Benutzerdefinierter Rand: 10vw oben (Desktop), 5vw (Tablet), 0vw (Telefon)
Benutzerdefinierte Polsterung: 3vw links, 3vw rechts
Um die Kreisform sichtbarer zu machen, können wir einen oberen Abschnittsteiler hinzufügen und die Position des Hintergrundbilds nach Oben links verschieben.
Schauen wir uns nun das Ergebnis an.
Erstellen von Rundschreiben-Modulen
Lassen Sie uns nun einige kreisförmige Klappentexte auf diesem Layout erstellen. Verwenden wir für dieses Beispiel die vier Klappenmodule unter dem Abschnitt „Unsere Produkte“. Wenn Sie es gefunden haben, öffnen Sie die Einstellungen des Klappenmoduls oben in Spalte 2.
Aktualisieren Sie dann die Größe des Moduls wie folgt:
Bildbreite: 7vw
Breite: 50vw (Desktop), 80vw (Telefon)
Maximale Breite: 400px
Modulausrichtung: Mitte
Höhe: 50vw (Desktop), 80vw (Telefon)
Maximale Höhe: 400px
Als nächstes fügen Sie Ihren Randradius oder abgerundeten Ecken hinzu:
Abgerundete Ecken: 50%
Danach aktualisieren wir das Inhaltsdesign und den Abstand wie folgt:
Bild-/Symbolplatzierung: Oben
Titeltextgröße: 2vw (Desktop), 20px (Tablet)
Textausrichtung: Mitte
Benutzerdefinierte Polsterung: 0vw oben, 0vw unten, 4vw links, 4vw rechts
Lassen Sie uns schließlich den Inhalt mithilfe der flex-Eigenschaft vertikal ausrichten, indem wir das folgende benutzerdefinierte CSS zum Hauptelement hinzufügen:
display: flex; align-items: center;
Kreisstil auf alle Klappentexte im Abschnitt erweitern
Das kümmert sich um das zirkuläre Design für unser erstes Modul. Jetzt müssen wir nur noch die Designeinstellungen des Klappenmoduls auf die verbleibenden drei Klappen im Abschnitt erweitern. Klicken Sie dazu mit der rechten Maustaste auf das soeben entworfene Blurb-Modul und wählen Sie „Blurb-Stile erweitern“. Wählen Sie im Popup-Fenster „Stile erweitern“ aus, um den Stil über den gesamten Abschnitt zu erweitern.
Endergebnis
Schauen wir uns nun das Endergebnis an.
Abschließende Gedanken
Ich hoffe, Sie haben ein paar hilfreiche Tipps zum Erstellen von kreisförmigen Elementen in Divi gelernt. Wenn Sie drei grundlegende Schritte verstehen und die Längeneinheiten richtig verwenden, um Ihr Element zu dimensionieren und zu verteilen, können Sie das gesuchte kreisförmige Design ziemlich einfach erstellen. Und es kann wirklich Spaß machen, einige kreisförmige Elemente in ein vorhandenes oder vorgefertigtes Divi-Layout zu integrieren. Fühlen Sie sich frei, runde Module, Reihen oder sogar ganze Abschnitte zu erstellen!
Ich freue mich von Ihnen in den Kommentaren zu hören.
Danke schön!