Pobierz BEZPŁATNY podgląd książki Układ strony docelowej Divi, w tym linki do kotwic i wezwania do działania

Niezależnie od tego, czy sprzedajesz książkę fizyczną, czy e-booka, skuteczna strona docelowa może zdziałać cuda. Możesz podejść do tego landinga w tradycyjny sposób lub zmienić go w landing page z podglądem książki. Strona docelowa z podglądem książki umożliwia użytkownikom wcześniejsze przeczytanie określonych części lub rozdziałów książki. Jest również wyposażony w linki kotwiczne, które sprawiają, że poruszanie się po różnych częściach lub rozdziałach jest bezproblemowe. Na domiar złego chcesz również umieścić w centrum uwagi wezwanie do działania, które skieruje ruch do miejsc, w których sprzedajesz swoją książkę.

W tym samouczku odtworzymy oszałamiającą stronę docelową z podglądem książki od podstaw za pomocą Divi. Będziesz także mógł pobrać układ JSON za darmo, jeśli chcesz od razu dodać go do swojej witryny.

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 strony docelowej z podglądem książki ZA DARMO

Aby położyć swoje ręce na układzie strony docelowej z bezpłatnym podglądem książki, 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ć!

Subskrybuj nasz kanał YouTube

Dodaj nową zwykłą sekcję

Rozstaw

Zacznij od stworzenia nowej strony i dodaj do niej zwykłą sekcję. Otwórz ustawienia sekcji i usuń wszystkie niestandardowe górne i dolne wyściółki.

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

Dodaj wiersz

Struktura kolumny

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

Kolor tła

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

• Kolor tła: #ffffff

Kolumna 3 Tło gradientowe

Dodaj również tło gradientowe do trzeciej kolumny.

• Kolor 1: #6a30ff
• Kolor 2: #a202ff
• Kolumna 3 Typ gradientu: Liniowy
• Kolumna 3 Kierunek gradientu: 166 stopni

Rozmiary

Następnie przejdź do ustawień rozmiaru i pozwól wierszowi zająć całą szerokość ekranu, dodając następujące ustawienia rozmiaru:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Przejdź do ustawień odstępów i usuń niestandardową górną i dolną wyściółkę rzędu. Dodaj również wartości dopełnienia do pierwszej i trzeciej kolumny.

• Górna wyściółka: 0vw
• Dolna wyściółka: 0vw
• Kolumna 1 Górna wyściółka: 15vw (komputer stacjonarny), 10vw (tablet i telefon)
• Kolumna 2 Dolna wyściółka: 15vw (komputer stacjonarny), 10vw (tablet i telefon)
• Kolumna 1 Lewa wyściółka: 7vw

Identyfikator CSS kolumny 2

Jak widać na podglądzie tego posta, do drugiej kolumny dołączony jest pasek przewijania. Jeśli chcesz zmienić styl tego paska przewijania później w poście, dodaj identyfikator CSS do drugiej kolumny.

• Kolumna 2 identyfikator CSS: style-scrollbar

Kolumna 2 Główny element

Następną rzeczą, którą zamierzamy zrobić, jest umożliwienie przewijania kolumny, dodając następujące wiersze kodu CSS do głównego elementu kolumny 2:

overflow-y: scroll;
height: 57.87vw;
scroll-behavior: smooth;

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość

Teraz, gdy zmodyfikowaliśmy wszystkie ustawienia wierszy, możemy zacząć dodawać moduły! Zacznij od modułu tekstowego w kolumnie 1 i dodaj wybraną treść.

Ustawienia tekstu

Przejdź do ustawień tekstowych modułu i dokonaj zmian.

• Czcionka tekstu: Lato
• Kolor: #666666
• Rozmiar tekstu: 1,6vw (komputer), 3vw (tablet), 4vw (telefon)
• Wysokość linii tekstu: 2vw

Dodaj moduł rozdzielacza do kolumny 1

Widoczność

Następnym modułem, który dodamy, jest moduł dzielnika. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Kolor

