Jak absolutnie pozycjonować przyciski, aby tworzyć unikalne układy przycisków w Divi

Wbudowane opcje pozycji Divi to wygodne narzędzie do projektowania do precyzyjnego pozycjonowania dowolnego elementu Divi, w tym przycisków. W większości przypadków polegamy na domyślnej statycznej pozycji przycisku, która utrzymuje przepływ dokumentu (lub strony). Jeśli jednak wiemy, jak absolutnie rozmieścić przyciski, możemy stworzyć unikalne i praktyczne układy przycisków dla naszej zawartości Divi.

W tym samouczku pokażemy, jak stworzyć 4 różne układy przycisków, które będą wyjątkowo akcentować moduł Blurb Divi. Przyda się to podczas korzystania z notek na swojej stronie internetowej.

Zacznijmy.

zapowiedź

Zapoznaj się z tym krótkim spojrzeniem na cztery układy przycisków, które zbudujemy w tym samouczku.

Pobierz układy przycisków Divi ZA DARMO

Aby położyć swoje ręce na projektach układu przycisków z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Aby zaimportować układ na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik JSON do Divi Builder.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Wybierz opcję „Buduj od podstaw”.

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Tworzenie układu przycisków nr 1: Podwójne dolne przyciski

W przypadku pierwszego z naszych czterech układów przycisków stworzymy podwójne dolne przyciski pod modułem notki. Jest to świetna opcja do prezentowania treści (takich jak usługi), które wymagają dwóch CTA. Dodatkowo jest to świetny sposób, aby przyciski utknęły na dole kolumn o równych wysokościach.

Na początek dodaj do sekcji wiersz z dwiema kolumnami (0, pół i pół).

Ustawienia wiersza

• Użyj niestandardowej szerokości rynny: TAK
• Szerokość rynny: 2
• Wyrównaj wysokości kolumn: TAK
• Szerokość: 100%
• Margines: dolny 50px
• Padding: 0px na górze, 0px na dole

Ustawienia kolumny 1

• Kolor tła: #2e3858
• Wypełnienie: dół 50px

Ta dolna wyściółka stworzy niezbędną przestrzeń, gdy dodamy absolutnie pozycjonowane przyciski.

Projekt modułu Blurb

Następnie dodaj moduł notki do kolumny 1.

Następnie prześlij obraz do modułu notki w następujący sposób:

Przejdź do ustawień projektu i zaktualizuj następujące elementy:

• Wyrównanie obrazu/ikony: do lewej
• Czcionka tytułu: PT Sans
• Grubość czcionki tytułu: pogrubiona
• Kolor tekstu tytułu: #ffffff
• Rozmiar tekstu tytułu: 38px
• Odstępy między literami tytułu: 2px
• Kolor tekstu ciała: #ffffff
• Szerokość obrazu: 40%
• Szerokość treści: 100%
• Szerokość: 100%
• Padding: 50px, góra, 50px dół, 30px w lewo, 30px w prawo

Dodawanie podwójnych przycisków dolnych

Przycisk #1 Design

Dodaj nowy moduł przycisku pod modułem notki.

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

• Rozmiar tekstu przycisku: 16px
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #2dc3a3
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 0px
• Odstępy między przyciskami: 2px
• Czcionka przycisku: PT Sans
• Waga czcionki przycisku: pogrubiona
• Styl czcionki przycisku: TT
• Margines: 0px dół
• Wypełnienie: 1 em góra, 1 em dół, 1,5 em lewy, 2,5 em prawy

Przycisk #1 Pozycjonowanie bezwzględne

Aby umieścić przycisk absolutnie w lewym dolnym rogu kolumny, zaktualizuj następujące elementy:

• Pozycja: bezwzględna
• Lokalizacja: dolny lewy

Divi ułatwia to dzięki wbudowanej, klikalnej siatce lokalizacji. Ponieważ chcemy, aby przycisk znajdował się równo na dole kolumny, nie są potrzebne żadne wartości przesunięcia.

Przycisk #2 Projekt i pozycja

Aby utworzyć przycisk nr 2, zduplikuj poprzedni moduł przycisku.

Duplikat zostanie ułożony bezpośrednio na poprzednim przycisku, więc jeśli używasz wizualnego konstruktora, może się wydawać, że nic się nie stało. Kliknij, aby otworzyć ustawienia modułu przycisku i zaktualizować następujące elementy:

• Kolor tła: #df4570

• Lokalizacja pozycji: dolny prawy

Teraz wymaż pustą kolumnę 2 i zduplikuj kolumnę 1, aby uzyskać dokładnie zduplikowany projekt również w prawej kolumnie.

