Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 901.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62.

Im bardziej atrakcyjne wizualnie wezwanie do działania, tym większa szansa na współczynnik konwersji. Istnieje wiele sposobów projektowania wezwań do działania, ale w tym artykule pokażemy, jak tworzyć wspaniałe szablony kolumn wezwań do działania z półprzezroczystymi obrazami i nakładającymi się kolumnami. Możesz znaleźć półprzezroczyste obrazy w folderze pobierania poniżej, ale możesz użyć innych obrazów. Będziesz także mógł bezpłatnie pobrać plik JSON!

Chodźmy.

Zapowiedzi

Zanim przejdziemy do samouczka, przyjrzyjmy się, jak to wygląda na różnych rozmiarach ekranu.

Blurb divi designZacznijmy od nowa!

Dodaj nową sekcję

kontekst

Zacznij od utworzenia nowej strony lub dodania nowej zwykłej sekcji do istniejącej strony. Następnie przejdź do ustawień sekcji i dodaj tło gradientowe.

  • Tło: gradient
  • Gradient koloru gradientu: bardzo jasny szary #efefef
  • Kolor tła drugi: biały #ffffff
  • Typ gradientu: promieniowy
  • Kierunek promieniowy: środek
  • Pozycja początkowa: 52%
  • Końcowa pozycja: 50%

Sekcja Divi w tle

rozstaw

Przejdź do zakładki Projekt i dostosuj wypełnienie w ustawieniach odstępów.

  • Górna i dolna wyściółka
    • Biuro: 0vw
  • Tapicerka W Pończochach
    • Tablet + telefon: 70vw

Konfigurowanie wypełnienia sekcji diviDodaj nową linię

Struktura kolumny

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

Dodaj nową linię divizaklejania

Następnie dostosuj szerokość i maksymalną szerokość linii.

  • Szerokość: 100%
  • Maksymalna szerokość 100%

Rozmiarówka Nexopos

Dodaj moduł tekstowy

Dodaj H2 i treść tekstową

Czas dodać moduły! Najpierw dodaj moduł tekstowy i wstaw trochę treści i akapitów H2, które chcesz.

Dostosowywanie modułu tekstowego

teksty

Przejdź do karty projektu i stylizuj tekst w następujący sposób:

  • Tekst czcionki: Open Sans
  • Wyrównanie tekstu: środek
  • Kolor tekstu: zielony #5bba1b
  • Rozmiar tekstu:
    • Biuro: 1.2vw
    • Tablet: 2.8vw
    • Telefon: 3.6vw
  • Rozstaw liter: 0.2vw
  • Wysokość linii tekstu: 1.8em

Konfiguracja stylu modułu tekstowego WordpressTytuł 2 Tekst

Po stylizowaniu tekstu akapitu stylizuj również tekst H2.

  • Sekcja: H2
  • H2 Waga czcionki: Doppio One
  • H2 Wyrównanie tekstu: Środek
  • Kolor tekstu H2: #3d3d3d
  • H2 Rozmiar tekstu:
    • Biuro: 4.4vw
    • Tablet: 5.9vw
    • Telefon: 6.9vw

Dostosuj na czele divirozstaw

I dodaj trochę wypełnienia u góry.

  • Top Padding: 212px

Dostosowywanie dopełnienia modułu tekstowego

Dodaj moduł podziału

widoczność

W module Tekst dodaj moduł podziału i ustaw widoczność na „Tak”.

  • Widoczność: tak

Pokaż moduł dzielnika divi

Linia

Następnie zmień kolor separatora.

  • Kolor linii: Ciemnoszary #545454

Dostosuj kolor linii divi

zaklejania

Teraz dostosuj rozmiar separatora, aby wyglądał na mniejszy.

  • Waga separatora: 4px
  • Szerokość: 9%
  • Wyrównanie modułu: centrum

Dostosuj wyrównanie divi

rozstaw

Dodaj także ujemny górny margines.

  • Górny margines:
    • Biuro: -40px
    • Tablet + telefon: -15px

Dzielnik modułu ujemnego depozytu zabezpieczającego

Dodaj nową linię

Struktura kolumny

Kontynuuj, dodając nowy wiersz z trzema kolumnami o jednakowym rozmiarze. Będzie to podstawa do zaprojektowania kolumny CTA.

Wiersz ma 3 kolumny divi

kontekst

