Möchten Sie ein responsives Bildraster-Layout mit erstellen DIVI ?
Der Erbauer Divi hat fantastische eingebaute Module, die Rasteransichten verwenden,
Aber manchmal möchten Sie vielleicht Ihr eigenes benutzerdefiniertes Bildrasterlayout mit CTA-Links erstellen. Dies gibt Ihnen mehr Kontrolle über das Design und Inhalt die Sie für jedes Rasterelement anzeigen möchten, ohne auf ein Plugin zurückgreifen zu müssen.
Heute zeigen wir Ihnen, wie Sie mithilfe der integrierten Designoptionen von ein responsives Bildrasterlayout mit CTA-Links erstellen Divi.
Lassen Sie uns beginnen!
Übersicht
Hier ist ein kurzer Überblick über das Ergebnis, das wir am Ende dieses Tutorials erhalten werden.
Erstellen Sie eine Seite mit Divi Theme Builder
Erstellen Sie im WordPress-Dashboard eine neue Webseite, indem Sie zu gehen Seiten >> Hinzufügen
Siehe auch: Wie erstelle ich ein Schiebe- und Push-Menü in DIVI?
Geben Sie Ihrer Seite dann einen Titel und klicken Sie dann auf " Verwenden Sie Divi Builder ".
Klicken Sie dann auf " anfangen zu bauen«
Erstellen des speziellen Abschnittslayouts
Fügen Sie einen neuen Abschnitt hinzu "Spezialität". Layout der linken Seitenleiste ein Drittel zwei Drittel.
Wählen Sie das Layout der Spalten wie im folgenden Screenshot gezeigt:
Löschen Sie den Standardabschnitt, sodass nur der neue spezialisierte Abschnitt übrig bleibt.
Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe wie folgt:
- Hintergrund: #84dbda
Unter der Registerkarte Design, aktualisieren Sie die folgenden Optionen:
- Spaltenhöhen ausgleichen: JA
- Benutzerdefinierte Bundstegbreite verwenden: JA
- Dachrinnenbreite: 1
- Innenbreite: 100%
Lesen Sie auch: Wie veröffentliche ich Blog-Beiträge in DIVI?
- Maximale Innenbreite: 1 Pixel (Desktop), 080 Pixel (Tablet und Telefon)
- Interner Rand (oben und unten): 12vh
- Spalte 1 Polsterung (oben und unten): 0px
Wenn die Abschnittsstile vorhanden sind, fügen Sie dem Abschnitt eine einspaltige Zeile hinzu.
Leitungseinstellungen
Aktualisieren Sie die Linienparameter wie folgt:
- Benutzerdefinierte Bundstegbreite verwenden: JA
- Spaltenabstand: 1
- Spaltenhöhen harmonisieren: JA
- Interner Rand (oben und unten): 0px
Erstellen Sie eine zweite Linie, indem Sie die erste duplizieren.
Ändern Sie dann die doppelte Zeile in ein zweispaltiges Layout.
Hinzufügen von Bildern als Spaltenhintergrundbilder
Jetzt, da alle Zeilen und Spalten vorhanden sind, können wir unsere Bilder zu unserem Rasterlayout hinzufügen.
Um sicherzustellen, dass die Bilder im Rasterlayout responsive sind, fügen wir jedes unserer Bilder als Hintergrundbilder zu jeder der vier Spalten im Abschnitt hinzu.
Da jedes Hintergrundbild eine Hintergrundgröße von hat " Startseite ", füllt das Bild beim Anpassen der Browsergröße immer die gesamte Spalte aus.
Hintergrundbild der Spalte der obersten Zeile
Öffnen Sie zunächst die Spalteneinstellungen der obersten Zeile.
Fügen Sie dann der Spalte ein Hintergrundbild hinzu.
Hintergrundbilder der Spalte in der unteren Zeile
Öffnen Sie als nächstes die Einstellungen für Spalte 1 in der zweiten (untersten) Zeile und fügen Sie auch dieser Spalte ein Hintergrundbild hinzu.
Fügen Sie als Nächstes ein Hintergrundbild zu Spalte 2 derselben Zeile hinzu.
Abschnitt Spalte 1 Hintergrundbild
Öffnen Sie schließlich die Abschnittseinstellungen "Spezialität" und fügen Sie Spalte 1 ein Hintergrundbild hinzu.
Hinzufügen des „Call to Action“-Moduls, das die Bilder jeder Spalte überlagert
Nachdem unsere Hintergrundbilder nun zu jeder Spalte des Rasterlayouts hinzugefügt wurden, fügen wir jeder Spalte ein „Call to Action“-Modul hinzu.
Durch die Verwendung eines „Call to Action“-Modul-Overlays auf dem Hintergrundbild der Spalte können Sie ganz einfach benutzerdefinierte Hintergrund-Overlay-Stile und Hover-Effekte zum Hintergrundbild der Spalte hinzufügen.
Für dieses Beispiel verwenden wir lediglich das Schaltflächenelement aus dem Action Call-Modul, Sie können es jedoch problemlos ergänzen Inhalt des Titels oder Textes über der Schaltfläche.
Wir werden das erste „Call to Action“-Modul in der Spalte der obersten Zeile hinzufügen.
Inhalt
Aktualisieren Sie die Einstellungen des „Call to Action“-Moduls wie folgt:
- Titeltext entfernen
- Textkörper löschen
- Button-Link-URL: #
ANMERKUNG : Das Hinzufügen eines „#“ für die Link-URL der Schaltfläche ist vorerst nur ein Füllzeichen, damit die Schaltfläche angezeigt wird. Wenn Sie beim Hover die halbtransparente Hintergrundfarbe hinzufügen, erhalten Sie eine schöne benutzerdefinierte Überlagerungsfarbe, wenn Sie mit der Maus über das Modul (und das Bild dahinter) fahren.
- Hintergrundfarbe: transparent (Desktop), rgba (255,235,77,0.5) (Hover)
Schaltflächenstile
Gehen Sie zur Registerkarte Design und ändern Sie die Schaltflächeneinstellungen des Moduls "Call to Action" wie folgt:
- Verwenden Sie benutzerdefinierte Stile für die Schaltfläche: JA
- Schaltflächentextgröße: 22px
- Textfarbe der Schaltfläche: #ffeb4d
- Hintergrundschaltfläche: #000000 (Desktop), #ec5f00 (Hover)
Siehe auch: So erstellen Sie ein Schiebe- und Push-Menü in DIVI
- Rahmenbreite der Schaltfläche: 0 Pixel
- Randradius der Schaltfläche: 100 px
- Schaltflächenschriftart: Treibsand
- Taste für schwaches Licht: Halb fett
- Polsterungstaste: 0,5 m oben, 0,5 m unten, 2 m links, 2 m rechts
Größe, Polsterung und Einfassung
Als nächstes müssen wir sicherstellen, dass unser Modul eine bestimmte Höhe hat, um das Hintergrundbild der dahinter liegenden Spalte freizulegen.
Dazu fügen wir dem Modul interne Ränder (oben und unten) hinzu.
Wir werden dem Modul auch einen subtilen Rand hinzufügen, um es ein wenig von anderen Bildern im Rasterlayout zu trennen.
Wenden Sie die folgenden Einstellungen an:
- Breite: 100%
- Interner Rand (oben und unten): 15vh
- Breite des unteren Randes: 5px
- Linke Randbreite: 5px
- Rahmenfarbe: rgba (255,255,255,0.5)
ANMERKUNG : Die Verwendung der Längeneinheit vh zum Auffüllen macht den Auffüllwert relativ zur Höhe des Browser-Darstellungsfensters. Ihre Bildrasterelemente werden also proportional zum Browserfenster in der Höhe wachsen und schrumpfen.
Vertikale Zentrierung des Inhalts des „Call to Action“-Moduls
Um sicherzustellen, dass die Inhalt Da das Modul „Action Call“ vertikal zentriert bleibt, können wir mithilfe der Flex-Eigenschaft einen kleinen Ausschnitt benutzerdefinierten CSS hinzufügen.
Fügen Sie auf der Registerkarte Erweitert dem Hauptelement das folgende CSS hinzu:
display:flex;
flex-direction:column;
justify-content:center;
Call-to-Action-Overlay zu anderen Spalten hinzugefügt
Nachdem das erste „Call to Action“-Modul angepasst wurde, kopieren Sie das Modul und fügen Sie es in die anderen 3 Spalten des Layouts ein, einschließlich der 2 Spalten in der unteren Zeile und Spalte 1 im Abschnitt.
Damit das „Call to Action“-Modul die gesamte Höhe der Spalte 1 im Fachbereich abdeckt, setzen Sie die Mindesthöhe auf 100 %.
- Mindesthöhe: 100 %
Es ist vorbei ! Mal sehen, das Endergebnis.
Endergebnis
Hier ist das Endergebnis des responsiven Bildrasterlayouts auf einer Webseite mit den Hover-Effekten.
Und so reagiert Grid beim Anpassen der Browsergröße.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Responsive Bildraster-Layouts sind nach wie vor ein beliebter Aspekt vieler Websites. Die visuelle Attraktivität des Hintergrundbilds in Kombination mit dem Call-to-Action-Overlay kann diese wichtigen Navigationslinks wirklich hervorheben.
Außerdem sieht die reaktionsschnelle Art des Bildrasterlayouts auf allen Geräten gut aus, was immer eine Notwendigkeit ist.
Wir hoffen, dass dieser Leitfaden Ihnen bei Ihren zukünftigen Schaffensprojekten nützlich sein wird Website. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich aber auch beraten unsere Ressourcen wenn Sie weitere Elemente benötigen, um Ihre Website-Erstellungsprojekte abzuschließen.
Sie können auch unserem Leitfaden folgen WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
