Jak tworzyć niestandardowe, lepkie projekty „od góry do góry” za pomocą Divi

Opublikowany: 2019-06-19

Co tydzień dostarczamy nowe i bezpłatne pakiety układów Divi, których możesz użyć w swoim następnym projekcie. W przypadku jednego z pakietów układu udostępniamy również przypadek użycia, który pomoże Ci przenieść Twoją witrynę na wyższy poziom.

W tym tygodniu, w ramach naszej trwającej inicjatywy projektowej Divi, pokażemy Ci, jak tworzyć niestandardowe projekty przyklejone z powrotem do najlepszych za pomocą Divi i pakietu Green Energy Layout Pack. Ta technika pomoże ci poprawić wrażenia użytkownika na twoich stronach, jednocześnie korzystając z wbudowanych opcji Divi po stronie projektowania. Mamy nadzieję, że ten samouczek zainspiruje Cię do stworzenia własnej alternatywy z powrotem do najlepszych projektów i wykorzystania ich na następnej stronie internetowej!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wynik tego samouczka.

GIF

powrót do góry

Przykład 1

powrót do góry

Przykład #2

powrót do góry

Przykład #3

powrót do góry

1. Dodaj płynne przewijanie do strony HTML

Prześlij stronę docelową zielonej energii na nową stronę

Pierwszą rzeczą, którą musisz zrobić, to utworzyć nową stronę i przesłać stronę docelową pakietu Green Energy Layout Pack.

powrót do góry

Otwórz ustawienia strony

Otwórz ustawienia strony, klikając ikonę zaznaczoną na ekranie drukowania poniżej:

powrót do góry

Dodaj płynne przewijanie do niestandardowego pola CSS

Przejdź do zakładki Zaawansowane i dodaj płynne przewijanie do całej strony, dodając następujący kod CSS do pola Niestandardowy CSS:

html {
scroll-behavior: smooth;
}

powrót do góry

2. Dodaj identyfikator CSS do sekcji Hero

Otwórz sekcję bohaterów

Projekt od tyłu do góry przekieruje odwiedzających do sekcji bohaterów. Aby to zrobić, musisz najpierw otworzyć ustawienia sekcji bohatera.

powrót do góry

Dodaj identyfikator CSS

Następnie przejdź do zakładki zaawansowane i dodaj identyfikator CSS do sekcji. W dalszej części tego posta dodamy link do kotwicy, który przeniesie odwiedzających do tej sekcji.

Identyfikator CSS: sekcja-1

powrót do góry

3. Dodaj nową sekcję na dole strony z projektem „Powrót do góry”

Ogólne kroki

Dodaj nową zwykłą sekcję na dole strony

Jak mogliście zauważyć na podglądzie tego posta, odtworzymy trzy różne przykłady projektów. Aby usprawnić proces, zaczniemy najpierw od kilku ogólnych kroków, a później skupimy się na każdym przykładzie projektu indywidualnie w poście. Dodaj nową zwykłą sekcję na dole strony.

powrót do góry

Rozstaw

Otwórz ustawienia sekcji i usuń wszystkie domyślne górne i dolne wyściółki.

Górna wyściółka: 0px
Dolna wyściółka: 0px

powrót do góry

Dodaj nowy wiersz

Struktura kolumny

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

powrót do góry

Dodaj link do kotwicy

Gdy tylko ktoś kliknie cały wiersz, chcemy, aby został przekierowany na górę strony. Aby to zrobić, dodamy link, który przekierowuje do sekcji bohatera strony.

URL linku wiersza: twojawitryna.com/page/#section-1

powrót do góry

Wyrównanie wierszy

Umieszczamy również wiersz po prawej stronie kontenera sekcji.

Wyrównanie wierszy: w prawo

powrót do góry

Stała pozycja

Następnie naprawiamy cały wiersz, przechodząc do zakładki Zaawansowane wiersza i aktualizując następujące opcje pozycji:

Pozycja: Naprawiono
Przesunięcie w pionie: 30px
Przesunięcie w poziomie: 30px
Indeks Z: 99

Oprócz utrwalenia wiersza upewniamy się, że wiersz nakłada się na całą zawartość strony, zwiększając indeks z.

powrót do góry

Odtwórz przykład projektu nr 1

powrót do góry

Ustawienia wiersza

Zmień strukturę kolumn

Teraz, gdy przeszliśmy przez wszystkie ogólne kroki, odtworzymy trzy różne przykłady, które widzieliście na początku tego postu. Zacznijmy od pierwszego! Zmień strukturę kolumn wiersza:

powrót do góry

Kolor tła

Kontynuuj, otwierając ustawienia wiersza i dodaj biały kolor tła.

Kolor tła: #ffffff

powrót do góry

Rozmiary

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

Użyj niestandardowej szerokości rynny: 1
Szerokość: 9vw (komputer stacjonarny), 23vw (tablet), 35vw (telefon)

powrót do góry