Przed dodaniem modułów dodaj gradient do tła parametrów linii.

  • Tło: gradient
  • Gradient koloru tła 1: biały #ffffff
  • Kolor tła gradientowego dwa: przezroczysty
  • Typ gradientu: promieniowy
  • Promieniowe centrum sterowania
  • Pozycja początkowa: 42%
  • Końcowa pozycja: 50%

Ustawienie parametrów linii Divi

zaklejania

Teraz dostosuj rozmiar linii.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala tworzyć Łatwo i za darmo dowolny projekt strony internetowej lub bloga o profesjonalnym wyglądzie. Przestań płacić dużo za stronę internetową, którą możesz zrobić sam.

  • Szerokość: 100%
  • Maksymalna szerokość: 100%

Rozmiary linii Divirozstaw

Następnie przejdź do ustawień odstępów i dodaj niestandardowe wartości wypełnienia.

  • górna tapicerka: 22vw
  • Wyściółka u dołu: 10vw
  • Lewe i prawe wypełnienie: 10vw

Konfigurowanie dopełnienia linii divi

Ustawienia kolumny 1

kontekst

Kontynuuj, otwierając kolumnę 1 i dodając tło gradientowe.

  • Tło: gradient
  • Kolor tła gradientowego: Niebieski #2a4eed
  • Kolor tła gradientowego dwa: jasnoniebieski #91f5f7
  • Rodzaj gradientu: liniowy
  • Gradient Direction: 38deg
  • Pozycja początkowa: 23%

Konfiguracja gradientowego divi

granica

Następnie zdefiniuj zaokrąglone rogi kolumn w ustawieniach obramowania.

  • Zaokrąglone rogi: 2vw na wszystkich rogach

Konfiguracja z zaokrągloną kolumną

Pole cienia

Dodaj też subtelny odcień pudełka.

  • Box Shadow: druga opcja
  • Cień pudełka Pozycja pozioma: 6px
  • Pozycja pionowa w polu cienia: -10px
  • Box Shadow Blur Force: 50px

Konfiguracja cienia kolumny 1

przepełnienia

Upewnij się, że przepełnienia kolumny są również widoczne.

  • Przelew poziomy i pionowy: widoczny

Konfiguracja przepełnienia kolumny Divi

Ustawienia kolumny 2

kontekst

Przejdź do drugiej kolumny i dodaj następujące tło gradientowe:

  • Tło: gradient
  • Kolor gradientu pierwszego: #1ba038
  • Dwukolorowy gradient w tle: #c6f727
  • Rodzaj gradientu: liniowy
  • Gradient Direction: 38deg
  • Pozycja początkowa: 23%

Ustawienie divi w drugiej kolumnie

granica

Dodaj także promień obramowania do kolumny.

  • Zaokrąglone rogi: 2vw w czterech rogach

Konfiguracja kolumn 2 zaokrąglone divi

Pole cienia

Z subtelnym kloszem.

  • Box Shadow: druga opcja
  • Cień pudełka Pozycja pozioma: 6px
  • Pozycja pionowa w polu cienia: -10px
  • Box Shadow Blur Force: 50px

Konfiguracja cienia kolumny 2 divi

Transformator

Ta kolumna jest trochę wyższa niż inne. Aby stworzyć ten efekt, dostosujemy ustawienia konwersji transformacji dla kolumny 2.

  • Przetłumacz transformator:
    • Biuro: -8vw, oś y
    • Tablet + telefon: 30vw, oś Y

Konfiguracja pozycji kolumny 2 divi

przepełnienia

Widoczne są również przepełnienia tej kolumny.

  • Przelewy poziome i pionowe: widoczne

Konfiguracja widoczności kolumny 2 diviUstawienia kolumny 3

kontekst

Przejdźmy do ostatniej i ostatniej kolumny! Dodaj tło gradientowe.

  • Tło: gradient
  • Gradientowy kolor tła 1: #f0562c
  • Dwukolorowy gradient w tle: #f1a526
  • Rodzaj gradientu: liniowy
  • Gradient Direction: 38deg
  • Pozycja początkowa: 23%

Konfiguracja tła kolumna 3 divigranica

Przejdź do zakładki Projekt i dodaj promień obramowania do każdego rogu.

  • Zaokrąglone rogi: 2vw na wszystkich rogach.

Konfiguracja z zaokrąglonymi krawędziami kolumna divi 3Pole cienia

