Как создать планшет с прокручиваемым текстом для предварительного просмотра с помощью Divi
Опубликовано: 2017-08-08В сегодняшнем руководстве мы покажем вам, как создать планшет для предварительного просмотра текста с возможностью прокрутки на вашем веб-сайте. Предварительный просмотр текста будет представлен на планшете, где посетители могут прокручивать планшет, чтобы прочитать несколько разделов, которыми они делятся.
Добавление планшета для предварительного просмотра текста на ваш сайт - отличный способ подразнить посетителей. Вы даете им возможность изучить часть созданного вами контента. После того, как они прочитали содержание и почувствовали себя заинтригованными им, более вероятно, что они захотят прочитать и остальное. Использование планшета с предварительным просмотром текста может быть интересно, например, в следующих случаях:
- При продаже книги
- Когда вы делитесь бесплатной электронной книгой с вашими посетителями и хотите побудить их загрузить полную версию (подписавшись)
- При обмене тематическими исследованиями или отзывами
Чтобы показать вам, что именно мы имеем в виду, мы создали пример, который мы покажем вам, как шаг за шагом воссоздать:
Вы можете добавить на планшет столько контента, сколько захотите. Полоса прокрутки позволит вашим посетителям легко просматривать содержимое.
Как создать планшет с прокручиваемым текстом для предварительного просмотра с помощью Divi
Подпишитесь на наш канал Youtube
Создать и изменить раздел
Первое, что нам понадобится для воссоздания созданного нами примера, - это раздел. Чтобы упростить задачу, мы собираемся добавить этот раздел на новую страницу и переключиться на Visual Builder, чтобы объяснить все шаги, которые используются для создания результата.
Добавить новую страницу
Чтобы добавить новую страницу, перейдите в панель управления WordPress> Страницы> Добавить новую . После добавления новой страницы активируйте Divi Builder и сразу же переключитесь на Visual Builder.
Добавить раздел с двухколоночной строкой
Для примера, который мы воссоздаем, нам понадобится только одна секция. Добавьте стандартный раздел и внутри этого раздела создайте строку из двух столбцов. Нам понадобится левый столбец, чтобы разместить планшет с предварительным просмотром текста, и второй столбец, чтобы предоставить информацию и разместить призыв к действию.
Добавить градиентный фон
Следующий шаг, который мы объясним, - это градиентный фон. Мы выбрали что-то действительно простое, но это добавляет полезности разделу. Чтобы воссоздать фоновый градиент, перейдите в настройки вашего раздела. Затем используйте следующие два цвета для градиентного фона в подкатегории фона:
- # e02b20
- # f2f2f2
Настройки, которые мы использовали для градиентного фона, следующие:
- Тип градиента: линейный
- Направление градиента: 143 град.
- Стартовая позиция: 28%
- Конечная позиция: 28%
Первый столбец: добавьте модуль кода и планшет для предварительного просмотра текста
Для первого столбца мы собираемся добавить модуль кода с планшетом для предварительного просмотра текста. Чтобы закончить планшет с предварительным просмотром текста, нам нужно сделать три вещи; добавьте модуль кода, добавьте строки кода HTML в модуль кода и добавьте необходимые строки кода CSS на саму страницу. Вы также можете добавить строки кода CSS в Параметры темы или Настройщик темы. Но поскольку в данном случае это не обязательно, мы добавим его только на созданную страницу.
Добавить модуль кода
Начните с добавления модуля кода в первый столбец созданной вами строки.
Добавить HTML-код
Затем откройте этот модуль кода и добавьте следующие строки в поле содержимого:
<div id="tab-container"> <div class="tablet"> <div class="tab"> <h1 class="title">Chapter 1</h1> <p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </p> <h1 class="title">Chapter 2</h1> <p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </p> <footer> 2017 *Author* </footer> </div> </div> </div>
Вы заметите, что в нашем предварительном просмотре текста есть три части; заголовок, абзацы и нижний колонтитул. Вы можете делать предварительный просмотр текста столько, сколько захотите. В этом примере мы добавили две главы, каждая из которых представлена одним заголовком и одним абзацем. Конечно, вы можете добавить несколько абзацев и заголовков в любое место на планшете.
Добавьте необходимый код CSS
После того, как вы настроили HTML-код в соответствии с вашими потребностями, вы можете добавить CSS-код, благодаря которому ваш планшет будет выглядеть так, как вы хотите. Поскольку этот планшет нам понадобится только на странице, которую мы создаем; мы собираемся добавить код непосредственно на страницу. В Visual Builder своей страницы щелкните значок настроек:
Затем перейдите на вкладку CSS и вставьте следующие строки кода CSS в поле Custom CSS:
*{ box-sizing: border-box; }
.tablet {
position: relative;
background: #1c1c1c;
width: 100%;
height: 600px;
max-width: 450px;
max-height: 600px;
margin: 0 auto 0;
padding: 30px 24px 30px 24px;
border-radius: 18px;
border-top:2px solid #3C3F45;
border-right:2px solid #202227;
border-bottom:2px solid #202227;
border-left:2px solid #3C3F45;
box-shadow:11px 11px 24px rgba(0,0,0,0.5);
}
@media only screen and (max-width:768px) {
height: 400px;
}
.tablet .tab {
background: #f9f9f9;
color: black;
padding: 50px 40px 50px 40px;
overflow: scroll;
height: 100%;
text-align: justify;
}
.tablet .tab h1 {
font-size: 30px;
font-family: "Dancing script";
font-weight: bold;
font-style: italic;
text-align: center;
margin: 0 0 20px 0;
padding: 4px;
font-size: 25px;
}
.tablet .tab p {
margin: 0 0 20px 0;
font-family: "Arial";
font-size: 13px;
}
footer {
background: black;
color: white;
margin-bottom: 8px;
}
Вы можете изменить все в соответствии с вашими потребностями в этих строках кода CSS. Как вы можете заметить в строках кода, есть пять основных частей, в которых вы можете изменить внешний вид своего планшета с предварительным просмотром текста.
- Внешний вид планшета
- Внешний вид планшета
- Название
- Пункты
- Нижний колонтитул
Таким образом, вы можете настроить планшет на любую страницу, на которую вы интегрируете планшет для предварительного просмотра текста.
Второй столбец: добавьте два текстовых модуля и призыв к действию.
Последнее, что мы собираемся сделать, это добавить модули в правый столбец. Важно сообщить людям, что они будут читать на планшете с предварительным просмотром текста. Это также идеальная возможность использовать CTA. Чем ближе CTA к фактическому планшету с предварительным просмотром текста и чем он заметнее, тем больше вероятность, что люди предпримут действия после прочтения предварительного просмотра текста.
Первый текстовый модуль
Начните с добавления первого текстового модуля во вторую строку. Откройте настройки и запишите заголовок в поле содержимого в подкатегории «Текст» содержимого. Кроме того, перейдите на вкладку «Дизайн» и внесите следующие изменения в подкатегорию «Текст»:
- Шрифт текста: Танцевальный сценарий
- Стиль шрифта текста: полужирный и курсив
- Размер шрифта текста: 40 (рабочий стол), 35 (планшет), 30 (телефон)
- Цвет текста: # 1c1c1c
- Высота текстовой строки: 1,7 мкм
Прокрутите ту же вкладку вниз и добавьте «40%» к верхней границе.
Второй текстовый модуль
Кроме того, добавьте второй текстовый модуль. Начните с добавления текста в поле «Содержимое» на вкладке «Содержимое» и перейдите на вкладку «Дизайн». На вкладке «Дизайн» также внесите следующие изменения в подкатегорию «Текст»:
- Шрифт текста: Аримо
- Размер шрифта текста: 14
- Высота текстовой строки: 1,7 мкм
Кнопочный модуль
Наконец, нам также нужно добавить модуль кнопки во второй столбец. Мы подобрали цвета CTA к градиентному фону. Во-первых, добавьте модуль кнопок и откройте Настройки. Затем добавьте CTA и URL на вкладке Content. Затем перейдите на вкладку «Дизайн» и внесите следующие изменения в подкатегорию «Кнопка»:
- Использовать пользовательские стили для кнопки: Да
- Размер кнопки Текст: 14 (компьютер и планшет), 12 (телефон)
- Цвет текста кнопки: # f9f9f9
- Цвет фона кнопки: # e02b20
- Ширина границы кнопки: 0
- Радиус границы кнопки: 3
- Шрифт кнопки: Arimo
Совет: если вы продвигаете свою электронную книгу через предварительный просмотр текста, вы также можете связать триггер по форме согласия Click Bloom, как описано в следующем сообщении.
Результат
Если вы выполнили все шаги, описанные в этой публикации, вы должны были получить следующий результат для предварительного просмотра книги:
Подведение итогов
С модулем кода вы можете проявить столько творчества, сколько захотите. Этот пост был одним из примеров того, насколько разнообразным можно сделать свой веб-сайт Divi, если интегрировать некоторые элементы по своему вкусу. Если вы следили за этой публикацией шаг за шагом, у вас должна была быть возможность воссоздать предварительный просмотр книги и использовать ее на своем веб-сайте. Вы можете не только использовать предварительный просмотр книги для веб-сайтов авторов, но вы также можете использовать его для предварительного просмотра электронной книги, которую вы создали и из которой хотите создать свой список рассылки. Если у вас есть вопросы или предложения; не стесняйтесь оставлять нам комментарии в разделе комментариев ниже!
Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!