Сегодня я покажу вам, как создать привлекательный дизайн рецензий на книги с помощью Ebook Только Divi Layout Pack и встроенные опции Divi. Это отличный способ добавить социальное доказательство на ваши целевые страницы, повысить доверие и элегантно поделиться короткими отзывами людей.
Давайте начнем дизайн
Загрузить макет целевой страницы пакета электронной книги
Первое, что вам нужно сделать, это создать новую страницу, используя макет целевой страницыEbook Пакет макетов, который вы найдете в готовых макетах.
Добавить новый раздел
Прокрутите макет вниз и добавьте новый раздел, в котором вы хотите отображать обзоры книг.
Добавить новую строку
Структура столбца
Продолжайте добавлять новую строку, используя следующую структуру столбцов:
Градиентный фон колонны 1
Не добавляя больше модулей, откройте настройки линии и добавьте градиентный фон в первый столбец.
- 1 цвет: #ffffff
- Цвет 2: #f4f4f4
- Столбец 1 Начальная позиция: 12%
- Столбец 1 Конечная позиция: 12%
Цвет столбца 2
Также добавьте собственный цвет фона во второй столбец.
- Цвет фона столбца 2: #9400ff
калибровка
Перейдите на вкладку Дизайн и удалите все настраиваемые промежутки между столбцами, используя следующие параметры:
- Использовать произвольную ширину желоба: Да
- Ширина желоба: 1
расстояние
Мы также меняем настройки межстрочного интервала.
- Верхнее поле: 100px
- Нижнее поле: 100px
- Верхняя обивка: 0px
- Нижняя обивка: 0px
Добавьте модуль изображения в столбец 1
Загрузить изображение 1: изображение 1
Как только настройки вашей строки будут установлены, вы можете начать добавлять различные модули, начиная с модуля изображения в первом столбце. Загрузите изображение по вашему выбору, но убедитесь, что соотношение сторон 1: 1. Это означает, что высота и ширина должны быть одинаковыми.
Выравнивание изображений
Выберите выравнивание левого изображения на вкладке «Дизайн».
- Выравнивание изображения: слева
калибровка
Мы также меняем ширину этого модуля для разных размеров экрана.
- Ширина: 20% (рабочий стол и планшет), 30% (телефон)
расстояние
Чтобы разрешить перекрытие с левой стороны линии, мы добавляем отрицательное значение левого поля в настройках Интервал модуля Изображение.
- Левое поле: -30px
Граница
Чтобы завершить дизайн изображения, мы также добавляем «50vw» к каждому углу в настройках границы. Это обеспечит сохранение круглой формы изображения на экранах разных размеров.
Добавить текстовый модуль # 1 в столбец 1
Добавьте символы звездочки в область содержимого
Давайте перейдем к следующему модулю — текстовому модулю ранжирования. Чтобы выделить количество звезд, мы будем использовать символы. Продолжайте, скопируйте следующие символы и вставьте их в поле. содержание нового текстового модуля: ★★★★.
Цвет фона
Затем измените нижнюю часть модуля.
- Цвет фона: # 9400ff
Настройки текста
Перейдите на вкладку Дизайн и также измените параметры текста.
- Шрифт текста: Монтсеррат
- Вес шрифта текста: тяжелый
- Размер текста: 45px (рабочий стол), 30px (планшет), 25px (телефон)
- Высота строки текста: 1em
- Выравнивание текста: центр
калибровка
Продолжайте, изменяя ширину модуля.
- Ширина: 35%
расстояние
И добавить пользовательский интервал.
- Левое поле: 50px
- Правое поле: 50px
- Верхняя обивка: 20px
- Нижняя обивка: 20px
Shadow box
Чтобы выделить поле рейтинга, мы добавим небольшую тень.
- Box Shadow Blur Force: 50px
- Цвет тени: rgba (0,0,0,0,3)
Трансформер Перевести
Наконец, мы переместим текстовый модуль, используя настраиваемые значения преобразования перевода. Вы можете отложить этот шаг, пока не добавите все модули в свой столбец.
- Справа: 360px (рабочий стол), -84px (планшет), -70px (телефон)
- Внизу: -113px (рабочий стол), 190px (планшет), 141px (телефон)
Добавить текстовый модуль # 2 в столбец 1
Добавить контент
Следующий модуль, который нам нужен в столбце 1, — это еще один текстовый модуль. Добавить содержание по вашему выбору и ссылку на рецензента и книгу.
Настройки текста
Перейдите на вкладку Дизайн и соответствующим образом измените настройки текста:
- Шрифт текста: Монтсеррат
- Размер текста: 18px
Настройки текстовой ссылки
Измените цвет текста ссылки тоже.
- Цвет текста ссылки: #9400ff
расстояние
Затем перейдите к настройкам интервалов и переместите элемент, используя настраиваемые значения полей.
- Верхнее поле: -100px (рабочий стол), 0px (планшет и телефон)
- Левое поле: 200px (рабочий стол), 50px (планшет), 20px (телефон)
- Правое поле: 50px (планшет), 20px (телефон)
Добавить текстовый модуль # 3 в столбец 1
Добавить контент H3
Давайте перейдем к следующему модулю, который является текстовым модулем, содержащим заголовок ревизии H3.
Настройки текста H3
Перейдите на вкладку Дизайн и измените настройки текста H3.
- Заголовок 3 Шрифт: Монтсеррат
- Название 3 Вес шрифта: жирный
- Заголовок 3 Цвет текста: # 000000
расстояние
Также добавьте пользовательское поле.
- Верхнее поле: 80px (рабочий стол), 50px (планшет и телефон)
- Левое поле: 50px (рабочий стол и планшет), 20px (телефон)
- Правое поле: 50px (рабочий стол и планшет), 20px (телефон)
Добавьте текстовый модуль 4 в столбец 1.
Добавить контент
Давайте перейдем к следующему и последнему модулю, который нам нужен, в столбце 1, который является еще одним текстовым модулем с актуальной ревизией.
расстояние
Перейдите к настройкам интервалов этого модуля и примените следующие настройки:
- Верхнее поле: 20px
- Нижнее поле: 50px
- Левое поле: 50px (рабочий стол и планшет), 20px (телефон)
- Правое поле: 50px (рабочий стол и планшет), 20px (телефон)
Добавьте модуль изображения в столбец 2
Изменить настройки CSS столбца 2
Мы будем использовать свойства гибкости для выравнивания изображения по центру:
дисплей: гибкий;
Скачать изображение обложки книги
Во втором столбце нам понадобятся два модуля, начиная с модуля изображения с обложкой книги. В этом уроке мы используем обложки книг, поставляемые с обзорной книгой Divi, но вы также можете добавить свою собственную обложку.
калибровка
Перейдите на вкладку «Дизайн» модуля «Изображение» и измените ширину.
- Ширина: 79% (рабочий стол), 40% (планшет и телефон)
Расширенный первичный элемент
Здесь мы попробуем выровнять изображение по центру.
- выровнять себя: центр;
Клонируйте дизайн столько раз, сколько захотите
Создав рецензию на первую книгу, вы можете клонировать всю строку столько раз, сколько хотите, в зависимости от того, сколько рецензий вы хотите видеть на своей целевой странице.
Заключительные мысли
В этом уроке мы показали вам, как создавать потрясающие обзоры книг для ваших следующих страниц публикации электронных книг. Это поможет вам добавить социальное доказательство на свою страницу и убедить посетителей достоверность вашей книги. Если у вас есть какие-либо вопросы или предложения, не забудьте оставить комментарий в разделе комментариев ниже!