Następnie przejdź do zakładki projekt i zmień kolor.

• Kolor: #5802ed

Rozmiary

Pobaw się również wartościami rozmiaru.

• Waga dzielnika: 4px
• Szerokość: 3vw (komputer stacjonarny), 6vw (tablet), 9vw (telefon)
• Wysokość: 0px

Rozstaw

I dodaj niestandardową górną i dolną wyściółkę, aby stworzyć przestrzeń.

• Górny margines: 1vw (komputer stacjonarny), 3vw (tablet), 4vw (telefon)
• Dolny margines: 7vw

Dodaj moduł tekstowy #2 do kolumny 1

Dodaj zawartość

Przejdźmy do trzeciego modułu, który jest kolejnym modułem tekstowym. Tutaj dodaliśmy symbol (►), po którym następuje tytuł pierwszego rozdziału do pola treści.

Dodaj link

Łączymy cały ten moduł z identyfikatorem kotwicy, który dodamy później w tym poście.

• Adres URL łącza modułu: https://twojastrona.com/pagetitle/#chapter-1

Ustawienia tekstu

Kontynuuj, przechodząc do ustawień tekstu i stylizuj zawartość dokładnie tak, jak chcesz.

• Czcionka tekstu: Lato
• Grubość czcionki tekstu: Lekka
• Kolor tekstu: #666666
• Rozmiar tekstu: 1.3vw (komputer), 2vw (tablet), 3.3vw (telefon)

Rozstaw

Dodaj również niestandardową górną i dolną wyściółkę.

• Górna wyściółka: 1vw
• Dolna wyściółka: 1vw

Klonuj moduł tekstowy nr 2 dwa razy

Gdy skończysz modyfikować moduł tekstowy, sklonuj go dwukrotnie (lub do tylu rozdziałów, ile chcesz udostępnić).

Zmień zawartość

Zmodyfikuj zawartość każdego z duplikatów.

Zmień linki

Wraz z identyfikatorem kotwicy na końcu adresu URL łącza modułu. W tym przypadku oznacza to dodanie „#rozdziału-2” do pierwszego duplikatu i „#rozdziału-3” do drugiego.

Dodaj moduł tekstowy do kolumny 2

Dodaj zawartość

Przejdź do następnej kolumny, którą można przewijać. Tutaj użyjemy modułów tekstowych, aby dodać różne strony podglądu książki. Zacznij od dodania pierwszego modułu tekstowego z wybraną zawartością.

Kolor tła

Następnie przejdź do ustawień tła i dodaj biały kolor tła.

• Kolor tła: #ffffff

Ustawienia tekstu

Zmodyfikuj również ustawienia tekstu.

• Czcionka tekstu: Lato
• Rozmiar tekstu: 0,8vw (komputer), 1,6vw (tablet), 2,1vw (telefon)
• Wysokość linii tekstu: 1,7vw (komputer), 3,3vw (tablet), 3,8vw (telefon)

Ustawienia tekstu H2

Pobaw się również ustawieniami tekstu H2.

• Czcionka nagłówka 2: Lato
• Grubość czcionki nagłówka 2: Ciężka
• Kolor tekstu nagłówka 2: #5802ed
• Rozmiar tekstu nagłówka 2: 2vw (komputer), 2.5vw (tablet), 2.9vw (telefon)
• Nagłówek 2 Wysokość linii: 2.3vw

Rozstaw

Kontynuuj, przechodząc do ustawień odstępów i dodając następujące niestandardowe wartości marginesów i dopełnienia:

• Górny margines: 2vw (komputer), 7vw (tablet), 10vw (telefon)
• Margines dolny: 2vw (komputer), 7vw (tablet), 10vw (telefon)
• Lewy margines: 5vw
• Prawy margines: 5vw
• Górna wyściółka: 6vw
• Dolna wyściółka: 6vw
• Lewa wyściółka: 6vw
• Prawa wyściółka: 6vw

Cień Pudełka

