Jak stworzyć pełny układ podzielonego ekranu z unikalnymi przełącznikami w Divi
Opublikowany: 2020-05-06Układy podzielonego ekranu to świetny sposób na dodanie projektu do witryny Divi, która jest pięknie wyważona i niekonwencjonalna. Dzięki nowym opcjom pozycji Divi możemy stworzyć projekt układu podzielonego ekranu przy użyciu dwóch sąsiednich sekcji Divi. To otwiera drzwi do budowania jeszcze bardziej unikalnych układów podzielonego ekranu za pomocą Divi Builder. W tym samouczku omówimy kilka unikalnych funkcji projektowych, podczas gdy tworzymy pełny układ podzielonego ekranu z unikalnymi przełącznikami w Divi.
Zacznijmy.
zapowiedź
Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku.
Przełącza Otwórz
Przełącza zamknięte
mobilny
Pobierz układ za DARMO
Aby położyć swoje ręce na projektach 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 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.
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:
- Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
- Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
- Wybierz opcję „Buduj od podstaw”.
Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.
Część 1: Tworzenie układu podzielonego ekranu z dwiema sekcjami
W tym projekcie wprowadzimy nową technikę, która umieszcza dwie sekcje Divi obok siebie, aby stworzyć projekt podzielonego ekranu. Aby rozpocząć, dodaj jednokolumnowy wiersz do sekcji domyślnej. To rozpocznie projektowanie naszej pierwszej sekcji.
Sekcja 1 Ustawienia
W pierwszej z dwóch sekcji zacznijmy od dodania następujących ustawień projektu:
Tło
- Dodaj obraz tła
- Gradientowy kolor tła po lewej stronie: #ffffff
- Kolor tła gradientu po lewej stronie: rgba (255,255,255,0.45)
Rozmiar i odstępy
Następnie zaktualizuj rozmiar i odstępy tak, aby sekcja zajmowała 50% szerokości przeglądarki i 100% jej wysokości.
- Szerokość: 50% (komputer stacjonarny), 100% (tablet i telefon)
- Minimalna wysokość: 900px (komputer), brak (tablet i telefon)
- Wysokość: 100vh (komputer stacjonarny), auto (tablet i telefon)
- Padding: 0px na górze, 0px na dole
Górny rozdzielacz
- Styl Top Divider: patrz zrzut ekranu
- Kolor górnego rozdzielacza: #333333
- Wysokość dzielnika górnego: 50vh (komputer stacjonarny), 10vh (tablet i telefon)
- Powtarzanie w poziomie górnego podziału: 0,5x (komputer), 1x (tablet i telefon)
- Układ rozdzielacza górnego: zawartość sekcji pod spodem
Dolny rozdzielacz
- Styl dolnego rozdzielacza: patrz zrzut ekranu
- Kolor dolnego rozdzielacza: #02c39a
- Wysokość przegrody dolnej: 50vh (stacjonarny), 30vh (tablet i telefon)
- Powtarzanie w poziomie dolnego podziału: 0,5x (komputer), 1x (tablet i telefon)
- Układ przegrody dolnej: zawartość sekcji pod spodem
Sekcja 2
Powiel sekcję 1
Aby utworzyć sąsiednią sekcję, która zajmie prawą stronę układu podzielonego ekranu, zduplikuj sekcję 1.
Następnie zaktualizuj ustawienia w następujący sposób:
Pozycja
- Pozycja: bezwzględna (komputer), względna (tablet i telefon)
- Lokalizacja: u góry po prawej
- Indeks Z: 10
Tło
- Kolor tła: brak/biały;
Najważniejsze aktualizacje dzielników
- Styl Top Divider: patrz zrzut ekranu
- Kolor górnego rozdzielacza: #02c39a
- Powtarzanie poziome górnego dzielnika: 1x
- Klapka górnej przegrody: pionowa
Przegroda powinna idealnie pasować do sąsiedniego górnego nagłówka w sekcji 1.
Dolny rozdzielacz
- Styl dolnego rozdzielacza: patrz zrzut ekranu
- Kolor dolnego rozdzielacza: #f0f3bd
- Powtarzanie poziome dolnej przegrody: 1x
- Klapka dolnej przegrody: pionowa
Część 2: Sekcja 1 Tytuł i menu
Teraz, gdy układy dwusekcyjne są gotowe, możemy rozpocząć dodawanie treści do każdej z sekcji.
Tworzenie tytułu
Na początek stworzymy duży tytuł w lewej sekcji.
Ustawienia wiersza
Zanim dodamy moduł tekstowy, musimy zaktualizować ustawienia wiersza dla wiersza w sekcji 1 w następujący sposób:
- Szerokość rynny: 1
- Szerokość: 100%
- Maksymalna szerokość: 100%
- Padding: 0px góra, 0px dół, 10% prawo
- Pozycja: bezwzględna (komputer), względna (tablet i telefon)
- Lokalizacja: Środkowy Lewy
Moduł tekstowy
Po wprowadzeniu ustawień wiersza wiersz powinien być wyrównany w pionie w obrębie sekcji. Następnie dodaj nowy moduł tekstowy do wiersza.
Treść tekstowa
Otwórz ustawienia modułu tekstowego i zaktualizuj następującą zawartość:
<h1>Divi <br />Web <br />Design</h1>
Projekt tekstu
Następnie zaktualizuj ustawienia projektu tekstu w następujący sposób:
- Czcionka nagłówka: Poppins
- Grubość czcionki nagłówka: pogrubiona
- Wyrównanie tekstu nagłówka: do prawej
- Rozmiar tekstu nagłówka: 10vw
- Wysokość linii nagłówka: 1,2 em
- Wyściółka: 5% w lewo
Tworzenie menu
W przypadku tego układu, ponieważ mamy dwie sąsiednie sekcje, mamy możliwość dodania układu 6-kolumnowego do jednej lub obu sekcji. Świetnie nadaje się do tworzenia ładnego menu ikon na dole sekcji.
Oto jak to zrobić…
Dodaj nowy wiersz
Aby utworzyć dolne menu, dodaj nowy jednokolumnowy wiersz pod wierszem w sekcji 1. Początkowo dodajemy układ jednokolumnowy, ponieważ później zduplikujemy kolumnę, aby utworzyć wszystkie sześć kolumn.
Ustawienia wiersza
Następnie zaktualizuj następujące ustawienia wierszy:
- Szerokość rynny: 1
- Szerokość: 100%
- Maksymalna szerokość: 100%
- Padding: 0px Góra, 0px Dół
- Pozycja: bezwzględna (komputer), względna (tablet i telefon)
- Lokalizacja: dolny lewy
- Indeks Z: 3
Moduł Blurb
Następnie dodaj moduł notki do nowego wiersza.
Treść rozmycia
Następnie zaktualizuj treść notki w następujący sposób:
- Tytuł: Biznes
- Ikona: Budynki
Stylizacja Blurba
Następnie zaktualizuj ustawienia projektu w następujący sposób:
- Kolor ikony: #333333
- Rozmiar czcionki ikony: 40px
- Wyrównanie tekstu: do środka
- Rozmiar tekstu tytułu: 12px
Następnie dodaj następujący niestandardowy kod CSS do obrazu Blurb
margin-bottom: 10px;
Zduplikowana kolumna
Teraz, gdy mamy zaprojektowaną naszą ikonę w kolumnie pierwszej, możemy przyspieszyć tworzenie i projektowanie pozostałych 5 ikon, duplikując całą kolumnę 5 razy.
Zaktualizuj zawartość dla Blurbs
Po utworzeniu wszystkich 6 kolumn/ikon wróć i zaktualizuj tytuł, ikonę i adres URL każdej notki.
Część 3 Sekcja 2 Przełączniki
Teraz, gdy sekcja 1 jest gotowa, możemy zacząć dodawać przełączniki do prawej sekcji naszego układu podzielonego ekranu. Pojawią się w sumie trzy przełączniki, które odpowiadają dużym słowom w każdym tytule po lewej stronie. Każdemu z przełączników zostanie przydzielona niestandardowa pozycja bezwzględna na pulpicie, która utrzyma je na miejscu.
Ustawienia wiersza
Zanim zaczniemy dodawać moduły toggle, musimy zoptymalizować rozmiar i odstępy rzędu. Otwórz ustawienia wiersza dla wiersza w prawej sekcji i zaktualizuj następujące elementy:
- Szerokość rynny: 1
- Szerokość: 100%
- Maksymalna szerokość: 100% (komputer stacjonarny), brak (tablet i telefon)
- Wzrost: 100%
Wysokość kolumny
Teraz, gdy wiersz ma wysokość równą wysokości przekroju, musimy zrobić to samo dla kolumny. Aby to zrobić, dodaj następujący niestandardowy kod CSS do głównego elementu kolumny:
height: 100%;
Moduł przełączania górnego
Mając wysokość kolumny, dodajmy do wiersza pierwszy moduł przełącznika.
Przełącz zawartość
Następnie zaktualizuj zawartość przełącznika tytułem „Divi” i wklej następującą treść treści:
Your content goes here. Edit or remove this text inline or in the module Content settings. Your content goes here. <a href="#">| Learn More ></a>
Przełącz projekt
Zaktualizuj projekt przełącznika w następujący sposób:
- Kolor ikony: #333333
- Rozmiar czcionki ikony: 40px
- Otwórz przełącznik koloru tła: przezroczysty
- Zamknięty Przełącz kolor tła: przezroczysty
- Kolor tekstu otwartego tytułu: #333333
- Kolor tekstu tytułu: #333333
- Czcionka tytułu: Poppins
- Grubość czcionki tytułu: Ultra Light
- Rozmiar tekstu tytułu: 40px
- Kolor tekstu ciała: #333333
- Waga czcionki łącza: #333333
- Grubość czcionki łącza: pogrubiona
- Styl czcionki łącza: TT
- Kolor tekstu łącza: #333333
- Odstępy między literami: 3px (komputer), 5px (najechanie)
Przełącz rozmiar i pozycję
- Szerokość: 50% (komputer), 80% (tablet i telefon)
- Maksymalna szerokość: 400px
- Szerokość obramowania: 0px
- Przełącz ikonę niestandardowego kodu CSS:
left:-60px;
- Pozycja: bezwzględna (komputer), względna (tablet i telefon)
- Przesunięcie pionowe: 22%
- Przesunięcie w poziomie: 50%
- Indeks Z: 2
Niestandardowy CSS dodany do modułu przełączania umieszcza ikonę przełączania po lewej stronie przełącznika. A ustawienia pozycji umieszczają przełącznik w pozycji bezwzględnej, używając procentowej jednostki długości, która będzie skalowana wraz z szerokością przeglądarki.
Dolny moduł przełączania
Powiel górny przełącznik
Aby utworzyć dolny przełącznik, zduplikuj właśnie utworzony przełącznik.
Aktualizuj pozycję
Następnie otwórz ustawienia przełącznika duplikatów za pomocą pola warstw i zaktualizuj przesunięcie pozycji w następujący sposób:
- przesunięcie pionowe: 70%
Środkowy moduł przełączania
Duplikuj dolny przełącznik
Aby utworzyć przełącznik środkowy, zduplikuj przełącznik dolny.
Aktualizuj pozycję
Następnie zaktualizuj następujące elementy:
- Lokalizacja: Lewy środek
- Przesunięcie w poziomie: 19px
Zaktualizuj rozmiar
- Szerokość: 95%
- Maksymalna szerokość: 500px
niestandardowe CSS
Aby uzyskać opcjonalną funkcję projektowania, możemy dodać niestandardowy fragment kodu CSS do głównego elementu, aby wyrównać tekst po prawej stronie tytułu.
Aby to zrobić, wklej następujący kod CSS w elemencie głównym:
display:flex; align-items:center;
Linie rozdzielające
Teraz, gdy nasze przełączniki są na miejscu, możemy dodać kilka linii rozdzielających, aby połączyć górne i dolne przełączniki z odpowiednim słowem w lewej sekcji.
Górny moduł rozdzielający
Aby utworzyć górną linię podziału, dodaj nowy moduł podziału pod górnym przełącznikiem.
Projekt dzielnika
Następnie zaktualizuj ustawienia projektu dzielnika w następujący sposób:
- Kolor linii: #333333
- Pozycja linii: wyśrodkowana w pionie
- Waga dzielnika: 2px
- Szerokość: 50%
- Przekształć Przetłumacz oś Y: 29px
- Przekształć Przetłumacz oś X: -12px
- Styl animacji: slajd
- Kierunek animacji: w prawo
- Czas trwania animacji: 2000 ms
- Intensywność animacji: 10%
- Początkowe krycie animacji: 100%
Widoczność i pozycja dzielnika
Teraz wszystko, co musimy zrobić, to ukryć separator na urządzeniu mobilnym i ustawić go tak, aby był wyrównany z górnym przełącznikiem.
- Wyłącz na: Telefon i komputer stacjonarny
- Pozycja: bezwzględna
- Przesunięcie pionowe: 22%
- Indeks Z: 1
Dolny moduł rozdzielający
Zduplikowany moduł górnego rozdzielacza
Aby utworzyć dolną przegrodę, zduplikuj górny moduł przegrody.
Aktualizuj pozycję
Następnie zaktualizuj przesunięcie pozycji, aby wyrównać z dolnym przełącznikiem:
- Przesunięcie pionowe: 70%
Ostateczny wynik
Po zakończeniu sprawdź końcowy wynik na aktywnej stronie.
Przełącza Otwórz
Przełącza zamknięte
mobilny
Końcowe przemyślenia
Ten pełny układ podzielonego ekranu zawiera kilka unikalnych technik projektowania, które przydadzą się w wielu przyszłych projektach. Podwójne sekcje oferują niezliczone kombinacje kolumn i projekty dzielenia sekcji. A możliwość umieszczania przełączników absolutnie przyda się do precyzyjnego umieszczania ważnych informacji. Mam nadzieję, że to pomoże!
Czekam na kontakt z Państwem w komentarzach.
Pozdrawiam!