Jak stworzyć unikalne wezwanie do działania za pomocą wzoru tła i opcji maski Divi

Nowy wzór tła i opcje maski Divi ułatwiają tworzenie przyciągających wzrok i unikalnych sekcji wezwania do działania (CTA) w witrynie. Możesz łączyć obrazy, gradienty, wzory i maski z wieloma opcjami dostosowywania, aby tworzyć jedyne w swoim rodzaju projekty tła, które przyciągną uwagę odwiedzających.

W tym samouczku pokażemy, jak stworzyć unikalną sekcję CTA z nowym wzorem tła i opcjami maski Divi.

Zacznijmy!

zapowiedź

Oto podgląd sekcji CTA, którą zaprojektujemy w tym samouczku.

Czego potrzebujesz, aby zacząć

Zanim zaczniemy, zainstaluj i aktywuj motyw Divi i upewnij się, że masz najnowszą wersję Divi na swojej stronie internetowej.

Wskoczmy.

Jak stworzyć unikalne CTA z wzorem tła i opcjami maski Divi

Utwórz nową stronę z gotowym układem

W naszym samouczku użyjemy gotowego układu z biblioteki Divi. W tym projekcie użyjemy strony docelowej Ice Cream Shop z pakietu układu Ice Cream Shop.

Utwórz nową stronę, dodaj tytuł, a następnie wybierz opcję Użyj Divi Builder.

W tym przykładzie użyjemy gotowego układu z biblioteki Divi, więc wybierz Przeglądaj układy.

Wyszukaj i wybierz układ strony docelowej lodziarni.

Wybierz opcję Użyj tego układu, aby dodać układ do swojej strony.

Teraz jesteśmy gotowi do zbudowania naszego projektu.

Modyfikowanie układu wzoru tła i maski

Z tego układu będziemy modyfikować smak sekcji CTA miesiąca. Wprowadźmy kilka zmian w naszym układzie dla wzoru tła i projektu maski.

Ustawienia wiersza

Otwórz Ustawienia wiersza, a następnie wybierz Projekt.

W obszarze Rozmiar wyrównaj wysokości kolumn.

• Wyrównaj wysokości kolumn: Tak

W obszarze Odstępy usuń górną wyściółkę, aby przesunąć stożek na górę sekcji.

• Górna wyściółka: 0px

Ustawienia kolumny 1

Na karcie Treść dla ustawień wiersza wybierz ustawienia Kolumna 1. W obszarze Tło usuń pomarańczowe tło.

Kolumna 2 Ustawienia

Teraz wybierz ustawienia kolumny 2. Oryginalny projekt ma pewne odstępy, których nie potrzebujemy, więc pozbądźmy się go. W obszarze Projekt przejdź do opcji Odstępy i usuń górną wyściółkę.

Następnie wybierz Zaawansowane i dodaj następujący niestandardowy kod CSS do elementu głównego, aby tekst „smaku miesiąca” był wyśrodkowany w pionie.

margin:auto;

Ustawienia sekcji

Otwórz Ustawienia sekcji. W obszarze Projekt wybierz opcję Wypełnienie. Dostosuj dopełnienie sekcji tak, aby górny stożek był wyrównany do samej góry strony.

• Wypełnienie: 0px

Dodawanie wzoru tła i maski do sekcji CTA

Teraz, gdy nasz układ został zmodyfikowany, możemy dodać nasz wzór tła i maskę. Dostępne są nieskończone opcje wzorów tła i masek dzięki nowym opcjom Divi, co oznacza, że ​​możesz tworzyć unikalne projekty dla swojej sekcji CTA za pomocą zaledwie kilku kliknięć. Śledź dalej, aby dowiedzieć się, jak zaprojektować przyciągające wzrok tło z tymi ustawieniami.

Ustawienia koloru tła, wzoru i maski

Przejdź do ustawień Tło przekroju.

Pod zakładką kolorów dodaj pomarańczowe tło

• Kolor: #FFA256

Na karcie Wzór ustaw kształt i kolor wzoru.

• Kształt: konfetti
• Kolor: #FF7D14

Teraz dodajmy maskę. Wybierz kartę maski, a następnie dodaj ustawienia w następujący sposób:

• Kształt: narożny kropelka
• Kolor maski: #FFFFFF
• Transformacja maski: pozioma
• Proporcje maski: Krajobraz
• Rozmiar maski: okładka

