Lepkie paski boczne są niezwykle skuteczne w przyciąganiu uwagi odwiedzający nie będąc natrętnym ani rozpraszającym. Sztuka polega na umieszczeniu na pasku bocznym jednego lub dwóch elementów, które „pozostaną widoczne” lub przymocowane z boku treść wpisu, gdy użytkownik przewija stronę. Jest to odświeżająca alternatywa dla tradycyjnego układu paska bocznego, ponieważ sprawia wrażenie nowoczesnego układu o pełnej szerokości (bez paska bocznego), z zaletą prezentowania ważnych wezwań do działania 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 motywy. Kliknij ikonę przenośności w prawym górnym rogu strony. W oknie modalnym przenośności wybierz kartę importu i wybierz plik divi-theme-builder-pack-1-post-template.json z folderu. Jeśli w Twojej witrynie są obecnie zainstalowane szablony, odznacz wszystkie opcje, które mogą zastąpić obecne szablony. Następnie kliknij przycisk importu.
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.
Dodano podwójny układ paska bocznego do przechowywania wezwań do działania
W Edytorze układu modelu znajdź wiersz zawierający moduł Publikuj. treść i zamień układ kolumn na strukturę kolumn składającą się z 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ść posta, zapewniając jednocześnie dwie sekcje po obu stronach dla naszych przyklejonych wezwań do działania.
Po zmianie struktury kolumny przeciągnij moduł publikowania treści do środkowej kolumny.
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
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
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.
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: #
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
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
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
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:
- Klasa CSS: lepki-cta
Następnie dodaj następujący niestandardowy CSS do głównego elementu:
Biuro
margin-top: 50%
tabletka
margin-top: 0%
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.
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).
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>
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.
A następnie zapisz ustawienia konstruktora motywów
Ostateczny wynik
Aby wyświetlić wynik końcowy, odwiedź artykuł na blogu przy użyciu szablonu.
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 boczne wezwania do działania są odświeżającą alternatywą dla tradycyjnego paska bocznego. Dobrze sprawdzają się w minimalistycznym stylu, ponieważ są mniej inwazyjne i nie sprawiają, że post wydaje się zagracony. Dodatkowo możesz umieścić CTA niżej na stronie, aby pojawiało się stopniowo i przylegało do zwoju, dzięki czemu jest bardziej widoczne dla ludzi. odwiedzający. I nie zapomnij. Możesz zastąpić CTA dowolnym modułem Divi lub kombinacją modułów, aby stworzyć prawie wszystko, co chcesz. Możesz także zachować tylko jedno wezwanie do działania po jednej stronie. Wydaje się, że ma wiele zastosowań.
