Полезное руководство по проектированию круговых элементов в Divi

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

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

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

Проверьте это!

Sneak Peek

Загрузите БЕСПЛАТНО образец компоновки круговых элементов

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

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

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

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

СКАЧАТЬ

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

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.

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

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

Для начала создайте новую страницу в Divi. Затем присвойте странице заголовок и разверните конструктор Divi во внешнем интерфейсе. Выберите вариант «построить с нуля».

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

Теперь вы готовы к работе!

Три основных шага к созданию кругового элемента

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

Шаг 1. Задайте размер элемента с равными значениями высоты и ширины.

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

Шаг 2: Добавьте радиус границы 50% для всех четырех углов.

Второй шаг - установить радиус границы элемента (или модуля) на 50% по всем четырем углам. В Divi вы можете изменить радиус границы элемента с помощью параметра «Закругленные углы».

Шаг 3. Выровняйте содержимое внутри круглого элемента

Третий шаг - выровнять содержимое круглого элемента. Мы можем сделать это, настроив отступ элемента. (Кроме того, позже в этом посте я расскажу о способе использования гибкости для вертикального центрирования содержимого)

В этом примере мы можем добавить следующие отступы, чтобы наше содержимое было ближе к центру кругового элемента:

Пользовательские отступы: 18vw сверху, 3vw слева, 3vw справа

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

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

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

Использование единицы длины VW для высоты и ширины

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

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

Использование единицы длины VW для содержимого круглого элемента

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

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

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

