Как создавать стилизованные блоки содержимого в Divi для советов, информации, предупреждений и т. Д. (БЕСПЛАТНАЯ загрузка)

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

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

Давайте начнем!

Sneak Peek

Сегодня мы собираемся создать эти 3 основных дизайна боксов с контентом в Divi.

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

Вот 36 примеров, которые мы включили в нашу БЕСПЛАТНУЮ загрузку ниже.

Скачайте макет БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Чтобы импортировать макет раздела в свою библиотеку Divi, перейдите в библиотеку Divi.

Щелкните кнопку Импорт.

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

Затем нажмите кнопку импорта.

После этого макет раздела будет доступен в Divi Builder.

Давайте перейдем к руководству, не так ли?

Что вам нужно для начала

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Строить с нуля».

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

Создание дизайна блока содержимого в Divi

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

Дизайн блока контента №1

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

На вкладке содержимого обновите следующее:

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

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

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

Затем обновите стили текста следующим образом:

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

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

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

Затем добавьте к рекламному объявлению тонкую тень блока, как показано ниже:

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

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

Чтобы добавить собственный стиль, вставьте следующий код CSS в поле CSS Blurb Image:

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

ПРИМЕЧАНИЕ. При изменении цветовой схемы поля содержимого (или модуля рекламного сообщения) нам также потребуется обновить цвета, которые используются в CSS изображения размытия для границы и фона значка.

Посмотрим на окончательный результат.

Дизайн бокса с контентом # 2

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

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

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

margin-bottom: 0px;

Затем добавьте следующий CSS в поле CSS Blurb Content:

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,3)

Затем мы собираемся добавить текст вертикальной метки поверх значка, добавив собственный CSS к псевдоэлементу before (который в основном позволяет вам прикреплять дополнительный дизайн и / или контент перед элементом модуля blurb).

Чтобы добавить метку, вставьте следующий CSS в поле Before 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 в поле CSS Blurb Image:

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

Вот окончательный результат.

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

Обновите размер элементов поля содержимого, изменив размер основного текста

Каждый из блоков содержимого построен с использованием в основном единицы длины em ( em относительно размера шрифта корневого тела элемента). Из-за этого поля содержимого будут плавно масштабироваться по размеру при настройке размера основного текста во встроенных настройках дизайна Divi.

Обновить пользовательские цвета CSS

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

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

Для дизайна 3 блока содержимого мы добавили метку с настраиваемым CSS на псевдоэлемент before . Чтобы обновить текст, просто измените значение свойства content в поле Before CSS.

Создание многоразового использования блоков содержимого в Divi

Сохраните модуль в библиотеке Divi

Есть два основных способа сделать модули многоразовыми в Divi. Первый способ - сохранить модуль (или любой элемент) в библиотеке Divi.

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

Использовать глобальные предустановки

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

В этом случае мы можем открыть настройки для каждого из наших блоков содержимого (или модулей рекламных объявлений) и создать новый глобальный пресет для каждого из них. Для этого откройте настройки модуля Blurb и нажмите на предустановленный вариант вверху. Затем превратите настройки модуля в новый пресет из пользовательских стилей.

Назовите новый пресет как хотите и сохраните его.

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

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

Окончательные результаты

Вот последний взгляд на 3 основных дизайна боксов с контентом, которые мы создали.

А вот 36 дизайнов, которые вы сможете создать с помощью нескольких простых настроек, которые мы включили в нашу БЕСПЛАТНУЮ загрузку выше.

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

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

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!