Korekty projektowe

Teraz, gdy nasze tło jest gotowe, dokonajmy ostatecznych poprawek w projekcie.

Otwórz ustawienia przycisku „Kup” i zmień wyrównanie w zakładce Projekt.

• Wyrównanie przycisków: w lewo

Zmień kolor tła stanu najechania na przycisk „Kup”, aby wyróżniał się na pomarańczowym tle.

• Tło przycisku po najechaniu: #FF7D14

Dostosujemy również układ wierszy, aby dodać trochę więcej miejsca między pomarańczowym tłem a sekcją „Smak miesiąca” po prawej stronie. Zmień układ z 1:1 na 3:2.

A teraz projekt pulpitu jest gotowy i nauczyłeś się, jak stworzyć unikalną sekcję CTA z wzorem tła i opcjami maski Divi!

Tworzenie responsywnej sekcji CTA

Gdy nasza sekcja CTA jest wyświetlana na telefonie lub tablecie, zawartość w kolumnie 2 jest układana pod kolumną 1. Może to powodować pewne problemy z czytelnością naszego projektu. Dokonajmy pewnych zmian, aby zoptymalizować naszą zawartość i projekt dla mniejszych ekranów, korzystając z wbudowanych ustawień responsywnych Divi.

Ponieważ chcemy, aby tekst znajdował się przed przyciskami, skopiuj tekst „Wyróżnij smak miesiąca” do modułu tekstowego „Lipiecowa czekolada pomarańczowa”. Upewnij się, że dodajesz ten tekst tylko do wersji na telefon i tablet.

• Zmień tekst „Pomarańczowa czekolada” na H3.

Następnie wprowadzimy pewne zmiany w tekście, aby wyróżniał się na tym tle. Przejdź do zakładki Projekt i wprowadź następujące zmiany:

• H2 (Telefon i Tablet) Kolor tekstu: #000000
• H2 (telefon i tablet) Rozmiar tekstu: 30px
• H3 (Telefon i Tablet) Kolor tekstu: #000000
• H4 (Telefon i Tablet) Kolor tekstu: #000000

Teraz przejdź do ustawień oryginalnego modułu tekstowego „Smak miesiąca” i zmień widoczność tak, aby była widoczna tylko na urządzeniach stacjonarnych. To sprawi, że oryginalny moduł tekstowy ukryje się na mniejszych urządzeniach. Tekst Smak miesiąca pojawi się nad przyciskiem, a drugi tekst na stronie.

• Wyłącz na: telefonie i tablecie

Następnie otwórz ustawienia wiersza, a następnie otwórz ustawienia kolumny 1. Usuń prawą i lewą wyściółkę.

• Prawe wypełnienie: 0px
• Lewe wypełnienie: 0px

Przejdź do ustawień sekcji, następnie do tła, a następnie edytuj ustawienia maski

• Transformacja maski: odwrócona
• Proporcje maski: Portret

A teraz stworzyłeś całkowicie responsywną sekcję CTA z unikalnym tłem dzięki opcjom wzoru tła i maski Divi.

Ostateczny wynik

Przyjrzyjmy się efektowi końcowemu.

Końcowe przemyślenia

Zaprojektowanie unikalnej i przyciągającej wzrok sekcji wezwania do działania jest bardzo łatwe dzięki potężnym opcjom wzoru tła i maski Divi. Uwolnij swoją kreatywność, eksperymentując z różnymi kolorami, wzorami, maskami i kombinacjami ustawień. Jest łatwy w projektowaniu, a za pomocą kilku kliknięć możesz dostosować ustawienia, aż znajdziesz idealny wygląd. Co najważniejsze, jest wbudowany w Divi! Nie musisz już projektować grafiki tła w innym programie. Możesz zastosować ustawienia tła do innych sekcji, wierszy i modułów, aby uzyskać jeszcze bardziej unikalne projekty. Jeśli chcesz dowiedzieć się więcej o wzorach i funkcjach maski Divi, zapoznaj się z naszym samouczkiem, w którym znajdziesz sekcję bohaterów z maskami i wzorami tła oraz dowiedz się, jak połączyć kreatora gradientów Divi z maskami i wzorami tła.

W jaki sposób wykorzystałeś opcje wzoru tła i maski Divi na swojej stronie internetowej? Daj nam znać, co stworzyłeś w komentarzach poniżej!