Jak dodać przyklejone wezwania do działania na pasku bocznym do szablonu postu na blogu w Divi

Wezwania do działania na przyklejonym pasku bocznym są niezwykle skuteczne w przyciąganiu uwagi odwiedzających, nie będąc apodyktycznym ani rozpraszającym. Sztuczka polega na tym, aby umieścić jeden lub dwa elementy na pasku bocznym, które „przyklejają się” lub pozostają nieruchome z boku treści posta, gdy użytkownik przewija stronę. Jest to odświeżająca alternatywa dla tradycyjnego układu paska bocznego, ponieważ zapewnia wrażenie nowoczesnego układu o pełnej szerokości (bez paska bocznego), a w razie potrzeby wyświetla ważne wezwania do działania z boku strony.

W tym samouczku pokażemy, jak dodać przyklejone CTA na pasku bocznym do szablonu postu na blogu za pomocą Kreatora motywów Divi. Zastosowanie tego układu jest daleko idące. Będzie działać na prawie każdej stronie lub szablonie posta. Dodatkowo nie musisz ograniczać się do CTA; możesz dodać dowolne moduły Divi, które lubisz.

Zacznijmy!

Pobierz szablon CTA Sticky Sidebar za DARMO

Aby położyć ręce na przyklejonym szablonie posta cta na pasku bocznym z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli już jesteś na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Aby zaimportować układ do swojej strony, po prostu rozpakuj plik zip i dodaj jeden z plików json do Divi Theme Builder za pomocą opcji Theme Builder Portability.

Przejdźmy do samouczka, dobrze?

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 jednego posta utworzonego za pomocą Divi Builder do celów testowych, aby pokazać zamierzony wynik.

Po tym jesteś gotowy do pracy.

zapowiedź

Oto krótkie spojrzenie na przyklejone wezwania do działania na pasku bocznym, które zostały dodane do szablonu postu na blogu w Divi.

Jak dodać przyklejone wezwania do działania na pasku bocznym do szablonu posta na blogu w Divi

Dodawanie szablonu Theme Builder

Pierwszym krokiem jest zaimportowanie naszego gotowego szablonu na naszą stronę. Zamierzamy użyć szablonu posta z pakietu Divi Theme Builder Pack #1.

Aby rozpocząć, przejdź do Divi > Theme Builder. Kliknij ikonę przenoszenia w prawym górnym rogu strony. W module przenośności wybierz kartę importowania i wybierz plik divi-theme-builder-pack-1-post-template.json z folderu. Jeśli masz zainstalowane jakiekolwiek szablony w swojej witrynie, usuń zaznaczenie wszystkich opcji, które mogą zastąpić obecne szablony. Następnie kliknij przycisk importu.

Tworzenie szablonu postu na blogu

Po zaimportowaniu szablonu jesteśmy gotowi, aby rozpocząć dodawanie naszych nowych przyklejonych wezwania do działania na pasku bocznym do układu szablonu. Aby to zrobić, kliknij ikonę edycji niestandardowego obszaru ciała.

Dodawanie układu podwójnego paska bocznego do przechowywania CTA paska bocznego

W Edytorze układu szablonu znajdź wiersz zawierający moduł treści posta i zmień układ kolumn na strukturę kolumny jedna piąta trzy piąte jedna piąta (1/5 3/5 1/5). Pozwoli nam to zachować wyśrodkowaną kolumnę na treść posta, jednocześnie zapewniając dwie sekcje po obu stronach dla naszych przyklejonych wezwania do działania na pasku bocznym.

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

Aktualizacja ustawień wiersza

Otwórz ustawienia wiersza i zaktualizuj następujące warianty projektu:

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

To da nam miejsce, którego potrzebujemy do naszej konfiguracji z dwoma paskami bocznymi.

Aktualizacja ustawień kolumny 1

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

• Klasa CSS: sticky-cta

Dodawanie CTA na pasku bocznym do lewej kolumny

Teraz jesteśmy gotowi na pierwsze wezwanie do działania. Dodaj moduł wezwania do działania w skrajnej lewej kolumnie.

