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 600.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 odwiedzających bez ingerencji lub rozproszenia. Sztuczka polega na umieszczeniu jednego lub dwóch elementów na pasku bocznym, które „pozostają widoczne” lub przymocowane z boku treści publikacji, 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ą w postaci nawoływania do działania ważne z boku strony, jeśli to konieczne.

W tym samouczku pokażemy, jak dodać trwałe wezwanie do działania do szablonu posta na blogu za pomocą narzędzia Divi Theme Builder. Zastosowanie tego układu jest znaczne. Będzie to działać dla prawie każdej strony lub szablonu publikacji. 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 dodawać stałe połączenia do szablonu publikowania blogów w Divi

Dodanie szablonu konstruktora motywów

Pierwszym krokiem jest zaimportowanie naszego predefiniowanego szablonu na naszą stronę. Użyjemy szablonu wersji pakietu Divi Theme Builder Pack # 1.

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

Utwórz szablon posta na blogu

Po zaimportowaniu modelu jesteśmy gotowi dodać nasze nowe wezwania do działania do samoprzylepnego paska bocznego w układzie modelu. Aby to zrobić, kliknij ikonę edycji niestandardowego pola treści.

Dodano podwójny układ paska bocznego, aby utrzymać wezwania do działania na pasku bocznym

W Edytorze układu modelu zlokalizuj wiersz zawierający moduł publikowania treści i zamień układ kolumny na strukturę od jednej piątej do jednej piątej (1 / 5 3 / 5 1 / 5 ). Pozwoli nam to utrzymać kolumnę w środku dla treści publikacji, zapewniając jednocześnie dwie sekcje po obu stronach dla naszych lepkich wezwań do działania.

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

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 będą 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
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
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 właśnie utworzoną i wklej ją do prawej kolumny. 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.

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]

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 początkowy dla lepkiego wezwania do działania w prawej kolumnie, który stanowi 50% szerokości linii. Dostosuj tę wartość do swoich postów na blogu.

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

Aby uzyskać nasze „lepkie” pozycjonowanie dla naszych wezwań do działania na pasku bocznym, musimy dodać niestandardowy CSS. Aby to zrobić, utwórz nowy moduł kodu w module Content Publishing (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 jest obliczeniem, które ustawia wezwanie do działania pionowo 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 ma wyższą lub niższą wysokość, musisz dostosować piksele 130 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]

A następnie zapisz ustawienia konstruktora 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 lepkie AKTY przylegają do zwoju. Możesz zobaczyć, jak by to działało lepiej w przypadku dłuższych treści.

końcowe przemyślenia

Te lepkie wezwania do działania są odświeżającą alternatywą dla tradycyjnego paska bocznego. Są dobrze dopasowane do minimalistycznego wzornictwa, ponieważ są mniej ingerujące i nie dają poczucia zatłoczenia. Ponadto możesz ustawić CTA niżej na stronie, aby pojawiał się stopniowo i pozostawał zablokowany na pergaminie, dzięki czemu jest bardziej widoczny dla odwiedzających. 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 jeden CTA po jednej stronie. Wygląda na to, że ma wiele zastosowań.

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
1 akcji
udział1
ćwierkanie
Enregistrer