Jak utworzyć całkowicie poziomą stronę przesuwania za pomocą Divi

Czy kiedykolwiek myślałeś o stworzeniu całkowicie poziomej strony, która używa do nawigacji linków do przesuwania i zakotwiczania? Cóż, jeśli masz i nie wiesz dokładnie, jak do tego podejść, jest to idealny post dla Ciebie. Pokażemy Ci, jak utworzyć całkowicie poziomą stronę przesuwania za pomocą Divi. Ta technika naprawdę pomoże Ci wyróżnić Twoją witrynę na tle innych i dopasować się do trendów projektowania stron internetowych w 2019 roku. Efekt, który stworzymy, będzie wyglądał świetnie na wszystkich rozmiarach ekranu.

Weźmy się za to!

Zapowiedź

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

Pulpit

mobilny

Zbliżać się

• Stworzymy całą stronę używając tylko jednej sekcji
• Zamieniamy tę sekcję w poziomą siatkę za pomocą kilku linii kodu CSS na końcu samouczka
• Siatka pozioma umieści każdy z wierszy w kolumnie umieszczonej poziomo
• Ty decydujesz, ile poziomych kolumn zawiera sekcja
• W tym przypadku użyjemy 4 różnych kolumn, z których każda będzie składać się z 2 wierszy
• Możesz zmienić liczbę tworzonych poziomych kolumn i określić, ile wierszy zawiera każda z kolumn sekcji
• Używamy również linków kotwicznych, aby ułatwić użytkownikom poruszanie się po różnych kolumnach sekcji
• Ponadto dodajemy płynne przewijanie i efekt przyciągania przewijania sekcji, które ułatwią nawigację dla odwiedzających

Zacznijmy odtwarzać

Dodaj nową sekcję

Kolor tła

Utwórz nową stronę i dodaj do niej zwykłą sekcję. Otwórz ustawienia sekcji i zmień kolor tła.

• Kolor tła: #ffffff

Rozstaw

Następnie przejdź do ustawień odstępów i dodaj niestandardowe wypełnienie w różnych rozmiarach ekranu.

• Górna wyściółka: 10,5vw (komputer stacjonarny), 15vw (tablet), 10vw (telefon)
• Dolna wyściółka: 3vw (komputer stacjonarny i tablet), 10vw (telefon)

Dodaj wiersz nr 1

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ść ekranu.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

Przejdź do ustawień odstępów dalej i wprowadź zmiany na wszystkich różnych rozmiarach ekranu.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px
• Lewa wyściółka: 6vw (tablet i telefon)
• Prawa wyściółka: 6vw (tablet i telefon)
• Dolna wyściółka kolumny 1: 15vw (tablet i telefon)
• Kolumna 2 lewa wyściółka: 4vw (komputer stacjonarny), 0vw (tablet i telefon)

Identyfikator CSS

Musimy przypisać identyfikator CSS do pierwszego wiersza każdej z tworzonych przez nas kolumn sekcji. Pomoże nam to później stworzyć strzałki kotwiczne w tym poście.

• Identyfikator CSS: przesuń-1

niestandardowe CSS

Jak wspomniano w części poświęconej podejściu w tym poście, stosujemy również efekt płynnego przewijania i przyciągania do mechanizmu. Aby to zrobić, musimy dodać jeden wiersz kodu CSS do pierwszego wiersza każdej z tworzonych przez nas poziomych kolumn.

scroll-snap-align: start;

Dodaj moduł Blurb do kolumny 1

Wybierz ikonę

Teraz możemy zacząć dodawać moduły! Zacznij od modułu Blurb w kolumnie 1. Otwórz ustawienia modułu i wybierz ikonę strzałki w lewo.

Ustawienia ikon

Następnie przejdź do zakładki projektowania i wprowadź zmiany w wyglądzie ikony.

• Kolor ikony: rgba (255,255,255,0)
• Umieszczenie obrazu/ikony: góra
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 5vw (komputer), 13vw (tablet), 21vw (telefon)

Rozstaw

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

• Górny margines: 14vw (komputer), -11vw (tablet), -17vw (telefon)
• Lewy margines: 60vw (tablet i telefon)

Widoczność

Ukrywamy też moduł na mniejszych ekranach.

Dodaj moduł tekstowy do kolumny 2

Dodaj zawartość H2

Następnym modułem, którego potrzebujemy, jest moduł tekstowy w kolumnie 2. Dodaj trochę treści H2.

Ustawienia tekstu H2

Następnie przejdź do zakładki projekt i zmodyfikuj ustawienia tekstu H2.

• Czcionka nagłówka 2: Source Serif Pro
• Wyrównanie tekstu nagłówka 2: do lewej
• Rozmiar tekstu nagłówka 2: 3vw (komputer), 7vw (tablet i telefon)

