6 einzigartige Rahmendesigns für Ihre Divi-Galerie-Modulbilder
Veröffentlicht: 2019-02-28Das Divi-Galerie-Modul ist ein großartiger Ort, um eine Bildergalerie auf Ihrer Website zu präsentieren. Standardmäßig zeigt das Galeriemodul Ihre Bilder in einem Rasterlayout ohne viel Styling an, was großartig ist, um die Bilder als primäres Designelement zu behalten. Wenn Sie jedoch ein wenig kreativ werden möchten, können Sie Ihre Bilder mit verschiedenen Rahmendesigns einrahmen, um Ihre Bildergalerie hervorzuheben. Das Galerie-Modul macht diesen Vorgang ziemlich einfach und die Ergebnisse können Sie überraschen.
In diesem Tutorial zeige ich Ihnen, wie Sie mit dem Divi Gallery-Modul einzigartige Rahmendesigns für Ihre Bildergalerien erstellen.
Lass uns anfangen!
Vorgeschmack
#1 Polaroid-Bildergalerie
Beginnen Sie mit dem Bauen von Design Nr. 1
#2 Sauberes Gitterdesign
Beginnen Sie mit dem Bauen von Design #2
#3 Benutzerdefiniertes Hintergrundbild hinter der gesamten Galerie
Beginnen Sie mit dem Bauentwurf #3
#4 Benutzerdefiniertes Hintergrundbild hinter jedem Galerieelement
Beginnen Sie mit dem Bauen von Design #4
#5 Box-Schatten- und Rahmen-Kombination
Beginnen Sie mit dem Bauen von Design #5
#6 Filmstreifen-Rand-Design
Beginnen Sie mit dem Bauentwurf #6
Was Sie brauchen, um loszulegen
Abonnieren Sie unseren Youtube-Kanal
Für dieses Tutorial muss das Divi-Theme installiert und aktiv sein. Sie benötigen außerdem 12 Bilder, die Ihrer Medienbibliothek hinzugefügt wurden, um sie für den Aufbau der Bildergalerie zu verwenden. Für ein Divi-Galerie-Modul, das ein Raster-Layout verwendet, sollte die Größe Ihrer Bilder etwa 1500 x 800 Pixel betragen, wenn Sie planen, dass Ihre Bilder in der Lightbox-Anzeige geöffnet werden, damit sie den Bildschirm auf den meisten Desktops gut ausfüllen.
Einrichten Ihrer neuen Seite
Zunächst müssen Sie eine neue Seite erstellen, Ihrer Seite einen Titel geben und den Divi Builder bereitstellen. Wählen Sie die Option „Build from Scratch“ und veröffentlichen Sie dann Ihre Seite. Klicken Sie dann auf , um auf dem Frontend zu bauen.
Speichern einer Divi-Galerie-Modul-Vorlage
Da wir 5 verschiedene Rahmenstile für das Divi Gallery-Modul entwerfen werden, wäre es hilfreich, eine grundlegende Galeriemodul-Vorlage in unserer Bibliothek zu speichern, damit wir nicht jedes Mal bei Null anfangen müssen, wenn wir eine neue Galerie entwerfen .
Erstellen Sie einen neuen Abschnitt mit einer einspaltigen Zeile und fügen Sie dann das Galeriemodul zur Zeile hinzu.
Divi füllt das Galeriemodul mit einigen Bildern aus Ihrer Mediengalerie in einer Rasteranzeige wie der folgenden:
Klicken Sie in den Einstellungen des Galeriemoduls auf das graue Plus-Symbol, um der Galerie 12 Bilder hinzuzufügen. Ich verwende Bilder aus dem Seitenlayout der Restaurantgalerie.
Aktualisieren Sie dann die Einstellungen des Divi Gallery-Moduls wie folgt:
Anzahl der Bilder: 12
Titel und Bildunterschrift anzeigen: NEIN
Paginierung anzeigen: NEIN
Dies wird als eine gute Vorlage für die Zukunft funktionieren. Um das Galeriemodul in Ihrer Divi-Bibliothek zu speichern, klicken Sie im grauen Modulmenü auf das Symbol In Bibliothek speichern, wenn Sie mit der Maus über das Modul fahren. Benennen Sie dann die Vorlage „Gallery Module Template“ und speichern Sie sie in der Bibliothek.
Wenn Sie das gespeicherte Galeriemodul zu Ihrer Seite hinzufügen möchten, müssen Sie nur klicken, um wie gewohnt ein neues Modul hinzuzufügen. Wählen Sie dann im Popup die Registerkarte Aus Bibliothek hinzufügen und klicken Sie auf das Galeriemodul mit dem Namen „Gallery Module Template“.
Das ist es. Kommen wir nun zu diesen Grenzdesigns!
#1 Polaroid-Bildergalerie
Dieses nächste Design ist ein beliebter Rahmen für Bilder, die wie ein Polaroid-Bild aussehen. Dieses Layout ist besonders nützlich, wenn Sie Ihre Bildtitel anzeigen möchten.
So geht's.
Abschnittseinstellungen
Erstellen Sie einen neuen regulären Abschnitt mit einer einspaltigen Zeile. Fügen Sie dann die gespeicherte Divi Gallery-Modulvorlage aus der Bibliothek hinzu (siehe oben). Bevor Sie das Galeriemodul bearbeiten, öffnen Sie die Abschnittseinstellungen und fügen Sie eine graue Hintergrundfarbe hinzu, damit unsere weißen Ränder ein wenig hervortreten.
Hintergrund: #dddddd
Zeileneinstellungen
Aktualisieren Sie als Nächstes die Zeileneinstellungen wie folgt:
Dachrinnenbreite: 1
Dadurch wird der standardmäßige Randabstand zwischen den Bildern aufgehoben. Wir werden später unseren eigenen benutzerdefinierten Abstand hinzufügen.
Einstellungen des Galeriemoduls
Öffnen Sie die Einstellungen des Galeriemoduls und aktualisieren Sie Folgendes:
Titel und Bildunterschrift anzeigen: JA
Schriftstärke des Titels: Fett
Titelschriftart: TT
Ausrichtung des Titeltextes: Mitte
Höhe der Titelzeile: 2em
Breite des oberen Bildrands: 10px
Farbe des oberen Bildrands: #ffffff
Bildbreite linker Rand: 10px
Farbe des linken Rands des Bildes: #ffffff
Breite des rechten Rands des Bildes: 10px
Farbe des rechten Bildrands: #ffffff
Um einen Abstand zwischen unseren Bildern zu schaffen, fügen Sie den Galerieelementen den folgenden Rahmen hinzu:
Rahmenbreite: 10px
Rahmenfarbe: #dddddd (entspricht der Farbe des Abschnittshintergrunds)
Um den unteren Teil unseres Polaroid-Rahmendesigns einzufärben, müssen wir dem Modul einen weißen Hintergrund hinzufügen.
Hintergrundfarbe: #ffffff
Endergebnis
Hier ist das Endergebnis des Polaroid-Rahmendesigns.
#2 Sauberes Gitterdesign
Wenn Sie nach einem einfachen und sauberen Rasterstil für Ihre Bilder suchen, ist dieses Rahmendesign eine gute Option. Es ist gut ausbalanciert und angenehm für die Augen.
So geht's.
Erstellen Sie einen neuen regulären Abschnitt mit einer einspaltigen Zeile. Fügen Sie dann die gespeicherte Divi Gallery-Modulvorlage aus der Bibliothek hinzu (siehe oben).
Zeileneinstellungen
Öffnen Sie vor dem Bearbeiten des Galeriemoduls die Abschnittseinstellungen und aktualisieren Sie Folgendes:
Dachrinnenbreite: 1
Benutzerdefiniertes Padding: 0px oben, 0px unten
Rahmenbreite: 10px
Rahmenfarbe: #dddddd
Dieser Zeilenrahmen ist notwendig, um den äußeren Abstand unserer Galerie mit dem Abstand zwischen den Bildern abzugleichen.
Einstellungen des Galeriemoduls
Öffnen Sie nun die Einstellungen des Galeriemoduls und fügen Sie Ihren Galerieelementen und Ihren Galeriebildern einen Rahmen hinzu, indem Sie Folgendes aktualisieren:
Bildrandbreite: 20px
Farbe des Bildrahmens: #ffffff
Rahmenbreite: 10px
Rahmenfarbe: transparent (dies ist wichtig, um die Hintergrundfarbe anzuzeigen)
Fügen Sie dem Galeriemodul nun eine Hintergrundfarbe hinzu, um das Design zu vervollständigen.
Hintergrundfarbe: #dddddd (dies entspricht der Zeilenrandfarbe)
Da Ihr Galerieelementrahmen transparent ist, übernimmt er die Farbe des Hintergrunds.
Endgültiges Design
Ändern der Rahmenfarben durch Ändern der Hintergrundfarbe
Wenn Sie mit verschiedenen Rahmenfarben herumspielen möchten, können Sie die Hintergrundfarbe beliebig aktualisieren. Sie müssen jedoch den Zeilenrand entfernen und dem Modul den folgenden Abstand hinzufügen:
Benutzerdefiniertes Padding: 10 Pixel oben, 10 Pixel unten, 10 Pixel links, 10 Pixel rechts
Jetzt können Sie die Hintergrundfarbe nach Belieben anpassen:
#3 Benutzerdefiniertes Hintergrundbild hinter der gesamten Galerie
Dieses Design ermöglicht es Ihnen, ein Hintergrundbild als eine Art Texturhintergrund für die Ränder Ihrer Bilder zu verwenden. Dies ist eine schöne Möglichkeit, jeden Bildrahmen einzigartig zu machen, da er einen bestimmten Bereich des Hintergrundbilds des Moduls zeigt. Das Setup ist dem oben genannten Clean Grid Design sehr ähnlich.
So geht's.
Erstellen Sie einen neuen regulären Abschnitt mit einer einspaltigen Zeile. Fügen Sie dann die gespeicherte Divi Gallery-Modulvorlage aus der Bibliothek hinzu (siehe oben).
Zeileneinstellungen
Öffnen Sie vor dem Bearbeiten des Galeriemoduls die Abschnittseinstellungen und aktualisieren Sie Folgendes:
Dachrinnenbreite: 1
Benutzerdefiniertes Padding: 0px oben, 0px unten
Einstellungen des Galeriemoduls
Aktualisieren Sie nun die Einstellungen des Galeriemoduls wie folgt:
Hintergrundbild: [Bild hinzufügen] (Sie können es noch nicht sehen)
Hintergrundfarbe: #dddddd (wird nur angezeigt, wenn Sie ein PNG-Hintergrundbild mit Transparenz verwenden)
Bildrandbreite: 10px
Farbe des Bildrands: #ffffff
Rahmenbreite (für Modul): 10px
Rahmenfarbe: #ffffff
Fügen Sie dann das folgende benutzerdefinierte CSS zum Galerieelement hinzu:
padding: 3%;
Dadurch wird die Trennung zwischen den Galerieelementen erstellt, um das Design zu vervollständigen.
Endergebnis
#4 Benutzerdefiniertes Hintergrundbild hinter jedem Galerieelement
Dieses Design ermöglicht es Ihnen, ein Hintergrundbild als Rahmen für jedes Galerieelement einzeln zu verwenden. Sie können jedes beliebige benutzerdefinierte Bild erstellen oder eines der Hintergrundbilder verwenden, die in unseren vorgefertigten Layouts enthalten sind. Ich verwende eines aus dem Meetup-Landing-Page-Layout.
So geht's.
Erstellen Sie einen neuen regulären Abschnitt mit einer einspaltigen Zeile. Fügen Sie dann die gespeicherte Divi Gallery-Modulvorlage aus der Bibliothek hinzu (siehe oben).
Zeileneinstellungen
Öffnen Sie vor dem Bearbeiten des Galeriemoduls die Abschnittseinstellungen und aktualisieren Sie Folgendes:
Machen Sie diese Zeile in voller Breite: JA
Dachrinnenbreite: 2
Einstellungen des Galeriemoduls
Aktualisieren Sie nun die Einstellungen des Galeriemoduls wie folgt:
Bildrandbreite: 10px
Farbe des Bildrands: #ffffff
Fügen Sie dann das folgende benutzerdefinierte CSS zum Galerieelement hinzu:
padding: 30px; background-image: url(""); background-size: contain; background-repeat: no-repeat; background-position: right;
Als nächstes müssen Sie das benutzerdefinierte Hintergrundbild hochladen, das Sie hinter jedem Ihrer Galerieelemente platzieren möchten. Für dieses Beispiel verwende ich ein Bild aus einem unserer vorgefertigten Layoutpakete. Nachdem das Bild in die WordPress-Mediengalerie hochgeladen wurde, kopieren Sie die Bild-URL in Ihre Zwischenablage.
Gehen Sie nun zurück und öffnen Sie die Einstellungen des Galeriemoduls und fügen Sie die URL in das benutzerdefinierte CSS ein, wo es heißt „Bild-URL hier einfügen“. Stellen Sie sicher, dass Sie die URL innerhalb der Zitate beibehalten.
Endergebnis
Hier ist das Endergebnis.
#5 Box-Schatten- und Rahmen-Kombination
Box-Schatten eignen sich hervorragend, um Ihrer Galerie ein individuelles Flair zu verleihen. Sie können Kastenschatten auf den Bildern des Divi-Galeriemoduls verwenden, um ein unterbrochenes Rasterdesign zu erstellen, das die Bilder auf einzigartige Weise umrahmt. Sie können den Kastenschatten auch mit Bordürendesigns für alle möglichen Möglichkeiten kombinieren.
So geht's.
Erstellen Sie einen neuen regulären Abschnitt mit einer einspaltigen Zeile. Fügen Sie dann die gespeicherte Divi Gallery-Modulvorlage aus der Bibliothek hinzu (siehe oben).
Bildrahmen und Boxschatten hinzufügen
Öffnen Sie die Galerieeinstellungen und aktualisieren Sie Folgendes:
Bildrandbreite: 10px
Farbe des Bildrands: #ffffff
Image Box Shadow: siehe Screenshot
Horizontale Position des Boxschattens: -30px
Vertikale Position des Kastenschattens: -30px
Stärke der Box-Schattenausbreitung: -10px
Schattenfarbe: #e08474
Fügen Sie den Rahmen für Galerieelemente hinzu
Das Box-Schatten-Design sieht gut aus, wie es jetzt ist. Sie können Ihrem Galerieelement jedoch auch einen zusätzlichen Rahmen hinzufügen, indem Sie Folgendes aktualisieren:
Breite des rechten Rands: 7px
Farbe des rechten Rands: #dddddd
Rechter Rahmenstil: Gepunktet
Breite des unteren Rands: 7px
Farbe des unteren Rands: #dddddd
Unterer Randstil: Gepunktet
Ich habe einen gepunkteten Rahmen hinzugefügt, um Sie an die verschiedenen verfügbaren Stile zu erinnern. Fühlen Sie sich frei, andere Stile zu verwenden (wie durchgezogen oder gestrichelt).
Zeileneinstellungen
Um Ihrem Design mehr Raum zu geben, öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:
Machen Sie die volle Breite der Zeile: JA
Endgültiges Design
Hier ist das endgültige Design.
# 6: Filmstreifen-Rand-Design
Für dieses letzte Design dachte ich, ich würde Ihnen etwas Einzigartigeres zeigen. Dieses Design verwendet nur auf der rechten und linken Seite der Galerieelemente einen gestrichelten Rahmen, der jede Bildspalte so teilt, dass sie Filmstreifen ähnelt.
So geht's.
Erstellen Sie einen neuen regulären Abschnitt mit einer einspaltigen Zeile. Fügen Sie dann die gespeicherte Divi Gallery-Modulvorlage aus der Bibliothek hinzu (siehe oben).
Zeileneinstellungen
Öffnen Sie vor dem Bearbeiten des Galeriemoduls die Zeileneinstellungen und ändern Sie die Bundstegbreite auf 1.
Dachrinnenbreite: 1
Dadurch wird der standardmäßige Randabstand zwischen Ihren Bildern aufgehoben.
Einstellungen des Galeriemoduls
Öffnen Sie als Nächstes die Galerieeinstellungen und aktualisieren Sie Folgendes:
Gestrichelte Bildränder hinzufügen
Bildbreite am rechten Rand: 8px
Farbe des rechten Bildrands: #dddddd
Stil des rechten Bildrands: Gestrichelt
Bildbreite linker Rand: 8px
Farbe des linken Bildrands: #dddddd
Stil des linken Bildrands: Gestrichelt
Fügen Sie einen Rahmen für Galerieelemente für den Abstand hinzu
Breite des linken Rands: 20px
Farbe des linken Rands: #ffffff
Breite des rechten Rands: 20px
Farbe des rechten Rands: #ffffff
Bildrahmenschatten hinzufügen
Image Box Shadow: siehe Screenshot
Stärke der Box-Schattenunschärfe: 0px
Stärke der Box-Schattenausbreitung: -10px
Schattenfarbe: #222222
Hintergrundfarbe hinzufügen
Hintergrundfarbe: #222222
Fügen Sie dann das folgende benutzerdefinierte CSS zum Galerieelement hinzu:
padding: 5px 10px;
Das Endergebnis
Sehen Sie sich nun das Ergebnis an.
Abschließende Gedanken
Ich hoffe, dass diese sechs Rahmendesign-Beispiele einige Inspirationen für die Erstellung benutzerdefinierter Rahmendesigns für Ihre Bilder liefern, wenn Sie das Divi Gallery-Modul verwenden. Sobald Sie die mit dem Divi Gallery-Modul verfügbaren Einstellungen in den Griff bekommen haben, ist nur ein wenig Kreativität erforderlich. Viel Spaß beim Erkunden neuer Designoptionen mit verschiedenen Bildern, Farben und Abständen.
Ich freue mich von Ihnen in den Kommentaren zu hören.
Danke schön!