Przyciski stylizacji z nowymi opcjami tła Divi (6 wzorów w zestawie)

Jeśli nie skorzystałeś z nowego interfejsu opcji tła Divi, tracisz. Możliwości projektowania tła są zdumiewające. Ale czy nie byłoby wspaniale mieć te same zaawansowane opcje projektowania naszych przycisków? Jeśli odpowiedź brzmi tak, myślę, że spodoba ci się ten post.

Dzisiaj pokażę, jak wprowadzić te same zaawansowane funkcje projektowania tła do stylów przycisków. Ta sztuczka projektowa nakłada tło wierszy i kolumn za modułem przycisków, aby zapewnić 3 warstwy możliwości projektowania. Z taką mocą rzeczy mogą stać się niebezpieczne. Najlepiej zachować spokój i na początku iść powoli

Chodźmy.

zapowiedź

Oto przykładowe projekty przycisków omówione w tym poście.

Przyciski stylizacji z nowymi opcjami tła Divi (6 wzorów w zestawie)

Subskrybuj nasz kanał YouTube

Ustawić

Korzystając z Visual Building, dodaj zwykłą sekcję z jednym wierszem kolumny.

Następnie dodaj moduł przycisku do wiersza.

Następnie zaktualizuj ustawienia modułu przycisków w następujący sposób:

Opcje treści

Tekst przycisku: [wprowadź tekst]
Adres URL przycisku: [wprowadź adres URL]

Opcje projektowe

Wyrównanie przycisków: Środek
Kolor tekstu: jasny
Użyj niestandardowych stylów dla przycisku: TAK
Rozmiar tekstu przycisku: 48px

Zaawansowane opcje

Potrzebna nam szerokość 100% będzie potrzebna do wypełnienia szerokości kolumny. Aby to zrobić, wprowadź następujący niestandardowy kod CSS w polu Element główny:

Width: 100%;

Zapisz ustawienia

W tej chwili nic nie widać na stronie, ponieważ obramowanie przycisku i tekst są białe. Zamiast stylizować kolor tła przycisku za pomocą ustawień modułu przycisku, dostosujemy kolor tła wiersza/kolumny za przyciskiem za pomocą bardziej zaawansowanych opcji tła. Powrócimy do ustawień modułu przycisków, gdy zaczniemy tworzyć bardziej szczegółowe projekty przycisków. Ale na razie zakończmy ustawianie rzędu.

Przejdź do ustawień wiersza, w którym znajduje się nowy przycisk, i zaktualizuj następujące elementy:

Opcje treści

Wybierz kartę Gradient tła kolumny 1 , a następnie kliknij szary okrągły przycisk z białym symbolem plusa.

Teraz powinieneś zobaczyć domyślne kolory gradientu wyświetlane za białym przyciskiem.

Kolumna ładnie mieści się teraz za naszym przyciskiem, ale musimy zmniejszyć szerokość przycisku. W tym celu użyjemy ustawień rozmiaru wiersza. Ustawiając niestandardową szerokość dla naszego wiersza, ustawiamy również szerokość naszego przycisku.

Opcje projektowe

W opcjach projektu dostosujemy rozmiar wiersza, aby pasował do naszego nowego przycisku, dostosowując następujące elementy:

Użyj niestandardowej szerokości: TAK
Szerokość niestandardowa: 500px (ustawia maksymalną szerokość przycisku na 500px)
Niestandardowe dopełnienie: 0px u góry, 0px w prawo, 0px w dół, 0px w lewo

Zaawansowane opcje

Potrzebujemy dopasowania promienia obramowania wiersza i kolumny do tego, co ustawiliśmy dla naszego przycisku, aby wszystkie pasowały. Aby to zrobić, wprowadź następujący niestandardowy kod CSS w polu Main Element:

border-radius: 10px;

Wprowadź ten sam kod CSS w polu Główny element kolumny:

border-radius: 10px;

Zapisz ustawienia

Teraz, gdy ustawienia wiersza zostały zaktualizowane, aby mieć niestandardową szerokość i dopełnienie, osiągnięto dwie rzeczy. Po pierwsze, pomyślnie ustawiliśmy niestandardową szerokość naszego przycisku. Po drugie, mamy teraz kolejną warstwę opcji tła, których możemy użyć do stylizacji naszego przycisku.

To łącznie 3 warstwy tła (przycisk, kolumna, wiersz), których możemy później użyć do stylizacji.