Rozmiary

Następnie zmodyfikuj szerokość w ustawieniach rozmiaru.

• Szerokość: 77%

Rozstaw

I dodaj trochę dolnego marginesu dla mniejszych rozmiarów ekranu.

• Margines dolny: 15vw (tablet i telefon)

Dodaj moduł przycisku do kolumny 2

Dodaj zawartość

Tuż pod dodanym modułem tekstowym, śmiało dodaj moduł przycisku. Wprowadź jakąś kopię.

Ustawienia przycisków

Następnie przejdź do zakładki projektowania i zmień ustawienia przycisków.

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

• Kolor obramowania przycisku: #000000
• Promień obramowania przycisku: 0px
• Czcionka przycisku: Mukta
• Waga czcionki: pogrubiona
• Styl czcionki: wielkie litery

Rozstaw

Dodaj trochę niestandardowego marginesu i dopełnienia.

• Górny margines: 6vw (komputer stacjonarny), 4vw (tablet i telefon)
• Górna wyściółka: 15px
• Dolna wyściółka: 15px
• Lewa wyściółka: 50px
• Prawe wypełnienie: 50px

Dodaj moduł Blurb do kolumny 3

Wybierz ikonę

Następny i ostatni moduł, którego potrzebujemy w tym wierszu, to kolejny moduł Blurb w kolumnie 3. Wybierz wybraną ikonę.

Połączyć

Następnie przejdź do ustawień linków i dodaj link, który przeniesie odwiedzających do drugiej poziomej kolumny sekcji.

• Adres URL łącza modułu: https://www.yourwebsite.com/page/#swipe-2

Ustawienia ikon

Śmiało i zmień również ustawienia ikon.

• Kolor ikony: #333333
• Umieszczenie ikony obrazu: góra
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 5vw (komputer), 13vw (tablet), 21vw (telefon)

Rozstaw

Kontynuuj, dodając niestandardowy górny i lewy margines na różnych rozmiarach ekranu.

• Górny margines: 14vw (komputer), -11vw (tablet), -17vw (telefon)
• Lewy margines: 60vw (tablet i telefon)

Dodaj wiersz nr 2

Struktura kolumny

Drugi potrzebny nam wiersz wykorzystuje następującą strukturę kolumn:

Kolor tła

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i zmień kolor tła.

• Kolor tła: #f7f7f7

Rozmiary

Następnie zmodyfikuj ustawienia rozmiaru.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

Wraz z niestandardowymi wartościami dopełnienia i marginesów w ustawieniach odstępów.

• Górny margines: -3,5vw (komputer), -10vw (tablet), -17vw (telefon)
• Górna wyściółka: 8vw (komputer stacjonarny), 15vw (tablet), 20vw (telefon)
• Dolna wyściółka: 8vw (komputer), 15vw (tablet), 20vw (telefon)
• Lewa wyściółka: 24vw (komputer), 5vw (tablet i telefon)
• Prawa wyściółka: 24vw (komputer stacjonarny), 5vw (tablet i telefon)
• Kolumna 1 po prawej stronie: 2vw (komputer stacjonarny), 0vw (tablet i telefon)
• Kolumna 2 lewa wyściółka: 2vw (komputer), 0vw (tablet i telefon)

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość

Śmiało i dodaj moduł tekstowy do pierwszej kolumny. Wprowadź wybraną kopię (w tym tytuł H3).

Ustawienia tekstu

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

• Czcionka tekstu: Otwórz Sans
• Rozmiar tekstu: 0,65vw (komputer), 1,8vw (tablet), 2,7vw (telefon)
• Wysokość linii tekstu: 1,8 em

Ustawienia tekstu H3

Wraz z ustawieniami tekstu H3.

• Czcionka nagłówka 3: Mukta
• Grubość czcionki nagłówka 2: pogrubiona
• Styl czcionki nagłówka 3: Wielkie litery
• Rozmiar tekstu nagłówka 3: 0.8vw (komputer), 3vw (tablet), 4vw (telefon)
• Nagłówek 3 Wysokość linii: 1,8 em

Rozstaw

Dodaj trochę dolnego marginesu dla mniejszych rozmiarów ekranu.

• Dolny margines: 5vw (tablet i telefon)

Klonuj moduł tekstowy i umieść w kolumnie 2

Gdy skończysz modyfikować moduł tekstowy w kolumnie 1, możesz go sklonować i umieścić duplikat w drugiej kolumnie.

Zmień zawartość

Upewnij się, że zmieniłeś treść.

Rzęd klonowania nr 1 trzy razy

Gdy oba rzędy są gotowe, możesz sklonować pierwszy rząd 3 razy.