Dodaj również odcień pudełka.

  • Box Shadow: druga opcja
  • Cień pudełka Pozycja pozioma: 6px
  • Pozycja pionowa w polu cienia: -10px
  • Box Shadow Blur Force: 50px

Kolumna konfiguracji Border Divi 3

Transformator

Na mniejszych ekranach będziemy musieli zmienić położenie kolumny, używając niestandardowych wartości konwersji przekształcania.

  • Przetłumacz transformator:
    • Tablet + telefon: 60vw

Transformacja modułu Divi

przepełnienia

Chcesz sprzedawać swoje produkty w Internecie?

Pobierz bezpłatnie WooCommerce, najlepsze wtyczki e-commerce, aby sprzedawać swoje fizyczne i cyfrowe produkty na WordPress i łatwo tworzyć swój sklep internetowy. Idealny dla początkujących.

Na koniec dostosuj ustawienia przelewu.

  • Przelewy poziome i pionowe: widoczne

Konfiguracja przepełnienia Divi

Dodaj moduły obrazów

Zaimportuj półprzezroczysty obraz wycięcia

Po ustawieniu wszystkich parametrów kolumny nadszedł czas na dodanie modułów. Dodaj moduł obrazu do kolumny 1 i prześlij wybrany półprzezroczysty obraz. Obrazy, których użyliśmy, możesz znaleźć w spakowanym folderze, który mogłeś pobrać na początku tego artykułu.

Dodaj przezroczysty obraz divi

zaklejania

Zrób moduł o pełnej szerokości.

  • Przełącz na tryb pełnej szerokości: Tak

Przełącz na moe o pełnej szerokości

rozstaw

Następnie dodaj niestandardowy margines i wartości wypełnienia.

  • Górny margines:
    • Biuro: -11vw
    • Tablet + telefon: -24vw
  • Wyściółka lewa i prawa:
    • Biuro: 5vw
    • Tablet + telefon: 20vw

Moduł obrazu konfiguracji dopełnienia divi

Zmień drabinę w unoszący się w powietrzu

Dodajemy do obrazu subtelny efekt po najechaniu za pomocą opcji skali transformacji w ustawieniach transformacji.

  • Skala transformacji po najechaniu kursorem: 120% na obu osiach.

Konwertuj na obraz modułu Hover Divi

Z-Index

Aby upewnić się, że obraz pojawi się u góry kolumny, zwiększ wartość indeksu z na karcie Zaawansowane.

  • Indeks Z: 1

Moduł obrazu Divi konfiguracji Zindex

Zduplikuj i przeciągnij moduły obrazu

Teraz dwukrotnie sklonuj moduł obrazu i umieść duplikaty w pozostałych dwóch kolumnach. Ten proces jest łatwiejszy w trybie przewodowym.

  • Zacznij od dwukrotnego skopiowania modułu obrazu
  • Następnie przeciągnij nowe moduły obrazów do kolumn 2 i 3.
  • Pobierz różne obrazy

Zduplikuj i przenieś moduł obrazu

Dodaj moduły tekstowe

Dodaj zawartość H3

Pod obrazem w kolumnie 1 dodaj moduł tekstowy i wstaw dowolną zawartość H3.

Dodaj tekst modułu Divi

Tytuł 3 Tekst

Przejdź do karty projektu i zastosuj styl do ustawień tekstu H3.

  • Tytuł tekstu: H3
  • Czcionka H3: Doppio One
  • H3 Waga czcionki: pogrubiona
  • H3 Wyrównanie: środek
  • Kolor tekstu H3: biały #ffffff
  • H3 Rozmiar tekstu:
    • Biuro: 1.8vw
    • Tablet: 5vw
    • Telefon: 6vw

Parametr modułu tekstowego Divi

Duplikuj i przeciągaj moduły tekstowe

Sklonuj moduł tekstowy dwukrotnie i umieść duplikaty w dwóch pozostałych kolumnach.

  • Zacznij od dwukrotnego skopiowania modułów tekstowych.
  • Następnie przeciągnij je pod moduły obrazu w kolumnach 2 i 3.
  • Zmień treść w każdym nowym module tekstowym

Powiel moduł divi text

Dodaj moduły tekstowe

Dodaj treść

Pod modułem tytułowym dodaj nowy moduł tekstowy. Dodaj treść akapitu w obszarze zawartości.

Dodaj tekst modułu divi

teksty

