Загрузите БЕСПЛАТНУЮ макет целевой страницы Divi для предварительного просмотра книги, включая якорные ссылки и призывы к действию

Независимо от того, продаете ли вы книгу или электронную книгу, эффективная целевая страница для нее может творить чудеса. Вы можете подойти к этой целевой странице традиционным способом или превратить ее в целевую страницу для предварительного просмотра книги. Целевая страница предварительного просмотра книги позволяет людям заранее прочитать определенные части или главы вашей книги. Он также оснащен якорными ссылками, которые упрощают навигацию по различным частям или главам. В довершение всего, вы также хотите привлечь внимание к призыву к действию, который привлечет трафик туда, где вы продаете свою книгу.

В этом уроке мы воссоздадим потрясающую целевую страницу предварительного просмотра книги с нуля с помощью Divi. Вы также сможете бесплатно скачать макет JSON, если хотите сразу добавить его на свой сайт.

Давайте приступим к делу!

Предварительный просмотр

Прежде чем мы углубимся в руководство, давайте быстро посмотрим на результат для разных размеров экрана.

Рабочий стол

Мобильный

Загрузите макет целевой страницы для предварительного просмотра книги БЕСПЛАТНО

Чтобы получить бесплатный макет целевой страницы для предварительного просмотра книги, вам сначала нужно загрузить его, нажав кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Начнем воссоздавать!

Подпишитесь на наш канал Youtube

Добавить новый регулярный раздел

Интервал

Начните с создания новой страницы и добавления к ней обычного раздела. Откройте настройки раздела и удалите все настраиваемые верхние и нижние отступы.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Добавить ряд

Структура столбца

Продолжите, добавив новую строку в раздел, используя следующую структуру столбцов:

Фоновый цвет

Еще не добавляя никаких модулей, откройте настройки строки и добавьте белый цвет фона.

• Цвет фона: #ffffff

Столбец 3 градиентный фон

Также добавьте градиентный фон к третьему столбцу.

• Цвет 1: # 6a30ff
• Цвет 2: # a202ff
• Столбец 3 Тип градиента: линейный
• Столбец 3 Направление градиента: 166 градусов

Размеры

Затем перейдите к настройкам размера и позвольте строке занять всю ширину экрана, добавив следующие настройки размера:

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

Перейдите к настройкам интервала и удалите настраиваемые верхнее и нижнее отступы строки. Также добавьте несколько значений заполнения в первый и третий столбцы.

• Верхняя обивка: 0vw
• Нижняя обивка: 0vw
• Верхнее заполнение столбца 1: 15vw (рабочий стол), 10vw (планшет и телефон)
• Нижнее заполнение столбца 2: 15vw (рабочий стол), 10vw (планшет и телефон)
• Колонка 1, отступ слева: 7vw

Столбец 2 CSS ID

Как вы можете заметить в предварительном просмотре этого сообщения, ко второму столбцу прикреплена полоса прокрутки. Если вы хотите стилизовать эту полосу прокрутки позже в публикации, добавьте CSS ID во второй столбец.

• Идентификатор CSS столбца 2: style-scrollbar

Столбец 2: главный элемент

Следующее, что мы собираемся сделать, - разрешить прокрутку столбца, добавив следующие строки кода CSS к основному элементу столбца 2:

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

Добавить текстовый модуль №1 в столбец 1

Добавить содержимое

Теперь, когда мы изменили все настройки строк, можно приступить к добавлению модулей! Начните с текстового модуля в столбце 1 и добавьте контент по вашему выбору.

Настройки текста

Зайдите в текстовые настройки модуля и внесите некоторые изменения.

• Шрифт текста: Lato
• Цвет: # 666666
• Размер текста: 1.6vw (рабочий стол), 3vw (планшет), 4vw (телефон)
• Высота текстовой строки: 2vw

Добавить модуль разделителя в столбец 1

Видимость

Следующий модуль, который мы добавим, - это Divider Module. Убедитесь, что опция «Показать разделитель» включена.

• Показать разделитель: Да

Цвет

Затем перейдите на вкладку дизайна и измените цвет.

• Цвет: # 5802ed

Размеры

Также поиграйте со значениями размеров.

• Вес разделителя: 4 пикселя
• Ширина: 3vw (рабочий стол), 6vw (планшет), 9vw (телефон)
• Высота: 0 пикселей

Интервал

И добавьте немного настраиваемого верхнего и нижнего отступов, чтобы освободить место.

• Верхнее поле: 1vw (рабочий стол), 3vw (планшет), 4vw (телефон)
• Нижняя маржа: 7vw

Добавить текстовый модуль №2 в столбец 1

Добавить содержимое

Переходим к третьему модулю, который представляет собой еще один текстовый модуль. Здесь мы добавили символ (►), за которым следует заголовок первой главы в поле содержимого.

Добавить ссылку

Мы связываем весь этот модуль с идентификатором привязки, который мы добавим позже в этом посте.

• URL ссылки на модуль: https://yourwebsite.com/pagetitle/#chapter-1

Настройки текста

Продолжите, перейдя к настройкам текста и стилизуйте контент именно так, как вы хотите.

• Шрифт текста: Lato
• Толщина шрифта текста: легкий
• Цвет текста: # 666666
• Размер текста: 1.3vw (рабочий стол), 2vw (планшет), 3.3vw (телефон)

Интервал

Также добавьте пользовательские отступы сверху и снизу.

• Верхняя обивка: 1vw
• Нижняя обивка: 1vw

Клонировать текстовый модуль №2 дважды

После того, как вы закончите изменять текстовый модуль, клонируйте его дважды (или до такого количества глав, которым вы хотите поделиться).

Изменить содержимое

Измените содержимое каждого дубликата.

Изменить ссылки

