Как создать семейное древо с настройками преобразования Divi

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

Давайте перейдем к этому.

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

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

Рабочий стол

Мобильный

Загрузите макет Семейного древа БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Подпишитесь на наш канал Youtube

Расположение членов семьи

Добавить новый раздел

Интервал

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

• Верхняя обивка: 8vw
• Нижняя обивка: 8vw

Добавить строку №1

Структура столбца

Продолжите, добавив первую строку в свой раздел, используя следующую структуру столбцов:

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

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

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей
• Левое заполнение: 15vw (рабочий стол), 0vw (планшет и телефон)
• Правая прокладка: 15vw (рабочий стол), 0vw (планшет и телефон)

Добавить модуль изображения в столбец

Загрузить изображение

Пора начинать добавлять модули! Первое, что нам нужно, это модуль изображения. Загрузите изображение шириной и высотой 180 пикселей.

Выравнивание

Затем перейдите на вкладку дизайна и измените выравнивание изображения.

• Выравнивание изображения: по центру

Размеры

Затем измените настройки размера.

• Ширина: 49%
• Выравнивание модуля: по центру

Граница

И превратите изображение в круг, добавив высокое значение к каждому из углов в настройках границы. Мы используем «20vw», но вы можете использовать любое большое число, какое захотите.

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

Добавить содержимое

Переходим к следующему модулю, который является текстовым модулем. Добавьте сюда имя члена семьи.

Фоновый цвет

Затем перейдите в настройки фона и измените цвет фона на белый.

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

Настройки текста

Затем измените параметры текста. Если вы хотите придать семейному дереву другой вид, поэкспериментируйте с этими настройками.

• Шрифт текста: Open Sans
• Цвет текста: # 000000
• Размер текста: 0.8vw (рабочий стол), 1.2vw (планшет), 1.9vw (телефон)
• Высота текстовой строки: 0,4 мкм
• Ориентация текста: по центру

Интервал

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

• Верхняя маржа: -0.5vw
• Левое поле: 1vw
• Правое поле: 1vw
• Верхняя прокладка: 2vw (рабочий стол), 4vw (планшет), 5vw (телефон)
• Нижняя прокладка: 2vw (рабочий стол), 4vw (планшет), 5vw (телефон)

Граница

Перейдите к настройкам границы и также добавьте верхнюю границу.

• Ширина верхней границы: 5 пикселей
• Цвет верхней границы: # 000000

Коробка Тень

Вместе с Box Shadow для создания глубины на странице.

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

Индекс Z

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

• Индекс Z: 2

Клонировать строку три раза

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

Настроить строку №1

Клонировать оба модуля 7 раз

Приступим к настройке первого уровня семейного древа! Переключитесь в режим каркаса и клонируйте два модуля в строке 7 раз. Когда вы закончите, бэкэнд вашей строки должен выглядеть так:

Столбец Основной элемент CSS

Мы превращаем весь столбец в сетку. Всего в вашей колонке должно быть 16 модулей. Мы собираемся разместить эти 16 модулей в 8 столбцов сетки. Это означает, что каждый из 8 столбцов сетки будет содержать 2 модуля; один модуль изображения и один текстовый модуль. Откройте настройки первой строки и добавьте следующие строки кода CSS в основной элемент столбца:

display: grid;
grid-template-columns: repeat(8, 12.5%);

Настроить строку №2

Клонировать оба модуля 3 раза

Во второй ряд! Здесь мы собираемся клонировать оба модуля 3 раза.

Главный элемент столбца

Мы превращаем столбец в сетку с 4 столбцами сетки, добавляя следующие строки кода CSS к основному элементу столбца строки:

display: grid;
grid-template-columns: repeat(4, 25%);

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

Настроить строку №3

Клонировать оба модуля

На третий ряд! Клонируйте каждый модуль один раз.

Главный элемент столбца

Затем добавьте следующие строки кода CSS к основному элементу столбца:

display: grid;
grid-template-columns: repeat(2, 50%);

Настроить строку №4

Расстояние между рядами

Переходим к следующему и последнему ряду! Здесь единственное, что нам нужно сделать, это изменить значения заполнения строк.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей
• Левый отступ: 31vw
• Правый отступ: 31vw

Подключение членов семьи с помощью модулей изображений

Добавить строку №1

Структура столбца

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

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и измените значения размеров.

• Ширина: 100%
• Максимальная ширина: 100%

Интервал

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

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей
• Левое заполнение: 15vw (рабочий стол), 0vw (планшет и телефон)
• Правая прокладка: 15vw (рабочий стол), 0vw (планшет и телефон)

Добавить модуль изображения в столбец

Загрузить иллюстрацию

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

Размеры

Перейдите к настройкам размера модуля изображения и включите параметр «Force Fullwidth».

• Принудительная полная ширина: Да

Интервал

Убедитесь, что вы отключили опцию «Показывать пространство под изображением» в настройках интервала.

• Показать пространство под изображением: Нет

Клонировать строку дважды и изменить их положение

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

Настроить строку №1

Клонировать модуль изображения три раза

Вернитесь к первому ряду и клонируйте модуль 3 раза.

Главный элемент столбца

Поместите эти модули изображений в сетку с 4 столбцами сетки, добавив следующие строки кода CSS к основному элементу столбца строки:

display: grid;
grid-template-columns: repeat(4, 25%);

Настроить строку №2

Модуль клонирования изображения

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

Главный элемент столбца

Поместите оба модуля в сетку с двумя столбцами сетки, добавив следующие строки кода CSS к основному элементу столбца строки:

display: grid;
grid-template-columns: repeat(2, 50%);

Настроить строку №3

Изменить интервал

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

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей
• Левый отступ: 27vw
• Правое заполнение: 27vw

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

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

Рабочий стол

Мобильный

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

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