Przejdź do głównej treści

Jak utworzyć animowany pasek promocji na Divi

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]

Utworzenie animowanego paska promocji dla szablonu strony w Divi może być świetnym sposobem na reklamowanie stylowych produktów i ofert bez konieczności korzystania z wtyczki. Korzystając z zaawansowanych funkcji projektowych Divi, można wizualnie utworzyć pasek promocji podczas edycji szablonu w Konstruktorze motywów Divi. Następnie, gdy szablon będzie gotowy, pasek promocji 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.

Tworzenie animowanego paska promocji u góry szablonu strony

Utwórz nowy szablon

Z pulpitu nawigacyjnego WordPress przejdź do Divi> Konstruktor 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 promocyjny do obszaru ciała modelu (nie nagłówka), aby działał z domyślnym nagłówkiem Divi, a także ze wszystkimi nagłówkami konfigurowalny, który możesz dodać później.

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

Dodanie paska promocji do modelu

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

Zacznij od dodania wiersza kolumny 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.

Ł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]

Parametry kolumny

Przed opuszczeniem ustawień linii 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 wykorzystuje właściwość flex do wyrównania zawartości (lub modułów) w kolumnie, aby układać ją w stosy (obok siebie). Centruje również moduły w kolumnie pionowo i poziomo. Powodem tego jest unikanie konieczności używania wielu struktur linii kolumnowych, które będą się układać jeden na drugim na telefonie komórkowym. W tej konfiguracji zawartość pozostanie wyrównana poziomo na wszystkich szerokościach przeglądarki.

Jesteśmy teraz gotowi do dodania treści do paska promocji.

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 szary okrąg plus ikonę wewnątrz linii 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
  • Czas animacji: 250ms

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 tekstu prezentacji niż poniżej.

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]

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: odbicie
  • Czas animacji: 1000ms

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: odbicie
  • Kierunek animacji: w dół
  • Czas trwania animacji: 500ms
  • Czas animacji: 250ms
  • 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. Ponieważ jednak jest to szablon, musimy upewnić się, że dodajemy moduł publikowania treści, aby wyświetlać zawartość strony lub stron korzystających z tego szablonu.

W przypadku stron, które są budowane (lub będą budowane) za pomocą Divi Builder, będziesz chciał użyć modułu publikującego o pełnej szerokości, aby zmaksymalizować obszar zawartości.

(UWAGA: W przypadku stron korzystających z domyślnego edytora należy użyć standardowego modułu treści publikowania 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.

To tyle. Upewnij się teraz i zapisz układ przed wyjściem z edytora.

Następnie zapisz zmiany dla konstruktora motywów.

Ostateczny wynik

Przed

Oto strona przed przypisaniem szablonu 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:

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]

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

position: relative;

Teraz sprawdź wynik.

W przypadku poprzednich konwersji możesz także dodać adres URL linku do całej linii, w opcji linku Ustawienia linii.

końcowe przemyślenia

W tym samouczku pokazaliśmy, jak zaprojektować pasek promocyjny (od zera) za pomocą programu Divi Theme Builder. Pasek promocyjny jest wyposażony w wiele animacji i projektów, dzięki którym jest naprawdę widoczny dla odwiedzających. Możesz nawet poprawić pasek promocji, przewijając stronę w dół, aby uzyskać jeszcze lepszą widoczność. Dzięki możliwości kontrolowania położenia paska promocji w Twojej witrynie aplikacja jest niezwykle wygodna.

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