Przejdź do głównej treści

Jak dodać lepkie wezwania do działania do szablonu artykułu za pomocą Divi Builder

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

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

Lepkie paski boczne są niezwykle skuteczne w przyciąganiu uwagi gości, nie będąc apodyktycznymi ani rozpraszającymi. Sztuczka polega na tym, aby dołączyć jeden lub dwa elementy paska bocznego, które „pozostają widoczne” lub przymocowane z boku treści posta, gdy użytkownik przewija stronę. Jest to odświeżająca alternatywa dla tradycyjnego układu paska bocznego, ponieważ daje wrażenie nowoczesnego układu o pełnej szerokości (bez paska bocznego), z korzyścią dla prezentowania wezwań do działania. ważne z boku strony, gdy jest to konieczne.

W tym samouczku pokażemy, jak dodać przyklejone wezwania do działania do szablonu posta na blogu za pomocą Divi Theme Builder. Zastosowanie tego układu jest znaczące. Będzie działać dla prawie każdej strony lub dowolnego szablonu postów. Ponadto nie musisz ograniczać się do wezwań do działania; możesz dodać wybrane moduły Divi.

To, czego potrzebujesz, aby zacząć

Na początek musisz zainstalować i aktywować motyw Divi . Upewnij się, że masz najnowszą wersję Divi.

Będziesz także potrzebował co najmniej jednego komunikatu utworzonego za pomocą Divi Builder do testowania w celu wyświetlenia pożądanego wyniku.

Następnie jesteś gotowy do wyjścia.

badanie

Oto krótki przegląd lepkich AKTÓW, które zostały dodane do szablonu posta na blogu w Divi.

Jak dodać stałe wezwania do działania w szablonie postów na blogu w Divi

Dodanie szablonu konstruktora motywów

Pierwszym krokiem jest zaimportowanie naszego predefiniowanego szablonu na naszą stronę. Zamierzamy użyć szablonu publikacji Divi Theme Builder Pack # 1.

Aby rozpocząć, przejdź do Divi> Generator motywów. Kliknij ikonę przenośności w prawym górnym rogu strony. W oknie przenośności wybierz kartę importowania i wybierz plik divi-theme-builder-pack-1-post-template.json w folderze. Jeśli w Twojej witrynie są obecnie zainstalowane szablony, usuń zaznaczenie opcji, które mogą zastąpić Twoje obecne szablony. Następnie kliknij przycisk importu.

Zaimportuj układ Divi

Utwórz szablon posta na blogu

Po zaimportowaniu szablonu jesteśmy gotowi, aby dodać nasze nowe wezwania do działania do paska bocznego przyklejonego do układu szablonu. Aby to zrobić, kliknij ikonę edycji niestandardowego obszaru ciała.

Dodaj niestandardową treść divi

Dodano podwójny układ paska bocznego do przechowywania wezwań do działania

W edytorze układu szablonów znajdź wiersz zawierający moduł publikowania treści i zmień układ kolumn na strukturę jednej piątej na trzy piąte na jedną piątą (1/5 3/5 1/5 ). Pozwoli nam to utrzymać kolumnę wyśrodkowaną dla treści posta, zapewniając jednocześnie dwie sekcje po obu stronach dla naszych lepkich wezwań do działania.

Dodaj układ divi

Po zmianie struktury kolumny przeciągnij moduł publikowania treści do środkowej kolumny.

Ł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]

Zaktualizuj parametry linii

Otwórz ustawienia linii i zaktualizuj następujące opcje projektu:

  • Użyj niestandardowej szerokości rynny: TAK
  • Szerokość rynny: 2
  • Szerokość: 100% (komputer stacjonarny), 90% (tablet)
  • Maksymalna szerokość: 1500px
Dodaj sekcję fix divi

To da nam przestrzeń potrzebną do konfiguracji podwójnego paska bocznego.

Zaktualizuj ustawienia kolumny 1

Następnie otwórz ustawienia kolumny 1 i nadaj tej kolumnie niestandardową klasę CSS:

  • Klasa CSS: lepki-cta
Dostosuj element divi CSS kolumny 1

Dodanie paska bocznego wezwania do działania w lewej kolumnie

Jesteśmy teraz gotowi na pierwsze wezwanie do działania. Dodaj wywołanie do modułu akcji w lewej kolumnie.

Dodaj wezwanie do działania modułu

Stylizuj pasek boczny CTA

Zaktualizuj ustawienia w następujący sposób:

Treść
  • Przycisk: «Kliknij tutaj»
  • Body: „Twoje treści są tutaj. Edytuj lub usuń ten tekst online lub w ustawieniach zawartości modułu. ”
  • Adres URL linku do przycisku: #
Dostosuj moduł wezwania do działania
Projekt tekstu podstawowego
  • Body Font: Montserrat
  • Waga czcionki: półpogrubiona
  • Treść: Wyrównanie do prawej
  • Kolor tekstu: # 444444
  • Rozmiar tekstu: 22px (komputer stacjonarny), 18px (tablet)
  • Wysokość ciała: 1.3em
