Jak dodać zamykane wsuwane wezwanie do działania w dowolnym rogu szablonu strony w Divi

Posiadanie wsuwanego wezwania do działania w witrynie to jeden z najmniej natrętnych sposobów na przyciągnięcie uwagi odwiedzających. W większości przypadków po prostu zignorują CTA lub zamkną je, aby kontynuować przeglądanie strony, ale czasami ich przekonasz. Wsuwane wezwanie do działania świetnie sprawdzi się w przypadku promowania czegokolwiek na stronie docelowej.

W tym samouczku zaprojektujemy zamykane wsuwane wezwanie do działania, które można dodać w dowolnym rogu strony za pomocą Kreatora motywów Divi. Po zakończeniu będziesz mieć możliwość promowania swoich produktów i ofert specjalnych w dowolnym miejscu na stronie bez konieczności korzystania z wtyczki.

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na cztery wsuwane CTA, które dodamy do wszystkich czterech rogów szablonu strony. Oczywiście nie będziesz musiał rozmieścić wszystkich czterech naraz. Zwróć uwagę, jak każdy z nich można zamknąć, klikając ikonę „x”, a następnie możesz ponownie włączyć CTA, klikając ikonę „plus”.

Pobierz szablon strony Divi Slide-In Call to Action za DARMO

Aby położyć swoje ręce na szablonie strony z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Aby zaimportować układ do swojej strony, po prostu rozpakuj plik zip i dodaj jeden z plików json do Divi Theme Builder za pomocą opcji Theme Builder Portability.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz zainstalować i aktywować motyw Divi. Upewnij się, że masz najnowszą wersję Divi.

Będziesz także potrzebować co najmniej jednej strony utworzonej za pomocą Divi Builder do celów testowych, aby przypisać nowy szablon do tej strony, aby wyświetlić wynik.

Po tym jesteś gotowy do pracy.

Tworzenie zamykanego wezwania do działania w każdym rogu szablonu strony w Divi

Tworzenie nowego szablonu

Z pulpitu nawigacyjnego WordPress przejdź do Divi> Kreator motywów. Następnie kliknij pole „Dodaj nowy szablon”, aby utworzyć nowy szablon.

Przypisz szablon do stron, na których ma być wyświetlany pasek promocyjny.

W nowym szablonie kliknij obszar „Dodaj niestandardową treść”, a następnie wybierz „Zbuduj niestandardową treść”.

Następnie wybierz opcję „Buduj od podstaw”.

Tworzenie sekcji treści posta

Sekcja treści postu jest niezbędną częścią każdego szablonu strony, aby wyświetlić rzeczywistą zawartość strony lub postu wbudowanego w Divi lub WordPress. Dodamy to do naszego szablonu przed utworzeniem naszego pierwszego wezwania do działania.

Dodaj wiersz jednokolumnowy

Aby rozpocząć, dodaj wiersz z jedną kolumną do zwykłej sekcji.

Dodaj moduł treści posta

Następnie dodaj do wiersza moduł treści posta.

Ustawienia wiersza

Następnie zaktualizuj ustawienia wiersza w następujący sposób:

• Szerokość: 100%
• Maksymalna szerokość: 100%
• Padding: 0px na górze, 0px na dole

Tworzenie wysuwanego wezwania do działania po lewej stronie

Teraz, gdy nasz moduł treści posta jest na miejscu, jesteśmy gotowi, aby rozpocząć dodawanie naszego pierwszego wsuwanego wezwania do działania w lewym górnym rogu szablonu strony.

Dodaj sekcję

Każde nowe wezwanie do działania zostanie utworzone z zupełnie nową sekcją. Umożliwi to dodanie dowolnego układu lub modułu potrzebnego do zaprojektowania wezwania do działania.

Dodaj nową zwykłą sekcję do układu szablonu.

Dodaj wiersz jednokolumnowy

Następnie nadaj sekcji jeden wiersz w kolumnie.

Ustawienia sekcji

Przeciągnij (lub przenieś) sekcję nad sekcję treści posta i zaktualizuj ustawienia sekcji w następujący sposób:

• Kolor lewego gradientu tła:
• Prawy kolor gradientu tła:
• Pokaż gradient powyżej obrazu: TAK
• Obraz tła: [wstaw obraz]
• Szerokość: 320px
• Margines: pozostało 320px
• Padding: 0px na górze, 0px na dole
• Styl animacji: slajd
• Kierunek animacji: w prawo
• Opóźnienie animacji: 2000 ms

Następnie przeskocz nad zakładką Zaawansowane i dodaj następujący indeks CSS Class i Z:

• Klasa CSS: slide-in-cta
• Indeks Z: 999

I dodaj następujący niestandardowy fragment kodu CSS do elementu głównego:

position: fixed;
top: 80px;
left: -320px;

Klasa CSS jest potrzebna, abyśmy mogli później kierować sekcję z kodem. Niestandardowy CSS umieści sekcję w lewym górnym rogu szablonu strony w stałej (lub lepkiej) pozycji. Pozycja „lewo: -320px” powinna przenieść całą sekcję (o szerokości 320px) poza okno przeglądarki. Ale mamy lewy margines 320 pikseli, aby przywrócić go do widoku. Powodem, dla którego jest to zbudowane w ten sposób, jest to, że możemy włączać i wyłączać wartość marginesu po kliknięciu ikony „x”. Spowoduje to, że CTA będzie się pojawiać i znikać.

Ustawienia wiersza

Teraz zaktualizujmy ustawienia wierszy w następujący sposób:

• Użyj niestandardowej szerokości rynny: TAK
• Szerokość rynny: 1
• Szerokość: 100%
• Padding: 0px na górze, 0px na dole

Dodaj moduł Wezwania do działania

W wierszu dodaj moduł Call to Action.

Ustawienia wezwania do działania

Następnie zaktualizuj ustawienia wezwania do działania.

Zadowolony

