Przejdź do głównej treści

Używanie przezroczystych obrazów do tworzenia doskonałych nakładek kolumn CTA za pomocą 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]

Im bardziej atrakcyjne wizualnie wezwanie do działania, tym większe prawdopodobieństwo, że współczynnik konwersji będzie lepszy. Istnieje wiele sposobów projektowania CTA, ale w tym artykule pokażemy, jak tworzyć piękne modele kolumn CTA z półprzezroczystymi obrazami i nakładającymi się kolumnami. Półprzezroczyste obrazy możesz znaleźć w folderze pobierania poniżej, ale możesz też użyć innych obrazów. Będziesz także mógł pobrać plik JSON za darmo!

Chodźmy.

Zapowiedzi

Zanim przejdziemy do samouczka, rzućmy okiem na wynik na różnych rozmiarach ekranu.

Zacznijmy 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%

rozstaw

Przejdź na kartę 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

Dodaj nową linię

Struktura kolumny

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

zaklejania

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

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

Dodaj moduł tekstowy

Dodaj H2 i treść tekstową

Czas dodać moduły! Najpierw dodaj moduł tekstowy i wstaw treść H2 oraz wybrane akapity.

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

Tytuł 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

rozstaw

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

  • Top Padding: 212px

Dodaj moduł podziału

widoczność

Pod modułem tekstowym dodaj moduł podziału i ustaw widoczność na „Tak”.

  • Widoczność: tak

Linia

Następnie zmień kolor separatora.

  • Kolor linii: Ciemnoszary #545454

zaklejania

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

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

rozstaw

Dodaj także ujemny górny margines.

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

Dodaj nową linię

Struktura kolumny

Kontynuuj dodawanie nowego wiersza z trzema kolumnami o równej wielkości. Będzie to podstawą do zaprojektowania kolumny CTA.

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%

zaklejania

Teraz dostosuj rozmiar linii.

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

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

rozstaw

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

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%

granica

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

  • Zaokrąglone rogi: 2vw na wszystkich rogach

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

przepełnienia

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

  • Przelew poziomy i pionowy: widoczny

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%

granica

Dodaj także promień obramowania do kolumny.

  • Zaokrąglone rogi: 2vw w czterech rogach

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

Transformator

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

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

przepełnienia

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

  • Przelewy poziome i pionowe: widoczne

Ustawienia 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%

granica

Przejdź do karty Projekt i dodaj promień obramowania do każdego rogu.

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

Pole 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

Transformator

Na mniejszych ekranach będziemy musieli zmienić położenie kolumny przy użyciu niestandardowych wartości konwersji transformacji.

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

przepełnienia

Na koniec dostosuj ustawienia przelewu.

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]

  • Przelewy poziome i pionowe: widoczne

Dodaj moduły obrazów

Zaimportuj półprzezroczysty obraz wycięcia

Po zdefiniowaniu wszystkich parametrów kolumny nadszedł czas na dodanie modułów. Dodaj moduł obrazu do kolumny 1 i prześlij wybrany przez ciebie półprzezroczysty obraz. Obrazy, których użyliśmy, znajdują się w skompresowanym folderze pobranym na początku tego artykułu.

zaklejania

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

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

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

Przekształć drabinę w zawis

Dodajemy do obrazu subtelny efekt najechania, używając opcji transformacji skali w parametrach transformacji.

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

Z-Index

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

  • Indeks Z: 1

Zduplikuj i przeciągnij moduły obrazu

Teraz dwukrotnie klonuj moduł obrazu i umieść duplikaty w dwóch pozostałych kolumnach. Proces ten 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

Dodaj moduły tekstowe

Dodaj zawartość H3

Pod obrazem kolumny 1 dodaj moduł tekstowy i wstaw wybraną zawartość H3.

Tytuł 3 Tekst

Przejdź na kartę Projekt 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

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

Dodaj moduły tekstowe

Dodaj treść

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

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

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

Duplikuj 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

Dodaj moduły przycisków

Dodaj treść

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

Dodaj link

Wstaw link w opcjach łącza modułu.

wyrównanie

Teraz wyrównaj moduł przycisku.

  • Wyrównanie: środek

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

rozstaw

Utwórz przycisk i utwórz dolną zakładkę, dodając niestandardowe wartości marginesów i wypeł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

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]

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

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

Przycisk 2 Tekst i kolor ikony

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

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

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

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!

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