Jak zaprojektować sekcję głośników gościnnych ze skutecznym CTA w Divi

Niezależnie od tego, czy masz podcast, czy organizujesz WordCamp (lub dowolne wydarzenie z prelegentami), zawsze dobrym pomysłem jest posiadanie sekcji prelegentów na swojej stronie internetowej. Podobnie jak referencje, prezentowanie zaproszonych prelegentów jest skutecznym sposobem promowania wartości i budowania wiarygodności wśród odbiorców. Sekcja gościnnych mówców jest również kluczowym miejscem, w którym można znaleźć nowych kandydatów na następne wydarzenie lub odcinek. Ten samouczek pokazuje, jak zaprojektować sekcję prelegentów gości, która nie tylko prezentuje prelegentów w elegancki sposób, ale także zachęca nowych mówców do zgłaszania się za pomocą skutecznego wezwania do działania.

Ale zanim wskoczymy, oto rzut oka na ostateczny projekt.

zapowiedź

A oto dodatkowy efekt najechania, który również wam pokażę.

Zacznijmy!

Subskrybuj nasz kanał YouTube

Budowanie podstawowej struktury i treści

Jeśli jeszcze tego nie zrobiłeś, utwórz nową stronę i wdróż Divi Builder, aby budować na interfejsie.

Dodaj nową sekcję z jednym wierszem kolumny.

Dodaj moduł tekstowy do wiersza z następującą zawartością:

<h2>Guest Speaker</h2>

Następnie dodaj moduł rozdzielający bezpośrednio pod modułem tekstowym.

Teraz dodamy nowy rząd o czterokolumnowej strukturze, aby pomieścić naszych gości.

W pierwszej kolumnie wiersza dodaj moduł osoby.

Zaktualizuj zawartość modułu Osoba w następujący sposób:

Nazwa: [puste]
Adres URL profilu na Facebooku: [dodaj na razie „#”]
Adres URL profilu na Twitterze: [na razie dodaj „#”]
Adres URL profilu LinkedIn: [na razie dodaj „#”]

W opisie dodaj:

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

Uwaga: tag hr generuje linię rozdzielającą, która ma wbudowaną stylizację, która ma szerokość 90 pikseli i przesuwa się w lewo. Mocna metka owinięta wokół nazwiska sprawia, że ​​jest ona odważna i stanowi wyjątkowy element projektu.

Teraz, gdy masz już zawartość, zapisz ustawienia modułu osoby.

Skopiuj właśnie utworzony moduł osoby i wklej go do każdej z pozostałych kolumn, aby mieć ten sam moduł osoby w każdej z czterech kolumn. Aby skopiować i wkleić, możesz użyć opcji menu prawego przycisku myszy lub skrótów klawiszowych cmd+c cmd+v (mac) lub ctrl+c ctrl+v (win).

Otwórz ustawienie modułu osoby w kolumnie 4 i zaktualizuj zawartość tak, aby zawierała tylko następujące elementy:

Nazwa: „To możesz być ty!”
Opis: „Użyj przycisku poniżej, aby zgłosić się do wystąpienia na naszym wydarzeniu”.

Zapisz swoje ustawienia.

Następnie dodaj moduł przycisku bezpośrednio pod modułem osoby w kolumnie 4 i zaktualizuj treść tekstu przycisku na „Zastosuj teraz”. I zapisz swoje ustawienia.

Wróć do pierwszych modułów z trzema osobami w kolumnach 1-3 i dodaj obrazy dla każdego portretu prelegenta gościa. Upewnij się, że mają ten sam rozmiar, jednakową wysokość i szerokość oraz że są wystarczająco duże, aby uwzględnić szerokości kolumn we wszystkich rozmiarach przeglądarki (najlepiej 600 na 600 pikseli).

Tak powinien wyglądać Twój układ Guest Speak w tym momencie.

Stylizowanie układu głośników gościnnych

Stylizacja sekcji

Otwórz ustawienia sekcji i zaktualizuj następujące elementy:

Obraz tła: [używam jednego z naszego układu agencji]

Kolor gradientu tła po lewej stronie: #293039
Prawy gradient tła: rgba (41,48,57,0.89)
Styl Top Divider: patrz zrzut ekranu
Kolor górnego rozdzielacza: #293039
Wysokość górnego dzielnika: 30vw

Zmiana szerokości rzędów

Ponieważ chcemy, aby oba nasze wiersze miały tę samą szerokość, użyj multiselect, aby wybrać oba wiersze i kliknij jedną z ikon ustawień, aby otworzyć ustawienia elementu.

Następnie zaktualizuj następujące elementy:

Szerokość niestandardowa: 80%

Teraz oba rzędy będą miały taką samą niestandardową szerokość.

Stylizacja nagłówka

Otwórz ustawienia modułu tekstowego zawierającego nagłówek sekcji „Gość prelegenci” i zaktualizuj następujące elementy:

Czcionka nagłówka 2: Montserrat
Grubość czcionki nagłówka 2: pogrubiona
Styl czcionki nagłówka 2: TT
nagłówek 2 Wyrównanie tekstu: do prawej
Kolor tekstu nagłówka 2: #74bf46
Rozmiar tekstu nagłówka 2: 70px (komputer), 50px (smartfon)

Zapisz ustawienia.

Teraz otwórz ustawienia dzielnika i zaktualizuj następujące elementy:

Kolor: #ffffff
Wysokość: 0px
Szerokość: 90px
Wyrównanie modułu: prawo

Stylizowanie modułów Osoba

Ponieważ chcemy nadać ten sam początkowy styl wszystkim naszym modułom osób, użyj multiselect, aby wybrać każdy z nich, a następnie kliknij ikonę ustawień jednego z modułów, aby wdrożyć modalne ustawienia elementu.

Zaktualizuj następujący element Ustawienia:

Kolor ikony: #74bf46
Czcionka tytułu: Montserrat
Grubość czcionki tytułu: lekka
Kolor tekstu tytułu: #ffffff
Rozmiar tekstu tytułu: 20px
Czcionka ciała: Montserrat
Kolor tekstu ciała: #ffffff
Odstępy między literami: 2px
Wysokość linii ciała: 1,8 em

Stylizowanie modułu CTA Person

Używamy tego modułu osoby jako wezwania do działania, które przyciąga nowych prelegentów do ubiegania się o udział w mowie. Możemy więc pozostawić domyślny obraz (sylwetkę) aktywny jako kreatywny sposób wyświetlania pustego miejsca. Ale jest kilka zmian stylu, które musimy dodać, aby ukończyć projekt. Otwórz ustawienia modułu osoby w kolumnie 4 i zaktualizuj poniższe.

Szerokość obramowania obrazu: 18px
Kolor obramowania obrazu: #d2d2d2
Krycie obrazu: 50%

Grubość czcionki tytułu: pogrubiona
Wysokość wiersza tytułu: 1,5 em

Teraz pozostaje tylko stylizować nasz przycisk. Otwórz ustawienia modułu przycisków i zaktualizuj następujące elementy:

Kolor tekstu przycisku: #293039
Kolor tła przycisku: #74bf46
Promień obramowania przycisku: 50px
Czcionka przycisku: Montserrat
Waga czcionki: pogrubiona

Przyjrzyjmy się teraz efektowi końcowemu.

Dodatkowa wskazówka: efekt najechania powiększenia obrazu

Nie zapomnij o wszystkich wbudowanych opcjach hover dostępnych w Divi. W rzeczywistości możesz zobaczyć kilka inspirujących samouczków na temat tych efektów najechania na naszym blogu. Ale w przypadku tego projektu pomyślałem, że wymyślę trochę nieszablonowo i dam ci kilka fragmentów CSS, które spowodują, że obraz twojej osoby będzie się nieznacznie powiększał (lub skalował) po najechaniu myszą.

Jeśli szukasz subtelnego efektu najechania, aby odróżnić moduły osoby, oto jak to zrobić.

Użyj multiselect, aby wybrać moduły osób w kolumnach 1, 2 i 3. Otwórz ustawienia elementu. W zakładce Zaawansowane wprowadź następujący kod CSS w elemencie głównym :

overflow: hidden;

Ten kod zapobiegnie rozszerzaniu się obrazu poza kontener modułu.

Następnie dodaj następujący kod CSS w sekcji Obraz członka :

transition: all 0.3s; 

Daje to płynne przejście, gdy obraz skaluje się.

Aby dodać CSS po najechaniu, kliknij ikonę najechania i wybierz kartę najechania i wprowadź następujący kod CSS:

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

To skaluje (lub rozszerza) obraz do nieco większego rozmiaru i przesuwa go nieco w górę.

Teraz obrazy będą miały subtelny efekt powiększenia po najechaniu.

Końcowe przemyślenia

Cóż, mam nadzieję, że podobał Ci się ten samouczek lub przynajmniej zostawiłeś kilka przydatnych wskazówek projektowych. Ten układ sekcji głośników gościnnych może być używany na różne sposoby. Inną idealną aplikacją byłaby strona pracownicza, aby jednocześnie wymieniać obecnych pracowników i zachęcać innych do aplikowania na stanowisko. Podziel się z nami kilkoma pomysłami.

Czekam na kontakt z Państwem w komentarzach poniżej.

Pozdrawiam!