Przejdź do głównej treści

Jak wyświetlać animowane banery 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]

Posiadanie wyróżniającego się tytułu zapewnia szansę przyciągnięcia uwagi odwiedzających. Tytuły zwykle nie pozostają niezauważone ze względu na ich rozmiar i centralną pozycję, ale jeśli chcesz pójść dalej i dosłownie pokazać tytuł, jesteś we właściwym miejscu.

W tym samouczku połączymy ustawienia animacji Divi, aby stworzyć wyróżniający się tytuł i przyciągający uwagę odwiedzających.

Ostateczny wynik

Część pierwsza: Projektowanie

Konfiguracja sekcji

Kolor tła

Zacznijmy projektować! Utwórz nową stronę i dodaj zwykłą sekcję. Otwórz ustawienia sekcji i zmień kolor tła.

  • Kolor tła: #EEE

rozstaw

Następnie przejdź do ustawień odstępów sekcji i dodaj niestandardowe marginesy wypełnienia.

  • Wyściółka u dołu: 10vw

Dodaj wiersz 1

Struktura kolumny

Kontynuuj dodawanie nowego wiersza, używając następującej struktury kolumn:

Kolor tła

Bez dodawania kolejnych modułów otwórz ustawienia linii i zmień kolor tła linii.

  • Kolor tła: #DDD

zaklejania

Następnie przejdź do parametrów rozmiaru i pozwól, aby linia wypełniła całą szerokość ekranu.

  • Ustaw tę linię na pełną szerokość: Tak
  • Użyj niestandardowej szerokości rynny: Tak
  • Szerokość rynny: 1

rozstaw

Usuń także domyślne górne i dolne wewnętrzne wypełnienie linii.

  • Wypełnienie na górze: 0px
  • Padding Bottom: 0px

Dodaj moduł tekstowy

Czas zacząć dodawać moduły! Pierwszym modułem, którego potrzebujemy, jest moduł tekstowy. Wpisz pierwszą część tytułu w polu zawartości, używając stylu tekstu akapitowego.

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

Kolor tła

Następnie przejdź do ustawień tła modułu i dodaj kolor tła.

  • Kolor tła: #ccc

Ustawienia tekstu

Zmień także ustawienia tekstu na karcie Projekt.

  • Tekst czcionki: Didact Gothic
  • Waga czcionki tekstu: pogrubiona
  • Kolor tekstu: #000000
  • Rozmiar tekstu: 10vw
  • Wysokość linii tekstu: 0.9em
  • Orientacja tekstu: Centrum

rozstaw

Następnie stwórz wybrany kształt za pomocą niestandardowego wypełnienia u góry iu dołu.

  • Wypełnienie na górze: 10vw
  • Wyściółka u dołu: 3vw

Animacja

Na koniec dodamy animację. Ważne jest, aby upewnić się, że czas trwania animacji i krycie początkowe wynoszą zero. Umożliwi to wyświetlenie modułu tekstowego z efektem flash.

  • Styl animacji: Zanik
  • Powtórz animację: Raz
  • Czas trwania animacji: 0ms
  • Czas animacji: 1000ms

Sklonuj moduł tekstowy x4

Po zakończeniu edycji pierwszego modułu tekstowego możesz kontynuować i klonować go tyle razy, ile chcesz, w zależności od długości tytułu. Do każdej części tytułu, którą chcesz wyświetlić z efektem flash, potrzebujesz osobnego modułu tekstowego. W tym przykładzie będziemy potrzebować dodatkowych modułów 4.

Kolor tła

Z kolorem tła.

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]

  • Kopiuj 1 = Kolor tła: #5900ff, Kolor tekstu: #FFF
  • Skopiuj 2 = pozostaw jako taki, zmień czas trwania animacji (opóźnienie animacji): 1500ms
  • Kopiuj 3 = Kolor tła: #ffb200, kolor tekstu: #FFF, zmień czas trwania animacji: 2000ms
  • Skopiuj 4 = Kolor tła: #000, kolor tekstu #FFF, zmień czas trwania animacji: 2500ms

Dodaj ujemny margines do każdego modułu tekstowego oprócz pierwszego

Po zakończeniu dostosowywania wszystkich modułów tekstowych możesz kontynuować i utworzyć zakładkę. Aby utworzyć to nakładanie, dodamy ujemny górny margines do każdego z duplikatów modułów tekstowych. Innymi słowy, upewniamy się, że wszystkie moduły następujące po pierwszym module znajdują się nad tym pierwszym modułem tekstowym.

  • Górny margines: -31.98vw

