Utwórz pasek promocja animacja szablonu strony w Divi może być świetnym sposobem na reklamowanie eleganckich produktów i ofert bez konieczności polegania na wtyczce. Korzystając z potężnych funkcji projektowych Divi, możesz wizualnie tworzyć promocja podczas edycji szablonu w Divi Theme Builder. Następnie, gdy model jest już gotowy, pasek promocja pojawi się na każdej stronie przypisanej do tego szablonu. 

Pokażemy Ci również, jak ustawić pasek promocji w sposób stały (lub lepki).

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 jednej strony utworzonej za pomocą Divi Builder do celów testowych, na którą będzie mieć wpływ szablon paska promocji.

Utwórz animowany pasek promocji u góry szablonu strony

Utwórz nowy szablon

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

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

Na nowym szablonie kliknij pole „Dodaj niestandardową treść” i wybierz „Utwórz niestandardową treść”.

UWAGA: dodajemy pasek promocji do obszaru ciała modelu (nie nagłówka), aby mógł działać z domyślnym nagłówkiem Divi, a także ze wszystkimi nagłówkami niestandardowe, które możesz dodać później.

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

Dodanie paska promocji do modelu

W edytorze szablonów możemy rozpocząć tworzenie paska promocji za pomocą Divi Builder.

Zacznij od dodania wiersza z jedną kolumną do zwykłej sekcji.

Ustawienia linii

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

• Gradient po lewej stronie: # 4a42ec
• Gradient prawego tła: # 521d91
• Gradient Direction: 90deg
• Użyj niestandardowej szerokości rynny: TAK
• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%
• Tapicerka: 0px u góry, 0px u dołu

Obsługuje to kolor tła i szerokość tworzonego paska promocji.

Parametry kolumny

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

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

Ten CSS używa właściwości flex do wyrównania treść (lub moduły) w kolumnie, aby układać je poziomo (obok siebie). Wyśrodkowuje także moduły w kolumnie w pionie i poziomie. Robimy to w ten sposób, aby uniknąć konieczności używania wielu struktur wierszy kolumn, które na urządzeniach mobilnych będą układać się jedna na drugiej. Przy tej konfiguracji treść pozostanie wyrównany poziomo we wszystkich szerokościach przeglądarki.

Jesteśmy teraz gotowi, aby dodać treść do paska promocyjnego.

Dodaj moduł Blurb

Do treści tego przykładu promocji dołączymy moduł prezentacji z małą ikoną i blog tekstowy z przyciskiem po prawej stronie (podobnie jak pasek promocji na Elegantthemes.com).

Kliknij szare kółko oraz ikonę wewnątrz wiersza i dodaj moduł prezentacji.

W treści tekstu prezentacji wprowadź następujące informacje:

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

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

• Kolor ikony: # ff4a9e
• Obraz / lokalizacja ikon: po lewej
• Użyj rozmiaru czcionki ikony: TAK
• Rozmiar czcionki ikony: 16px
• Rozmiar tytułu tekstu: 16px (komputer stacjonarny), 14px (telefon)
• Hewight tytuł tytułu: 1.3em
• Maksymalna szerokość: 230px (tylko telefon)
• Wypełnienie: najlepsze 10px
• Styl animacji: slajd
• Kierunek animacji: w prawo
• Opóźnienie animacji: 250 ms

Dodanie modułu przycisku

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

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

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

• Margines (na pulpicie): 20px po lewej stronie
• Margines (telefon): 10px po lewej stronie
• Tapicerka (biuro): 0px u góry, 0px u dołu
• Wypełnienie (telefon): 2px u góry, 2px u dołu, 8px po lewej stronie, 8px po prawej
• Styl animacji: odbijanie
• Opóźnienie animacji: 1000 ms

Ustawienia sekcji

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

• Tapicerka: 0px u góry, 0px u dołu
• Styl animacji: odbijanie
• Kierunek animacji: w dół
• Czas trwania animacji: 500 ms
• Opóźnienie animacji: 250 ms
• Animacja Krycie początkowe: 100%
• Indeks Z: 999

Dodanie modułu publikowania treści o pełnej szerokości

W tym momencie pasek promocji jest gotowy. Ale ponieważ jest to szablon, musimy upewnić się, że dodamy moduł publikowania treści, aby wyświetlić zawartość stron korzystających z tego szablonu.

W przypadku stron zbudowanych (lub które 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 zawartości.

(UWAGA: w przypadku stron, które używają domyślnego edytora, będziesz chciał użyć standardowego moda treści posta w zwykłej sekcji, aby domyślnie uzyskać podobną maksymalną szerokość 1080px).

Dodaj sekcję o pełnej szerokości

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

Dodaj moduł treści w formacie Fullwidth

Następnie wybierz moduł Fullwidth Post Content.

Mniej więcej tak. Teraz upewnij się i zapisz układ przed wyjściem z edytora.

Następnie zapisz zmiany dla konstruktora motywów.

Ostateczny wynik

Przed

Oto strona przed przypisaniem modelu do paska promocji.

Później

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

Ulepsz pasek promocyjny

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

position: fixed;width: 100%;

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

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

position: relative;

Teraz sprawdź wynik.

W przypadku poprzednich konwersji możesz również dodać adres URL linku do całego wiersza, w opcji linku Ustawienia wiersza.

końcowe przemyślenia

W tym samouczku pokazaliśmy, jak zaprojektować pasek promocyjny (od podstaw) za pomocą Divi Theme Builder. Pasek promocyjny jest wyposażony w wiele animacji i projektów, dzięki którym jest naprawdę widoczny odwiedzający. Możesz nawet naprawić pasek promocyjny podczas przewijania strony, aby uzyskać jeszcze lepszą widoczność. A dzięki możliwości kontrolowania, gdzie pasek promocji jest umieszczony w Twojej witrynie, aplikacja jest niezwykle wygodna.