So gestalten Sie einen Gastrednerbereich mit einem effektiven CTA in Divi

Unabhängig davon, ob Sie einen Podcast haben oder ein WordCamp (oder eine andere Rednerveranstaltung) veranstalten, ist es immer eine gute Idee, einen Bereich für Gastredner für Ihre Website einzurichten. Wie Testimonials ist die Präsentation von Gastrednern ein effektiver Weg, um den Wert zu fördern und Glaubwürdigkeit bei Ihrem Publikum aufzubauen. Ein Gastrednerbereich ist auch ein wichtiger Ort, um einige neue Kandidaten für Ihre nächste Veranstaltung oder Folge zu gewinnen. In diesem Tutorial erfahren Sie, wie Sie einen Bereich für Gastredner gestalten, der nicht nur Referenten auf elegante Weise präsentiert, sondern auch neue Referenten mit einem effektiven Call-to-Action zur Bewerbung anregt.

Aber bevor wir einsteigen, hier ein kleiner Vorgeschmack auf das endgültige Design.

Vorgeschmack

Und hier ist ein Bonus-Hover-Effekt, den ich Ihnen auch zeigen werde.

Lass uns anfangen!

Abonnieren Sie unseren Youtube-Kanal

Aufbau der Grundstruktur und des Inhalts

Falls noch nicht geschehen, erstellen Sie eine neue Seite und stellen Sie den Divi Builder bereit, um das Frontend zu erstellen.

Fügen Sie einen neuen Abschnitt mit einer einspaltigen Zeile hinzu.

Fügen Sie der Zeile einen Textbaustein mit folgendem Inhalt hinzu:

<h2>Guest Speaker</h2>

Fügen Sie als nächstes ein Trennmodul direkt unter dem Textmodul hinzu.

Jetzt werden wir eine neue Reihe mit einer vierspaltigen Struktur hinzufügen, um unsere Gastredner aufzunehmen.

Fügen Sie in der ersten Spalte der Zeile ein Personenmodul hinzu.

Aktualisieren Sie den Inhalt des Personenmoduls wie folgt:

Name: [leer]
Facebook-Profil-URL: [vorerst „#“ hinzufügen]
Twitter-Profil-URL: [vorerst „#“ hinzufügen]
LinkedIn-Profil-URL: [vorerst „#“ hinzufügen]

Fügen Sie für die Beschreibung Folgendes hinzu:

<h4>James <strong>Smith</strong></h4>
<hr style="width: 90px; float: left;">

Hinweis: Das hr-Tag generiert eine Trennlinie mit einem Inline-Styling, die 90 Pixel breit ist und nach links schwimmt. Das starke Etikett, das um den Nachnamen gewickelt ist, macht ihn zu einem einzigartigen Designelement.

Nachdem Sie den Inhalt erstellt haben, speichern Sie die Einstellungen des Personenmoduls.

Kopieren Sie das soeben erstellte Personenmodul und fügen Sie es in jede der verbleibenden Spalten ein, sodass Sie in jeder der vier Spalten dasselbe Personenmodul haben. Zum Kopieren und Einfügen können Sie die Rechtsklick-Menüoptionen oder die Tastenkombinationen cmd+c cmd+v (mac) oder ctrl+c ctrl+v (win) verwenden.

Öffnen Sie die Einstellung des Personenmoduls in Spalte 4 und aktualisieren Sie den Inhalt so, dass in nur noch Folgendes enthalten ist:

Name: "Das könntest du sein!"
Beschreibung: „Bewerben Sie sich über die Schaltfläche unten, um bei unserer Veranstaltung zu sprechen.“

Speichern Sie Ihre Einstellungen.

Fügen Sie als Nächstes ein Schaltflächenmodul direkt unter dem Personenmodul in Spalte 4 hinzu und aktualisieren Sie den Schaltflächentextinhalt auf „Jetzt bewerben“. Und speichern Sie Ihre Einstellungen.

Gehen Sie zurück zu den ersten Drei-Personen-Modulen in den Spalten 1-3 und fügen Sie die Bilder für jedes der Gastredner-Porträts hinzu. Stellen Sie sicher, dass sie dieselbe Größe mit gleichen Höhen- und Breitenabmessungen haben und dass sie groß genug sind, um die Spaltenbreiten in allen Browsergrößen (idealerweise 600 x 600 Pixel) zu berücksichtigen.

So sollte Ihr Guest Speak-Layout an dieser Stelle aussehen.

Gestaltung des Gastsprecher-Layouts

Den Abschnitt gestalten

Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

Hintergrundbild: [Ich verwende eines aus unserem Agentur-Layout]

Hintergrund Farbverlauf links: #293039
Hintergrundfarbe rechts: rgba(41,48,57,0.89)
Top Divider Style: siehe Screenshot
Farbe des oberen Teilers: #293039
Höhe des oberen Teilers: 30vw

Ändern der Zeilenbreiten

Da unsere beiden Zeilen die gleiche Breite haben sollen, wählen Sie beide Zeilen mit Multiselect aus und klicken Sie auf eines der Einstellungssymbole, um die Elementeinstellungen zu öffnen.

Aktualisieren Sie dann Folgendes:

Benutzerdefinierte Breite: 80%

Jetzt haben beide Zeilen dieselbe benutzerdefinierte Breite.

Die Überschrift gestalten

Öffnen Sie die Einstellungen des Textbausteins mit Ihrer Abschnittsüberschrift „Gastsprecher“ und aktualisieren Sie Folgendes:

Überschrift 2 Schriftart: Montserrat
Überschrift 2 Schriftstärke: Fett
Überschrift 2 Schriftstil: TT
Überschrift 2 Textausrichtung: rechts
Überschrift 2 Textfarbe: #74bf46
Überschrift 2 Textgröße: 70px (Desktop), 50px (Smartphone)

Einstellungen speichern.

Öffnen Sie nun die Divider-Einstellungen und aktualisieren Sie Folgendes:

Farbe: #ffffff
Höhe: 0px
Breite: 90px
Modulausrichtung: rechts

Gestalten der Personenmodule

Da wir allen unseren Personenmodulen den gleichen anfänglichen Stil geben möchten, verwenden Sie Multiselect, um jedes einzelne auszuwählen, und klicken Sie dann auf das Einstellungssymbol eines der Module, um das modale Elementeinstellungen bereitzustellen.

Aktualisieren Sie die folgenden Elementeinstellungen:

Symbolfarbe: #74bf46
Titelschriftart: Montserrat
Gewicht der Titelschrift: Leicht
Titeltextfarbe: #ffffff
Titeltextgröße: 20px
Körperschriftart: Montserrat
Textkörperfarbe: #ffffff
Abstand des Hauptbuchstabens: 2px
Körperlinienhöhe: 1.8em

Das CTA-Personenmodul gestalten

Wir verwenden dieses Personenmodul als Call-to-Action, der neue Gastredner anzieht, um sich für einen Vortrag zu bewerben. So können wir das Standardbild (Silhouette) aktiv lassen, um auf kreative Weise eine leere Stelle anzuzeigen. Es gibt jedoch ein paar Stilanpassungen, die wir hinzufügen müssen, um das Design zu vervollständigen. Öffnen Sie die Einstellungen des Personenmoduls in Spalte 4 und aktualisieren Sie folgendes.

Bildrandbreite: 18px
Bildrandfarbe: #d2d2d2
Bilddeckkraft: 50%

Schriftstärke des Titels: Fett
Höhe der Titelzeile: 1,5 em

Jetzt müssen Sie nur noch unseren Button stylen. Öffnen Sie die Tastenmoduleinstellungen und aktualisieren Sie Folgendes:

Schaltflächentextfarbe: #293039
Schaltflächenhintergrundfarbe: #74bf46
Schaltflächenrandradius: 50px
Button-Schriftart: Montserrat
Schriftdicke: fett

Werfen wir nun einen Blick auf das Endergebnis.

Bonus-Tipp: Bildzoom-Hover-Effekt

Vergessen Sie nicht alle integrierten Hover-Optionen, die in Divi verfügbar sind. In unserem Blog finden Sie einige inspirierende Tutorials zu diesen Hover-Effekten. Aber für dieses Design dachte ich, ich würde ein wenig über den Tellerrand hinausdenken und Ihnen ein paar CSS-Schnipsel geben, die dazu führen, dass Ihr Personenbild beim Schweben leicht vergrößert (oder skaliert) wird.

Wenn Sie nach einem subtilen Hover-Effekt suchen, um Ihre Personenmodule von anderen abzuheben, gehen Sie wie folgt vor.

Wählen Sie mit Multiselect die Personenmodule in den Spalten 1, 2 und 3 aus. Sie öffnen die Elementeinstellungen. Geben Sie auf der Registerkarte "Erweitert" das folgende CSS unter dem Hauptelement ein :

overflow: hidden;

Dieser Code verhindert, dass sich das expandierende Bild außerhalb des Modulcontainers erstreckt.

Als nächstes fügen Sie das folgende CSS unter Member Image hinzu :

transition: all 0.3s; 

Dies fügt einen glatten Übergang hinzu, wenn das Bild in der Größe skaliert wird.

Um das CSS beim Hover hinzuzufügen, klicken Sie auf das Hover-Symbol, wählen Sie den Hover-Tab und geben Sie das folgende CSS ein:

transform: scale(1.1) translateY(-4.5%);

Dadurch wird das Bild auf eine etwas größere Größe skaliert (oder erweitert) und etwas nach oben verschoben.

Jetzt haben die Bilder einen subtilen Zoom-Effekt beim Schweben.

Abschließende Gedanken

Nun, ich hoffe, Ihnen hat dieses Tutorial gefallen oder Sie haben zumindest ein paar nützliche Designtipps erhalten. Dieses Layout der Gastsprecher-Sektion kann auf verschiedene Weise verwendet werden. Eine weitere perfekte Anwendung wäre eine Mitarbeiterseite, um gleichzeitig aktuelle Mitarbeiter aufzulisten und andere zu ermutigen, sich auf eine Stelle zu bewerben. Teilen Sie uns gerne einige Ideen mit.

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

Danke schön!