Как создать макет блок-схемы в Divi

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

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

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

Sneak Peek

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

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

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

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

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

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

СКАЧАТЬ

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

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

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

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

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

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

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

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

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

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

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

Как создать макет блок-схемы в Divi

Шаг 1. Создание строки с центрированным размытием

Чтобы начать создание макета блок-схемы в Divi, мы начнем с создания строки, содержащей центрированное рекламное объявление. Это будет первый элемент в блок-схеме.

Заполнение раздела

Сначала откройте настройки раздела для раздела по умолчанию и установите для нижнего отступа значение 0 пикселей.

Ряд

Внутри раздела добавьте строку из одного столбца.

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

• Ширина желоба: 1
• Padding: 0px сверху, 0px снизу

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

Дизайн модуля Blurb

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

Добавьте в строку новый модуль аннотации.

Настройки Blurb

Откройте настройки рекламного ролика. На вкладке содержимого вы можете оставить заголовок и основной текст по умолчанию.

Затем обновите изображение с помощью небольшого значка или используйте одну из встроенных иконок Divi. В этом уроке я буду использовать значки из пакета Crowdfunding Layout Pack.

Затем придайте рекламному объявлению цвет фона:

• Цвет фона: # f8f8f8

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

• Выравнивание текста: по центру
• Макс. Ширина: 400 пикселей (компьютер и планшет), 90% (телефон)
• Выравнивание модуля: по центру
• Заполнение: 6% сверху, 6% снизу, 3% слева, 3% справа

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

Затем придайте рекламному объявлению границу следующим образом:

• Ширина границы: 2 пикселя

Шаг 2. Создание соединительного ряда с помощью вертикальной линии и стрелки

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

В этом случае мы хотим начать блок-схему с добавления линии и стрелки под предыдущей строкой с центрированным модулем рекламного объявления.

Создать новую строку и скопировать / вставить стили строки из предыдущей строки

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

Используя меню «Дополнительные параметры» (или параметры, вызываемые щелчком правой кнопкой мыши), скопируйте стили строк из предыдущей строки выше и вставьте их в новую строку.

Создание разделителя вертикальной линии

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

В настройках разделителя обновите настройки дизайна следующим образом:

• Цвет линии: # 333333
• Положение строки: Внизу
• Вес разделителя: 150 пикселей
• Ширина: 2 пикселя
• Выравнивание модуля: по центру
• Поля: -1px снизу

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

• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый

Создание стрелки с помощью модуля Blurb

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

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

Настройки всплывающего сообщения со стрелкой

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

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

• Цвет значка: #bbbbbb
• Выравнивание изображения / значка: по центру
• Размер шрифта значка: 50 пикселей (рабочий стол), 40 пикселей (планшет и телефон)

• Максимальная ширина: 50%
• Выравнивание модуля: по центру
• Высота: 50 пикселей (рабочий стол), 40 пикселей (планшет и телефон)

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

margin-bottom: 0px;
background: #ffffff;

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

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

• Позиция: Абсолютная
• Расположение: Центр
• Индекс Z: 10

Шаг 3. Создание строки с прилегающими размытыми линиями и стрелками на блок-схеме

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

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

Откройте настройки строки и обновите следующее:

• Максимальная ширина: 50%
• Ширина границы: 2 пикселя

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

Создание вставки блок-схемы на левой границе

Теперь, когда наша граница добавлена ​​к строке, мы собираемся разместить рекламное объявление поверх левой границы.

Для этого обновите следующие настройки дизайна:

• Выравнивание модуля: слева
• Поля: 70 пикселей сверху, 70 пикселей снизу

• Преобразовать преобразовать ось X: -50%

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

Создание смежного фрагмента блок-схемы на правой границе

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

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

• Позиция: Абсолютная
• Расположение: справа по центру

Затем обновите поля и трансформируйте параметры перевода следующим образом:

• Маржа: нет
• Преобразовать преобразовать ось Y: -50%
• Преобразовать преобразовать ось X: 50%

Добавление размытых стрелок к углам на каждой линии границы

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

Стрелка вверх влево

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

Откройте объявление со стрелкой-дубликатом и измените значок на стрелку влево.

Затем обновите положение рекламного объявления со стрелкой:

• Расположение: вверху слева

Наконец, обновите параметр преобразования преобразования следующим образом:

• Преобразовать преобразовать ось Y: -50%

Стрелка вверх вправо

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

• Расположение: вверху справа

Также замените значок стрелки на стрелку вправо.

Нижняя стрелка влево

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

Затем откройте настройки и измените расположение позиции:

• Расположение: внизу слева

Затем обновите параметр преобразования преобразования:

• Преобразовать преобразовать ось Y: 50%

Нижняя стрелка вправо

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

Затем откройте настройки и измените расположение позиции:

• Расположение: внизу справа

Кроме того, замените значок стрелки стрелкой влево.

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

Шаг 4: добавление еще одной строки соединителя

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

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

Шаг 5: настройка потока с помощью соединителя правой границы

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

Дубликат раздела

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

Добавить еще один элемент левого рекламного объявления

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

Удалить нижние стрелки и границу

Затем удалите нижнюю левую стрелку и нижнюю правую стрелку размытия.

Откройте настройки строки для строки, содержащей несколько размытых изображений, и удалите нижнюю границу:

• Ширина нижней границы: 0 пикселей

Создайте строку с соединителем линии правой границы

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

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

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

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

• Ширина желоба: 1
• Максимальная ширина: 50%
• Padding: 0px сверху, 0px снизу

Затем добавьте правую границу к строке.

• Ширина правой границы: 2 пикселя

Затем добавьте в ряд модуль-разделитель.

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

• Цвет линии: # 333333
• Положение строки: Внизу
• Вес разделителя: 2 пикселя
• Ширина: 50%
• Поля: -2 пикселя снизу

На вкладке «Дополнительно» обновите положение разделителя:

• Позиция: Абсолютная
• Расположение: внизу справа

Как только разделитель будет на месте, скопируйте объявление со стрелкой внизу справа из третьей строки в первом разделе и вставьте его в строку с правой разделительной линией.

Откройте настройки рекламного объявления со стрелкой, которое вы только что скопировали и переместили, и обновите следующее:

• Позиция: по умолчанию

• Выравнивание модуля: правое

Остановка движения левой пограничной линии

Прямо сейчас под нижним левым рекламным объявлением видна часть левой границы. Чтобы скрыть это, просто выньте нижнее поле этого нижнего рекламного объявления.

Шаг 6. Обновление строки с помощью соединителя линии левой границы

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

• Ширина левой границы: 2 пикселя
• Ширина правой границы: 0

Обновите разделитель внутри строки, указав новое местоположение:

• Расположение: внизу слева

Затем обновите выравнивание рекламного объявления со стрелкой:

• Выравнивание модуля: слева

И измените значок на стрелку вправо.

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

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

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

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

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

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