Хотите создать организационную структуру в Divi?
Умение создавать структуру организационной диаграммы в Divi Это открывает множество возможностей для передачи процессов и идей на веб-сайте. В некоторых случаях блок-схемы можно использовать для объяснения чрезвычайно сложных идей, включающих большое количество элементов.
Однако на веб-сайте создание подобных более сложных блок-схем может быть затруднительным, особенно если требуется адаптивный дизайн.
В этом уроке мы покажем вам, как создать практичную структуру организационной диаграммы, которую вы сможете использовать на своем веб-сайте — простую, эффективную и адаптивную.
Кроме того, для его создания мы будем использовать только встроенные функции Divi, поэтому вам не нужно беспокоиться о добавлении собственного кода или плагинов.
Давайте начнем!
обследование
Вот краткий обзор структуры организационной диаграммы, которую мы создадим в этом уроке.
Создайте новую страницу с помощью Divi Builder
Для начала вам нужно будет сделать следующее:
В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.
Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Диви Строитель
Затем нажмите Начать строительство (Построить с нуля)
После этого у вас будет чистый холст, чтобы начать проектирование в Divi.
Как создать макет организационной диаграммы в Divi
Шаг 1: Создайте строку с центрированным вводным текстом.
Чтобы начать создание макета организационной диаграммы в Divi, начнём с создания строки, содержащей центрированный вводный текст. Это будет первый элемент организационной диаграммы.
Заполнение раздела
Сначала откройте настройки раздела по умолчанию и установите нижний отступ равным 0 пикселей.
- Отступ (снизу): 0px
Линия
В этом разделе добавьте строку в столбец.
Откройте настройки линии и обновите следующие параметры дизайна:
- Ширина желоба: 1
- Отступы (сверху и снизу): 0 пикселей
Рекламный дизайн мода
Для создания первого элемента организационной диаграммы мы воспользуемся модулем «Краткое описание».
Вставьте встроенный модуль 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%
Это ключевой момент для обеспечения горизонтального центрирования модуля «Краткое описание» над линией границы.
Правая сторона организационной схемы
Чтобы добавить еще один модуль аннотации к правой линии границы, продублируйте существующую аннотацию.
Чтобы разместить вступительный текст по правой границе страницы, перейдите на вкладку Фильтр и дайте ему абсолютную позицию:
- Позиция: Абсолют
- Расположение: по центру справа
Затем обновите следующие параметры:
- Поля: нет
- Преобразование Перемещение по оси Y: -50%
- Преобразование Перемещение оси X: 50%
Добавлены стрелки в углах каждой линии границы
Чтобы блок-схема была более наглядной и наглядно показывала направление движения линий, мы добавим дополнительные значки стрелок к границам линий.
Стрелка вверху слева
Чтобы добавить стрелку в верхнюю левую строку границы, продублируйте модуль Blurb со стрелкой, который мы создали в соединительной строке, и перетащите его в строку, содержащую соседние модули Blurb.
Откройте модуль «Краткое описание» для дублирующейся стрелки и замените значок стрелкой, указывающей влево.
Затем обновите расположение позиции модуля:
- Расположение: вверху слева
Наконец, обновите параметр преобразования перевода следующим образом:
- Преобразование Перемещение по оси Y: -50%
Стрелка вверху справа
Чтобы создать стрелку, расположенную на верхней правой границе, продублируйте стрелку "в верхнем углу слева"который мы только что создали. Затем откройте настройки и измените местоположение:
- Расположение: вверху справа
Также обновите значок стрелки, добавив стрелку, указывающую вправо.
Стрелка вниз влево
Чтобы создать стрелку, расположенную по нижнему левому краю, продублируйте стрелку "в правом верхнем углу«то, что мы только что создали».
Затем откройте настройки и измените местоположение позиции:
- Расположение: внизу слева
Далее обновите параметр «Преобразовать перевод»:
- Преобразование Перемещение по оси 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 всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...