Układ przycisków #1 Wynik

Sprawdź wynik. Zauważ, że treść w prawej kolumnie przesuwa kolumnę dalej w dół strony, ale ponieważ nasze przyciski są ustawione bezwzględnie, nadal przylegają do dołu, aby uzyskać ładny, symetryczny wygląd.

Tworzenie układu przycisków nr 2: Trzy boczne przyciski

W następnym układzie przycisków umieścimy trzy przyciski na prawo od modułu notki w jednej kolumnie.

Aby przyspieszyć ten następny projekt układu przycisków, zduplikuj poprzedni wiersz.

Ustawienia rozmycia

Zaktualizuj ustawienia notki w następujący sposób:

• Kolor tła: #df4570
• Szerokość obrazu: 60%
• Szerokość: 56% (komputer i tablet), 100% (telefon)

To stworzy pokój, którego potrzebujemy po prawej stronie notki, aby dodać nasz układ z trzema przyciskami.

Przycisk pozycjonowania #1

Aby ustawić przycisk nr 1, otwórz ustawienia przycisku dla zielonego przycisku w lewym dolnym rogu i zaktualizuj następujące elementy:

• Pozycja: bezwzględna (komputer i tablet), względna (telefon)
• Lokalizacja: u góry po prawej
• Przesunięcie w pionie: 20% (komputer i tablet), 0% (telefon)
• Przesunięcie w poziomie: 5% (komputer i tablet), 0% (telefon)

Przycisk pozycjonowania #2

Aby umieścić przycisk nr 2, zduplikuj właśnie umieszczony przycisk. Możesz usunąć czerwony przycisk w prawym dolnym rogu, ponieważ nie będziemy go potrzebować.

Następnie otwórz ustawienia przycisku duplikatu i zaktualizuj następujące elementy:

• Kolor tła: #df4570

Następnie przesuń przycisk nieco w dół, zwiększając przesunięcie w pionie.

• Przesunięcie w pionie: 35%

Przycisk pozycjonowania #3

Na koniec powtórz proces jeszcze raz, powielając poprzedni przycisk i aktualizując następujące elementy:

• Kolor tła: #3599e5
• Przesunięcie w pionie: 50%

Układ przycisków #2 Wynik

Sprawdź końcowy wynik układu z trzema przyciskami.

Tworzenie układu przycisków nr 3: przyciski rozproszone i skalowane

W następnym układzie będziemy umieszczać przyciski nieco bardziej sporadycznie, a następnie dostosować rozmiar kilku przycisków za pomocą skali transformacji.

Aby rozpocząć, zduplikuj poprzedni wiersz zawierający układ trzech przycisków.

Ustawienia rozmycia

Następnie otwórz ustawienia modułu notki w kolumnie 1 i zaktualizuj następujące elementy:

• Szerokość: 60%

• Kolor tła: przezroczysty
• Szerokość: 60%
• Wyrównanie modułu: Środek

• Wyrównanie tekstu: do środka
• Wyrównanie modułu: środek

• Szerokość obramowania: 2px
• Kolor obramowania: rgba (255,255,255,0.15)

• Rozmiar tekstu: 20px

• Margines: górny 50px

Przycisk #1 Pozycjonowanie

• Przesunięcie pionowe: 8%
• Przesunięcie w poziomie: -7%

Przycisk #2 Pozycjonowanie

• Pozycja Lokalizacja: w prawym górnym rogu
• Przesunięcie pionowe: 34%
• Przesunięcie w poziomie: -10%

• Skala transformacji: 80%

Przycisk #3 Pozycjonowanie

• Pozycja Lokalizacja: dolny prawy
• Przesunięcie w pionie: -3%
• Przesunięcie w poziomie: 5%

• Skala transformacji: 138%

Ustawienia wiersza

• Szerokość rynny: 4
• Szerokość: 80% (stacjonarna)

Układ przycisków #3 Wynik

Sprawdź efekt końcowy.

Tworzenie układu przycisków #4: Przyciski z zakładkami

W przypadku tego ostatniego układu przycisków utworzymy kilka zakładek do przeciągania w prawym górnym rogu notki.

Aby przyspieszyć projektowanie, zduplikuj rząd układu przycisków #2.

Ustawienia kolumny

Następnie zaktualizuj ustawienia tła dla kolumny nr 1 w następujący sposób:

• Kolor tła (pulpit): brak (domyślnie)
• Kolor tła (telefon): #2e3858

Na karcie Zaawansowane zaktualizuj opcję widoczności, aby przepełnienie było ukryte na wyświetlaczu telefonu.

