Einfache und kreative Möglichkeiten zur Anzeige von Firmenlogos in Divi

Es gibt viele Gründe, Firmenlogos auf Ihrer Website anzuzeigen. Ein „Featured In“-Bereich von Firmenlogos könnte für potenzielle Investoren oder Partner wichtig sein. Oder ein Abschnitt „Unsere Kunden einbeziehen“ könnte bei Besuchern einen wertvollen sozialen Beweis erbringen. Aber was auch immer der Grund ist, es ist wichtig zu wissen, wie Sie diese Logos zu Ihrer Website hinzufügen. In diesem Tutorial werde ich drei verschiedene Methoden zum Hinzufügen von Firmenlogos zu Ihrer Website mit Divi durchgehen. Ich zeige Ihnen sogar, wie Sie jedem Divi-Modul Logo-Galerien hinzufügen!

Folgendes wird in diesem Tutorial behandelt:

• Vorbereiten Ihrer Logobilder
• Verwenden des Divi Gallery-Moduls zum Anzeigen von Logos durch einfaches Ziehen und Ablegen
• Verwenden der WordPress-Galerieeinbettung zum Anzeigen von Logos
• Verwenden des Divi Builder zum Erstellen eines benutzerdefinierten Layouts für Logos

Lass uns anfangen!

Vorgeschmack

Hier ist ein Blick auf einige der Designs, die mit den Techniken in diesem Tutorial möglich sind.

Vorbereitung Ihrer Logobilder

Wenn Sie Ihre Logos für die Anzeige auf Ihrer Website vorbereiten, ist es wichtig, dass Sie sich die Zeit nehmen, Ihre Bilder mit einem Fotoeditor zu dimensionieren, bevor Sie sie zu Ihrer Website hinzufügen. Dies erspart Ihnen die Mühe, Ihre Logos mit benutzerdefinierten Breiten, Auffüllungen oder Rändern zu dimensionieren und zu positionieren. Vertrau mir. Sie wollen diesen Weg nicht gehen, wenn Sie nicht müssen.

Da jedes Logo eine einzigartige Größe hat, ist es so gut wie unmöglich, sie alle mit den genauen Abmessungen zu versehen. Hier kommt ein Bildbearbeitungsprogramm zum Einsatz. Mit Photoshop können Sie beispielsweise eine neue Datei erstellen und die Dokumentabmessungen auf die gewünschte Größe für alle Ihre Logobilder festlegen (in diesem Fall 226 x 100 Pixel).

Fügen Sie dann das Logobild zum Dokument hinzu und ändern Sie die Größe und positionieren Sie das Bild direkt in der Mitte. Stellen Sie sicher, dass es sich um eine PNG-Bilddatei mit transparentem Hintergrund handelt.

Exportieren Sie dann das Bild als PNG-Datei, um den transparenten Hintergrund beizubehalten.

Wiederholen Sie dann den Vorgang für den Rest Ihrer Logos.

Sie können die Originalfarbe des Logos beibehalten oder mit einem Bildbearbeitungsprogramm in die gewünschte Farbe ändern. Wenn Sie planen, Ihre Logos mit einem Divi hinzuzufügen (dh dem Bildmodul oder der Bildergalerie), können Sie jederzeit auch die integrierten Filtereffekte von Divi verwenden, um die Farben anzupassen.

Abonnieren Sie unseren Youtube-Kanal

#1 Verwenden des Divi-Galerie-Moduls zum Anzeigen von Firmenlogos (einfaches Ziehen und Ablegen)

Diese erste Methode zum Hinzufügen von Firmenlogos zu Ihrer Website mit Divi ist ziemlich einfach. Mit der Drag-and-Drop-Funktion von Divi können Sie alle Firmenlogos in den Divi Builder ziehen, um sofort eine Bildergalerie zu erstellen, um Ihre Logos in einem Raster anzuzeigen.

Erstellen Sie dazu eine neue Seite und stellen Sie den Divi Builder bereit, um das Frontend zu erstellen. Wählen Sie die Option „Von Grund auf neu erstellen“. Sobald der Divi-Builder gestartet ist und ausgeführt wird, öffnen Sie den Ordner, der alle Ihre Bilder enthält, und wählen Sie sie aus. Ziehen Sie sie dann einfach mit dem Divi Builder in das Browserfenster.

