Tworzenie unikalnych projektów przycisków Divi za pomocą modułu tekstowego

Być może przyszło Ci już do głowy tworzenie unikalnych projektów przycisków Divi za pomocą modułu tekstowego. Jeśli tak, jesteś bardziej kreatywny niż myślisz! Wraz z wydaniem opcji najechania w Divi, wszystkie moduły mogą być klikalne. Otwiera to drzwi do używania dowolnego modułu (ze wszystkimi jego wbudowanymi ustawieniami projektowymi) jako klikalnego CTA lub przycisku. Na przykład moduł tekstowy umożliwia dodanie do modułu dowolnej ilości tekstu w różnych formatach. Ponadto moduł tekstowy ma również kilka solidnych opcji projektowych do dostosowywania zaokrąglonych rogów w celu tworzenia unikalnych kształtów.

W tym samouczku zamierzam zbadać kilka unikalnych projektów przycisków Divi, które są możliwe przy użyciu modułu tekstowego.

Zacznijmy!

zapowiedź

Oto kilka przykładowych projektów przycisków, które z łatwością stworzymy za pomocą modułu tekstowego.

To jest przycisk z tekstem w dwóch wierszach…

To jest przycisk wykorzystujący element listy…

To jest przycisk wykorzystujący kreatywne rogi…

Tworzenie unikalnych projektów przycisków Divi za pomocą modułu tekstowego

Subskrybuj nasz kanał YouTube

#1 Tworzenie przycisku z wieloma liniami tekstu

Jak wspomniano wcześniej, moduł tekstowy pozwala na nieograniczoną ilość tekstu, więc łatwo byłoby utworzyć przycisk z zaledwie dwoma wierszami tekstu przy użyciu modułu tekstowego w wielu formatach. Za pomocą wysiwyg lub edytora tekstu możesz dodawać tekst akapitowy, nagłówki, łącza, listy i cytaty blokowe. A najlepsze w module tekstowym jest to, że możesz indywidualnie kierować i stylizować każdy z tych formatów tekstu, korzystając z interfejsu użytkownika karty wbudowanego w ustawienia projektu wizualnego konstruktora.

To naprawdę ułatwia dodawanie wielu wierszy tekstu, a następnie stylizowanie każdego wiersza tekstu osobno, aby uzyskać unikalny układ przycisków.

Oto krótki przykład, jak skonfigurować moduł tekstowy jako przycisk z wieloma wierszami tekstu.

Jeśli jeszcze tego nie zrobiłeś, utwórz nową stronę i wdróż konstruktor wizualny. Wybierz opcję „Buduj od podstaw”. Następnie utwórz nową sekcję z jednokolumnowym wierszem. Następnie dodaj moduł tekstowy do wiersza.

W przypadku treści tekstowej użyj zakładki html i wpisz:

<h3>Contact Us</h3>
<h4>WE CAN HELP</h4>

Istnieje wiele różnych stylów tła, które możemy dodać do naszego modułu, ale w tym przykładzie tet dodaje proste tło gradientowe:

Kolor gradientu tła po lewej stronie: #FEE140
Prawy gradient tła: #FA709A

Następnie przejdź do karty projektowania i użyj interfejsu użytkownika karty nagłówków, aby nadać styl tagom nagłówków h3 i h4 w następujący sposób:

Grubość czcionki nagłówka 3: Ultra Bold
Styl czcionki nagłówka 3: TT
Kolor tekstu nagłówka 3: #ffffff
Styl czcionki nagłówka 4: TT
Kolor tekstu nagłówka 4: #ffffff
Rozmiar tekstu nagłówka 4: 16px

Teraz wszystko, co musimy zrobić, to zmienić rozmiar modułu tekstowego, aby wyglądał bardziej jak przycisk. Aby to zrobić, zaktualizuj następujące elementy:

Szerokość: 230px
Niestandardowe wypełnienie: 1 em na górze, 0,5 em na dole, 2 em w lewo, 2 em w prawo

