Tworzenie responsywnych banerów z nowymi opcjami tła Divi

W moim ostatnim poście pokazałem, jak stylizować przyciski za pomocą interfejsu opcji tła Divi, nakładając moduł przycisku na tło kolumn i wierszy. Dzisiaj pokażę Ci, jak zaprojektować responsywne klikalne banery za pomocą interfejsu opcji tła Divi.

Będziemy używać tych samych technik, co w przypadku tła przycisków, z kilkoma drobnymi poprawkami. Zasadniczo pokażę Ci, jak stworzyć naprawdę duże przyciski i zaprojektować je trochę bardziej jak banery. Ważnym czynnikiem jest tutaj to, że cała powierzchnia banera pozostaje klikalna. Należy jednak od samego początku wiedzieć, że tą metodą możemy wykonać tylko proste banery. Ponieważ jesteśmy ograniczeni przez dane wejściowe modułu przycisku, możemy tworzyć banery tylko z jednym ciągiem tekstu. Jednak korzystając z opcji tła kolumn, możemy w krótkim czasie stworzyć całkiem fajnie wyglądające banery za pomocą Visual Builder.

Banery HTML a banery graficzne

Istnieje wiele zalet używania banerów html (banerów zbudowanych przy użyciu elementów html) nad banerami graficznymi (banery zbudowane jako pojedynczy obraz bez żadnych elementów html). W przypadku banerów html tekst jest rozpoznawany przez przeglądarki internetowe (niezbędne dla tłumaczy stron i czytników ekranu). Skalują się wraz z rozmiarem okien przeglądarki, dzięki czemu zawsze wyglądają ostro, w przeciwieństwie do obrazów, które mogą być zniekształcone lub nieczytelne. I być może moim ulubionym aspektem używania banerów html zamiast banerów graficznych jest to, że html jest naprawdę łatwy do zmiany. Mogę zmienić tekst kilkoma naciśnięciami klawiszy, zamiast przeszukiwać głębię mojego dysku twardego w poszukiwaniu oryginalnego pliku, który będę musiał edytować w edytorze zdjęć. I mogę szybko zrobić kolejną wersję banera, aby wykonać test podziału za pomocą Divi Leads.

Ta metoda przekształcania przycisków w banery otwiera drzwi dla niektórych przydatnych aplikacji, takich jak tworzenie spersonalizowanych polecanych postów, kategorii lub serii dla Twojego bloga (lub podcastu).

Zacznijmy.

zapowiedź

Zanim oficjalnie zostaniemy wyrzuceni. Oto zapowiedź banerów, które będziemy budować w tym poście.

Wdrażanie projektu z Divi

Subskrybuj nasz kanał YouTube

Przykład #1: baner z logo

Korzystając z programu Visual Builder, dodaj zwykłą sekcję z jedną kolumną i jednym wierszem.

Następnie dodaj moduł przycisku do wiersza.

Następnie zaktualizuj ustawienia modułu przycisków w następujący sposób:

Opcje treści

Tekst przycisku: [wprowadź tekst, którego chcesz użyć w wiadomości na banerze]
Adres URL przycisku: [wprowadź adres URL]

Opcje projektowe

Wyrównanie przycisków: Środek
Kolor tekstu: jasny
Użyj niestandardowych stylów dla przycisku: TAK
Rozmiar tekstu przycisku: 32px
Szerokość obramowania przycisku: 0px
Czcionka przycisku: Arvo
Ikona przycisku: [dodaj ikonę. używam ikony kursora]
Pokaż tylko ikonę po najechaniu na przycisk: NIE

Zaawansowane opcje

Musimy ustawić szerokość przycisku na 100%, aby wypełnić szerokość kolumny. Musimy również zwiększyć wysokość naszego przycisku, aby zapewnić wystarczająco dużo miejsca na treść naszego banera. Aby to zrobić, wprowadź następujący niestandardowy kod CSS w polu Element główny:

 Width: 100%;
padding: 20px 0 200px; 

Uwaga : Niestandardowe wypełnienie tutaj jest kluczem do dostosowania miejsca, w którym ma być wyświetlany tekst banera. Ponieważ wyrównanie przycisków jest już wyśrodkowane, wszystko, co muszę zrobić, to dopasować tekst w pionie. Dlatego nadanie tekstowi przycisku krótszego dopełnienia na górze i dłuższego dopełnienia na dole dostosuje tekst do góry banera.