Divi fügt diese Bilder automatisch einem neuen Galeriemodul hinzu und öffnet die Galerieeinstellungen, um den Anpassungsprozess für Sie zu starten.

Da ich 8 Logobilder hinzufüge und keine Titel, Bildunterschriften oder Paginierung anzeigen möchte, kann ich Folgendes aktualisieren:

Anzahl der Bilder: 8
Titel und Bildunterschrift anzeigen: NEIN
Paginierung anzeigen: NEIN

Standardmäßig fügt das Galeriemodul für jedes Bild ein Hover-Overlay mit einem Symbol hinzu. Sie können die Overlay-Einstellungen für die Farbe des Zoomsymbols, die Farbe des Hover-Overlays oder das Hover-Symbol anpassen.

Um die Dinge sauber und einfach zu halten, können Sie das Hover-Overlay entfernen, indem Sie die Zoom-Symbolfarbe und die Hover-Overlay-Farbe auf transparent setzen.

Danach können Sie alle Designoptionen erkunden, um einzigartige Designs für Ihre Bildergalerie zu erstellen. Sie können beispielsweise einen Rahmen mit einem subtilen Kastenschatten hinzufügen.

Bildrandbreite: 1px
Farbe des Bildrands: #dddddd
Image Box Shadow: siehe Screenshot

So würde das endgültige Design in verschiedenen Browsergrößen aussehen.

Und weil diese Galerie jeder Spaltenstruktur hinzugefügt werden kann, können Sie ganz einfach einzigartige Layouts für Ihre Firmenlogos erstellen. Hier ist ein Beispiel für ein zweispaltiges Layout mit einem Textmodul links und dem Bildergaleriemodul (mit den Logos) rechts. Ich habe einen Hintergrundverlauf hinzugefügt, um Ihnen ein anderes Aussehen zu zeigen.

#2 Verwenden der WordPress-Galerie-Einbettung zum Anzeigen von Firmenlogos (mit jedem Divi-Modul)

Sie können Ihrer Website auch Firmenlogos hinzufügen, indem Sie den Shortcode für die WordPress-Bildergalerie verwenden. Dies ist überraschend einfach und eignet sich perfekt für Logos, da Sie in den meisten Fällen keine benutzerdefinierten Stile zu den Bildern hinzufügen müssen. Das Tolle an dieser Methode ist, dass Sie bis zu 9 Spalten für Ihre Logos bereitstellen können, die mit Ihrem Browserfenster skalieren, sodass Sie Ihre Spaltenstruktur auch auf Mobilgeräten beibehalten können.

Hier ist, wie es geht.

Erstellen Sie im Divi Builder einen neuen Abschnitt mit einer Viertel-Dreiviertel-Spaltenstruktur.

Angenommen, Sie möchten einen Text links neben Ihren Firmenlogos in einer sechsspaltigen Galerie haben. Fügen Sie zunächst in der linken Spalte einen Textbaustein hinzu und aktualisieren Sie Folgendes:

Inhalt: „Wie vorgestellt in“
Textschriftart: Montserrat
Schriftstärke des Textes: Fett
Text Textgröße: 26px
Textausrichtung: Mitte

Fügen Sie nun in der rechten Spalte einen weiteren Textbaustein hinzu. Löschen Sie auf der Registerkarte "Inhalt" den derzeit vorhandenen Scheininhalt und klicken Sie oben im Inhaltseditorfeld auf die Schaltfläche "Medien hinzufügen".

Dadurch wird das Mediengalerie-Popup angezeigt. Klicken Sie anschließend links im Popup auf den Link Galerie erstellen. Wählen Sie dann die Logobilder aus, die Sie in die Galerie aufnehmen möchten (in diesem Beispiel verwende ich acht Bilder). Klicken Sie auf die Schaltfläche Galerie erstellen.

Dadurch wird die Seite Galerie bearbeiten im Popup angezeigt. Aktualisieren Sie die Galerieeinstellungen in der rechten Seitenleiste wie folgt:

Link zu: Keine
Spalten: 8 (dies sollte der Anzahl der Bilder in der Galerie entsprechen, damit sie in einer Zeile bleiben)
Größe: Volle Größe

Klicken Sie dann auf die Schaltfläche Neue Galerie erstellen.

Dadurch wird der in WordPress integrierte Galerie-Shortcode eingebettet und die Galerie im Textmodul angezeigt.

Öffnen Sie nun die Zeileneinstellungen und aktualisieren Sie Folgendes:

Machen Sie diese Zeile in voller Breite: JA
Benutzerdefinierte Dachrinnenbreite verwenden: JA
Dachrinnenbreite: 1
Spaltenhöhen ausgleichen: JA

Mit diesem Setup haben Sie mehr Platz für Ihre Logos zum Atmen. Jetzt müssen Sie nur noch den Text auf der linken Seite so anpassen, dass er vertikal mit den Logos auf der rechten Seite ausgerichtet ist. Um dies zu erreichen, können Sie die erforderliche benutzerdefinierte Auffüllung in die linke Spalte einfügen, aber um sicherzustellen, dass beide Module vertikal zentriert bleiben, können Sie das folgende benutzerdefinierte CSS zum Hauptelement auf der Registerkarte Erweitert Zeileneinstellungen hinzufügen.

align-items: center;

Dieses CSS funktioniert, weil wir Equalize Column Heights auf YES setzen und damit die Eigenschaft „display:flex“ für die Zeile aktivieren. Weitere Informationen hierzu finden Sie unter So richten Sie Inhalte in Divi vertikal aus.

Und um den grauen Rahmen um unsere Bilder zu entfernen, müssen wir unseren Seiteneinstellungen das folgende CSS-Snippet hinzufügen:

.gallery img {
border: none !important;
}

Hier ist das endgültige Design.

Hier ist es mit einem schwarzen Hintergrund, der der Zeile hinzugefügt wurde.

Auf Mobilgeräten werden die Spalten bei keiner Bildschirmgröße unterbrochen. Die Bilder werden einfach auf eine kleinere Größe skaliert. Ich gebe zu. Acht Spalten sind auf dem Smartphone wahrscheinlich zu viel, da die Bilder sehr klein werden.

Einbetten von Logo-Galerien in jedes Divi-Modul

Da es sich um eine Shortcode-Einbettung handelt, können Sie diese Galerie zu fast jedem Divi-Modul hinzufügen, was viele verschiedene Möglichkeiten eröffnet.

Sie können beispielsweise Logobilder in einem Umschalter, einem Akkordeon oder sogar einem Registerkartenmodul hinzufügen.

Hier ist ein Beispiel dafür, wie es aussehen würde, wenn Sie den WordPress-Galerie-Shortcode Ihrer Logos auf zwei verschiedenen Registerkarten hinzufügen.
Für dieses Beispiel habe ich 6 Logos mit 3 Spalten für jede Galerie ausgewählt.

Dies kann für Websites nützlich sein, die viele Logos erfordern.

#3 Verwenden des Divi Builders zum Erstellen eines benutzerdefinierten Layouts für Firmenlogos

Wenn Sie mit Ihren Firmenlogo-Layouts etwas kreativer werden möchten, können Sie mit dem Divi Builder so ziemlich alles entwerfen, was Sie sich vorstellen können. Das Zeilenelement von Divi unterstützt Spaltenlayouts mit bis zu 6 Spalten, was für die meisten Firmenlogo-Layouts mehr als ausreichend ist. Mir gefallen die 6- und 4-spaltigen Layouts am besten für die Logos, zum großen Teil dafür, wie sie auf Mobilgeräten reagieren.

Im folgenden Design zeige ich Ihnen einige Tipps, wie Sie Ihr Firmenlogo-Layout auf die nächste Stufe heben können.

Beginnen wir zunächst damit, einen neuen Abschnitt mit einer sechsspaltigen Zeile zu erstellen.

Bevor wir unseren Spalten etwas hinzufügen, gehen Sie zu den Zeileneinstellungen und aktualisieren Sie Folgendes:

Benutzerdefinierte Breite: 90%
Dachrinnenbreite: 1
Spaltenhöhen ausgleichen: JA

Benutzerdefinierte Polsterung: 4vw oben, 4vw unten

Einstellungen speichern.

Fügen Sie dann Ihrer ersten Spalte ein Bildmodul hinzu und wählen Sie dann eines Ihrer Logobilder aus.

Fügen Sie dann jeder Spalte wie folgt Logobilder hinzu:

Spalte 1: 1 Logo
Spalte 2: 2 Logos
Spalte 3: 3 Logos
Spalte 4: 3 Logos
Spalte 5: 2 Logos
Spalte 6: 1 Logo

Mit diesem Setup können Sie jetzt die vertikale Ausrichtung mithilfe eines benutzerdefinierten CSS-Snippets anpassen. Wenn Sie den Inhalt vertikal zentrieren möchten, können Sie das gleiche CSS-Snippet hinzufügen, das wir zur vertikalen Zentrierung unseres Textes neben der Logo-Galerie in #2 oben hinzugefügt haben. Öffnen Sie die Zeileneinstellungen und fügen Sie das folgende CSS zum Hauptelement hinzu.

align-items: center;

Wie Sie sehen, entsteht dadurch ein abgerundetes Layout für die Logos.

Aber für dieses Layout werde ich die Module am unteren Rand der Reihe ausrichten. Ersetzen Sie also das Snippet „align-items: center“ durch Folgendes:

align-items: flex-end;

Dadurch werden alle Module am unteren Rand der Reihe ausgerichtet, was gut mit den Abschnitten, die wir hinzufügen werden, funktioniert.

Jetzt sind wir bereit, unseren Abschnitt anzupassen. Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

Hintergrund: #2a3443

Top Divider Style: siehe Screenshot
Farbe des oberen Teilers: rgba (255,255,255,0.03)
Höhe des oberen Teilers: 13vw
Top Divider Flip: vertikal

Benutzerdefinierte Polsterung: 0px oben, 0px unten

Für unsere Überschrift erstellen wir einen neuen Abschnitt und platzieren ihn über dem gerade erstellten Abschnitt. Erstellen Sie einen neuen regulären Abschnitt mit einer einspaltigen Zeilenstruktur.

Aktualisieren Sie die Abschnittseinstellungen wie folgt:

Hintergrundfarbe: #2a3443

Unterteiler-Stil: siehe Screenshot
Farbe des unteren Teilers: rgba(238.238.238.0.09)
Höhe des unteren Teilers: 13vw

Benutzerdefinierte Polsterung: 0px unten

Speichern Sie nun Ihre Einstellungen und fügen Sie der Zeile ein Textmodul hinzu und aktualisieren Sie Folgendes:

Fügen Sie für den Inhalt Folgendes hinzu:

<h2>As Featured In</h2>

Überschrift 2 Schriftart: Montserrat
Überschrift 2 Schriftstärke: Fett
Überschrift 2 Textausrichtung: Mitte
Überschrift 2 Textfarbe: #ffffff
Überschrift 2 Textgröße: 32px

Benutzerdefinierter Rand: 0px unten

Fügen Sie schließlich unter dem Textbaustein ein Bildmodul mit einem Firmenlogo hinzu, das Sie vom Rest abheben möchten. Aktualisieren Sie dann Folgendes:

Bildausrichtung: Mitte
Benutzerdefinierter Rand: -75px

Sehen Sie sich das Endergebnis an.

Abschließende Gedanken

Das Erstellen eines Abschnitts auf Ihrer Website für Firmenlogos ist eigentlich ziemlich einfach. Sobald Sie die Logobilder mit einem Bildbearbeitungsprogramm richtig dimensioniert haben, kann sich Divi um den Rest kümmern. Die in diesem Tutorial behandelten Methoden sollten alles bieten, was Sie brauchen, um das gewünschte Layout mit minimalem Aufwand zu erstellen. Und mit der Leistung von Divi in ​​Ihrer Ecke sollten Sie Spaß daran haben, eigene einzigartige Layouts zu erstellen.

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

Danke schön!