Jak stworzyć animowany pasek promocyjny dla szablonów stron w Divi

Opublikowany: 2019-11-23

Tworzenie animowanego paska promocyjnego dla szablonu strony w Divi może być świetnym sposobem na reklamowanie produktów i ofert w dobrym stylu bez konieczności polegania na wtyczce. Korzystając z zaawansowanych funkcji projektowania Divi, możesz wizualnie zbudować pasek promocyjny podczas edycji szablonu w Kreatorze motywów Divi. Następnie, gdy szablon będzie gotowy, pasek promocyjny pojawi się na każdej stronie przypisanej do tego szablonu. Łatwo!

Wskoczmy i zacznijmy!

zapowiedź

Oto krótkie spojrzenie na pasek promocyjny, który stworzymy w tym samouczku.

Pokażemy Ci również, jak naprawić (lub przykleić) pasek promocyjny.

Pobierz szablon strony promocyjnej za DARMO

Aby położyć swoje ręce na szablonie paska promocyjnego 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

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.

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?

Subskrybuj nasz kanał YouTube

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ć szablon paska promocyjnego do tej strony, aby wyświetlić wynik.

Po tym jesteś gotowy do pracy.

Tworzenie animowanego paska promocyjnego na górze szablonu strony

Tworzenie nowego szablonu

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

Przypisz szablon do stron, na których ma być wyświetlany pasek promocyjny.

W nowym szablonie kliknij obszar „Dodaj niestandardową treść”, a następnie wybierz „Zbuduj niestandardową treść”.

UWAGA: Dodajemy pasek promocyjny do obszaru treści szablonu (nie nagłówka), aby mógł współpracować z domyślnym nagłówkiem Divi, a także z dowolnymi niestandardowymi nagłówkami, które możesz dodać w przyszłości.

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

Dodawanie paska promocyjnego do szablonu

W Edytorze układu szablonu możemy rozpocząć tworzenie paska promocyjnego za pomocą Divi Builder.

Zacznij od dodania jednokolumnowego wiersza do zwykłej sekcji.

Ustawienia wiersza

Przed dodaniem modułu zaktualizuj ustawienia wiersza w następujący sposób:

  • Kolor gradientu tła po lewej stronie: #4a42ec
  • Prawy gradient tła: #521d91
  • Kierunek gradientu: 90 stopni
  • Użyj niestandardowej szerokości rynny: TAK
  • Szerokość rynny: 1
  • Szerokość: 100%
  • Maksymalna szerokość: 100%
  • Padding: 0px na górze, 0px na dole

Dba to o kolor tła i szerokość tworzonego przez nas paska promocyjnego.

Ustawienia kolumny

Przed opuszczeniem ustawień wiersza kliknij, aby otworzyć ustawienia kolumny. Następnie dodaj następujący niestandardowy kod CSS do głównego elementu kolumny: 

display: flex;
align-items: center;
justify-content: center;

Ten CSS używa właściwości flex, aby wyrównać zawartość (lub moduły) w kolumnie tak, aby układała się poziomo (obok siebie). Centruje również moduły w kolumnie zarówno w pionie, jak iw poziomie. Powodem, dla którego robimy to w ten sposób, jest uniknięcie konieczności używania struktur z wieloma wierszami kolumn, które będą się nakładać na siebie na urządzeniach mobilnych. Dzięki tej konfiguracji zawartość pozostanie wyrównana poziomo we wszystkich szerokościach przeglądarki.

Teraz jesteśmy gotowi, aby dodać trochę treści do paska promocyjnego.

Dodawanie modułu Blurb

Do treści tej przykładowej promocji dołączymy moduł notki z małą ikoną i blog z tekstem z przyciskiem po prawej stronie (podobnie jak pasek promocyjny na Elegantthemes.com).

Kliknij szare kółko plus ikonę w wierszu i dodaj moduł notki.

Dla treści notki wpisz:

  • Tytuł: [wpisz tekst promocyjny]
  • Użyj ikony: TAK
  • Ikona: ikona prezentu (patrz zrzut ekranu)

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

  • Kolor ikony: #ff4a9e
  • Umieszczenie obrazu/ikony: po lewej
  • Użyj rozmiaru czcionki ikony: TAK
  • Rozmiar czcionki ikony: 16px
  • Rozmiar tekstu tytułu: 16px (komputer), 14px (telefon)
  • Wysokość wiersza tytułu: 1,3 em
  • Maksymalna szerokość: 230px (tylko telefon)
  • Wyściółka: góra 10px
  • Styl animacji: slajd
  • Kierunek animacji: w prawo
  • Opóźnienie animacji: 250 ms

