Eleganckie ukrywanie kopii poniżej przegródek sekcji w oszałamiającym designie dzięki Divi

Wbudowane opcje Divi pozwalają używać jednego konkretnego ustawienia projektowego do wielu celów, co z kolei pomaga pobudzić kreatywność. Dzisiaj zamierzamy użyć dzielników sekcji w unikalny sposób, aby elegancko ukryć kopię Twojej witryny. To świetny sposób na dodanie dodatkowej interakcji do Twojej strony bez potrzeby stosowania niestandardowego kodu. Odtworzymy piękny przykład od zera, a plik JSON z tego przykładu będzie można pobrać za darmo.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz układ za DARMO

Aby położyć swoje ręce na darmowym układzie, 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!

Zacznijmy odtwarzać!

Dodaj sekcję #1

Pierwszą rzeczą, którą musisz zrobić, to dodać nową zwykłą sekcję do strony, nad którą pracujesz.

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Dodaj moduł tekstowy do kolumny

Dodaj zawartość H2

Pierwszym modułem, którego potrzebujemy w tym wierszu, jest moduł tekstowy z pewną zawartością H2.

Ustawienia tekstu H2

Przejdź do zakładki projektu i zmień ustawienia tekstu H2.

• Czcionka nagłówka 2: Wyświetlacz Playfair
• Grubość czcionki nagłówka 2: Regularna
• Nagłówek 2 Wyrównanie tekstu: do środka
• Rozmiar tekstu nagłówka 2: 70px (komputer), 40px (tablet), 30px (telefon)

Dodaj moduł dzielnika do kolumny

Widoczność

Drugim i ostatnim modułem, którego potrzebujemy w tym rzędzie, jest moduł rozdzielający. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Linia

Zmieniamy też kolor linii w zakładce Projekt.

• Kolor linii: #000000

Rozmiary

Przejdź do ustawień rozmiaru i zastosuj następujące ustawienia:

• Waga dzielnika: 5px
• Szerokość: 27%
• Wyrównanie modułu: Środek

Dodaj sekcję #2

Kolor tła

Dodaj drugą zwykłą sekcję do swojej strony, otwórz ustawienia sekcji i zmień kolor tła.

• Kolor tła: #f7f7f7

Przelewowy

Upewnij się, że ukryłeś również przepełnienie sekcji w zakładce Zaawansowane. Dzięki temu nic nie przewyższy kontenera sekcji.

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Przejścia

Później w tym poście utworzymy przejście po najechaniu kursorem. Aby upewnić się, że działa to płynnie, zwiększymy czas trwania przejścia na karcie Zaawansowane.

• Czas trwania przejścia: 800ms

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i pozwól wierszowi zająć całą szerokość kontenera sekcji, stosując następujące ustawienia:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%

Dodaj moduł tekstowy nr 1 do kolumny

Dodaj zawartość H3

Czas zacząć dodawać moduły, zaczynając od modułu tekstowego. Wprowadź wybrane przez siebie treści H3.

Ustawienia tekstu H3

Przejdź do zakładki projektu i zmień ustawienia tekstu H3.

• Czcionka nagłówka 3: Wyświetlacz Playfair
• Nagłówek 3 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 3: #000000
• Rozmiar tekstu nagłówka 3: 3vw (komputer), 6vw (tablet), 7vw (telefon)

Dodaj moduł dzielnika do kolumny

Widoczność

Drugim modułem, którego potrzebujemy w tym rzędzie, jest moduł dzielnika. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Linia

Zmień również kolor przekładki.

• Kolor linii: #000000

Rozstaw

I dodaj niestandardowy górny i dolny margines, aby stworzyć miejsce.

• Górny margines: 2vw
• Dolny margines: 2vw

Dodaj moduł tekstowy do kolumny

Dodaj zawartość

Następnym modułem, którego potrzebujemy, jest kolejny moduł tekstowy. Dodaj dowolną treść akapitu.

Ustawienia tekstu

Przejdź do zakładki projektu i zmień ustawienia tekstu.

• Czcionka tekstu: Otwórz Sans
• Wyrównanie tekstu: do środka
• Kolor tekstu: #777777
• Rozmiar tekstu: 0,8vw (komputer), 1,7vw (tablet), 2,2vw (telefon)
• Wysokość linii tekstu: 1,8 em

Rozstaw

Następnie dodaj kilka niestandardowych wartości marginesów.

• Lewy margines: 3vw (komputer), 7vw (tablet), 10vw (telefon)
• Prawy margines: 3vw (komputer stacjonarny), 7vw (tablet i telefon)

Dodaj moduł przycisku do kolumny

Dodaj kopię

Następnym i ostatnim modułem, którego potrzebujemy w tym wierszu, jest moduł przycisku. Wprowadź wybraną kopię.

Wyrównanie

Zmień wyrównanie przycisku na karcie projektu.