• Tytuł: [wpisać wybrany tekst]
• Przycisk: [wpisz wybrany tekst]
• Treść: [wpisz wybrany tekst]
• URL linku przycisku: [wprowadź rzeczywisty adres URL lub #]

Następnie usuń domyślny kolor tła, aby odsłonić tło sekcji, którą dodaliśmy wcześniej.

Ustawienia projektu (tekst, przycisk i dopełnienie)

Na karcie projekt zaktualizuj następujące elementy:

• Czcionka tytułu: Lato
• Grubość czcionki tytułu: Ciężka
• Wysokość wiersza tytułu: 1,3 em
• Czcionka ciała: Lato
• Waga czcionki ciała: pogrubiona
• Użyj niestandardowych stylów dla przycisku: TAK
• Rozmiar tekstu przycisku: 15px
• Szerokość obramowania przycisku: 0px
• Odstępy między przyciskami: 1px
• Czcionka przycisku: Lato
• Grubość czcionki przycisku: Ciężka
• Styl czcionki przycisku: TT
• Wypełnienie przycisków: 12px góra, 12px dół, 32px po lewej, 32px po prawej
• padding: 40px góra, 40px dół, 40px lewo, 40px prawo

Dodaj ikonę otwierania i zamykania za pomocą modułu Blurb

Po zakończeniu wezwania do działania musimy utworzyć ikonę przycisku, która służy do otwierania i zamykania wysuwanego wezwania do działania. Aby to stworzyć, dodaj moduł notki pod modułem wezwania do działania.

Ustawienia rozmycia

Zaktualizuj następujące ustawienia projektu.

Zadowolony

• usuń domyślny tytuł i treść
• Użyj ikony: TAK
• Ikona: plus (patrz zrzut ekranu)

Projekt

• Kolor ikony: #000000
• Użyj rozmiaru czcionki ikony: TAK
• Rozmiar czcionki ikony: 40px
• Szerokość: 40px
• Wysokość: 40px
• Zaokrąglone rogi: 50%
• Przekształć Obróć oś Z: 135 stopni

Zaawansowane ustawienia

W zakładce Zaawansowane dodaj następującą klasę CSS:

• Klasa CSS: slide-in_target

Następnie dodaj ten niestandardowy CSS do głównego elementu.

position: absolute;
bottom: 0px;
right: -40px;

Dodaj następujący niestandardowy kod CSS do obrazu Blurb.

margin-bottom: 0px;

Wynik

Oto dotychczasowy wynik.

Pamiętaj, że nadal musimy dodać trochę kodu, aby dodać funkcję zamykania i otwierania po kliknięciu ikony „x”. Kod dodamy po utworzeniu wezwania do działania w każdym z czterech rogów szablonu.

Tworzenie wysuwanego wezwania do działania po prawej stronie

Po utworzeniu pierwszego wezwania do działania możemy przyspieszyć proces tworzenia pozostałych CTA, duplikując już zbudowaną sekcję. Następnie utworzymy wsuwane wezwanie do działania w prawym górnym rogu.

Zduplikowana sekcja

Wdróż tryb widoku szkieletowego, a następnie zduplikuj lewą górną sekcję CTA.

Aktualizuj ustawienia sekcji

Następnie zaktualizuj nowe ustawienia sekcji w następujący sposób:

• margines: 320px w prawo
• kierunek animacji: w lewo

Następnie zaktualizuj niestandardowy CSS w elemencie głównym, zastępując „lewo” słowem „prawo”. Oto pełny fragment:

position: fixed;
top: 80px;
right: -320px;

Zaktualizuj ustawienia modułu Blurb

Następnie otwórz ustawienia modułu blurb i zaktualizuj niestandardowy fragment kodu CSS w głównym elemencie, zastępując „prawo” słowem „lewo”. Oto pełny fragment:

position: absolute;
bottom: 0px;
left: -40px;

Wynik

Teraz zobaczysz wysuwane wezwanie do działania w prawym górnym rogu szablonu strony.

Tworzenie wezwania do działania w lewym dolnym rogu

Zduplikowana sekcja

Aby utworzyć wsuwane wezwanie do działania w lewym dolnym rogu szablonu strony, zduplikuj lewą górną sekcję wezwania do działania u góry układu strony. Oznacz zduplikowaną sekcję „Dolne lewe wezwanie do działania”, a następnie przenieś ją poniżej sekcji treści posta.

Aktualizuj ustawienia sekcji

Następnie otwórz ustawienia sekcji zaktualizuj główny element CSS, zamieniając „góra: 80px” na „dół: 0px”. Oto ostatni fragment:

position: fixed;
bottom: 0px;
left: -320px;

Zaktualizuj ustawienia modułu Blurb

Następnie zaktualizuj główny element CSS modułu Blurb, zamieniając „bottom: 0px” na „top: 0px”. Oto ostatni fragment:

position: absolute;
top: 0px;
right: -40px;

Wynik

Teraz sprawdź wysuwane wezwanie do działania w lewym dolnym rogu na aktywnej stronie.

Tworzenie wysuwanego wezwania do działania w prawym dolnym rogu

Zduplikowana sekcja

Aby utworzyć wsuwane wezwanie do działania w prawym dolnym rogu, zduplikuj prawą górną sekcję CTA i przenieś sekcję duplikatów poniżej sekcji treści posta.

Aktualizuj ustawienia sekcji

Otwórz ustawienia sekcji i zaktualizuj główny element CSS, zastępując „top: 80px;” z „dół: 0px;”. Oto ostatni fragment:

position: absolute;
bottom: 0px;
right: -320px;

Zaktualizuj ustawienia modułu Blurb

Następnie otwórz ustawienia modułu blurb i zaktualizuj główny element CSS, zastępując „bottom: 0px;” z „góra: 0px;”. Oto ostatni fragment:

position: absolute;
top: 0px;
right: -40px;

Wynik

Teraz sprawdź wysuwane wezwanie do działania w prawym dolnym rogu na opublikowanej stronie.

Dodawanie niestandardowych fragmentów kodu jQuery i CSS za pomocą modułu kodu

W ostatnim kroku musimy dodać niestandardowe jQuery i CSS, abyśmy mogli uzyskać funkcjonalność otwierania i zamykania każdego z wsuwanych CTA.

Dodaj moduł kodu

Dodaj moduł kodu do jednej z sekcji w układzie.

Wklej kod

Następnie otwórz ustawienia kodu i wklej następujący kod w polu kodu.

<style>
  .slide-in-cta, .slide-in_target, .slide-in-toggle-active {
    transition: all 400ms ease-in-out;
  } 
  .slide-in-toggle-active {
    margin: 0px 0px 0px 0px !important;
  }
   .slide-in-toggle-active .slide-in_target  {
    transform: none !important;
    background: rgba(0,0,0,0.2);
  }  
  .slide-in_target {
    cursor: pointer;
  }
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.slide-in_target').click(function(){
      $(event.target).closest('.slide-in-cta').toggleClass('slide-in-toggle-active'); 
    });    
  });
})( jQuery );   
</script>

Końcowe przemyślenia

Dzięki Divi tworzenie wsuwanego wezwania do działania wcale nie jest trudne. A ponieważ możesz użyć kreatora motywów, aby dodać wezwanie do działania do szablonu strony, będziesz mieć większą kontrolę nad tym, które strony będą wyświetlać te wezwania do działania. Możesz zwiększyć opóźnienie animacji w sekcji CTA, aby użytkownik zobaczył wsuwaną animację CTA nieco później (lub wcześniej) po załadowaniu strony. Możesz także użyć leadów Divi i włączyć testy dzielone, aby poprawić konwersje tych CTA i dowiedzieć się, który zakręt będzie miał najlepszą konwersję.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!