Teraz stylizuj tekst w następujący sposób.

  • Tekst czcionki: Open Sans
  • Kolor tekstu: biały #ffffff
  • Rozmiar tekstu:
    • Biuro: 0.6vw
    • Tablet: 2vw
    • Telefon: 2.8vw
  • Wysokość linii tekstu: 2.2em

Opis konfiguracji modułu divi

rozstaw

Aby wyśrodkować tekst, dostosuj odstępy między modułami w następujący sposób.

  • Dolna marża:
    • Biuro: 5vw
    • Tablet + telefon: 10vw
  • Wyściółka w lewo i prawo
    • Biuro: 5vw
    • Tablet + telefon: 14vw

Układ DiviDuplikuj i przeciągaj moduły tekstowe

Sklonuj moduł tekstowy dwa razy i przeciągnij duplikaty do pozostałych dwóch kolumn.

  • Zacznij od dwukrotnego skopiowania modułów tekstowych
  • Następnie umieść duplikaty w kolumnach 2 i 3
  • Zmień zawartość każdego duplikatu

Powiel moduł tekstowy w innej kolumnie diviDodaj moduły przycisków

Dodaj treść

Przejdźmy do ostatniego modułu! Dodaj moduł przycisku do kolumny 1 z wybraną kopią.

Dodaj moduł przycisku Divi

Dodaj link

Wstaw link w opcjach łącza modułu.

Konfiguracja łącza modułu Diviwyrównanie

Teraz wyrównaj moduł przycisku.

  • Wyrównanie: środek

Konfiguracja dopasowania modułu przycisku Divi

Style przycisków

Następnie wywołaj przycisk w następujący sposób.

  • Rozmiar tekstu przycisku:
    • Biuro: 1vw
    • Tablet: 2vw
    • Telefon: 3vw
  • Kolor tekstu przycisku: Jasnoniebieski #2a4eed
  • Kolor tła przycisku: biały #ffffff
  • Promień granicy przycisku: 50vw
  • Czcionka przycisku: Double One
  • Waga czcionki: pogrubiona
  • Kolor przycisków: jasny niebieski #2a4eed

Konfiguracja kolorów przycisków modułu Divi

rozstaw

Uformuj przycisk i utwórz zakładkę u dołu, dodając niestandardowy margines i wartości dopełnienia w ustawieniach odstępów.

  • Dolna marża:
    • Biuro: -1.7vw
    • Tablet: -4vw
    • Telefon: -6vw
  • Tapicerka góra i dół:
    • Biuro: 1vw
    • Tablet + telefon: 3vw
  • Wyściółka w lewo i prawo
    • Biuro: 4vw
    • Tablet + telefon: 10vw

przycisk odstępu

Pole cienia

Na koniec dodaj do przycisku subtelny odcień pudełka.

  • Cień pudełka: pierwsza opcja
  • Poziome położenie cienia pudełka: 0px
  • Pozycja pionowa cienia pudełka: 2px
  • Box Shadow Blur Force: 50px

Konfiguracja divi modułu cienia

Duplikuj i przeciągaj moduły przycisków

Podobnie jak w przypadku poprzednich modułów, klonuj przycisk dwukrotnie i umieść duplikaty w pozostałych dwóch kolumnach linii.

  • Sklonuj moduł przycisku dwa razy
  • Umieść duplikaty w kolumnach 2 i 3

Zduplikowany moduł przycisku DiviPrzycisk 2 Tekst i kolor ikony

Zmień kolor przycisku i ikony modułu przycisków w kolumnie 2.

  • Kolor tekstu przycisku: zielony # 1ba038
  • Kolor ikony: # 1ba038

Moduł przycisku Divi

Przycisk 3 Tekst i kolor ikony

Zrób to samo z przyciskiem w ostatniej kolumnie i gotowe!

  • Kolor tekstu przycisków: pomarańczowy #f0562c
  • Kolor ikony: # f0562c

Parametr przycisku Divi

Na koniec

W tym artykule pokazaliśmy, jak korzystać z półprzezroczystych obrazów w celu stworzenia doskonałego projektu kolumny CTA. Zastosowaliśmy ustawienia przepełnienia kolumny Divi, dzięki czemu obrazy i przyciski płynnie się pokrywają. Spróbuj użyć tego projektu w następnym projekcie Divi i powiedz nam, jak on działa w sekcji komentarzy!

1 akcji
udział1
ćwierkanie
Enregistrer