Tworzenie wsuwanych CTA z ustawieniami wyrównania wierszy i animacji Divi

Co tydzień dostarczamy nowe i bezpłatne pakiety układów Divi, których możesz użyć w swoim następnym projekcie. W przypadku jednego z pakietów układu udostępniamy również przypadek użycia, który pomoże Ci przenieść Twoją witrynę na wyższy poziom. W tym tygodniu, w ramach naszej trwającej inicjatywy projektowania Divi, pokażemy, jak tworzyć wsuwane CTA z wyrównaniem wierszy i ustawieniami animacji Divi przy użyciu pakietu układu firmy sprzątającej.

Aby to ułatwić, zaczniemy od usunięcia wszystkich animacji, które już tam są. W ten sposób możemy wyróżnić pojawiające się wezwania do działania.

Weźmy się za to!

Zapowiedź

Rzućmy okiem na trzy różne przykłady, którymi zajmiemy się w tym poście:

Prześlij stronę docelową firmy sprzątającej

Dodaj nową stronę i przejdź do Visual Builder

Jak wspomniano wcześniej, do stworzenia tego samouczka użyjemy pakietu układu firmy sprzątającej, ale możesz użyć tego podejścia w przypadku każdej tworzonej witryny internetowej. Dodaj nową stronę, wprowadź tytuł strony i od razu przejdź do Visual Builder.

Prześlij stronę docelową firmy sprzątającej

Gdy to zrobisz, na ekranie pojawią się trzy opcje. Możesz zacząć budować od zera, wybrać gotowy układ lub sklonować istniejącą stronę. Wybierz drugą opcję.

Wyszukaj pakiet układu firmy sprzątającej, wybierz układ strony docelowej i prześlij go na swoją stronę.

Usuwanie wszystkich ustawień animacji na stronie

Znajdź sekcję na stronie

Po przesłaniu układu na stronę przejdź dalej i znajdź następującą sekcję.

Usuń animację

Otwórz jego ustawienia i usuń animację, która już tam jest.

Rozszerz styl na wszystkie sekcje

Aby zaoszczędzić czas, rozszerzymy ten styl animacji na wszystkie elementy projektu na stronie. Zaczniemy od sekcji na naszej stronie, klikając prawym przyciskiem myszy i wybierając opcję „Rozszerz style animacji”. Zastosuj ją do wszystkich sekcji na stronie i kliknij „Rozszerz”.

Rozszerz styl na wszystkie wiersze

Powtórz te same kroki, ale zamiast tego zastosuj je do wszystkich wierszy na stronie.

Rozszerz styl na wszystkie moduły

Na koniec spraw, aby stosował się również do wszystkich modułów na stronie.

Tworzenie CTA #1

Dodaj nowy wiersz

Lokalizacja

Zacznijmy tworzyć pierwsze CTA wsuwane! Dodaj nowy wiersz na dole poniższej sekcji:

Struktura kolumny

Wybierz następującą strukturę kolumn dla właśnie dodanego wiersza:

Wyrównanie wierszy

Przesuniemy wiersz w lewo, aby uzyskać efekt wsuwania.

• Wyrównanie wierszy: do lewej

Rozmiary

Zmniejszymy również szerokość naszego rzędu.

• Użyj niestandardowej szerokości: Tak
• Szerokość niestandardowa: 500px

Rozstaw

Aby pozbyć się niepotrzebnej białej przestrzeni, usuń górną i dolną wyściółkę rzędu.

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

Dodaj moduł Wezwania do działania

Dodaj kopię

Możemy teraz dodać nasz moduł Call to Action! Dodaj wybrane treści.

Dodaj link

Następnie dodaj link do swojego modułu CTA. Jeśli nie masz jeszcze linku do przekierowania, możesz po prostu wpisać „#”. Bez dodania czegoś do tego pola nie będziesz mógł zobaczyć przycisku, więc upewnij się, że nie zostawisz go pustego.

Usuń kolor tła

Moduł CTA ma domyślnie kolor tła. Śmiało i usuń go w ustawieniach tła.

Gradient sekcji kopiowania

Otwórz sekcję zawierającą niebieskie tło gradientowe. Bez zmiany czegokolwiek, kliknij prawym przyciskiem myszy i skopiuj ustawienia.

Wklej gradient w module CTA

Wklej to tło gradientowe w module CTA.

Ustawienia tekstu tytułu

Otwórz ponownie ustawienia modułu CTA, przejdź do ustawień tekstu tytułu i wprowadź kilka zmian, aby dopasować pakiet układu:

• Czcionka tytułu: Ubuntu
• Grubość czcionki tytułu: pogrubiona
• Rozmiar tekstu tytułu: 24px (komputer i tablet), 16px (telefon)
• Wysokość wiersza tytułu: 1,2 em

Ustawienia tekstu podstawowego

Zmień również wagę czcionki treści w treści.

• Grubość czcionki ciała: pół pogrubiona

Ustawienia przycisków

Następnie zmień ustawienia przycisków.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 18px
• Kolor tekstu przycisku: #557df3
• Kolor tła przycisku: #FFFFFF
• Szerokość obramowania przycisku: 10px
• Kolor obramowania przycisku: #FFFFFF
• Promień obramowania przycisku: 0px
• Czcionka przycisku: Ubuntu
• Waga czcionki: pogrubiona

Rozstaw

Zwiększ również wypełnienie modułu.

• Górna wyściółka: 80px
• Dolna wyściółka: 80px
• Lewa wyściółka: 50px
• Prawe wypełnienie: 50px

Granica

Następnie dodaj trochę górnego prawego i dolnego prawego promienia obramowania w ustawieniach obramowania.

• U góry po prawej: 100px
• Dolny prawy: 100px

Cień Pudełka

Aby uzyskać większą głębię, dodamy subtelny cień pudełkowy.

• Siła rozmycia cieni w pudełku: 71px
• Siła rozprzestrzeniania się cieni w pudełku: -5px

Animacja

Na koniec nadaj swojemu modułowi CTA efekt animacji.

• Kierunek animacji: w prawo
• Intensywność animacji: 100%
• Początkowe krycie animacji: 100%
• Krzywa prędkości animacji: liniowa

Tworzę wezwanie do działania nr 2

Klonuj CTA #1 wiersz i wprowadzaj zmiany

Klonuj rząd

Aby utworzyć drugi przykład, sklonuj pierwszy wiersz.

Przeciągnij do sekcji

Przewiń stronę w dół i umieść duplikat tutaj:

Usuń górną wyściółkę sekcji

Otwórz ustawienia sekcji, w której umieściłeś wiersz i usuń górną wyściółkę.

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

Usuń górny lewy promień obramowania sekcji

Przejdź do ustawień granicy i usuń również lewy górny promień granicy.

Usuń górny prawy promień obramowania CTA

Następnie otwórz moduł CTA i usuń prawy górny promień obramowania, aby umożliwić połączenie sekcji i modułu.

Zmień animację

W przypadku tego wsuwanego CTA użyjemy innej animacji. Zapraszam do zabawy z innymi opcjami animacji.

• Kierunek animacji: Centrum
• Początkowe krycie animacji: 100%
• Krzywa prędkości animacji: liniowa

Tworzenie CTA #3

Klonuj CTA #1 wiersz i wprowadzaj zmiany

Klonuj rząd

Aby stworzyć ostatni przykład, ponownie sklonujemy wiersz.

Przeciągnij do sekcji

Umieść duplikat w następującej sekcji:

Zmień wyrównanie wierszy

Otwórz ustawienia wiersza modułu i zmień wyrównanie na prawo.

• Wyrównanie wierszy: w prawo

Usuń tło gradientu CTA

Usuń również tło gradientowe modułu.

Zamiast tego użyj koloru tła

Zamiast tego użyj koloru tła.

• Kolor tła: # f2835a

Zmień kolor tekstu przycisku

Aby dopasować kolor tła, zmień również kolor tekstu przycisku.

• Kolor tekstu przycisku: # f2835a

Usuń promień graniczny CTA

Zamieniamy moduł CTA w kwadrat, usuwając cały promień obramowania, który został mu nadany.

Zmień animację

Następnie zmień ustawienia animacji.

• Kierunek animacji: w dół
• Intensywność animacji: 100%
• Początkowe krycie animacji: 100%
• Krzywa prędkości animacji: liniowa

Usuń dolną wyściółkę sekcji

Na koniec przesuniemy moduł na dół sekcji, usuwając dolną wyściółkę sekcji, w której jest umieszczony, i gotowe!

• Dolna wyściółka: 0px

Zapowiedź

Przyjrzyjmy się jeszcze trzem przykładom wsuwanych CTA, które stworzyliśmy.

Końcowe przemyślenia

W tym poście pokazaliśmy, jak tworzyć wsuwane CTA za pomocą pakietu układu firmy Divi's Cleaning Company. Zaczęliśmy od usunięcia animacji, które są już obecne na stronie. Następnie utworzyliśmy trzy wsuwane CTA, aby przyciągnąć uwagę. Ten wpis na blogu jest częścią naszej inicjatywy projektowej Divi, w której każdego tygodnia staramy się umieszczać coś w twoim przyborniku projektowym. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!