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.

Układ strony docelowej e-bookaDodaj nową sekcję

Przewiń układ w dół i dodaj nową sekcję, w której chcesz wyświetlić recenzje książek.

Wstaw sekcję układu divi ebook

Dodaj nową linię

Struktura kolumny

Kontynuuj dodawanie nowego wiersza, używając następującej struktury kolumn:

Dodaj układ diviTł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%

Tło Divi

Kolor tła kolumny 2

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

  • Kolumna 2 Kolor tła: #9400ff

Tło linii 2

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

Rozmiar linii parametrów

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

Odstępy Divi

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

Dodaj obraz divi

Wyrównanie obrazu

Wybierz wyrównanie lewego obrazu na karcie Projekt.

  • Wyrównanie obrazu: do lewej

Wyrównanie obrazu

zaklejania

Zmieniamy również szerokość tego modułu dla różnych rozmiarów ekranu.

  • Szerokość: 20% (komputer stacjonarny i tablet), 30% (telefon)

Modyfikacja obrazu Divi

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

Obraz regulacji lewego marginesu

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.

Zaokrąglone ustawienia obrazu Divi

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: ★★★★.

Dodaj etoile diviKolor tła

Następnie zmień spód modułu.

  • Kolor tła: # 9400ff

Ustawienia Divi StarUstawienia 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

Parametr tekstu Divizaklejania

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

  • Szerokość: 35%

Regulacja szerokości gwiazdy Divirozstaw

I dodaj niestandardowe odstępy.

  • Lewy margines: 50px
  • Prawy margines: 50px
  • Top Padding: 20px
  • Dolne wypełnienie: 20px

Dodaj star divi

Pole cienia

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

  • Box Shadow Blur Force: 50px
  • Kolor cienia: rgba (0,0,0,0,3)

Ustawienie tekstu cieniowane diviTransformer 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)

Transformacja modułu Divi

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.

Moduł tekstowy notatki autora Divi

Ustawienia tekstu

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

  • Czcionka tekstu: Montserrat
  • Rozmiar tekstu: 18px

Typ czcionki Divi

Ustawienia linku tekstowego

Zmień również kolor tekstu łącza.

  • Kolor tekstu łącza: #9400ff

Kolor modułu Divi

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.

Styl nagłówka modułu tekstowego Recenzja ebook divi

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

Styl nagłówka modułu tekstowego Recenzja ebook divi

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)

Konfiguracja odstępów ustawień modułu tekstowego Divi

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ą.

Dodaj tekst modułu divi

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)

Edytuj tekst divi buildr

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;

Dostosuj wyrównanie kolumn 2

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.

Dodaj obraz ebooka Divizaklejania

Przejdź do zakładki Projekt modułu Obraz i zmień szerokość.

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

Dostosuj rozmiar obrazu Divi

Zaawansowany element podstawowy

Tutaj postaramy się wyrównać obraz na środku.

  • align-self: center;

Wyrównaj obraz na środku

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.

Powiel sekcję divi

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!