Od czasu wydania nowych opcji najechania Divi, wszystkie moduły mogą stać się klikalne jak przycisk. Aby to zrobić, wróć do zakładki treści i wprowadź adres URL linku modułu.

Oto ostateczny wynik.

Jako efekt najechania możesz dodać cień prostokątny, który przesuwa się po przycisku, ostatecznie stosując nowy kolor tła, aby zastąpić gradient.

Aby to zrobić, otwórz ustawienia modułu tekstowego i zaktualizuj następujące elementy:

Cień pudełka: patrz zrzut ekranu
Pozycja pozioma cienia ramki: 0px (domyślnie), 230px (najechanie)
Pozycja pionowa cienia pudełka: 0px
Kolor cienia: rgba(0,0,0,0) (domyślnie), #fee140 (najechanie)

Oto jak to wygląda po najechaniu kursorem.

#2 Tworzenie przycisku elementu listy

Ponieważ moduły tekstowe umożliwiają dodawanie list (nieuporządkowanych lub uporządkowanych) do treści, możesz skorzystać z tej funkcji, aby utworzyć przycisk listy. Zasadniczo wszystko, co musisz zrobić, to utworzyć listę z jednym elementem listy w polu treści. Następnie owiń element listy znacznikiem nagłówka, aby można było oddzielnie stylizować element punktora listy i tekst nagłówka.

Jeśli jeszcze tego nie zrobiłeś, utwórz nową stronę i wdróż konstruktor wizualny. Wybierz opcję „Buduj od podstaw”. Następnie utwórz nową sekcję z jednokolumnowym wierszem. Następnie dodaj moduł tekstowy do wiersza.

Następnie dodaj następujący kod HTML na karcie tekstowej w ustawieniach treści:

<ol><li><h3>Contact Us</h3></li></ol>

Ważne jest, aby zawinąć tekst elementu listy w znacznik nagłówka, tak abyśmy mogli stylizować punktor/numer elementu listy oddzielnie od tekstu.

Przejdź teraz do zakładki projektowania i zakończ projektowanie modułu tekstowego jako przycisku:

W kategorii ustawień tekstu wybierz zakładkę listy uporządkowanej i zaktualizuj następujące elementy:

Czcionka listy uporządkowanej: Exo 2
Grubość czcionki listy zamówionych: lekka
Kolor tekstu uporządkowanej listy: #000000
Rozmiar tekstu listy uporządkowanej: 20px
Zamówione odstępy między literami: 5px
Typ stylu uporządkowanej listy: dziesiętne-przednie-zero
Pozycja stylu listy uporządkowanej: Na zewnątrz
Wcięcie pozycji listy zamówionej: 2em

W kategorii Tekst nagłówka kliknij zakładkę H3 i zaktualizuj następujące elementy:

Czcionka nagłówka 3: Exo 2
Grubość czcionki nagłówka 3: pół pogrubiona
Styl czcionki nagłówka 3: TT
Kolor tekstu nagłówka 3: #0c71c3
Rozmiar tekstu nagłówka 3: 26px
Wysokość linii nagłówka 3: 0.3em

Następnie zmień szerokość modułu i nadaj mu obramowanie i odstępy, aby wyglądał jak przycisk:

Szerokość (modułu): 262px
Wyrównanie modułu: środek
Niestandardowe wypełnienie: 2em na górze, 0px na dole, 2em w lewo, 2em w prawo
Zaokrąglone rogi: 10px2em
Szerokość obramowania: 1px
Kolor obramowania: #000000
Styl obramowania: solidny

I nie zapomnij dodać linku do swojego modułu do wybranego adresu URL.

Oto ostateczny projekt.

Zapraszam do odkrywania nowych typów stylów list (takich jak Upper Roman), aby uzyskać unikalne projekty przycisków list.