Zapisz ustawienia

W tej chwili wszystko jest wciąż białe i niewidoczne, ale to w porządku. Dodamy tło dla modułu przycisków w ustawieniach wierszy i kolumn.

Przejdź do ustawień wiersza, w których znajduje się moduł przycisku i zaktualizuj następujące elementy:

Opcje treści

W zakładce obrazu tła

Obraz tła: [wstaw obraz]
Pozycja obrazu tła: [użyj tej opcji, aby dostosować obraz banera. Chciałem pokazać dół mojego obrazu, więc wybrałem „Bottom Center”.]

Teraz przewiń trochę w dół, aby zaktualizować opcje tła kolumny 1.

Wybierz kartę Gradient tła kolumny 1, a następnie kliknij szary okrągły przycisk z białym symbolem plusa.

Zaktualizuj następujące elementy:

Kolory gradientu tła: rgba (131,0,233,0,92), rgba (0,0,0,0,69)
Kierunek gradientu kolumny: 180 stopni
Pozycja początkowa kolumny: 50%
Pozycja końcowa kolumny: 0%

Zapisz ustawienia

Następnie dodamy logo do banera. Kliknij kartę Obraz tła i zaktualizuj następujące elementy:

Tło kolumny 1 Rozmiar obrazu: rzeczywisty rozmiar (moje logo to 120 x 120 png)

Pozycja obrazu tła w kolumnie 1: Środek

Otóż ​​to. Teraz masz prosty baner, który jest klikalny i responsywny. Możesz użyć ustawień modułu przycisku, aby dodać dowolne efekty najechania kursorem, które chcesz wyróżnić banerem.

Zróbmy inny przykład.

Przykład #2: Prosty baner tekstowy

W przypadku następnego banera zduplikujmy całą sekcję zawierającą pierwszy zaprojektowany baner. Pozwoli to zaoszczędzić trochę czasu na konfigurację.

Następnie przejdź do ustawień wiersza i zaktualizuj następujące elementy:

Opcje treści

Obraz tła: [wprowadź nowy obraz]
Pozycja obrazu tła: środek
Kolumna 1 Kolory gradientu tła: rgba(0,0,0,0,41), rgba(12,113,195,0.66)
Kierunek gradientu kolumny: 270 stopni

Następnie kliknij kartę obrazu tła kolumny 1 i usuń obraz/logo.

Zapisz ustawienia

Przejdź do Ustawień modułu przycisków i zaktualizuj następujące elementy:

Opcje treści

Tekst przycisku: [wprowadź tekst banera]
URL przycisku: [wprowadź adres URL banera]

Opcje projektowe

Rozmiar tekstu przycisku: 42px
Szerokość obramowania przycisku: 19px
Kolor obramowania przycisku: rgba (0,0,0,0.17)
Odstępy między przyciskami: 8px
Czcionka przycisku: Montserrat, pogrubiona (B)
Dodaj ikonę przycisku: NIE
Kolor obramowania przycisku: rgba (0,0,0,0.46)
Promień obramowania przycisku: 0px
Odstępy między literami: 12px

Jak widać, ten przykładowy baner ma unikalny efekt najechania, który zmienia kolor obramowania i zwiększa odstępy między literami:

Jak zrobić baner o pełnej szerokości

Aby ten baner miał pełną szerokość, wystarczy zaktualizować ustawienia sekcji w zakładce Projekt w następujący sposób:

Niestandardowe dopełnienie: 0px u góry, 0px w prawo, 0px w dół, 0px w lewo

Zapisz ustawienia

Teraz przejdź do ustawień wiersza i zaktualizuj opcje projektu w następujący sposób:

Ustaw pełną szerokość tego wiersza: TAK
Użyj niestandardowej szerokości rynny: TAK
Szerokość rynny: 1

Teraz baner rozciąga się na całą szerokość ekranu na wszystkich urządzeniach.

Jak zrobić baner samoprzylepny

Jeśli chcesz, możesz łatwo naprawić ten baner (przyklejony) i naprawić go w górnej części okna przeglądarki. Sugerowałbym zmniejszenie dopełnienia, aby było znacznie krótsze, aby nie blokowało zbyt dużej części okna.

Aby zmniejszyć wysokość, przejdź do Ustawień modułu przycisków w zakładce Zaawansowane , dodaj następujący kod CSS w polu Element główny :

