Wezwanie do działania w Twojej witrynie to jeden z najmniej inwazyjnych sposobów na przyciągnięcie uwagi odwiedzający. W większości przypadków po prostu zignorują wezwanie do działania lub zamkną je, aby kontynuować przeglądanie strony, ale czasami uda Ci się ich przekonać. Slajd z wezwaniem do działania świetnie się sprawdzi promować prawie wszystko na stronie docelowej.

W tym samouczku zaprojektujemy zamykalne wezwanie do działania, które można dodać w dowolnym rogu strony za pomocą Divi Theme Builder. Gdy już to zrobisz, będziesz mieć taką możliwość promować Twoje produkty i oferty specjalne w dowolnym miejscu na stronie, bez konieczności używania wtyczki.

Zacznijmy!

badanie

Oto krótkie spojrzenie na cztery wstawione wezwania do działania, które dodamy w czterech rogach szablonu strony. Oczywiście nie musisz wdrażać wszystkich czterech jednocześnie. Zwróć uwagę, jak każdy z nich można zamknąć, klikając ikonę „x”, a następnie możesz ponownie włączyć wezwanie do działania, klikając ikonę „plus”.

To, 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 i wyświetlić wynik.

Stworzenie przesuwanego wezwania do działania z szablonem strony w Divi

Stworzenie nowego modelu

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

Przypisz szablon do strony lub stron, na których chcesz wyświetlić pasek promocyjny.

W nowym modelu kliknij obszar „Dodaj niestandardową treść”, a następnie wybierz opcję „Utwórz niestandardową treść”.

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

Utworzenie sekcji treści publikacji

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

Dodaj wiersz do kolumny

Aby rozpocząć, dodaj wiersz kolumny do zwykłej sekcji.

Dodaj moduł treści publikowania

Następnie dodaj moduł treść publikacja do wiersza.

Ustawienia linii

Po tej aktualizacji parametry linii w następujący sposób:

• Szerokość: 100%
• Maksymalna szerokość: 100%
• Wypełnienie: 0px wysoki, 0px niski

Tworzenie wezwania do działania w lewym górnym rogu

Teraz, gdy mamy już nasz moduł treści postów, jesteśmy gotowi do dodania naszego pierwszego wezwania do działania, które zostanie wstawione 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ą regularną sekcję do układu szablonu.

Dodaj wiersz do kolumny

Następnie nadaj sekcji wiersz kolumny.

Ustawienia sekcji

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

• Lewy gradient koloru tła:
• Prawy gradient tła:
• Wyświetl gradient nad obrazem: TAK
• Obraz w tle: [wstaw obraz]
• Szerokość: 320px
• Margines: pozostało 320 pikseli
• Wypełnienie: 0px wysoki, 0px niski
• Styl animacji: slajd
• Kierunek animacji: w prawo
• Opóźnienie animacji: 2000 ms

Następnie przejdź do zakładki Zaawansowane i dodaj następującą klasę CSS i indeks Z:

• Klasa CSS: wsuwana w cta
• Indeks Z: 999

I dodaj niestandardowy fragment kodu CSS po głównym elemencie:

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

Klasa CSS jest potrzebna, abyśmy mogli później zaadresować sekcję z kodem. Niestandardowy CSS ustawi lewą górną sekcję szablonu strony w stałej (lub lepkiej) pozycji. Pozycja „po lewej: -320 pikseli” powinna przesuwać całą sekcję (o szerokości 320 pikseli) poza okno przeglądarki (a więc poza nasz widok). Ale mamy lewy margines 320 pikseli, aby przywrócić go do widoku. Powodem tego jest to, że możemy włączać i wyłączać wartość marginesu po kliknięciu ikony „x”. Spowoduje to wślizgnięcie się i zniknięcie wezwania do działania.

Ustawienia linii

Teraz zaktualizuj parametry linii w następujący sposób:

• Użyj niestandardowej szerokości rynny: TAK
• Szerokość rynny: 1
• Szerokość: 100%
• Wypełnienie: 0px wysoki, 0px niski

Dodaj moduł wezwania do działania

Wewnątrz wiersza dodaj moduł Call to Action.

Ustawienia wezwania do działania

Następnie zaktualizuj ustawienia wezwania do działania.

Treść

• Tytuł: [wprowadź wybrany tekst]
• Przycisk: [wprowadź wybrany tekst]
• Treść: [wprowadź wybrany tekst]
• Adres 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.

Parametry projektu (tekst, przycisk i wypełnienie)

Na karcie Projekt zaktualizuj następujące elementy:

• Czcionka tytułu: Lato
• Waga czcionki tytułu: ciężka
• Wysokość linii tytułu: 1,3 em
• Body Police: Lato
• Ciężar czcionki: pogrubiony
• Użyj niestandardowych stylów dla przycisku: TAK
• Rozmiar tekstu przycisku: 15px
• Szerokość obramowania przycisku: 0px
• Odstępy między literami przycisków: 1px
• Czcionka przycisku: Lato
• Waga czcionki przycisku: duża
• Styl czcionki przycisku: TT
• Wypełnienie przycisków: 12 pikseli u góry, 12 pikseli u dołu, 32 piksele po lewej, 32 piksele po prawej
• wypełnienie: 40 pikseli u góry, 40 pikseli u dołu, 40 pikseli po lewej stronie, 40 pikseli po prawej stronie

Dodaj ikonę otwierania i zamykania z modułem Blurb

Po wykonaniu wezwania do działania musimy utworzyć przycisk z ikoną służący do otwierania i zamykania przesuwanego wezwania do działania. Aby to utworzyć, dodaj moduł blurb pod modułem wezwania do działania.

Ustawienia tekstu prezentacji

Zaktualizuj następujące parametry projektu.

Treść

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

Koncepcja

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

Ustawienia zaawansowane

Na karcie 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 CSS do obrazu Blurb.

margin-bottom: 0px;

Wynik

Oto dotychczasowy wynik.

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

Utworzenie wezwania do działania w prawym górnym rogu

Mając wbudowane pierwsze wezwanie do działania, możemy przyspieszyć proces tworzenia pozostałych wezwań do działania, powielając już utworzoną sekcję. Następnie utworzymy wezwanie do działania w prawym górnym rogu.

Duplikat sekcji

Zastosuj tryb wyświetlania szkieletowego, a następnie zduplikuj sekcję wezwania do działania w lewym górnym rogu.

Zaktualizuj ustawienia sekcji

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

• margines: 320px po prawej
• kierunek animacji: w lewo

Następnie zaktualizuj niestandardowy CSS w głównym elemencie, zastępując „left” przez „right”. Oto pełny fragment:

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

Zaktualizuj parametry modułu Blurb

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

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

Wynik

Zobaczysz teraz wezwanie do działania jako slajd w prawym górnym rogu szablonu strony.

Wykonaj te same operacje dla pozostałych sekcji „Dolna prawa” i „Dolna lewa”. Będziesz także musiał dostosować kod CSS dla każdego z modułów, aby uzyskać wynik podobny do poniższego.

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 ze slajdów CTA.

Dodaj moduł kodu

Dodaj moduł kodu do jednej z sekcji prezentacji.

Wklej kod

Następnie otwórz ustawienia kodu i wklej następujący kod w obszarze 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

Z Divi wcale nie jest trudno utworzyć wezwanie do działania. 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.