Вместе с идентификатором привязки в конце URL-адреса ссылки модуля. В данном случае это означает добавление «# chapter-2» к первому дубликату и «# chapter-3» ко второму.

Добавить текстовый модуль в столбец 2

Добавить содержимое

Переходим к следующему столбцу, который можно прокручивать. Здесь мы собираемся использовать текстовые модули для добавления разных страниц предварительного просмотра книги. Начните с добавления первого текстового модуля с некоторым содержимым по вашему выбору.

Фоновый цвет

Затем перейдите к настройкам фона и добавьте белый цвет фона.

• Цвет фона: #ffffff

Настройки текста

Также измените настройки текста.

• Шрифт текста: Lato
• Размер текста: 0.8vw (рабочий стол), 1.6vw (планшет), 2.1vw (телефон)
• Высота текстовой строки: 1,7 миллиметра (рабочий стол), 3,3 миллиметра (планшет), 3,8 миллиметра (телефон)

Настройки текста H2

Поиграйте и с настройками текста H2.

• Шрифт заголовка 2: Lato
• Толщина шрифта заголовка 2: жирный
• Цвет текста заголовка 2: # 5802ed
• Размер текста заголовка 2: 2vw (рабочий стол), 2.5vw (планшет), 2.9vw (телефон)
• Высота строки заголовка 2: 2.3vw

Интервал

Продолжите, перейдя к настройкам интервалов и добавив следующие настраиваемые значения полей и отступов:

• Верхнее поле: 2vw (рабочий стол), 7vw (планшет), 10vw (телефон)
• Нижнее поле: 2vw (рабочий стол), 7vw (планшет), 10vw (телефон)
• Левое поле: 5vw
• Правое поле: 5vw
• Верхняя обивка: 6vw
• Нижняя обивка: 6vw
• Левый отступ: 6vw
• Правое заполнение: 6vw

Коробка Тень

Придайте форму текстовому модулю, добавив тонкую тень блока.

• Сила размытия тени коробки: 50 пикселей
• Цвет тени: rgba (0,0,0,0.09)

CSS ID

Продолжите, добавив CSS ID в текстовый модуль. Убедитесь, что вы используете тот же идентификатор CSS, что и тот, на который вы ссылались в первом столбце строки.

• CSS ID: chapter-1

Клонировать текстовый модуль дважды

После того, как вы стилизовали текстовый модуль, клонируйте его столько раз, сколько захотите.

Изменить содержимое

Измените содержимое каждого дубликата текстового модуля.

Изменить идентификаторы CSS

Вместе с идентификаторами CSS.

• CSS ID: chapter-2
• CSS ID: chapter-3

Добавить текстовый модуль в столбец 3

Добавить содержимое

Переходим к следующему и последнему столбцу! Добавьте текстовый модуль с любым содержимым по вашему выбору.

Настройки текста

Затем перейдите на вкладку дизайна и измените настройки текста.

• Шрифт текста: Lato
• Толщина шрифта текста: толстый
• Цвет текста: #ffffff
• Размер текста: 2vw (рабочий стол), 3vw (планшет), 4vw (телефон)
• Высота текстовой строки: 2vw
• Ориентация текста: по центру

Интервал

Затем добавьте пользовательские отступы слева и справа.

• Слева: 2vw
• Справа: 2vw

Добавить модуль кнопок в столбец 3

Добавить копию

Продолжите, добавив кнопочный модуль в третий столбец с некоторой копией по вашему выбору.

Выравнивание

Затем измените выравнивание кнопки.

• Расположение кнопок: по центру

Настройки кнопок

Измените также настройки кнопки.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 1vw (рабочий стол), 1.5vw (планшет), 2.4vw (телефон)
• Цвет текста кнопки: # 5802ed
• Цвет фона кнопки: #ffffff
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 10vw
• Расстояние между буквами кнопки: 0 пикселей
• Толщина шрифта: Ультра полужирный
• Стиль шрифта: прописные

Интервал

И добавьте несколько настраиваемых значений полей и отступов для стиля и расположения модуля.

• Верхнее поле: 2vw (рабочий стол), 4vw (планшет), 5vw (телефон)
• Верхнее заполнение: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Нижняя прокладка: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Левое заполнение: 3vw (рабочий стол), 7vw (планшет), 9vw (телефон)
• Правая прокладка: 3vw (рабочий стол), 7vw (планшет), 9vw (телефон)

Полоса прокрутки стиля

Открыть настройки страницы

Последняя часть этого урока посвящена стилизации полосы прокрутки второго столбца. Независимо от того, стилизуете ли вы полосу прокрутки столбца или нет, полностью зависит от вас. Отсутствие стиля ничего не меняет в функциональности. Если вы решили стилизовать полосу прокрутки, откройте настройки страницы.

Добавить код CSS

Затем перейдите на вкладку «Дополнительно» и добавьте немного настраиваемого CSS в поле «Пользовательский CSS», и все готово!

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

Предварительный просмотр

Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим на результат для разных размеров экрана.

Рабочий стол

Мобильный

Последние мысли

В этом посте мы показали вам, как создать потрясающую и эффективную целевую страницу для предварительного просмотра книги с якорными ссылками на различные части или главы вашей книги и с призывом к действию, который выделяется. Мы также бесплатно поделились макетом JSON, так что вы можете сразу же начать добавлять его на любой сайт, который вы создаете! Если у вас есть какие-либо вопросы или предложения, обязательно оставьте комментарий в разделе комментариев ниже.

Если вы хотите узнать больше о Divi и получить больше бесплатных подарков Divi, убедитесь, что вы подписались на нашу рассылку новостей по электронной почте и канал YouTube, чтобы вы всегда были одним из первых, кто узнает и извлекает выгоду из этого бесплатного контента.