#3 Tworzenie przycisku z kreatywnymi narożnikami (jak liść)

W następnym projekcie wykorzystamy ustawienie zaokrąglonych narożników w module tekstowym. Podstawową ideą jest ustawienie różnych wartości promienia narożników, aby stworzyć przyciski o unikalnym kształcie. W tym przykładzie zamierzam ukształtować nasz moduł tak, aby wyglądał jak przycisk-liść.

Jeśli jeszcze tego nie zrobiłeś, utwórz nową stronę i wdróż konstruktor wizualny. Wybierz opcję „Buduj od podstaw”. Następnie utwórz nową sekcję z jednokolumnowym wierszem. Następnie dodaj moduł tekstowy do wiersza.

Otwórz ustawienia modułu tekstowego i wprowadź następujący kod html w zakładce tekstowej pola treści:

<h3>grow</h3>
<h4>with us</h4>

Dzięki temu możemy umieścić tekst przycisku w dwóch liniach (zmniejszając szerokość w pionie) i stylizować je niezależnie.

Następnie dodaj tło gradientowe o bardziej „listkowym” kolorze.

Kolor lewego gradientu tła: #7cda24
Prawy kolor gradientu tła: #26e051
Kierunek gradientu: 90 stopni

Przejdźmy teraz do ustawień projektu, aby wyśrodkować nasz tekst i nadać styl tagom nagłówka. będziesz musiał wybrać zakładkę h3, aby zaprojektować nagłówek h3 i wybrać zakładkę h4, aby zaprojektować nagłówek h4:

Orientacja tekstu: środek
Czcionka nagłówka 3: Oswald
Grubość czcionki nagłówka 3: Lekka
Styl czcionki nagłówka 3: TT
Kolor tekstu nagłówka 3: #ffffff
Rozmiar tekstu nagłówka 3: 27px
Czcionka nagłówka 4: Oswald
Styl czcionki nagłówka 4: TT
Kolor tekstu nagłówka 4: #ffffff

Kontynuuj aktualizację projektu, aby nadać modułowi tekstowemu odpowiednią szerokość i odstępy dla przycisku.

Szerokość: 178px
Wyrównanie modułu: środek
Niestandardowe wypełnienie: 2 em na górze, 2 em na dole, 1 em po lewej, 1 em po prawej

Na koniec możemy dodać nasze niestandardowe zaokrąglone rogi, aby nadać modułowi kształt liścia, a następnie dodać cień pudełka, aby liść wyglądał bardziej jak żywy. Aby to zrobić, zaktualizuj następujące elementy:

Najpierw odblokuj opcję zaokrąglonych narożników, aby można było przypisać indywidualne wartości do każdego narożnika.

Lewy górny róg: 100px
Prawy dolny róg: 100px

Następnie dodaj cień do pudełka…

Cień pudełka: patrz zrzut ekranu
Pozycja pozioma cienia pudełka: 25px
Pozycja pionowa cienia pudełka: -4px
Siła rozprzestrzeniania się cieni w pudełku: -12px
Kolor cienia: rgba(0,0,0,0.25)

Nie zapomnij dodać adresu URL łącza modułu, aby moduł łączył się z żądaną lokalizacją.

Oto ostateczny projekt.

Aby uzyskać efekt najechania, możesz zmieniać wartości zaokrąglonych narożników, aby umieścić projekt przycisku w przeciwnym kierunku po najechaniu:

A oto jak wygląda efekt zawisu.

Końcowe przemyślenia

Zawsze miło jest od czasu do czasu myśleć nieszablonowo, jeśli chodzi o projektowanie stron internetowych z Divi. Mamy nadzieję, że ten samouczek pomoże w wymyśleniu nowych i kreatywnych projektów przycisków divi za pomocą modułu tekstowego. W rzeczywistości sugerowałbym zbadanie innych modułów (takich jak moduł Blurb), aby uzyskać jeszcze więcej opcji projektowych.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!