Хотите создать организационную структуру в Divi?
Знать, как создать макет блок-схемы в Divi открывает много возможностей для обмена процессами и идеями на Веб-сайт. В некоторых случаях блок-схемы можно использовать для объяснения чрезвычайно сложных идей, включающих большое количество элементов.
На Веб-сайт, однако эти более сложные блок-схемы может быть сложно создать, особенно если вы хотите, чтобы они были адаптивными.
В этом уроке мы покажем вам, как создать удобный макет блок-схемы, который вы можете использовать в своих Веб-сайт, простой, эффективный и отзывчивый.
Кроме того, для его создания мы будем использовать только встроенные параметры Divi, поэтому вам не придется беспокоиться о добавлении собственного кода или плагинов.
Давайте начнем!
обследование
Вот краткий обзор дизайна блок-схемы, который мы будем создавать в этом уроке.
Создайте новую страницу с помощью Divi Builder
Для начала вам нужно будет сделать следующее:
В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.
Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Диви Строитель
Затем нажмите Начать строительство (Построить с нуля)
После этого у вас будет чистый холст, чтобы начать проектирование в Divi.
Как создать макет блок-схемы в Divi
Шаг 1. Создайте строку с аннотацией по центру
Чтобы приступить к созданию макета блок-схемы в Divi, мы начнем с создания строки, содержащей центральную аннотацию. Это будет первый элемент блок-схемы.
Заполнение раздела
Сначала откройте настройки раздела по умолчанию и установите нижний отступ на 0 пикселей.
- Отступ (снизу): 0px
Линия
Внутри раздела добавьте строку в столбец.
Откройте настройки линии и обновите следующие параметры дизайна:
- Ширина желоба: 1
- Отступы (сверху и снизу): 0 пикселей
Рекламный дизайн мода
Чтобы создать наш первый элемент блок-схемы, мы будем использовать модуль Blurb.
Вставьте встроенный модуль Blurb.
Настройки модуля
Откройте настройки модуля Blurb. Под вкладкой Содержание, вы можете оставить заголовок и основной текст по умолчанию.
Затем обновите изображение небольшим изображением значка или используйте один из встроенных значков Divi. В этом уроке мы используем значки из Пакет макетов для краудфандинга .
Затем задайте модулю цвет фона:
- Фон: #f8f8f8
Под вкладкой Проект, обновите следующее:
- Выравнивание текста: по центру
- Максимальная ширина: 400 пикселей (для ПК и планшетов), 90% (для телефонов)
- Модуль выравнивания: Центр
- Набивка: 6% (сверху и снизу), 3% (слева и справа)
Затем задайте модулю Blurb рамку следующим образом:
- Ширина границы: 2 пикселя
Шаг 2: Создание соединительной линии с вертикальной линией и стрелкой
В следующей части макета нашей блок-схемы мы создадим ряд соединителей с центральной вертикальной линией и стрелкой. Эта линия будет использоваться для соединения линий содержание организационной структуры, которая должна продолжаться внизу страницы.
В этом случае мы хотим начать блок-схему, добавив линию и стрелку под предыдущей строкой с модулем Blurbn в центре.
Создайте новую строку и скопируйте/вставьте стили из предыдущей строки.
Для этого добавьте новую строку в столбец под предыдущей строкой.
С использованием " Другие настройки модуля (или параметры правой кнопкой мыши), скопируйте стили из предыдущей строки выше и вставьте их в новую строку.
Создание разделителя вертикальной линии
Чтобы создать разделитель вертикальной линии, добавьте к линии новый модуль Divider.
В настройках разделителя обновите параметры дизайна следующим образом:
- Цвет линии: #333333
- Позиция в строке: внизу
- Вес разделителя: 150 пикселей
- Ширина: 2 пикселя
- Модуль выравнивания: Центр
- Поле: -1px (снизу)
Под вкладкой Фильтр, скройте переполнение следующим образом:
- Горизонтальное переполнение: скрыто
- Вертикальное переполнение: скрыто
Создайте стрелку с помощью модуля Blurb
Далее мы создадим значок стрелки, который будет располагаться над разделительной линией, используя модуль презентации.
Чтобы создать стрелку, добавьте новый модуль Blurb под разделителем.
Настройки мода Blurb
В настройках модуля удалите заголовок и основной текст по умолчанию и нажмите Используйте значок, затем выберите значок стрелки (см. снимок экрана).
Под вкладкой Проект, обновите следующее:
- Цвет значка: #bbbbbb
- Выравнивание изображения/значка: по центру
- Использовать размер шрифта значка: ДА
- Размер шрифта значка: 50 пикселей (для настольных компьютеров), 40 пикселей (для планшетов и телефонов)
- Максимальная ширина: 50%
- Модуль выравнивания: по центру
- Высота: 50 пикселей (для настольных компьютеров), 40 пикселей (для планшетов и телефонов)
Под вкладкой Фильтр, добавьте следующий CSS в Рекламное изображение :
margin-bottom: 0px;
background: #ffffff;
Чтобы расположить стрелку над линией, обновите следующее:
- Позиция: Абсолют
- Расположение: Центр
- Индекс Z: 10
Шаг 3: Создание линии для смежных частей блок-схемы
Как только ряд соединителей будет завершен, мы добавим еще один ряд из нескольких смежных модулей Blurb, чтобы продолжить разработку блок-схемы.
Чтобы добавить линию, просто скопируйте и вставьте первую строку (строку с аннотацией по центру, которую мы создали в верхней части макета) под соединительной линией.
Откройте «Настройки линии» и обновите следующее:
- Максимальная ширина: 50%
- Ширина границы: 2px
Левая часть блок-схемы
Теперь, когда наша граница добавлена к линии, мы поместим модуль Blurb над левой линией границы.
Для этого обновите следующие параметры дизайна:
- Модуль выравнивания: левый
- Поле: 70 пикселей (сверху и снизу)
- Преобразование Перемещение по оси X: -50%
Это ключ к центрированию модуля Blurb по горизонтали над линией границы.
Правая часть блок-схемы
Чтобы добавить еще один модуль аннотации к правой линии границы, продублируйте существующую аннотацию.
Чтобы расположить аннотацию на правой границе, перейдите на вкладку Фильтр и дайте ему абсолютную позицию:
- Позиция: Абсолют
- Расположение: по центру справа
Затем обновите следующие параметры:
- Поля: нет
- Преобразование Перемещение по оси Y: -50%
- Преобразование Перемещение оси X: 50%
Добавлены стрелки в углах каждой линии границы
Чтобы на блок-схеме было понятнее направление движения строк, мы добавим дополнительные значки со стрелками на границы строк.
Стрелка вверху слева
Чтобы добавить стрелку в верхнюю левую строку границы, продублируйте модуль Blurb со стрелкой, который мы создали в соединительной строке, и перетащите его в строку, содержащую соседние модули Blurb.
Откройте модуль Duplicate Arrow Blurb и измените значок на стрелку, указывающую влево.
Затем обновите расположение позиции модуля:
- Расположение: вверху слева
Наконец, обновите параметр преобразования преобразования следующим образом:
- Преобразование Перемещение по оси Y: -50%
Стрелка вверху справа
Чтобы создать стрелку, расположенную на верхней правой границе, продублируйте стрелку " в верхнем углу слева который мы только что создали. Затем откройте настройки и измените местоположение позиции:
- Расположение: вверху справа
Также обновите значок стрелки, указав стрелку вправо.
Стрелка вниз влево
Чтобы создать стрелку, которая находится на нижней левой границе, продублируйте стрелку " в правом верхнем углу который мы только что создали.
Затем откройте настройки и измените местоположение позиции:
- Расположение: внизу слева
Затем обновите параметр Transform Translate:
- Преобразование Перемещение по оси Y: 50%
Стрелка вниз вправо
Чтобы создать стрелку, которая находится на нижней правой границе, продублируйте стрелку " внизу слева который мы только что создали.
Затем откройте настройки и измените местоположение позиции:
- Расположение: внизу справа
Также обновите значок стрелки, указав стрелку влево.
После того, как все стрелки будут размещены, вы можете обновить метки для каждой из них, используя кнопку вид слоя .
Шаг 4. Добавление еще одной соединительной линии
Как только мы завершили линию с двумя соседними частями блок-схемы и всеми стрелками, мы можем продолжить блок-схему, добавив еще одну соединительную линию.
Для этого продублируйте линию соединителя, которую мы создали выше, и вставьте ее ниже строки, содержащей модули Blurb из соседней части блок-схемы.
Шаг 5. Настройка потока с помощью линейного соединителя с прямой кромкой
В существующем дизайне блок-схемы поток начинается с верхнего элемента, затем разветвляется на правый и левый соседние элементы, затем возвращается к середине и переходит к следующему среднему элементу.
Чтобы настроить поток, мы продублируем раздел, чтобы можно было настроить блок-схему так, чтобы она останавливалась на соседнем элементе(ах) презентации слева и продолжалась с элемента презентации справа.
Дублировать раздел
Для этого сначала продублируйте весь раздел, содержащий блок-схему.
Добавить еще один левый модуль аннотации
В дублирующем разделе (внизу) найдите левый модуль Blurb в строке, содержащей два соседних модуля. Затем продублируйте аннотацию слева, чтобы создать новую прямо под ней.
Удалить нижние стрелки и границу
Затем удалите нижнюю левую стрелку и нижнюю правую стрелку.
Откройте настройки строки для строки, содержащей несколько аннотаций, и удалите нижнюю границу:
- Ширина нижней границы: 0px
Создание линии с прямым соединителем линии границы
Теперь мы хотим настроить дизайн блок-схемы с соединительной линией правой границы, которая соединит правую линию границы линии с соединительной линией ниже.
Для этого мы создадим еще одну линию и добавим пользовательскую разделительную линию и контурную стрелку с правой стороны.
Добавьте новую строку на один столбец ниже существующей строки с тремя макетами.
Обновите настройки строки следующим образом на вкладке Проект :
- Ширина желоба: 1
- Максимальная ширина: 50%
- Отступ: 0px (сверху и снизу)
Затем добавьте к линии прямую границу.
- Ширина правой границы: 2 пикселя
Затем добавьте в линию модуль Divider.
Обновите настройки делителя следующим образом:
- Цвет линии: #333333
- Позиция в строке: внизу
- Вес разделителя: 2px
- Ширина: 50%
- Поле: -2px (снизу)
На вкладке «Дополнительно» обновите положение разделителя:
- Позиция: Абсолют
- Расположение: внизу справа
Установив разделитель, скопируйте модуль Blurb из нижней правой стрелки третьей строки первого раздела и вставьте его в строку с правой разделительной линией.
Откройте настройки модуля Blurb для стрелки, которую вы только что продублировали и переместили, и обновите следующее:
- Позиция: по умолчанию
- Модуль выравнивания: правый
Остановка потока на левой границе
В настоящее время часть левой границы видна под рекламой в левом нижнем углу. Чтобы скрыть это, просто удалите нижнее поле этой нижней аннотации.
Шаг 6: Обновление линии с помощью соединителя линии левого края
На вашей блок-схеме может также потребоваться соединительная линия левой границы. Чтобы создать его, мы можем обновить линию с правым соединителем линии границы следующим образом:
- Ширина левого бопрдера: 2px
- Ширина правой границы: 0
Обновите разделитель внутри строки с новым местоположением:
- Расположение: внизу слева
Затем обновите выравнивание стрелки:
- Модуль выравнивания: левый
И измените значок на стрелку вправо.
Конечный результат
Проверьте конечный результат.
Скачайте DIVI прямо сейчас!!!
Заключение
В этом уроке мы создали удобную схему блок-схемы, которую каждый может использовать для передачи процессов и идей другим пользователям. посетителей с потрясающим адаптивным дизайном.
Используйте его, чтобы продемонстрировать услуги или процесс проектирования, создать инфографику или провести клиентов через содержание по-новому.
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для выполнения ваших проектов создания интернет-сайтов.
Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