• Przepełnienie poziome (telefon): Ukryty
• Przepełnienie pionowe (telefon): Ukryty

Przycisk pozycjonowania uchwytu #1

Teraz możemy użyć trzech przycisków znajdujących się obecnie w kolumnie jako naszych przycisków tabulacji. Otwórz ustawienia górnego przycisku i zaktualizuj następujące elementy:

• Przesunięcie w pionie: 0px
• Przesunięcie w poziomie: 0px

Ponieważ zamierzamy użyć przycisku jako zakładki, musimy zrobić miejsce dla prawej ikony, aby wyglądała na wyśrodkowaną, gdy wystaje zza modułu notki. Śmiało i zaktualizuj dopełnienie przycisków w następujący sposób:

• Wyściółka: 2em w lewo, 3em w prawo

Następnie dodaj następujący niestandardowy kod CSS do elementu After:

padding-left: 10px;

Następnie zaktualizuj poziome przesunięcie na telefonie w następujący sposób:

• Przesunięcie w poziomie (telefon): -134px

Spowoduje to ukrycie lewej strony przycisku poza kolumną na wyświetlaczu telefonu, dzięki czemu pełny przycisk będzie widoczny po najechaniu/kliknięciem.

Przycisk pozycjonowania uchwytu nr 2

Aby umieścić drugi przycisk wysuwania, zduplikuj poprzedni przycisk i zaktualizuj kolor tła duplikatu.

• Kolor tła: #df4570

Następnie zaktualizuj pozycję w następujący sposób:

• Przesunięcie pionowe: 63px

Następnie zaktualizuj następujące opcje pozycji wyświetlacza telefonu:

• Stanowisko (telefon): Względny
• Przesunięcie w pionie (telefon): 0%

Przycisk pozycjonujący nr 3

Na koniec, aby ustawić trzeci przycisk z uchwytem, ​​zduplikuj poprzedni moduł przycisku. Następnie otwórz ustawienia modułu zduplikowanych przycisków i zaktualizuj następujące elementy:

• Kolor tła: #3599e5
• Przesunięcie pionowe: 126px

Po umieszczeniu trzeciego przycisku użyj funkcji wielokrotnego wyboru Divi, przytrzymując Cmd (lub Ctrl) i klikając każdy z modułów przycisków.

Następnie otwórz ustawienia jednego z modułów przycisków i dodaj następującą transformację po najechaniu myszą.

• Przekształć Przesuń oś X (najechanie): 68%

Spowoduje to zaktualizowanie wszystkich trzech przycisków z funkcją zakładki po najechaniu kursorem, przesuwając ją w prawo o 68%.

Pozycjonowanie modułu Blurb

Ten układ przycisków wymaga, aby moduł notki częściowo ukrywał trzy przyciski. Dlatego nadamy notatce szerokość 100%, a następnie użyjemy prawego marginesu, aby odsłonić potrzebny fragment zakładek przycisków. Następnie wszystko, co musimy zrobić, to nadać notatce wysoki indeks Z, aby upewnić się, że znajduje się nad przyciskami.

Otwórz ustawienia modułu notki i zaktualizuj następujące elementy:

• Szerokość: auto
• Margines: 50px w prawo
• Pozycja: Względny
• Indeks Z: 11

Następnie zaktualizuj kolor tła.

• Kolor tła: #2e3858

Ustawienia wiersza

Po zakończeniu używania przycisków z notatkami i zakładkami otwórz ustawienia wiersza i zaktualizuj szerokość, aby dać tym zakładkom trochę miejsca na ruch.

• Szerokość: 80%

Usuń kolumnę 2, a następnie zduplikuj kolumnę 1, aby mieć ten sam projekt w każdym.

Następnie otwórz ustawienia dla kolumny 1 i nadaj jej następujący indeks Z:

• Indeks Z: 12

Dzięki temu przyciski w kolumnie pierwszej nie będą ukryte za treścią w kolumnie 2 po najechaniu kursorem.

Jeśli chcesz, możesz zaktualizować ikony dla każdego przycisku, aby dopasować je do swoich potrzeb.

Układ przycisków #4 Wynik

Sprawdź ostateczny wynik układu przycisku z zakładką.

Ostateczne rezultaty

Końcowe przemyślenia

Pozycjonowanie przycisków absolutnie otwiera drzwi do niekończących się układów przycisków w Divi. Mamy nadzieję, że ten samouczek pomoże ci zrozumieć, jak najlepiej wykorzystać pozycję bezwzględną w Divi. Inne przydatne wbudowane funkcje, takie jak opcje transformacji i indeks Z, sprawiają, że przyciski są absolutnie pozycjonowane.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!