Выделение изображений и текста — это классический метод дизайна, который можно использовать, чтобы оживить содержание веб-страницы. Кроме того, Divi позволяет легко создавать эти отражения прямо из Divi Builder без использования фоторедактора.
В этом уроке я покажу вам, как создавать отражения для изображений в Divi. Ключом к созданию отражений является использование опции преобразования Divi для создания зеркальной версии элемента. После этого вы можете добавить настраиваемый оверлей, который я покажу вам, как использовать с текстовым модулем.
Давайте начнем!
обследование
Вот обзор проектов, которые мы будем строить в этом уроке.
Что нужно для начала
Для начала все, что вам нужно, это Divi. Убедитесь, что Диви тема установлен и активен. Мы будем создавать наши проекты с нуля, используя Divi Builder во внешнем интерфейсе (визуальный конструктор). Вам также понадобятся несколько фиктивных изображений для этого урока (фоновое изображение размером около 1920 x 600 пикселей и другое изображение размером около 500 x 350 пикселей).
Когда вы будете готовы, перейдите в панель управления WordPress и выберите «Страницы»> «Добавить». Дайте своей новой странице название и разверните Divi Builder на интерфейсе. Выберите вариант «Строить с нуля». Теперь вы готовы к работе!
Основная идея создания изображения и отражения текста в Divi
Основная идея создания шаблонов отражения в Divi состоит из трех шагов:
- Создайте модуль с вашим изображением или текстом
- Дублируйте модуль и используйте масштаб преобразования для создания зеркального изображения или текста.
- Добавьте наложение градиента к зеркальному элементу с помощью разделителя или абсолютно позиционированного текстового модуля.
Этот прием дизайна не ограничивается отдельными модулями. Фактически вы можете добавлять отражения ко всем строкам в Divi, используя этот метод, который полезен для создания уникальных дизайнов заголовков. Мы добавим отражение в линию нашего дизайна отражения текста позже в этом уроке. Но пока давайте начнем с создания отражения изображения.
Как создать отражение изображения
Чтобы создать отражение изображения, давайте начнем с создания нового обычного раздела со строкой в один столбец.
Затем добавьте модуль изображения в линию.
Загрузите нужное изображение из медиатеки в модуль изображений. Затем обновите следующие настройки изображения:
Максимальная ширина: 600px
Выравнивание модуля: центр
Пользовательское поле: 0px внизу
Создайте зеркальное отображение
Чтобы создать эффект отражения, нам сначала нужно создать дубликат изображения прямо под изображением.
Для этого продублируйте модуль изображения. Затем обновите настройки повторяющегося изображения следующим образом:
Непрозрачность: 40%
Ось X масштаба трансформации: -100%
Свойство Transform scale - это то, что волшебным образом переворачивает изображение по вертикали и горизонтали, чтобы создать зеркальную версию изображения.
Это поддерживает базовый дизайн отражения. Однако мы можем добавить дополнительное наложение градиента к нашему нижнему изображению для более реалистичного дизайна отражения.
Добавьте наложение градиента с помощью текстового модуля
Чтобы добавить наложение градиента к нашему нижнему изображению, мы можем использовать текстовый модуль. Мы можем присвоить текстовому модулю абсолютное положение, чтобы он находился над нижним изображением. Далее мы можем добавить градиентный фон в текстовый модуль. Использование текстового модуля (вместо разделителя) даст вам дополнительную возможность добавления содержание при желании позже поверх изображения отражения.
Идите вперед и создайте текстовый модуль под нижним изображением.
Удали это содержание по умолчанию, чтобы текстовый модуль был пуст.
Затем обновите настройки текстового модуля следующим образом:
Левый градиент фона Цвет: rgba (255,255,255,0)
Фоновый градиент справа Цвет: #ffffff
Ширина: 100%
Высота: 50%
Затем добавьте следующий пользовательский код CSS к основному элементу:
положение: абсолютно! важно; верх: 50%;
Это абсолютное позиционирование текстового модуля накладывает текстовый модуль на нижнюю половину строки.
Добавление цвета фона
Если вам не нужен белый фон, вы можете использовать другие цвета фона для создания шаблона отражения по всей ширине.
Для этого откройте настройки линии и обновите следующее:
Цвет фона: #000000
Ширина: 100%:
Максимальная ширина: 100%;
Пользовательские отступы: 0px высоко, 0px вниз
Давайте посмотрим на результат сейчас.
Отражения могут выглядеть очень круто, если вы уделите время их правильному дизайну. К счастью, у Диви есть инструменты преуспеть. Существуют и другие методы отражения CSS, но, к сожалению, они, как правило, не поддерживаются браузерами. Дизайны в этом уроке будут отлично смотреться во всех браузерах.
Я обнаружил, что отражения отлично смотрятся в заголовках страниц и при демонстрации изображений для элемента портфолио. И я уверен, что есть много других реализаций.
Вот и все для этого урока, я надеюсь, что он позволит вам добавлять отражения на свой сайт WordPress, используя внутренние функции Divi.
