Jak zaprojektować przyciągające wzrok recenzje książek dla strony docelowej Divi Ebook?

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 projektowania Divi, pokażemy Ci, jak zaprojektować przyciągające wzrok recenzje książek na nadchodzącą stronę docelową e-booka, korzystając wyłącznie z pakietu Divi's Ebook Layout Pack i wbudowanych opcji Divi. To świetny sposób na dodanie dowodów społecznościowych do swoich stron docelowych, zwiększenie wiarygodności i dzielenie się krótkimi recenzjami w elegancki sposób.

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 sekcji recenzji książek ZA DARMO

Aby położyć ręce na układzie sekcji bezpłatnych recenzji książek, musisz najpierw pobrać go 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ć!

Prześlij układ strony docelowej pakietu układu ebooka na nową stronę

Pierwszą rzeczą, którą musisz zrobić, to utworzyć nową stronę przy użyciu układu strony docelowej pakietu układów ebooków, który można znaleźć w gotowych układach.

Dodaj nową sekcję

Przewiń w dół układ strony i dodaj nową sekcję tam, gdzie chcesz wyświetlać recenzje książek.

Dodaj nowy wiersz

Struktura kolumny

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

Kolumna 1 Tło gradientowe

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i dodaj tło gradientowe do pierwszej kolumny.

• Kolor 1: #ffffff
• Kolor 2: #f4f4f4
• Pozycja początkowa kolumny 1: 12%
• Kolumna 1 pozycja końcowa: 12%

Kolor tła kolumny 2

Dodaj niestandardowy kolor tła również do drugiej kolumny.

• Kolor tła kolumny 2: #9400ff

Rozmiary

Przejdź do karty projektu 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
• Margines dolny: 100px
• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj moduł obrazu do kolumny 1

Prześlij obraz 1:1

Po wprowadzeniu ustawień wiersza możesz zacząć dodawać różne moduły, zaczynając od modułu obrazu w pierwszej kolumnie. Prześlij wybrany obraz, ale upewnij się, że proporcje obrazu to 1:1. Oznacza to, że wysokość i szerokość powinny mieć tę samą wartość.

Wyrównanie obrazu

Wybierz wyrównanie obrazu do lewej na karcie projektu.

• Wyrównanie obrazu: do lewej

Rozmiary

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 wiersza, dodajemy ujemną wartość lewego marginesu w ustawieniach odstępów modułu obrazu.

• Lewy margines: -30px

Granica

Aby ukończyć projekt obrazu, dodaliśmy również „50vw” do każdego z rogów w ustawieniach obramowania. Dzięki temu obraz zachowa swój okrągły kształt na różnych rozmiarach ekranu.

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj symbole gwiazdek do pola zawartości

Przejdźmy do następnego modułu, którym jest ocena modułu tekstowego. Aby zaprezentować oceny w postaci gwiazdek, użyjemy symboli. Śmiało skopiuj następujące symbole i wklej je do pola treści nowego modułu tekstowego: ★★★★✰.

Kolor tła

Następnie zmień tło modułu.

• Kolor tła: #9400ff

Ustawienia tekstu

Przejdź do zakładki projektu i zmodyfikuj również ustawienia tekstu.

• Czcionka tekstu: Montserrat
• Grubość czcionki tekstu: Ciężka
• Rozmiar tekstu: 45px (komputer), 30px (tablet), 25px (telefon)
• Wysokość linii tekstu: 1em
• Wyrównanie tekstu: do środka

Rozmiary

Kontynuuj, zmieniając szerokość modułu.

• Szerokość: 35%

Rozstaw

I dodaj niestandardowe odstępy.

• Lewy margines: 50px
• Prawy margines: 50px
• Górna wyściółka: 20px
• Dolna wyściółka: 20px

Cień Pudełka

Aby podświetlić pole oceny, dodamy subtelny cień pola.

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

Przekształć Tłumacz

I wreszcie, zmienimy położenie modułu tekstowego, używając pewnych niestandardowych wartości translacji transformacji. Możesz odroczyć ten krok do momentu dodania wszystkich modułów również do swojej kolumny.

• Po prawej: 360px (komputer), -84px (tablet), -70px (telefon)
• Botto,: -113px (komputer), 190px (tablet), 141px (telefon)

Dodaj moduł tekstowy #2 do kolumny 1

Dodaj zawartość

Następnym modułem, którego potrzebujemy w kolumnie 1, jest kolejny moduł tekstowy. Dodaj wybraną treść i link do recenzenta i książki.

Ustawienia tekstu

Przejdź do zakładki projektu i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: Montserrat
• Rozmiar tekstu: 18px

Ustawienia tekstu łącza

Zmień też kolor tekstu linku.

• 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), 0px (tablet i telefon)
• Lewy margines: 200px (komputer), 50px (tablet), 20px (telefon)
• Prawy margines: 50px (tablet), 20px (telefon)

