Построить красивые веб-сайты WordPress, используя Divi и Divi Builder

Как создать пользовательский блок содержимого внутри Divi

Rifat Divi Учебники Jul 23, 2021

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

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

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

Создание окна содержимого

Мы начнем с добавления строки из одного столбца в наш начальный раздел.

Дизайн: 1-я коробка с контентом

Добавьте модуль рекламного сообщения, чтобы создать наше первое поле содержимого.

Создавайте потрясающие сайты

С лучшим бесплатным конструктором страниц Elementor

Начать сейчас

В разделе содержимого внесите следующие изменения:

  • Значок использования: ДА
  • Значок: информационный символ
  • Цвет фона: #ffffff
  • Цвет фонового градиента слева: # 3EBC00
  • Правый цвет градиента фона: # C4FF59
  • Направление градиента: 90 градусов
  • Начальная позиция: 3em
  • Конечная позиция: 0%

На вкладке дизайна обновите стиль значка следующим образом:

  • Цвет значка: #ffffff
  • Выравнивание изображения / значка: влево
  • Использовать размер шрифта значка: ДА
  • Размер шрифта значка: 2em

Настройте параметры текста следующим образом:

  • Цвет текста заголовка: # 3EBC00
  • Размер текста заголовка: 1.5em
  • Высота строки заголовка: 2em
  • Цвет основного текста: # 339300
  • Размер основного текста: 1em
  • Высота линии тела: 2em

Если вы закончили стилизацию текстов, давайте обновим размер и отступы.

  • Ширина содержимого: 100%
  • Максимальная ширина: 700 пикселей
  • Выравнивание модуля: по центру
  • Заполнение: 2em сверху, 2em снизу, 5em слева, 2em справа

Мы добавим тень блока в модуль рекламного сообщения следующим образом:

  • Box Shadow: см. Снимок экрана
  • Положение прямоугольной тени по вертикали: 0 пикселей
  • Сила размытия тени коробки: 88 пикселей
  • Сила распространения тени коробки: -10 пикселей
  • Цвет тени: rgba (0,0,0,0.17)

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

position:absolute;
margin-bottom: 0px;
border: 0.5em solid #3ebc00 !important;
border-radius:50%;
background: #3ebc00;
transform: translateX(-3.75em);

Обязательно измените цвет в поле CSS изображения при дальнейшей настройке. В противном случае он останется прежним. теперь давайте посмотрим, как выглядит наше первое поле содержимого.

Дизайн: 2-я коробка с контентом

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

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


margin-bottom: 0px;

Кроме того, добавьте этот код CSS в поле содержимого.

display: grid;
align-items: center;
justify-content: center;
grid-template-columns: 5em auto;
grid-gap: 2em;

Здесь ширина левого столбца, в котором находится значок, установлена на 5em, а для правого столбца с текстом внутри установлено значение auto. Итак, нам нужно сопоставить цвет левого градиента с шириной 5em.

  • Начальная позиция: 5em

Внесите следующие изменения на вкладке «Дизайн».

  • Выравнивание изображения / значка: по центру
  • Размер шрифта значка: 3em

Теперь уберем левый отступ, потому что он нам больше не нужен.

Поскольку все выстроено в линию, вот окончательный вид.

Дизайн: 3-я коробка с контентом

Затем клонируйте дизайн второго блока содержимого и начните работать над ним правильно.

Откройте настройку клонированного рекламного объявления и перейдите на вкладку «Дизайн», чтобы изменить цвет значка.

  • Цвет значка: rgba (255,255,255,0,5)

Теперь мы добавим текст метки поверх значка по вертикали, добавив немного настраиваемого CSS. Для этого вставьте следующий код в поле До CSS.

content: 'key tip';
bottom:50%;
font-size: 1em;
line-height: 1em;
letter-spacing: 0.4em;
position:absolute;
transform: rotatez(-90deg) translateX(-50%) translateY(3em) !important;
transform-origin: bottom left;
color: #fff;
font-family: inherit;
font-weight: bold;
text-transform: uppercase;
z-index:1;

Кроме того, добавьте приведенный ниже код в блок CSS с рекламным изображением, чтобы закрепить значок.

margin-bottom: 0px;
transform: rotateZ(-90deg);

Наконец, измените значок в соответствии с изображением. Это выглядит более привлекательно.

Окончательный результат нашего дизайна выглядит следующим образом.

Обновление дизайна

Обновление дизайна путем изменения размера корпуса

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

Изменить цвета

В 1-м поле содержимого мы добавили цвет значка в качестве фона из кода CSS. обновите этот цвет, чтобы изменить общую атмосферу, если вы думаете о выборе других цветовых узоров.

Обновление текста ярлыка

В третьем поле содержимого мы можем изменить метку из кода CSS, который мы поместили в поле Before CSS.

Сделать многоразовую коробку с контентом

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

Сначала щелкните подзаголовок панели настроек Blurb. Вы увидите раскрывающееся меню с двумя вариантами.

Затем выберите первый вариант, который гласит: «Создать новый пресет из текущих стилей».

Теперь добавьте имя предустановки по вашему выбору и сохраните его.

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

Конечный результат

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

Заключительные слова

Ранее мы говорили, что настраиваемое поле контента обогащает пользовательский опыт вашего веб-сайта и несет в себе знак вашей преданности веб-сайту, поскольку эти разделы несут контент, который очень актуален для такой темы. Контент такого типа можно легко создать с помощью модуля Divi Blurb. Надеюсь, вы будете использовать его в сообщениях в блогах или в различных описательных разделах в следующем проекте.