Zmień duplikat #1

Zmień identyfikator CSS wiersza

Musimy zmienić identyfikator CSS pierwszego duplikatu.

• Identyfikator CSS: przesuń-2

Zmień kolor ikony modułu rozmycia (kolumna 1)

Wraz z kolorem pierwszego Blurb Module.

• Kolor ikony: #333333

Zmień linki obu modułów Blurb

Aby linki kotwiczne działały, musisz odpowiednio zmienić link każdej ze strzałek:

• Adres URL łącza modułu: https://www.yourwebsite.com/page/#swipe-1

• Adres URL łącza modułu: https://www.yourwebsite.com/page/#swipe-3

Zmień duplikat #2

Zmień identyfikator CSS wiersza

Zmień identyfikator CSS drugiego duplikatu.

• Identyfikator CSS: przesuń-3

Zmień kolor ikony modułu rozmycia (kolumna 1)

Wraz z kolorem ikony pierwszego modułu Blurb.

• Kolor ikony: #333333

Zmień linki obu modułów Blurb

I znowu zmień odpowiednio linki każdego Modułu Blurb:

• Adres URL łącza modułu: https://www.yourwebsite.com/page/#swipe-2

• Adres URL łącza modułu: https://www.yourwebsite.com/page/#swipe-4

Zmień duplikat #3

Zmień identyfikator CSS

Zmień również identyfikator CSS zduplikowanego trzeciego wiersza.

• Identyfikator CSS: przesuń-4

Zmień ikonę modułu rozmycia (kolumna 2)

I wybierz inną ikonę dla modułu Blurb w kolumnie 3.

Zmień łącze modułu Blurb (kolumna 2)

Upewnij się, że po kliknięciu odwiedzający zostanie przekierowany do pierwszej kolumny sekcji, odpowiednio modyfikując adres URL łącza modułu:

• Adres URL łącza modułu: https://www.yourwebsite.com/page/#swipe-1

Klonuj rząd #2 trzy razy

Do następnego rzędu. Sklonuj również ten rząd trzy razy.

Zmień kolor tła wiersza duplikatu #1

Zmień kolor tła pierwszego duplikatu.

• Kolor tła: #dcdced

Zmień kolor tła wiersza duplikatu nr 2

Drugi duplikat wykorzystuje następujący kolor tła:

• Kolor tła: #ffeed1

Zmień kolor tła wiersza duplikatu #3

Zmień również kolor tła duplikatu trzeciego rzędu.

• Kolor tła: #d6ffe5

Dodaj identyfikator CSS i kod CSS do sekcji

Teraz, gdy mamy już wszystkie potrzebne wiersze, możemy sprawić, że magia się wydarzy. Dodaj identyfikator CSS do całej sekcji. Później w tym poście użyjemy tego identyfikatora CSS, aby ukryć pasek przewijania.

• Identyfikator CSS: sekcja-scrollbar

Następnie przejdź do opcji Custom CSS i dodaj kilka linii kodu CSS do głównego elementu.

overflow-y: scroll;
display: grid;
grid-template-columns: repeat(4, 100%);
scroll-behavior: smooth;
scroll-snap-type: x mandatory;

Im więcej kolumn sekcji chcesz utworzyć, tym więcej kolumn musisz dodać w kodzie CSS. Powiedzmy na przykład, że chcesz mieć taką samą strukturę, ale zezwolić na 7 przesunięć zamiast 4, będziesz musiał odpowiednio zmodyfikować wiersz kodu CSS kolumn szablonu siatki:

grid-template-columns: repeat(7, 100%);

Pamiętaj jednak, że jeśli zwiększasz numer kolumny, musisz dodać więcej wierszy. Tak więc w tym przypadku, jeśli chcesz, aby w kolumnie sekcji pojawiły się dwa wiersze, potrzebujesz 14 wierszy.

Ukryj pasek przewijania

Możesz także ukryć pasek przewijania, korzystając z sekcji Identyfikator CSS i dodając następujące wiersze kodu CSS do ustawień strony:

#section-scrollbar::-webkit-scrollbar {
display: none;
}

Zapowiedź

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

Pulpit

mobilny

Końcowe przemyślenia

Projektując strony internetowe za pomocą Divi, najprostszą rzeczą do zrobienia jest budowanie w dół. Ale tylko dlatego, że jest to najprostsza rzecz do zrobienia, nie oznacza, że ​​jesteś ograniczony do tej opcji. Możesz również utworzyć całkowicie poziomą stronę przesuwaną. W tym samouczku pokazaliśmy, jak osiągnąć oszałamiające projektowanie stron internetowych z przesuwaniem w poziomie za pomocą Divi. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!