Stylizowanie CTA na pasku bocznym

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

Zadowolony

• Przycisk: „Kliknij tutaj”
• Body: „Tutaj trafiają Twoje treści. Edytuj lub usuń ten tekst w tekście lub w ustawieniach treści modułu”.
• URL linku przycisku: #

Projekt tekstu ciała

• Czcionka ciała: Montserrat
• Grubość czcionki ciała: pół pogrubiona
• Wyrównanie tekstu podstawowego: do prawej
• Kolor tekstu ciała: #444444
• Rozmiar tekstu głównego: 22px (komputer), 18px (tablet)
• Wysokość linii ciała: 1,3 em

Przycisk

• Rozmiar tekstu przycisku: 14px
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #6148df
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 80px
• Waga czcionki przycisku: pogrubiona
• Styl czcionki przycisku: TT
• Wypełnienie przycisków: 12px góra, 12px dół, 22px po lewej, 22px po prawej

Szerokość, wyrównanie, dopełnienie i obramowanie

• Szerokość: 100%
• Maksymalna szerokość: 320px
• Wyrównanie modułu: prawo
• Padding: 10px w lewo, 10px w prawo
• Szerokość górnej krawędzi: 10px
• Kolor górnej granicy: #eeeeee
• Szerokość dolnego obramowania: 10px
• Kolor dolnej krawędzi: #eeeeee

Dodawanie CTA paska bocznego do prawej kolumny

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 podstawowego: do lewej
• Wyrównanie modułu: w lewo

Aktualizuj ustawienia kolumny 3

W przypadku tego CTA w prawej kolumnie dodamy górny margines do kolumny, aby ustalić pozycję początkową CTA paska bocznego w punkcie dalej na stronie.

Najpierw otwórz ustawienia dla kolumny 3 i dodaj tę samą klasę CSS, którą dodaliśmy do kolumny 1:

• Klasa CSS: sticky-cta

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

Pulpit

margin-top: 50%

Tablet

margin-top: 0%

To da nam inny punkt wyjścia dla przyklejonego CTA w prawej kolumnie, który jest równy 50% szerokości wiersza. Możesz dowolnie dostosować tę wartość do własnego wpisu na blogu.

Dodawanie niestandardowego CSS do szablonu za pomocą modułu kodu

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

Następnie wklej następujący kod 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 podczas przewijania umieszcza CTA na środku w pionie. 50vh to w zasadzie połowa wysokości okna przeglądarki, a 130px to mniej więcej połowa wysokości CTA. Jeśli masz CTA, które ma większą/mniejszą wysokość, będziesz musiał dostosować 130 pikseli w górę lub w dół.

Zapisz ustawienia

Gdy skończysz, zapisz układ szablonu.

A następnie zapisz ustawienia kreatora motywów

Ostateczny wynik

Aby zobaczyć ostateczny wynik, odwiedź wpis na blogu, który korzysta z szablonu.

I w ten sposób przyklejone CTA na pasku bocznym będą przyklejać się do przewijania. Możesz zobaczyć, jak to działa najlepiej w przypadku dłuższych treści postów.

I oto jest na wyświetlaczu mobilnym.

Końcowe przemyślenia

Te przyklejone wezwania do działania na pasku bocznym są odświeżającą alternatywą dla tradycyjnego paska bocznego. Dobrze pasują do minimalistycznego designu, ponieważ są mniej inwazyjne i nie sprawiają, że post jest zagracony. Dodatkowo możesz umieścić CTA dalej w dół strony, aby stopniowo pojawiało się i przyklejało się do przewijania, dzięki czemu wyróżniało się nieco bardziej 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 również wybrać, aby po jednej stronie pozostało tylko jedno wezwanie do działania. Wydaje się, że ma wiele zastosowań.

Mam nadzieję, że w przyszłości poprawi to sposób wyświetlania CTA w szablonach postów.

Więcej inspiracji znajdziesz w naszych podobnych postach o przyklejonych elementach.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!