Oto ilustracja aktualnej konstrukcji przycisku.

Całkiem fajnie, prawda?

To tyle, jeśli chodzi o podstawową konfigurację. Teraz nadszedł czas na zabawną część tworzenia niesamowitych projektów przycisków.

Tworzenie niesamowitych projektów przycisków

#1 Przycisk tła wideo

Aby utworzyć ten przycisk, użyjesz wszystkich 3 warstw, tła wiersza dla wideo, tła kolumny dla gradientu i tła przycisku dla lekkiej niebieskiej nakładki.

W ustawieniach wiersza zaktualizuj następujące opcje zawartości :

Wideo w tle: [prześlij wideo]
Kolumna 1 Kolory gradientu tła: rgba(12,113,195,0.41), rgba(131,0,233,0,18)

Zapisz ustawienia

W przypadku ustawień modułu przycisku zaktualizuj następujące elementy:

Opcje treści

Tekst przycisku: „Sprawdź to”

Opcje projektowe

Kolor tła przycisku: rgba (12 113 195 0,25)
Kolor obramowania przycisku: #0c71c3

Zapisz ustawienia

Teraz jedynym problemem, jaki nam pozostał, jest promień obramowania tła wideo. Musimy dodać niestandardowy kod CSS, aby nadać filmowi promień obramowania, który pasuje do przycisku. Ten dodatkowy kod jest potrzebny tylko dla przycisku wideo w tle.

Aby dodać niestandardowy CSS, przejdź do ustawień strony w Visual Builder i kliknij kartę Zaawansowane. Następnie zaktualizuj pole wprowadzania Niestandardowy CSS za pomocą następującego kodu CSS:

.et_pb_section_video_bg {

border-radius: 10px;

}

Zapisz ustawienia

Wskazówka : Inną fajną opcją projektowania jest wyświetlanie wideo po najechaniu myszą. Po prostu nadaj modułowi przycisku jednolity kolor tła i zmień go na przezroczysty po najechaniu myszą.

Otóż ​​to! Teraz masz przycisk z tłem wideo.

#2 Przycisk w kratkę

Przycisk w kratkę wymaga użycia dwóch warstw (wiersza i kolumny) gradientów kolorów tła.

Aby utworzyć ten przycisk, użyjesz 2 warstw, tła wiersza dla pierwszego poziomu gradientów i tła kolumny dla ostatniej warstwy koloru gradientu.

W ustawieniach wiersza zaktualizuj następujące opcje zawartości :

Kolory gradientu tła: #8300e9, #0c71c3
Kierunek gradientu: 270 stopni
Pozycja startowa: 50%
Pozycja końcowa: 0%
Kolumna1 Kolory gradientu tła: rgba(224,11,0,0.39), rgba(255,255,255,0)
Kierunek gradientu: 180 stopni
Pozycja startowa: 50%
Pozycja końcowa: 0%

Zapisz ustawienia

Teraz przejdź do ustawień modułu przycisków i zaktualizuj następujące

Opcje treści

Tekst przycisku: „Subskrybuj”

Opcje projektowe

Szerokość obramowania przycisku: 0px
Odstępy między przyciskami: 10px
Czcionka przycisku: domyślna, pogrubiona (B), kursywa (I)
Odstępy między literami: 10px

Otóż ​​to. Oto ostateczny wynik.

Teraz wiesz, jak dodać efekt szachownicy do swoich przycisków.

#3 Radialny przycisk gradientu

Aby utworzyć ten przycisk, użyjesz 2 warstw (wiersza i kolumny) gradientów kolorów tła.

W ustawieniach wiersza zaktualizuj następujące opcje zawartości :

Kolory gradientu tła: #8300e9, #0c71c3
Typ gradientu: Promieniowy
Kierunek promieniowy: Środek
Pozycja startowa: 50%
Pozycja końcowa: 100%
Kolumna1 Kolory gradientu tła: rgba(224,11,0,0.39), rgba(255,255,255,0)
Typ gradientu: Promieniowy
Kierunek promieniowy: Środek
Pozycja startowa: 50%
Pozycja końcowa: 100%

Zapisz ustawienia

Teraz przejdź do Ustawień modułu przycisków i zaktualizuj następujące elementy:

Opcje treści

Tekst przycisku: „skontaktuj się ze mną”

Opcje projektowe

Szerokość obramowania przycisku: 0px
Czcionka przycisku: podstępne dziewczyny