• Wyrównanie przycisków: środek

Ustawienia przycisków

Kontynuuj, stylizując ustawienia przycisków.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Kolor tekstu przycisku: #000000
• Szerokość obramowania przycisku: 1px
• Promień obramowania przycisku: 0px
• Czcionka przycisku: Wyświetlacz Playfair

Rozstaw

Dodaj także niestandardowe wartości odstępów.

• Górny margines: 2vw
• Górna wyściółka: 1vw
• Dolna wyściółka: 1vw
• Lewa wyściółka: 3vw (komputer), 6vw (tablet), 8vw (telefon)
• Prawa wyściółka: 3vw (komputer), 6vw (tablet), 8vw (telefon)

Dodatkowe ustawienia sekcji

Domyślny górny rozdzielacz

Po zakończeniu dodawania wszystkich modułów do sekcji nadszedł czas, aby przejść przez dodatkowe ustawienia sekcji. Otwórz ustawienia sekcji, przejdź do zakładki projekt i dodaj następującą górną przegrodę:

• Styl dzielnika: Znajdź na liście
• Kolor dzielnika: #e8e8e8
• Wysokość dzielnika: 7000px
• Przerzucanie dzielnika: Pionowy
• Układ rozdzielający: na górze treści sekcji

Unosić górny dzielnik

Zmień wysokość dzielnika po najechaniu kursorem.

• Wysokość dzielnika: 0px

Dolny rozdzielacz

Dodaj również dolną przegrodę.

• Styl dzielnika: Znajdź na liście
• Kolor dzielnika: #5c26ff
• Wysokość dzielnika: 600px
• Układ rozdzielający: na górze treści sekcji

Unieś dolny dzielnik

I usuń wysokość dzielnika po najechaniu.

• Wysokość dzielnika: 0px

Rozstaw

Jak widać na podglądzie tego posta, obracamy tę sekcję w kółko. Aby to zrobić, musimy najpierw dodać kilka niestandardowych wartości marginesów i dopełnienia dla różnych rozmiarów ekranu:

• Lewy margines: 10vw (komputer), 11vw (tablet), 0vw (telefon)
• Prawy margines: 47vw (komputer), 11vw (tablet), 0vw (telefon)
• Górna wyściółka: 8vw (komputer stacjonarny), 15vw (tablet), 16vw (telefon)
• Dolna wyściółka: 8vw (komputer stacjonarny), 15vw (tablet), 16vw (telefon)

Granica

Kontynuuj, dodając „50vw” do każdego z rogów, aby przekształcić sekcję w okrąg. Dodajemy również obramowanie, korzystając z następujących ustawień:

• Szerokość obramowania: 1px
• Kolor obramowania: rgba (255,255,255,0)

Wskaż granicę

Zmień kolor obramowania po najechaniu myszą.

• Kolor obramowania: #000000

Klonuj sekcję dwukrotnie

Po wprowadzeniu wszystkich ustawień sekcji możesz dwukrotnie sklonować sekcję.

Modyfikuj Duplikat #1

Zmień kolor górnego rozdzielacza

Zamierzamy zmodyfikować oba duplikaty sekcji, zaczynając od pierwszego. Otwórz ustawienia sekcji i zmień kolor górnej przegrody.

• Kolor dzielnika: #5c26ff

Zmień kolor dolnej przegrody

Zmodyfikuj również kolor dolnej przegrody.

• Kolor dzielnika: #ff3a5e

Zmień odstępy

Następnie przejdź do ustawień odstępów i upewnij się, że obowiązują następujące wartości:

• Górny margines: -20vw (komputer stacjonarny), 0vw (tablet i telefon)
• Lewy margines: 47vw (komputer), 11vw (tablet), 0vw (telefon)
• Prawy margines: 10vw (komputer), 11vw (tablet), 0vw (telefon)

Modyfikuj duplikat #2

Zmień kolor górnego rozdzielacza

Otwórz ustawienia drugiego duplikatu i zmień kolor górnej przegrody.

• Kolor dzielnika: #ff3a5e

Zmień kolor dolnej przegrody

Zmień również kolor dolnej przegrody.

• Kolor dzielnika: #e8e8e8

Zmień odstępy

I tutaj również zmodyfikuj wartości odstępów.

• Górny margines: -20vw (komputer stacjonarny), 0vw (tablet i telefon)
• Dolny margines: 7vw
• Lewy margines: 10vw (komputer), 11vw (tablet), 0vw (telefon)
• Prawy margines: 47vw (komputer), 11vw (tablet), 0vw (telefon)

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak elegancko ukryć kopię pod przegrodami sekcji. To świetny sposób na korzystanie z niektórych intuicyjnych wbudowanych opcji Divi w inny sposób niż do tej pory. Mamy nadzieję, że ten samouczek zainspiruje Cię do stworzenia własnych alternatywnych projektów również przy użyciu tej techniki. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.