Kształtuj moduł tekstowy, dodając subtelny cień pudełkowy.

• Siła rozmycia cieni w pudełku: 50px
• Kolor cienia: rgba (0,0,0,0,09)

Identyfikator CSS

Kontynuuj, dodając identyfikator CSS do modułu tekstowego. Upewnij się, że używasz tego samego identyfikatora CSS, do którego prowadziłeś link w pierwszej kolumnie wiersza.

• Identyfikator CSS: rozdział-1

Klonuj moduł tekstowy dwa razy

Po nadaniu stylu modułu tekstowego sklonuj go tyle razy, ile chcesz.

Zmień zawartość

Zmień zawartość każdego duplikatu modułu tekstowego.

Zmień identyfikatory CSS

Wraz z identyfikatorami CSS.

• Identyfikator CSS: rozdział-2
• Identyfikator CSS: rozdział-3

Dodaj moduł tekstowy do kolumny 3

Dodaj zawartość

Do następnej i ostatniej kolumny! Dodaj moduł tekstowy z wybraną zawartością.

Ustawienia tekstu

Następnie przejdź do zakładki projekt i zmień ustawienia tekstu.

• Czcionka tekstu: Lato
• Grubość czcionki tekstu: Ciężka
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 2vw (komputer), 3vw (tablet), 4vw (telefon)
• Wysokość linii tekstu: 2vw
• Orientacja tekstu: Środek

Rozstaw

Następnie dodaj niestandardowe wyściółki lewe i prawe.

• Po lewej: 2vw
• Po prawej: 2vw

Dodaj moduł przycisku do kolumny 3

Dodaj kopię

Kontynuuj, dodając moduł przycisku do trzeciej kolumny z wybraną przez siebie kopią.

Wyrównanie

Następnie zmień wyrównanie przycisków.

• Wyrównanie przycisków: środek

Ustawienia przycisków

Zmodyfikuj również ustawienia przycisków.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 1vw (komputer), 1,5vw (tablet), 2,4vw (telefon)
• Kolor tekstu przycisku: #5802ed
• Kolor tła przycisku: #ffffff
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 10vw
• Odstępy między literami przycisków: 0px
• Grubość czcionki: Ultra Bold
• Styl czcionki: wielkie litery

Rozstaw

Dodaj też niestandardowe wartości marginesów i dopełnienia, aby stylizować i pozycjonować moduł.

• Górny margines: 2vw (komputer stacjonarny), 4vw (tablet), 5vw (telefon)
• Górna wyściółka: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Dolna wyściółka: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Lewa wyściółka: 3vw (komputer), 7vw (tablet), 9vw (telefon)
• Prawa wyściółka: 3vw (komputer), 7vw (tablet), 9vw (telefon)

Pasek przewijania stylu

Otwórz ustawienia strony

Ostatnia część tego samouczka poświęcona jest stylizacji paska przewijania drugiej kolumny. To, czy stylujesz pasek przewijania kolumny, czy nie, zależy wyłącznie od Ciebie. Brak stylizacji nie zmienia niczego w funkcjonalności. Jeśli zdecydujesz się zmienić styl paska przewijania, otwórz ustawienia strony.

Dodaj kod CSS

Następnie przejdź do zakładki Zaawansowane i dodaj niestandardowy CSS do pola Niestandardowy CSS i gotowe!

#style-scrollbar::-webkit-scrollbar {
width: 1.1vw;
}
#style-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
#style-scrollbar::-webkit-scrollbar-thumb {
background: #333333;
}

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 Ci, jak stworzyć oszałamiającą i skuteczną stronę docelową z podglądem książki z linkami kotwiczącymi do różnych części lub rozdziałów Twojej książki oraz wyróżniającym się wezwaniem do działania. Udostępniliśmy również układ JSON za darmo, dzięki czemu możesz od razu zacząć dodawać go do dowolnej tworzonej witryny! Jeśli masz jakieś pytania lub sugestie, upewnij się, że zostawiłeś 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.