Ikona przycisku: [wybierz ikonę serca]
Pokaż tylko ikonę po najechaniu na przycisk: NIE

Zaawansowane opcje

Na koniec dodajmy do przycisku cień slajdu. Oprócz poprzedniego kodu wprowadź następujący niestandardowy kod CSS w polu Element główny :

box-shadow: 0px 5px 10px 3px #ccc;

Otóż ​​to! Oto Twój końcowy wynik:

#4 Przycisk Bullseye

Aby utworzyć ten przycisk, użyjesz 2 warstw (wiersza i kolumny) gradientów kolorów tła. Dodatkowo dodamy niestandardowy css w module przycisków, aby stworzyć efekt wyskakującego dolnego obramowania.

W ustawieniach wiersza zaktualizuj następujące opcje zawartości :

Kolory gradientu tła: #023500, #008c02
Typ gradientu: Promieniowy
Kierunek promieniowy: Środek
Pozycja startowa: 19%
Pozycja końcowa: 0%
Kolumna1 Kolory gradientu tła: rgba (0,206,72,0.43), rgba (255,255,255,0)
Typ gradientu: Promieniowy
Kierunek promieniowy: Środek
Pozycja startowa: 32%
Pozycja końcowa: 0%

Teraz przejdź do Ustawień modułu przycisków i zaktualizuj następujące elementy:

Opcje treści

Tekst przycisku: „Kup”

Opcje projektowe

Rozmiar tekstu przycisku: 65px
Szerokość obramowania przycisku: 0px
Czcionka przycisku: Roboto, pogrubienie (B), wielkie litery (TT)

Zaawansowane opcje

Teraz ostatni akcent. Dodaj następujący niestandardowy kod CSS do istniejącego kodu w polu wejściowym elementu głównego :

box-shadow: 0px 5px 0px 0px #01771f;

#5 Przycisk Obrazu

Aby utworzyć ten przycisk, użyjesz wszystkich 3 warstw, wiersza jako obrazu tła, kolumny jako tła gradientowego i tła przycisku jako półprzezroczystej niebieskiej nakładki koloru.

W ustawieniach wiersza zaktualizuj następujące opcje zawartości :

W zakładce Obraz tła

Obraz tła: [prześlij obraz]
Rozmiar obrazu tła: okładka
Pozycja obrazu tła: środek
Powtarzanie obrazu tła: bez powtórzeń
Mieszanie obrazu tła: mnożenie

W zakładce Gradient tła

Kolory gradientu tła: rgba (12 113 195 0,33), #edf000
Typ gradientu: liniowy
Kierunek gradientu: 63deg
Pozycja startowa: 50%
Pozycja końcowa: 100%

Teraz przewiń w dół do opcji tła kolumny 1 i wybierz kartę gradientu.

Kolumna 1 Kolory gradientu tła: rgba(236,239,31,0.66), rgba(0,0,0,0.49)
Typ gradientu kolumny: liniowy
Kierunek gradientu kolumny: 139deg
Pozycja początkowa kolumny: 12%
Pozycja końcowa kolumny: 0%

Zapisz ustawienia

To zajmuje się naszym drugim poziomem projektów tła. Został jeszcze jeden.

Przejdź do Ustawień modułu przycisków i zaktualizuj następujące elementy:

Opcje treści

Tekst przycisku: „Zdobądź bilety”

Opcje projektowe

Kolor tła przycisku: rgba (12 113 195 0,16)
Kolor obramowania przycisku: #efef4f
Czcionka przycisku: Lato
Ikona przycisku: [wybierz ikonę biletów]
Pokaż tylko ikonę po najechaniu na przycisk: NIE

Kolor tekstu najechania przyciskiem: #023b7c
Kolor tła najechania przyciskiem: #023b7c

Otóż ​​to!. Sprawdź swój przycisk obrazu.

#6 Przycisk Portretu

Aby zbudować ten ostatni przycisk, użyjemy tylko jednej warstwy projektu tła. Użyjemy połączenia obrazu tła i koloru tła, aby stworzyć niepowtarzalny wygląd.

W przypadku ustawień wiersza przewiń w dół do opcji tła kolumny 1 i zaktualizuj następujące elementy:

Obraz tła kolumny: [prześlij obraz pionowy]
Rozmiar obrazu tła kolumny: Dopasuj (dzięki temu portret zawsze mieści się w przycisku)
Pozycja obrazu tła kolumny: Środkowy po lewej (wyrównuje portret po lewej stronie przycisku)
Powtarzanie obrazu tła kolumny: bez powtórzeń
Mieszanie obrazu tła kolumny: Jasność (to tworzy ładne połączenie koloru pomarańczowego z portretem)

