Хотите добавить интересный контент на прокручиваемый планшет в Divi?
Добавление привлекательного контента на ваш сайт может стать эффективной маркетинговой стратегией. Это особенно хорошо работает для продвижения таких товаров, как электронные книги. Вы даете пользователям представление о содержании, чтобы они захотели узнать больше.
В сегодняшнем уроке мы покажем вам, как отображать тизерный контент в выпадающем меню в Divi.
Для этого мы воспользуемся встроенными параметрами Divi, чтобы превратить столбец в раскрывающийся контейнер (выглядящий как планшет), который может включать любой тип контента, который вы хотите.
Вы можете использовать его для продвижения первых глав любой электронной книги, демонстрации примеров дизайна из вашего портфолио или любого другого типа контента.
Давайте начнем!
обследование
Вот краткий обзор планшета с прокручиваемым содержимым, который мы будем создавать в этом уроке.
Создайте новую страницу с помощью Divi Builder
В панели управления WordPress перейдите к "Страницы > Добавить новую"
Дайте название, которое имеет смысл для вас, затем нажмите "Используйте Divi Builder"
Затем нажмите "Начните строительство"
Дизайн планшета с прокручиваемым тизером в Divi
Создание контейнера выпадающего планшета с колонкой Divi
Добавить строку
Для начала создайте строку из двух столбцов с обычным разделом.
Настройки столбца 1
Фоновый цвет
Откройте настройки столбца 1 и добавьте к столбцу белый фон.
- Фон: #ffffff
Граница и поля
Перейти на вкладку Дизайн развернуть опцию Расстояние и измените настройки следующим образом:
- Отступы (сверху, снизу, слева и справа): 25 пикселей (сверху, снизу, слева, справа)
Далее разверните опцию. Граница и соответствующим образом измените настройки:
- Закругленные углы: 20 пикселей
- Ширина границы: 30 пикселя
- Цвет границы: #000000
Shadow box
Чтобы придать дизайну планшета большую глубину, разверните эти параметры. Box Тень и добавьте следующую тень от блока:
- Тень от рамки: см. скриншот
- Коробчатая тень (по горизонтали и вертикали) Положение: 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
На этом этапе при необходимости мы можем добавить дополнительный контент во второй столбец. В этом примере мы добавили текстовый модуль и модуль кнопок и настроили их аналогично дизайну, показанному в нашем пакете макетов электронных книг.
Скачайте DIVI прямо сейчас!!!
Конечный результат
Теперь посмотрим на конечный результат.
Откройте для себя прокручиваемый контент, доступный на планшете, на вашем ноутбуке.
Вот так выглядит дизайн на экране планшета и телефона.
Заключение
Пожалуй, главное достоинство этого дизайна с прокруткой в виде планшета — его универсальность. Поскольку планшет по сути представляет собой колонку Divi, вы можете использовать любое количество модулей Divi (текст, изображение, кнопка) для создания контента, который хотите представить.
Надеюсь, это вам пригодится в следующий раз, когда вам понадобится разместить тизер на своем веб-сайте.
Если вы хотите узнать больше о Divi, не стесняйтесь посетить наш каталог Учебники Диви. Вы также можете проконсультироваться Как создать страницу блога с помощью модуля Divi Blog
Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов по созданию интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
А между тем, поделитесь этой статьей в разных социальных сетях.
...