Хотите добавить тизерный контент на прокручиваемый планшет в Divi?
Добавление тизерного контента в ваш Веб-сайт может быть стратегией маркетинга эффективен. Это особенно хорошо работает для содействовать такие вещи, как электронные книги. Вы даете им предварительный просмотр контента, чтобы они захотели большего.
В сегодняшнем уроке мы покажем вам, как демонстрировать тизерный контент на раскрывающемся планшете в Divi.
Для этого мы воспользуемся встроенными параметрами Divi, чтобы превратить столбец в раскрывающийся контейнер (выглядящий как планшет), который может включать любой тип контента, который вы хотите.
Вы можете использовать это для содействовать первые главы любой электронной книги, демонстрируйте образцы дизайна из вашего портфолио или любого другого типа контента.
Давайте начнем!
обследование
Вот краткий обзор планшета с прокручиваемым содержимым, который мы будем создавать в этом уроке.
Создайте новую страницу с помощью Divi Builder
В панели управления WordPress перейдите к «Страницы > Добавить новую»
Дайте название, которое имеет смысл для вас, затем нажмите «Используйте DiviBuilder»
Затем нажмите «Старт-Строительство»
Дизайн планшета с прокручиваемым тизером в Divi
Создание контейнера выпадающего планшета с колонкой Divi
Добавить строку
Для начала создайте строку из двух столбцов с обычным разделом.
Настройки столбца 1
Фоновый цвет
Откройте настройки столбца 1 и добавьте к столбцу белый фон.
- Фон: #ffffff
Граница и поля
Перейти на вкладку Проект выпадающий вариант Расстояние и измените настройки следующим образом:
- Отступы (сверху, снизу, слева и справа): 25 пикселей (сверху, снизу, слева, справа)
Затем потяните вниз вариант Граница и соответствующим образом измените настройки:
- Закругленные углы: 20 пикселей
- Ширина границы: 30 пикселя
- Цвет границы: #000000
Shadow box
Чтобы придать дизайну планшета некоторую глубину, опустите параметр Box Тень и добавьте следующую тень блока:
- Box Shadow: см. снимок экрана
- Коробчатая тень (по горизонтали и вертикали) Положение: 5 пикселей
- Цвет тени: #555555
Пользовательская высота и ширина столбца с помощью CSS
Ключом к тому, чтобы сделать содержимое столбца прокручиваемым, является придание ему определенной высоты. Это приведет к тому, что содержимое выйдет за пределы высоты столбца.
Мы также хотим, чтобы соотношение сторон планшета оставалось постоянным, поэтому хорошей идеей будет также задать максимальную ширину столбца.
Чтобы задать столбцу произвольную высоту и ширину, перейдите на вкладку Фильтр и обновите следующее:
Sous Пользовательские CSS, добавьте следующий CSS для отображения на рабочем столе (основной элемент):
height:650px;
max-width: 488px;
Затем активируйте вкладку для другого дисплея и вставьте следующий пользовательский CSS для отображения основного элемента на телефоне:
max-height: 500px;
max-width: 375px;
float:none;
margin: 0 auto;
Вертикальное переполнение: прокрутка
Как упоминалось ранее, столбец теперь имеет определенную высоту, что неизбежно приведет к вертикальному переполнению содержимого столбца.
Чтобы обеспечить возможность просмотра переполненного содержимого путем прокрутки столбца вниз, установите для параметра видимости вертикального переполнения значение «прокрутка». Для этого разверните параметр Прозрачность вкладка Фильтр
- Вертикальное переполнение: прокрутка
Добавьте содержимое тизера в раскрывающийся столбец
На этом этапе колонка (или полка) готова для содержимого. Вы можете использовать любой модуль Divi в этом столбце для создания контента для предварительного просмотра.
В этом примере мы добавляем фиктивный контент электронной книги, который будет состоять из модуля реклама (для отображения начального призыва к действию), модуль Фото товара (для отображения обложки книги) и модуль Текст (для отображения некоторых глав книги).
Прокрутка CTA (призыв к действию) на фоне обложки книги
Первый элемент содержимого тизера, который мы собираемся добавить, — это модуль. реклама который послужит призывом к действию «прокрутить до предварительного просмотра».
Мы будем использовать значок презентации, заголовок и фон с обложкой книги в качестве фонового изображения и наложением цветового градиента.
В столбце планшет добавьте модуль реклама.
Обновите содержимое следующим образом:
- Название: прокрутите, чтобы прочитать отрывок
Выпадающий вариант «Изображение и значок»
- Использовать значок: Да
- Значок: см. скриншот
Затем потяните вниз вариант проверка данных и добавить градиент
- Цвет левой стороны: rbga(0,0,0,0,0.0)
- Цвет правой стороны: #ffffff
- Начальная позиция: 20%
- Итоговая позиция: 85%
- Квадратный градиент над фоновым изображением: ДА
Затем добавьте изображение обложки книги. Для достижения наилучших результатов добавьте изображение размером примерно 600 на 850 пикселей. .
На вкладке «Дизайн» обновите следующие стили для значка и заголовка:
- Цвет значка: #000000
- Размер шрифта иконки: 80 пикселей (на компьютере и планшете), 70 пикселей (на телефоне).
- Шрифт названия: Монтсеррат
- Выравнивание текста заголовка: по центру
- Цвет текста: #000000
Затем мы можем переместить значок и заголовок вниз по столбцу, добавив верхнее поле.
Чтобы изменить размер и разместить рекламу, измените следующее:
- Высота: 100%
- Поле: 25 пикселей (снизу)
- Отступы: 400 пикселей (на компьютере и планшете), 270 пикселей (на телефоне)
Изображение обложки книги
Следующим тизером станет изображение обложки книги. Чтобы добавить изображение, просто добавьте модуль «Изображение» под модуль «Вставка».
Затем загрузите то же изображение, которое использовалось для фона рекламного объявления.
Содержимое текстового превью
Нашей последней частью тизера будет текст, который будет включать несколько вымышленных глав из нашей электронной книги. Чтобы добавить текст, добавьте новый текстовый модуль под предыдущим изображением.
Затем вставьте следующий HTML-код на вкладку основного текста:
<h3>Chapitre 1</h3>
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.
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?
<h3>Chapitre 2</h3>
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?
На вкладке «Дизайн» обновите стиль заголовка и интервал следующим образом (Заголовок 3):
- Шрифт: Монтсеррат
- Вес шрифта: очень жирный
- Выравнивание текста: по центру
- Высота строки: 1,3 см
- Набивка: 10% (сверху и снизу)
Несколько последних штрихов
Обновить параметры линии
Разместив контент, нам нужно внести некоторые коррективы в строку, чтобы сделать дизайн более отзывчивым. Откройте «Настройки линии» и обновите следующее:
- Ширина: 100% (рабочий стол), 90% (планшет и телефон)
- Максимальная ширина: 1 пикселей (для настольных компьютеров), 080 пикселей (для планшетов и телефонов)
Добавьте дополнительный контент в столбец 2
На этом этапе мы можем добавить дополнительный контент в столбец 2, если это необходимо. В этом примере мы добавили модуль «Текст» и модуль «Кнопка» и настроили их в соответствии с дизайном, показанным в нашем пакете макетов электронных книг.
Скачайте DIVI прямо сейчас!!!
Конечный результат
Теперь посмотрим на конечный результат.
Ознакомьтесь с раскрывающимся содержимым, доступным внутри планшета ноутбука.
И вот как дизайн сочетается на экране планшета и телефона.
Заключение
Возможно, самое лучшее в этом дизайне планшета с прокруткой — его универсальность. Поскольку планшет по сути представляет собой колонку Divi, вы можете использовать любое количество модулей Divi (текст, изображение, кнопка) для создания контента, который хотите продемонстрировать.
Надеюсь, это поможет вам в следующий раз, когда вам нужно будет продемонстрировать тизерный контент на вашем Веб-сайт.
Если вы хотите узнать больше о Divi, не стесняйтесь посетить наш каталог Учебники Диви. Вы также можете проконсультироваться Как создать страницу блога с помощью модуля Divi Blog
Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов по созданию интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
А между тем, поделитесь этой статьей в разных социальных сетях.
...
