Как создать дизайн плавающих углов для контента в Divi

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

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

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

Sneak Peek

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

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

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

Скачать файл

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

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

СКАЧАТЬ

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

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

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

Начиная

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

Для начала создайте новую страницу и дайте ей название. Нажмите, чтобы использовать Divi Builder во внешнем интерфейсе, и выберите опцию «Строить с нуля».

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

Создание шаблона макета дизайна плавающего угла

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

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

Сначала создайте новый обычный раздел со строкой в ​​один столбец.

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

Настраиваемая ширина: 640 пикселей
Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу.

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

Размер текста текста: 20 пикселей
Высота текстовой строки: 1,8 м
Настраиваемое поле: -25 пикселей сверху, -25 пикселей снизу, 25 пикселей слева, 25 пикселей справа
Пользовательские отступы (рабочий стол): 10% сверху, 10% снизу, 10% слева, 10% справа
Пользовательское заполнение (телефон): 20% сверху, 20% снизу
Ширина границы: 4 пикселя
Цвет границы: #eeeeee

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

Добавление двух верхних плавающих угловых разделителей

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

Создайте новый модуль-разделитель и перетащите его в верхнюю часть текстового модуля.

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

Показать разделитель: НЕТ

Цвет фона: # 7cda24 (или любой другой цвет, который вы хотите)
Высота: 50 пикселей
Ширина: 50 пикселей

Высота и ширина 50 пикселей дают нам идеальный квадрат, который мы можем использовать для нашей плавающей границы.

Теперь добавьте тень блока к разделителю, чтобы создать эффект плавания, как показано ниже:

Box Shadow: см. Снимок экрана
Вертикальное положение тени блока: 0 пикселей
Сила размытия тени коробки: 0 пикселей
Сила распространения тени коробки: 20 пикселей
Цвет тени: #ffffff

Чтобы модуль делителя оставался над текстовым модулем (и не скрывался за ним), нам нужно добавить фрагмент CSS к основному элементу следующим образом:

Основной элемент CSS:

position: relative

Затем обновите индекс Z до 1.

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

Выравнивание модуля: правое
Пользовательское поле: -50 пикселей сверху

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

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

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

Вот и все! Давайте посмотрим на окончательный дизайн нашего основного макета.

Изучение новых конструкций плавающих углов

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

Алмазные формы с градиентным фоном

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

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

Цвет градиента фона слева: # 7cda24
Правый цвет градиентного фона: # edf000
Направление градиента: 45 градусов

Затем используйте параметры преобразования, чтобы повернуть разделитель в ромбовидную форму.

Преобразование, поворот по оси Z: 45 градусов

Вот окончательный дизайн.

Перекошенные разделители

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

Вот как бы это выглядело.

Темный Фон

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

Закругленные углы кромки

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

Закругленные углы: 20 пикселей

Круговые плавающие углы

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

border-radius: 50%;

Поскольку разделители имеют размер 50 на 50 пикселей, это создаст идеальный круговой дизайн.

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

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

Создание плавающих углов с помощью значков размытия

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

Идите вперед и получите копию шаблона макета раздела.

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

Добавление двух верхних углов значка аннотации

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

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

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

Цвет фона: #ffffff
Размер шрифта значка: 50 пикселей
Ширина: 50 пикселей
Пользовательское поле: внизу 0 пикселей
Закругленные углы: 50%
Box Shadow: см. Снимок экрана
Вертикальное положение тени блока: 0 пикселей
Сила размытия тени коробки: 0 пикселей
Сила распространения тени коробки: 20 пикселей
Цвет тени: #ffffff

Основной элемент CSS:

position: relative;

CSS Blurb Image:

margin-bottom: 0px

Индекс Z: 1

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

Выравнивание модуля: правое
Пользовательское поле: -50 пикселей сверху

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

Затем вы можете обновить значки для каждой аннотации, как хотите.

Вот окончательный дизайн.

Исследуйте больше дизайнов с плавающими углами значка Blurb

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

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

Работает в макетах с несколькими столбцами

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

Заключение

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

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

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