Pamiętaj, aby usunąć bieżące kolory gradientu, jeśli zostały ustawione. Jeśli nie, chcesz mieć możliwość mieszania pomarańczowego tła. Wystarczy kliknąć kartę gradientu, najechać kursorem na pole wyboru koloru i kliknąć ikonę kosza, która pojawi się w prawym górnym rogu.

Teraz możesz zobaczyć pomarańczową mieszankę na swoim przycisku.

Zapisz ustawienia

Teraz przejdź do Ustawień modułu przycisków i zaktualizuj następujące elementy:

Opcje treści

Tekst przycisku: „Porozmawiajmy”

Opcje projektowe

Wyrównanie przycisków: w prawo
Kolor obramowania przycisku: #ff7b23
Odstępy między przyciskami: 3px
Czcionka przycisku: szczęśliwa małpa
Ikona przycisku [dodaj ikonę czatu]
Pokaż tylko ikonę po najechaniu na przycisk: NIE
Odstępy między literami: 3px

Wszystko gotowe! Podoba mi się ten projekt przycisku kontaktu na blogu. Myślę, że to dodaje miły osobisty akcent.

Projektowanie przycisków na różnych strukturach kolumn

Do tej pory używaliśmy pojedynczych wierszy kolumn jako tła dla naszych przycisków. To pozwala nam na 3 warstwy projektu tła. Jeśli jednak chcesz umieścić przycisk w innej strukturze kolumn, możesz. Po prostu stracisz wiersz jako warstwę tła.

Załóżmy na przykład, że chcesz dodać wiersz 1/2 1/2 kolumny z przyciskiem po lewej stronie i tekstem po prawej stronie. Oto, co byś zrobił.

Zacznij od nowej zwykłej sekcji i wybierz strukturę wierszy 1/2 1/2 kolumny . Następnie dodaj moduł przycisku do lewej kolumny.

W ustawieniach modułu przycisku upewnij się, że w polu wejściowym elementu głównego na karcie Zaawansowane wstawiasz następujący kod CSS:

Width: 100%;

Resztę modułu przycisków można dostosować później.

Następnie przejdź do ustawień wiersza i przewiń w dół do opcji tła kolumny 1 i zaktualizuj ustawienia tła, jak chcesz.

Następnie przejdź do zakładki Projekt i zaktualizuj następujące elementy:

Kolumna 1 Niestandardowe dopełnienie: 0px u góry, 0px w prawo, 0px w dół, 0px w lewo

Zapisz ustawienia

Teraz masz przycisk w lewej kolumnie, który umożliwia korzystanie z opcji tła kolumny 1 dla projektu. Gdy wrócisz i zaktualizujesz styl przycisku według własnych upodobań, dodaj tekst w prawej kolumnie i gotowe!

Czuły?

Tak. Ponieważ przyciski są zbudowane w strukturze kolumnowej Divi, przyciski będą ładnie reagować na wszystkich urządzeniach. Może być konieczne ponowne sprawdzenie ustawień modułu przycisków, aby dostosować sposób, w jaki niektóre elementy przycisków dostosowują się do różnych urządzeń.

Obsługa wielu przeglądarek

Obecnie właściwość CSS background-blend-mode nie jest obsługiwana przez Internet Explorer ani Edge, a Safari ma ograniczone opcje mieszania. Jednak z mojego doświadczenia wynika, że ​​w większości przypadków nie jest to znaczące.

Oto jak wyglądają przyciski w IE:

Jeśli jesteś zaangażowany w IE, sugerowałbym przetestowanie ich, aby znaleźć szczęśliwy środek, który wygląda świetnie zarówno w IE, jak i innych przeglądarkach.

Końcowe przemyślenia

Muszę przyznać, że ten samouczek jest dla mnie osobiście dość przełomowy. W przeszłości musiałem dodać kilka klas i dodatkowy CSS do mojego motywu potomnego, jeśli chciałem kreatywnie stylizować przyciski. Ale teraz, kiedy mogę korzystać z opcji tła Divi, moje życie stało się znacznie łatwiejsze. Mam nadzieję, że możesz wykorzystać tę sztuczkę projektową, aby przenieść swoje przyciski na wyższy poziom.

Czekamy na kontakt z Państwem w komentarzach.

Pozdrawiam