padding: 0px 0px !important;

Teraz, aby cała sekcja była przyklejona, przejdź do ustawień sekcji i zaktualizuj kartę Zaawansowane Opcje za pomocą następującego niestandardowego kodu CSS w polu elementu głównego :

position: fixed;
top: 0;
width: 100%;
z-index: 9999;

Teraz cała sekcja będzie przyklejona na górze strony i pozostanie tam, gdy przewiniesz stronę w dół.

Ten rodzaj banera sprawdzi się dobrze w przypadku artykułów promocyjnych na stronie docelowej bez paska nawigacyjnego, ponieważ przyklejony baner ukryłby pasek nawigacyjny.

Dodawanie banerów do układów wielu kolumn

Możesz także tworzyć banery w strukturze wielokolumnowej. Byłoby to przydatne, gdybyś chciał wyróżnić niektóre elementy na dole swojej strony lub bloga.

Spróbujmy.

Dodaj kolejną zwykłą sekcję o strukturze wierszy 1/2 1/2.

Ze względu na czas skopiuj lub zduplikuj właśnie utworzony moduł przycisku i wklej go lub przeciągnij do pierwszej kolumny.

Aby uzyskać projekt tła banera, użyjemy tła kolumn w ustawieniach wiersza. Przejdź do ustawień wiersza i zaktualizuj następujące elementy:

Opcje treści

W zakładce Obraz tła

Kolumna 1 Tło: [wprowadź obraz tła]
Kolumna 1 Pozycja obrazu tła: [dostosuj położenie obrazu do własnych upodobań]
Mieszanie obrazu tła w kolumnie 1: Pomnóż

Pod zakładką Gradient tła

Kolumna 1 Kolory gradientu: rgba(255,255,255,0), #e02b20
Kolumna 1 Kierunek gradientu: 180 stopni
Pozycja początkowa kolumny 1: 70%
Kolumna 1 pozycja końcowa: 0%

Ostatnim krokiem jest aktualizacja ustawień modułu przycisków :

Opcje treści

Tekst przycisku: seria podróży

Opcje projektowe

Rozmiar tekstu przycisku: 32px
Szerokość obramowania przycisku: 2px
Odstępy między literami przycisków: 0px
Kolor obramowania przycisku: #edf000
Odstępy między literami przycisku: 0px

Zaawansowane opcje

Niestandardowy CSS w polu Main Element:

padding: 350px 0px 50px;
width: 100%;

Ten niestandardowy css dostosowuje dopełnienie modułu Button tak, aby tekst znajdował się na dole tuż za gradientem tła.

Zachęcamy do powielenia tego procesu dla banera w następnej kolumnie i zaktualizowania treści w dowolny sposób.

Sprawdź wynik.

Uwaga : nie używałbym wysokości wyrównania kolumny podczas korzystania z tej funkcji. Kolumna przeciągnie się poza moduł przycisku. Jeśli chcesz, aby wysokość banerów była idealnie dopasowana, być może będziesz musiał pobawić się wyściółką modułu przycisków, aby zrobić to dobrze.

Czuły?

Tak. Ponieważ przyciski są zbudowane w strukturze kolumnowej Divi, przyciski będą ładnie reagować na wszystkich urządzeniach. W przypadku banerów poziomych zachowałbym ostrożność przy umieszczaniu Twojego logo i tekstu, ponieważ mogą one na siebie nachodzić na urządzeniach mobilnych.

Oto przykład tego, jak one wyglądają po przeskalowaniu do mniejszych rozmiarów ekranu:

Kompatybilność z przeglądarką

Obecnie właściwość CSS background-blend-mode nie jest obsługiwana przez Internet Explorer ani Edge, a Safari ma ograniczone opcje mieszania. Jednak z mojego doświadczenia wynika, że ​​w większości przypadków nie jest to znaczące.

Końcowe przemyślenia

Mam nadzieję, że spodobała Ci się ta mała, ale przydatna sztuczka projektowa do tworzenia responsywnych banerów. Tak długo, jak rozumiesz związane z tym ograniczenia i zachowujesz prostotę, możesz stworzyć całkiem fajne banery. Co więcej, rozwiązanie to można łatwo wdrożyć i szybko dostosować.

I jestem pewien, że są do tego inne przydatne aplikacje. Czekam na Wasze pomysły w komentarzach.

Pozdrawiam!