Linia transformacji

Przekształć Tłumacz

Kontynuuj, przekształcając całą linię, zaczynając od parametrów transformacji.

  • Dół: -35vw

Przekształć obrót

Zmień także wartości obrotu transformacji.

  • Po lewej: 320deg

Dodaj linię 2

Struktura kolumny

Na drugim miejscu! Po wprowadzeniu efektu tytułowego możemy rozpocząć dodawanie pozostałych modułów. Dodaj nowy wiersz, używając następującej struktury kolumn:

zaklejania

Bez dodawania kolejnych modułów otwórz parametry linii i pozwól linii wypełnić całą szerokość ekranu w parametrach rozmiaru:

  • Ustaw tę linię na pełną szerokość: Tak
  • Użyj niestandardowej szerokości rynny: Tak
  • Szerokość rynny: 1

rozstaw

Usuwa domyślne górne wypełnienie z następnego wiersza.

  • Górna wyściółka: 0px

Dodaj moduł opisu tekstowego do kolumny 2

Dodaj zawartość H1

Nadszedł czas, aby dodać moduły. Pierwszy moduł będzie modułem tekstowym. Możesz dodać żądaną treść.

Ustawienia tekstu H1

Następnie przejdź do karty projektowania i zmień ustawienia H1.

  • Czcionka tytułu: Didact Gothic
  • Tytuł Waga: Bold
  • Rozmiar czcionki: 1.8vw (komputer), 3.8vw (tablet), 4vw (telefon)

rozstaw

Dodaj niestandardowe marginesy w sekcji odstępów.

  • Górny margines: -4vw
  • Dolny margines: 2vw
  • Lewy margines: 30vw
  • Prawy margines: 30vw (komputer), 15vw (tablety i telefon)

Dodaj moduł separatora do kolumny 2

widoczność

Kolejnym modułem jest moduł rozdzielacza. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

  • Pokaż separator: tak

Kolor

Następnie przejdź do zakładki „Projekt” i zmień kolor separatora.

  • Kolor: #000000

Dimentionnement

Zmień także opcje odstępów.

  • Waga odstępów: 8px
  • Szerokość: 7%

rozstaw

Zawsze z opcjami rozmiaru.

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]

  • Niski margines: 1vw
  • Lewy margines: 30vw

Dodaj moduł tekstowy do kolumny 2

Dodaj treść

Następnym modułem będzie inny moduł tekstowy. Musisz podać wybraną treść.

Ustawienie tekstu

Następnie musisz zmienić ustawienia tekstu w zakładce „Projekt”.

  • Rozmiar tekstu: 0.8vw (komputer), 1.3vw (tablet), 1.6vw (telefon)
  • Wysokość linii: 2.2em

rozstaw

Dodaj także marginesy w sekcji odstępów.

  • Niski margines: 3vw
  • Lewy margines: 30vw
  • Prawy margines: 30vw (komputer), 15vw (tablety i telefony)

Dodaj moduł przycisku do kolumny 2

Ustawienia modułu przycisków

Dla ostatniego modułu, który będzie modułem przycisku. Dodasz wybraną treść i zmienisz ustawienia w następujący sposób:

  • Użyj stylu niestandardowego: Tak
  • Rozmiar czcionki: 1vw (komputer), 1.5vw (tablet), 2vw (telefon)
  • Szerokość obramowania przycisku: 0px
  • Czcionka przycisku: Poppins
  • Waga tekstu: pogrubiony
  • Styl czcionki: wielkie litery

rozstaw

Uzyskaj dostęp do ustawień odstępów i dodaj niestandardowy margines zewnętrzny, a także margines wewnętrzny i to wszystko.

  • Lewy margines zewnętrzny: 30vw
  • Wewnętrzna wysoka marża: 1vw
  • Wewnątrz niskiej marży: 1vw
  • Lewy wewnętrzny margines: 3vw
  • prawy wewnętrzny margines: 3vw

Aby zakończyć

W tym samouczku widzieliśmy, jak zaprojektować tytuł z animowanym tekstem, używając tylko wewnętrznych opcji Divi. To doskonała technika, która pozwoli Ci przyciągnąć uwagę odwiedzających w bardzo oryginalny sposób.

Ten artykuł zawiera 1 komentarz

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