Przejdź do głównej treści

Jak dodać przesuwane wezwanie do działania na Divi

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Wezwanie do działania w witrynie jest jednym z najmniej inwazyjnych sposobów przyciągnięcia uwagi użytkowników. W większości przypadków po prostu zignorują wezwanie do działania lub go zamkną, aby kontynuować przeglądanie strony, ale czasem je wygrasz. Wezwanie do działania w postaci slajdu sprawdzi się bardzo dobrze w promowaniu niemal wszystkiego na stronie docelowej.

W tym samouczku zaprojektujemy wezwanie do działania, które można zamknąć i dodać do dowolnego rogu strony za pomocą programu Divi Theme Builder. Po zakończeniu będziesz mógł promować swoje produkty i oferty specjalne w dowolnym miejscu na stronie, bez konieczności korzystania z wtyczki.

Zacznijmy!

badanie

Oto krótki przegląd czterech wezwań do działania, które dodamy do czterech rogów szablonu strony. Oczywiście nie musisz wdrażać wszystkich czterech jednocześnie. Zauważ, jak każdy z nich można zamknąć, klikając ikonę „x”, a następnie możesz ponownie aktywować wezwanie do działania, klikając ikonę „więcej”.

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 model do tej strony w celu wyświetlenia wyniku.

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

Stworzenie nowego modelu

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

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 „Utwórz niestandardową treść”.

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

Utworzenie sekcji treści publikacji

Sekcja zawartości publikacji jest niezbędną częścią każdego szablonu strony w celu wyświetlenia rzeczywistej zawartości strony lub publikacji osadzonej w Divi lub WordPress. Dodamy go do naszego modelu przed utworzeniem naszego 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ści publikowania 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 nasz moduł treści publikowania jest już gotowy, możemy rozpocząć dodawanie naszego pierwszego wezwania do działania w celu wstawienia go 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 niezbędnych do zaprojektowania wezwania do działania.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

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:

  • Gradient tła po lewej stronie koloru:
  • Gradient prawego 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 karty zaawansowanej i dodaj następującą klasę CSS i indeks Z:

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

I dodaj niestandardowy fragment kodu CSS zgodnie z głównym elementem:

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

Klasa CSS jest niezbędna, abyśmy mogli później celować w sekcję za pomocą kodu. Niestandardowy CSS umieści sekcję w lewym górnym rogu szablonu strony w stałej (lub lepkiej) pozycji. Pozycja „w lewo: -320 pikseli” powinna przesunąć całą sekcję (o szerokości 320 pikseli) poza okno przeglądarki (więc poza naszą wizją). Ale mamy lewy margines 320 pikseli, aby przywrócić go do widoku. Powodem takiego skonstruowania jest to, że możemy włączyć lub wyłączyć wartość marginesu po kliknięciu ikony „x”. Spowoduje to poślizgnięcie się CTA i zniknięcie z pola widzenia.

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 linii dodaj moduł Wezwania do działania.

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 do przycisku: [wprowadź aktualny adres URL lub #]

Następnie usuń domyślny kolor tła, aby odsłonić tło dodanej wcześniej sekcji.

Parametry projektu (tekst, przycisk i wypełnienie)

Na karcie Projektowanie zaktualizuj następujące elementy:

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

  • 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 za pomocą modułu Blurb

Po zakończeniu 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ł tekstowy prezentacji poniżej modułu 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: plus (patrz zrzut ekranu)
Koncepcja
  • Kolor ikony: # 000000
  • Użyj rozmiaru czcionki ikony: TAK
  • Rozmiar czcionki ikony: 40 pikseli
  • 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ć funkcję zamykania i otwierania po kliknięciu ikony „x”. Kod zostanie dodany po utworzeniu wezwania do działania w każdym z czterech rogów modelu.

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

Za pomocą pierwszego zintegrowanego wezwania do działania możemy przyspieszyć proces tworzenia pozostałych wezwań do działania, powielać utworzoną już sekcję. Następnie utworzymy wezwanie do działania jako slajd w prawym górnym rogu.

Duplikat sekcji

Wdróż tryb wyświetlania modelu 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 „lewy” na „prawy”. Oto pełny wyciąg:

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

Zaktualizuj parametry modułu Blurb

Następnie otwórz parametry modułu Blurb i zaktualizuj niestandardowy wyciąg CSS w głównym elemencie, zastępując „prawo” na „lewo”. Oto pełny wyciąg:

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

Wynik

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

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

Wykonaj te same operacje dla pozostałych sekcji „Dolny prawy”, „Dolny lewy”. Będziesz także musiał dostosować kod CSS dla każdego modułu, aby uzyskać wynik podobny do poniższego.

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

Na ostatnim etapie musimy dodać niestandardowe jQuery i CSS, abyśmy mogli uzyskać funkcje otwierania i zamykania każdego z wezwań do działania.

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

Dzięki Divi stworzenie wezwania do działania wcale nie jest trudne. A ponieważ możesz użyć generatora motywów, aby dodać wezwanie do działania do szablonu strony, będziesz mieć większą kontrolę nad tym, które strony wyświetlają te wezwania do działania.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
4 akcji
udział4
ćwierkanie
Enregistrer