Rajstopy CTA
przycisk
  • Rozmiar tekstu przycisku: 14px
  • Kolor tekstu przycisku: #ffffff
  • Kolor tła przycisku: # 6148df
  • Szerokość obramowania przycisku: 0px
  • Promień przycisku: 80px
  • Waga czcionki: pogrubiona
  • Styl czcionki przycisku: TT
  • Wypełnienie przycisków: 12px u góry, 12px u dołu, 22px po lewej stronie, 22px po prawej
Sekcja modułu Divi
Szerokość, wyrównanie, wypełnienie i krawężniki
  • Szerokość: 100%
  • Maksymalna szerokość: 320px
  • Ustawienie modułu: w prawo
  • Wypełnienie: 10px po lewej, 10px po prawej
  • Szerokość górnej granicy: 10px
  • Kolor górnej granicy: #eeeeee
  • Szerokość dolnej granicy: 10px
  • Kolor dolnej granicy: #eeeeee

Dodanie paska bocznego wezwania do działania w prawej kolumnie

Aby utworzyć wezwanie do działania dla prawej kolumny, skopiuj to, które właśnie utworzyliśmy i wklej je w skrajnej prawej kolumnie. Następnie zaktualizuj ustawienia duplikatu w następujący sposób:

  • Wyrównanie tekstu: do lewej
  • Wyrównanie modułu: lewo
Dodaj ct a po prawej stronie

Zaktualizuj ustawienia kolumny 3

W przypadku tego wezwania do działania w prawej kolumnie dodamy górny margines do kolumny, aby ustalić pozycję początkową paska bocznego wezwania do działania w dolnym punkcie strony.

Zacznij od otwarcia parametrów kolumny 3 i dodaj tę samą klasę CSS, którą dodaliśmy do kolumny 1:

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]

  • Klasa CSS: lepki-cta

Następnie dodaj następujący niestandardowy CSS do głównego elementu:

Biuro

margin-top: 50%

tabletka

margin-top: 0%

Dostosuj styl kolumny Divi

To da nam inny punkt wyjścia dla lepkiego CTA w prawej kolumnie, co stanowi 50% szerokości wiersza. Możesz dowolnie dostosować tę wartość do własnego posta na blogu.

Powiel moduł CTA Divi

Dodaj niestandardowy CSS do szablonu za pomocą modułu kodu

Aby uzyskać nasze „lepkie” pozycjonowanie dla wezwań do działania na pasku bocznym, musimy dodać niestandardowy CSS. Aby to zrobić, utwórz nowy moduł kodu w module publikowania treści (lub w dowolnym miejscu na stronie).

Wstaw moduł typu divi code

Następnie wklej następujący CSS w polu kodu:

<style> @media only screen and (min-width: 980px) {#page-container { overflow-y:visible !important; } .sticky-cta {position: sticky !important;position: -webkit-sticky !important;top: calc(50vh - 130px) !important;}}</style>

Kod parametru modułu Divi

Górne przesunięcie w tym kodzie to obliczenie, które ustawia wezwanie do działania w pionie na środku strony podczas przewijania. 50vh to połowa wysokości okna przeglądarki, a 130px to połowa wysokości CTA. Jeśli Twoje wezwanie do działania jest wyższe lub niższe, będziesz musiał dostosować 130 pikseli w górę lub w dół.

Zapisz ustawienia

Po zakończeniu zapisz układ szablonu.

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]

Zapisz parametry modułu CTA DIVI

A następnie zapisz ustawienia konstruktora motywów

Zapisz Divi Kreatora Motywów

Ostateczny wynik

Aby wyświetlić wynik końcowy, odwiedź artykuł na blogu przy użyciu szablonu.

Rajstopy CTA

I w ten sposób przyklejone CTA utkną na przewijaniu. Możesz zobaczyć, jak będzie najlepiej działać w przypadku dłuższych treści.

końcowe przemyślenia

Te przyklejone wezwania do działania na pasku bocznym są odświeżającą alternatywą dla tradycyjnego paska bocznego. Pasują do minimalistycznego designu, ponieważ są mniej nachalne i nie sprawiają, że poczta jest zagracona. Dodatkowo możesz umieścić CTA niżej na stronie, aby stopniowo pojawiało się i pozostawało przyklejone do pergaminu, dzięki czemu było bardziej widoczne dla odwiedzających. I nie zapomnij. Możesz zamienić CTA na dowolny moduł Divi lub kombinację modułów, aby stworzyć wszystko, co chcesz. Możesz także zdecydować się na pozostawienie tylko jednego CTA po jednej stronie. Wydaje się, że ma wiele zastosowań.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie 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
2 akcji
udział2
ćwierkanie
Enregistrer