Dzisiaj pokażę ci, jak zaprojektować projekt przyciągającej wzrok recenzji książek za pomocą Ebook Tylko pakiet Divi Layout Pack i wbudowane opcje Divi. To świetny sposób na dodanie dowodu społecznego do stron docelowych, zwiększenie wiarygodności i eleganckie dzielenie się krótkimi recenzjami innych osób.
Zacznijmy projekt
Prześlij układ strony docelowej pakietu ebooków
Pierwszą rzeczą do zrobienia jest utworzenie nowej strony przy użyciu układu strony docelowejEbook Layout Pack, który znajdziesz w Premade Layouts.
Dodaj nową sekcję
Przewiń układ w dół i dodaj nową sekcję, w której chcesz wyświetlić recenzje książek.
Dodaj nową linię
Struktura kolumny
Kontynuuj dodawanie nowego wiersza, używając następującej struktury kolumn:
Tło gradientowe kolumny 1
Bez dodawania kolejnych modułów otwórz ustawienia linii i dodaj tło gradientowe do pierwszej kolumny.
- Kolor 1: #ffffff
- Kolor 2: #f4f4f4
- Kolumna 1 Pozycja początkowa: 12%
- Kolumna 1 Pozycja końcowa: 12%
Kolor tła kolumny 2
Dodaj również niestandardowy kolor tła do drugiej kolumny.
- Kolumna 2 Kolor tła: #9400ff
zaklejania
Przejdź do karty Projekt i usuń wszystkie niestandardowe odstępy między kolumnami, korzystając z następujących ustawień:
- Użyj niestandardowej szerokości rynny: Tak
- Szerokość rynny: 1
rozstaw
Zmieniamy również ustawienia odstępów między wierszami.
- Górny margines: 100px
- Dolny margines: 100px
- Top Padding: 0px
- Dolne wypełnienie: 0px
Dodaj moduł obrazu do kolumny 1
Prześlij 1: obraz 1
Po wprowadzeniu ustawień wierszy możesz rozpocząć dodawanie różnych modułów, zaczynając od modułu obrazu w pierwszej kolumnie. Prześlij wybrany obraz, ale upewnij się, że współczynnik proporcji wynosi 1: 1. Oznacza to, że wysokość i szerokość powinny mieć tę samą wartość.
Wyrównanie obrazu
Wybierz wyrównanie lewego obrazu na karcie Projekt.
- Wyrównanie obrazu: do lewej
zaklejania
Zmieniamy również szerokość tego modułu dla różnych rozmiarów ekranu.
- Szerokość: 20% (komputer stacjonarny i tablet), 30% (telefon)
rozstaw
Aby umożliwić nakładanie się po lewej stronie linii, dodajemy ujemną wartość lewego marginesu w ustawieniach odstępów modułu Obraz.
- Lewy margines: -30px
granica
Aby zakończyć projektowanie obrazu, dodajemy również „50vw” do każdego z rogów w ustawieniach obramowania. Zapewni to, że obraz zachowa swój okrągły kształt na ekranach o różnych rozmiarach.
Dodaj moduł tekstowy # 1 do kolumny 1
Dodaj symbole gwiazd do obszaru zawartości
Przejdźmy do kolejnego modułu, jakim jest moduł tekstu rankingowego. Aby podkreślić liczbę gwiazdek, użyjemy symboli. Śmiało, skopiuj poniższe symbole i wklej je w polu treść nowego modułu tekstowego: ★★★★.
Kolor tła
Następnie zmień spód modułu.
- Kolor tła: # 9400ff
Ustawienia tekstu
Przejdź do karty Projekt i zmień również ustawienia tekstu.
- Czcionka tekstu: Montserrat
- Masa czcionki tekstu: Ciężki
- Rozmiar tekstu: 45px (komputer stacjonarny), 30px (tablet), 25px (telefon)
- Wysokość linii tekstu: 1em
- Wyrównanie tekstu: środek
zaklejania
Kontynuuj, zmieniając szerokość modułu.
- Szerokość: 35%
rozstaw
I dodaj niestandardowe odstępy.
- Lewy margines: 50px
- Prawy margines: 50px
- Top Padding: 20px
- Dolne wypełnienie: 20px
Pole cienia
Aby podświetlić pole oceny, dodamy subtelny cień.
- Box Shadow Blur Force: 50px
- Kolor cienia: rgba (0,0,0,0,3)
Transformer Translate
Na koniec zmienimy położenie modułu tekstowego przy użyciu niestandardowych wartości konwersji tłumaczenia. Możesz odłożyć ten krok do momentu dodania wszystkich modułów do kolumny.
- Po prawej: 360px (komputer stacjonarny), -84px (tablet), -70px (telefon)
- Dół: -113px (komputer stacjonarny), 190px (tablet), 141px (telefon)
Dodaj moduł tekstowy # 2 do kolumny 1
Dodaj treść
Następnym modułem, którego potrzebujemy w kolumnie 1, jest kolejny moduł tekstowy. Dodaj treść według własnego wyboru oraz link do recenzenta i książki.
Ustawienia tekstu
Przejdź do zakładki Projekt i odpowiednio zmień ustawienia tekstu:
- Czcionka tekstu: Montserrat
- Rozmiar tekstu: 18px
Ustawienia linku tekstowego
Zmień również kolor tekstu łącza.
- Kolor tekstu łącza: #9400ff
rozstaw
Następnie przejdź do ustawień odstępów i zmień położenie elementu, używając niestandardowych wartości marginesów.
- Górny margines: -100px (komputer stacjonarny), 0px (tablet i telefon)
- Lewy margines: 200px (komputer stacjonarny), 50px (tablet), 20px (telefon)
- Prawy margines: 50px (tablet), 20px (telefon)
Dodaj moduł tekstowy # 3 do kolumny 1
Dodaj zawartość H3
Przejdźmy do następnego modułu, który jest modułem tekstowym zawierającym tytuł wersji H3.
Ustawienia tekstu H3
Przejdź do zakładki Projekt i zmień ustawienia tekstu H3.
- Nagłówek 3 Czcionka: Montserrat
- Tytuł 3 Waga czcionki: pogrubiona
- Tytuł 3 Kolor tekstu: #000000
rozstaw
Dodaj także niestandardowy margines.
- Górny margines: 80px (komputer stacjonarny), 50px (tablet i telefon)
- Lewy margines: 50px (komputer stacjonarny i tablet), 20px (telefon)
- Prawy margines: 50px (komputer stacjonarny i tablet), 20px (telefon)
Dodaj moduł tekstowy 4 do kolumny 1
Dodaj treść
Przejdźmy do następnego i ostatniego modułu, którego potrzebujemy w kolumnie 1, który jest kolejnym modułem tekstowym z faktyczną wersją.
rozstaw
Przejdź do ustawień odstępów tego modułu i zastosuj następujące ustawienia:
- Górny margines: 20px
- Dolny margines: 50px
- Lewy margines: 50px (komputer stacjonarny i tablet), 20px (telefon)
- Prawy margines: 50px (komputer stacjonarny i tablet), 20px (telefon)
Dodaj moduł obrazu do kolumny 2
Zmień ustawienia CSS kolumny 2
Użyjemy właściwości flex, aby wyrównać obraz do środka:
wyświetlacz: flex;
Pobierz zdjęcie okładki książki
W drugiej kolumnie będziemy potrzebować dwóch modułów, zaczynając od modułu graficznego z okładką książki. W tym samouczku używamy okładek książek dostarczonych z książką przeglądową Divi, ale możesz także dodać własną okładkę książki.
zaklejania
Przejdź do zakładki Projekt modułu Obraz i zmień szerokość.
- Szerokość: 79% (komputer stacjonarny), 40% (tablet i telefon)
Zaawansowany element podstawowy
Tutaj postaramy się wyrównać obraz na środku.
- align-self: center;
Klonuj projekt tyle razy, ile chcesz
Po utworzeniu pierwszej recenzji książki możesz sklonować całą linię tyle razy, ile chcesz, w zależności od liczby recenzji, które chcesz wyświetlić na stronie docelowej.
końcowe przemyślenia
W tym samouczku pokazaliśmy, jak zaprojektować niesamowite recenzje książek na kolejne strony publikowania e-booków. Pomaga to dodać dowód społeczny do swojej strony i przekonać odwiedzający wiarygodność twojej książki. Jeśli masz jakieś pytania lub sugestie, napisz komentarz w sekcji komentarzy poniżej!