Dodawanie modułu przycisku

Następnie dodaj moduł przycisku pod modułem notki. Ze względu na właściwość flex, moduł pojawi się po prawej stronie notki, a nie pod nią.

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

  • Użyj niestandardowych stylów dla przycisku: TAK
  • Rozmiar tekstu przycisku: 15px (komputer), 13px (telefon)
  • Kolor tekstu przycisku: #ffffff
  • Szerokość obramowania przycisku: 0px
  • Promień obramowania przycisku: 20px
  • Grubość czcionki przycisku: pół pogrubiona

  • Margines (komputer): pozostało 20 pikseli
  • Margines (telefon): pozostało 10px
  • Dopełnienie (komputer): 0px na górze, 0px na dole
  • Padding (telefon): 2px góra, 2px dół, 8px w lewo, 8px w prawo
  • Styl animacji: odbicie
  • Opóźnienie animacji: 1000 ms

Ustawienia sekcji

Aby ukończyć projekt paska promocyjnego, zaktualizuj sekcję zawierającą pasek promocyjny w następujący sposób:

  • Padding: 0px na górze, 0px na dole
  • Styl animacji: odbicie
  • Kierunek animacji: w dół
  • Czas trwania animacji: 500 ms
  • Opóźnienie animacji: 250 ms
  • Początkowe krycie animacji: 100%
  • Indeks Z: 999

Dodawanie modułu treści posta o pełnej szerokości

W tym momencie pasek promocyjny jest gotowy do pracy. Ale ponieważ jest to szablon, musimy upewnić się i dodać moduł treści posta, aby wyświetlać zawartość stron przy użyciu tego szablonu.

W przypadku stron, które są (lub zostaną) zbudowane za pomocą Divi Builder, będziesz chciał użyć modułu treści postów o pełnej szerokości, aby zmaksymalizować obszar treści.

(UWAGA: W przypadku stron korzystających z domyślnego edytora będziesz chciał użyć zwykłego modułu treści postów wewnątrz zwykłej sekcji, aby domyślnie mieć podobną maksymalną szerokość 1080px.)

Dodaj sekcję o pełnej szerokości

W sekcji zawierającej pasek promocyjny dodaj sekcję o pełnej szerokości.

Dodaj moduł treści posta o pełnej szerokości

Następnie wybierz moduł treści posta o pełnej szerokości.

O to chodzi. Teraz upewnij się i zapisz układ przed wyjściem z edytora.

Następnie zapisz zmiany również dla konstruktora motywów.

Ostateczny wynik

Przed

Oto strona przed przypisaniem szablonu do paska promocyjnego.

Później

A oto ta sama strona z nowym szablonem z paskiem promocyjnym.

Tutaj jest na telefonie komórkowym.

Oto animacja paska promocyjnego podczas ładowania strony.

Przyklejanie paska promocyjnego

Aby pasek promocyjny znajdował się pod domyślnym nagłówkiem Divi, możemy dodać prosty fragment kodu CSS do sekcji zawierającej pasek promocyjny.

Otwórz ustawienia sekcji i dodaj następujący kod CSS do głównego elementu na komputerze: 

position: fixed;
width: 100%;

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

position: relative;

Teraz sprawdź wynik.

Nie zapomnij o linkach

Po zbudowaniu paska promocyjnego będziesz chciał dodać adres URL linku do oferty promocyjnej lub strony. Możesz dodać adres URL linku przycisku w zakładce treści ustawień przycisku.

W przypadku nawet wcześniejszych konwersji możesz równie dobrze dodać adres URL linku do całego wiersza, w opcji linku ustawień wiersza.

Końcowe przemyślenia

W tym samouczku pokazaliśmy, jak zaprojektować pasek promocyjny (od zera) za pomocą Divi Theme Builder. Pasek promocyjny jest wyposażony w wiele animacji i projektów, dzięki czemu naprawdę wyróżnia się wśród odwiedzających. Możesz nawet naprawić pasek promocyjny podczas przewijania strony, aby uzyskać jeszcze większą widoczność. A dzięki możliwości kontrolowania, gdzie w witrynie pojawia się pasek promocyjny, aplikacja jest niezwykle praktyczna.

Mam nadzieję, że zainspiruje Cię to do stworzenia kilku własnych barów promocyjnych.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!