Размер текста заголовка: 4vw
Ширина (телефон): 70vw
Высота (телефон: 70vw

Как видите, весь контент теперь красиво размещается внутри круглого элемента на дисплее телефона.

А как насчет пикселей?

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

Например, возьмем тот же модуль призыва к действию и будем использовать пиксели (вместо vw) для изменения размера и размещения нашего модуля.

Вы можете обновить высоту, ширину и отступы следующим образом:

Ширина: 500 пикселей
Высота: 500 пикселей
Пользовательские отступы: 200 пикселей сверху, 20 пикселей слева, 20 пикселей справа.

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

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

Почему единица длины в% не очень хорошо подходит для определения размеров круглых элементов

Если вам нужно более гибкое решение для круговых элементов, вы можете подумать, что использование процентов - это ответ. Однако при изменении размеров элементов на веб-странице единица длины в процентах для высоты не работает так же, как единица длины в процентах для ширины. Это связано с тем, что высоту элементов по умолчанию обычно оставляют по умолчанию (высота: авто). Так, например, если вы пытаетесь установить 100% высоту для модуля Divi, модуль не будет настраиваться, потому что все родительские контейнеры (столбец, строка, раздел и т. Д.) Имеют неопределенное значение для высоты. Браузер в основном не пытается установить модуль на 100% ничего (что не может). Это не относится к ширине. По умолчанию ширина любого блочного элемента (или div) составляет 100%. Таким образом, все разделы, строки и модули имеют эту ширину по умолчанию 100%, если не изменены настройками. Вот почему единица длины% - не лучший вариант для создания отзывчивого кругового элемента. Круглый элемент должен иметь одинаковую высоту и ширину для всех размеров браузера, поэтому это сложно сделать, используя процентную единицу длины для высоты. Однако есть способы сделать 100% высоту и ширину работающими с большим количеством настраиваемого CSS, применяемого к родительским элементам. Но для создания круглых элементов в Divi вам может быть проще работать с единицей длины vw.

Выравнивание содержимого в круговом элементе

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

Выравнивание содержимого кругового элемента с заполнением

Чтобы выровнять содержимое внутри элемента круга с помощью заполнения, я бы предложил использовать единицу относительной длины (например,% или vw), чтобы заполнение увеличивалось или уменьшалось в зависимости от размера контейнера или ширины браузера. Вы не хотите использовать абсолютные единицы длины для заполнения внутри круглого элемента, размер которого определяется в относительных единицах. Результат будет противоречивым, и дизайн сломается на мобильных устройствах. Например, если у вас есть круглый элемент высотой 10vw и шириной 10vw. Этот элемент будет уменьшаться в размере по мере уменьшения ширины браузера. Если вы добавили отступ в 100 пикселей к верхней части элемента, эти 100 пикселей останутся всякий раз, когда вы изменяете ширину браузера и нарушаете дизайн. Однако, если вы добавите отступ 3vw, он будет хорошо согласовываться с элементом.

Вот почему я предложил использовать vw padding в нашем примере модуля призыва к действию.

Выравнивание содержимого кругового элемента со свойством Flex

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

Вот что я имею в виду.

На нашем примере откройте настройки модуля призыва к действию.

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

Затем перейдите на вкладку «Дополнительно» и добавьте следующий фрагмент CSS в основной элемент:

display:flex;
align-items: center;

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

padding-bottom: 0px

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

Практика: добавление круговых элементов в готовый макет

Теперь, когда вы лучше понимаете, как создавать круглые элементы в Divi, давайте посмотрим, как это может работать на реальном макете. В этом примере я собираюсь использовать Landing Page от Divi Farmer из пакета Farmer Layout Pack.

Загрузите макет целевой страницы фермера на свою страницу

Для начала давайте добавим на страницу макет целевой страницы фермера. Для этого откройте меню настроек и нижнюю часть Divi Builder и нажмите кнопку «Загрузить из библиотеки». Во всплывающем окне загрузки из библиотеки найдите Farmer Layout Pack и выберите его. Затем нажмите, чтобы использовать посадочную страницу фермера.

Это загрузит макет на страницу.

Создание заголовка круглого сечения

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

1: размер элемента с равными значениями высоты и ширины
2: Добавьте радиус границы 50% для всех четырех углов.
3. Выровняйте содержимое внутри кругового элемента

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

Ширина: 70vw (рабочий стол), 70vw (планшет), 80vw (телефон)
Максимальная ширина: 1080 пикселей
Выравнивание секции: по центру
Высота: 70 мм (рабочий стол), 70 мм (планшет), 80 мм (телефон)
Максимальная высота: 1080 пикселей

Обратите внимание, что я добавил дополнительные значения высоты и ширины для планшета и телефона, а также добавил максимальную высоту и максимальную ширину. Важно убедиться, что все значения высоты и все значения ширины равны.

Теперь нам нужно добавить радиус границы 50% по всем четырем углам.

Закругленные углы: 50% (все четыре угла)

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

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

размер текста заголовка: 4vw

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

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

Пользовательская маржа: 10vw сверху (настольный компьютер), 5vw (планшет), 0vw (телефон)
Пользовательские отступы: 3vw слева, 3vw справа

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

А теперь посмотрим на результат.

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

Теперь давайте попробуем создать круговые размытия на этом макете. В этом примере давайте воспользуемся четырьмя модулями рекламных объявлений в разделе «Наши продукты». Найдя его, откройте настройки модуля рекламных сообщений в верхней части столбца 2.

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

Ширина изображения: 7vw
Ширина: 50vw (настольный), 80vw (телефонный)
Максимальная ширина: 400 пикселей
Выравнивание модуля: по центру
Высота: 50 Вт (настольный), 80 Вт (телефон)
Максимальная высота: 400 пикселей

Затем добавьте радиус границы или закругленные углы:

Закругленные углы: 50%

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

Размещение изображения / значка: вверху
Размер текста заголовка: 2vw (рабочий стол), 20px (планшет)
Ориентация текста: по центру

Пользовательские отступы: 0vw сверху, 0vw снизу, 4vw слева, 4vw справа

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

display: flex;
align-items: center;

Расширить круговой стиль на все размытия в разделе

Это касается круглого дизайна нашего первого модуля. Теперь все, что нам нужно сделать, это расширить настройки дизайна модуля рекламных объявлений на оставшиеся три объявления в разделе. Для этого щелкните правой кнопкой мыши только что созданный модуль рекламных объявлений и выберите «Расширить стили рекламных объявлений». Во всплывающем окне «Расширить стили» выберите, чтобы стиль был расширен по всему разделу.

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

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

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

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

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

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