Dodaj moduł tekstowy nr 3 do kolumny 1

Dodaj zawartość H3

Przejdźmy do następnego modułu, którym jest moduł tekstowy zawierający tytuł recenzji H3.

Ustawienia tekstu H3

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

• Czcionka nagłówka 3: Montserrat
• Grubość czcionki nagłówka 3: pogrubiona
• Kolor tekstu nagłówka 3: #000000

Rozstaw

Dodaj również trochę niestandardowego marginesu.

• Górny margines: 80px (komputer), 50px (tablet i telefon)
• Lewy margines: 50px (komputer i tablet), 20px (telefon)
• Prawy margines: 50px (komputer i tablet), 20px (telefon)

Dodaj moduł tekstowy #4 do kolumny 1

Dodaj zawartość

Do następnego i ostatniego modułu potrzebujemy w kolumnie 1, która jest kolejnym modułem tekstowym z rzeczywistą recenzją.

Rozstaw

Przejdź do ustawień odstępów tego modułu i zastosuj następujące ustawienia:

• Górny margines: 20px
• Margines dolny: 50px
• Lewy margines: 50px (komputer i tablet), 20px (telefon)
• Prawy margines: 50px (komputer i tablet), 20px (telefon)

Dodaj moduł obrazu do kolumny 2

Prześlij obraz okładki książki

W drugiej kolumnie będziemy potrzebować dwóch modułów, zaczynając od modułu obrazu zawierającego okładkę książki. W tym samouczku używamy okładek książek dołączonych do pakietu Divi's Ebook Layout Pack, ale zamiast tego możesz dodać własną okładkę książki.

Rozmiary

Przejdź do zakładki projektowania modułu obrazu i zmień szerokość.

• Szerokość: 79% (komputer stacjonarny), 40% (tablet i telefon)

Rozstaw

Zmodyfikuj również ustawienia odstępów.

• Górny margines: 60px
• Margines dolny: 60px

Cień Pudełka

I dodaj cień do pudełka, aby podkreślić okładkę książki.

• Pozycja pionowa cienia pudełka: 40px
• Siła rozmycia cieni w pudełku: 80px
• Siła rozprzestrzeniania się cieni w pudełku: -20px
• Kolor cienia: rgba(0,0,0,0.8)

Dodaj moduł przycisku do kolumny 2

Dodaj kopię

Następnym i ostatnim modułem, którego potrzebujemy w kolumnie 2, jest moduł przycisku. Dodaj wybraną kopię i link do strony, na której ludzie mogą kupić Twoją książkę.

Wyrównanie przycisków

Przejdź do zakładki projektu i zmień wyrównanie przycisków.

• Wyrównanie przycisków: środek

Ustawienia przycisków

Zmodyfikuj ustawienia przycisków, aby pasowały do ​​wyglądu i stylu pakietu układów.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 16px
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #000000
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 0px
• Czcionka przycisku: Montserrat
• Waga czcionki przycisku: pogrubiona

Rozstaw

I zakończ pierwszy projekt recenzji książki, dodając do przycisku kilka niestandardowych wartości dopełnienia.

• Górna wyściółka: 16px
• Dolna wyściółka: 16px
• Lewa wyściółka: 38px
• Prawe wypełnienie: 38px

Klonuj rząd do tylu razy, ile chcesz

Po zakończeniu tworzenia pierwszej recenzji książki możesz sklonować cały wiersz dowolną liczbę razy, w zależności od tego, ile recenzji chcesz wyświetlić na swojej stronie docelowej.

Prześlij inny obraz

Zmień wizerunek recenzenta.

Zmień okładkę książki

W razie potrzeby wraz z okładką książki.

Zmień kopię

I zmodyfikuj również całą kopię.

Znajdź i zamień kolor tła kolumny 2 w wierszu

Jak widać na podglądzie tego posta, w drugiej recenzji używamy innej palety kolorów. Aby sobie to ułatwić, otworzymy ustawienia wierszy i klikniemy prawym przyciskiem myszy tło kolumny 2, a następnie kliknij Znajdź i zamień.

Zmień fioletowy kolor używany w rzędzie i gotowe! Pamiętaj, aby powtórzyć te kroki dla każdej z duplikatów recenzji książek, które dodasz do swojej strony.

• Wewnątrz: Ten rząd
• Zamień na: #31d190

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, jak zaprojektować wspaniałe krótkie recenzje książek dla nadchodzących stron docelowych ebooków. Pomaga to dodać dowód społecznościowy do swojej strony i przekonać odwiedzających o wiarygodności książki. Ten samouczek dotyczący przypadków użycia jest częścią naszej ciągłej inicjatywy projektowej Divi, w której każdego tygodnia staramy się dodawać coś dodatkowego do zestawu narzędzi projektowych. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw 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.