Как создавать отражения для изображений и текста в Divi
Опубликовано: 2019-05-19Создание отражений для изображений и текста - это классический прием дизайна, который можно использовать для оживления содержимого веб-страницы. И Divi позволяет легко создавать эти отражения прямо из Divi Builder без использования редактора фотографий.
В этом уроке я покажу вам, как создавать отражения для изображений и текста в Divi. Ключ к созданию отражений - использование опции шкалы преобразования Divi для создания зеркальной версии элемента. После этого вы можете добавить настраиваемый оверлей, который я покажу вам, как сделать с текстовым модулем.
Давайте начнем!
Sneak Peek
Вот краткий обзор дизайнов, которые мы создадим в этом уроке.
Загрузите макет отражения текста и изображения БЕСПЛАТНО
Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.
Скачать бесплатно
Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.
Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.
Давайте перейдем к руководству, ладно?
Подпишитесь на наш канал Youtube
Что вам нужно для начала
Для начала вам понадобится Divi. Убедитесь, что тема Divi установлена и активна. Мы будем создавать наши проекты с нуля, используя Divi Builder в интерфейсе (визуальный конструктор). Вам также понадобится несколько фиктивных изображений для этого урока (фоновое изображение размером около 1920 x 600 пикселей и другое изображение размером около 500 x 350 пикселей).
Когда вы будете готовы, перейдите в свою панель управления WordPress и перейдите в Pages> Add New. Дайте своей новой странице заголовок и разверните Divi Builder во внешнем интерфейсе. Выберите вариант «Строить с нуля». Теперь вы готовы к работе!
Основная идея создания отражения изображения и текста в Divi
Основная идея создания дизайна отражений в Divi состоит из трех шагов:
- Создайте модуль с вашим изображением или текстом
- Дублируйте модуль и используйте масштаб трансформации, чтобы создать зеркальное изображение или текст.
- Добавьте градиентное наложение к зеркальному элементу с помощью разделителя с абсолютным позиционированием или текстового модуля.
Этот прием дизайна не ограничивается отдельными модулями. Фактически вы можете добавлять отражения ко всем строкам в Divi, используя этот метод, который полезен для создания уникальных дизайнов заголовков. Чуть позже в этом уроке мы добавим отражение в строку в нашем дизайне отражения текста. Но пока начнем с того, как создать отражение изображения.
Как создать отражение изображения
Чтобы создать отражение изображения, давайте начнем с создания нового обычного раздела с строкой в один столбец.
Затем добавьте в строку модуль изображения.
Загрузите нужное изображение из галереи мультимедиа в модуль изображений. Затем обновите следующие настройки изображения:
Максимальная ширина: 600 пикселей
Выравнивание модуля: по центру
Пользовательское поле: внизу 0 пикселей
Создайте зеркальное отображение
Чтобы создать эффект отражения, нам сначала нужно создать зеркальную копию изображения прямо под изображением.
Для этого продублируйте модуль изображения. Затем обновите настройки дубликата изображения следующим образом:
Непрозрачность: 40%
Масштаб трансформации по оси X: -100%
Свойство масштабирования преобразования - это то, что волшебным образом переворачивает изображение по вертикали и горизонтали, чтобы создать зеркальную версию изображения.
Это позаботится об основном дизайне отражения. Однако мы можем добавить дополнительное наложение градиента к нашему нижнему изображению для более реалистичного дизайна отражения.
Добавление наложения градиента с помощью текстового модуля
Чтобы добавить наложение градиента к нашему нижнему изображению, мы можем использовать текстовый модуль. Мы можем дать текстовому модулю абсолютную позицию, чтобы он располагался над нижним изображением. Затем мы можем добавить градиентный фон к текстовому модулю. Использование текстового модуля (вместо разделителя) даст вам бонусную возможность добавления некоторого контента поверх изображения отражения позже, если вы захотите.
Идите вперед и создайте текстовый модуль под нижним изображением.
Удалите содержимое по умолчанию, чтобы текстовый модуль был пуст.
Затем обновите настройки текстового модуля следующим образом:
Цвет фона градиента слева: rgba (255,255,255,0)
Правый цвет градиента фона: #ffffff
Ширина: 100%
Высота: 50%
Затем добавьте следующий настраиваемый CSS к основному элементу:
position: absolute !important; top: 50%;
Это абсолютное позиционирование текстового модуля перекрывает текстовый модуль в нижней половине строки.
Давайте посмотрим, как выглядит дизайн на данный момент.
Добавление цвета фона
Если вам не нужен белый фон, вы можете поэкспериментировать с другими цветами фона, что создаст уникальный дизайн отражения во всю ширину.
Для этого откройте настройки строки и обновите следующее:
Цвет фона: # 000000
Ширина: 100%:
Максимальная ширина: 100%;
Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу.
А теперь посмотрим на результат.
Добавление текста в оверлей текстового модуля
Помните, поскольку мы используем текстовый модуль в качестве наложения на нижнее изображение, мы можем добавить некоторый контент, если захотим.
Для этого откройте настройки текстового модуля и обновите следующее:
Содержание: «Отражение изображения»
Цвет текста текста: #ffffff
Размер текста текста: 30 пикселей
Ориентация текста: по центру
Окончательный дизайн
Вот окончательный дизайн отражения изображения.
Создание отражения текста в Divi
В следующем примере мы собираемся создать дизайн отражения текста. Этот процесс очень похож на то, как вы создаете отражение изображения. Однако в этом примере я собираюсь создать отражение для всей строки. Это позволит использовать как текст, так и фоновое изображение для красивого дизайна заголовка.
Вот как это сделать.
Сначала создайте новый обычный раздел с строкой в одну колонку. Затем добавьте в строку текстовый модуль.
Обновите содержание словом «Отражение».
Затем обновите настройки дизайна следующим образом:
Шрифт текста: Освальд
Стиль шрифта текста: TT
Цвет текста текста: # 333333
Размер текста текста: 10vw
Высота текстовой строки: 0,9 мкм
Ориентация текста: по центру
Пользовательское поле: внизу 0 пикселей
Пользовательская обивка: верх 4vw
Обновите настройки строки
Теперь, когда наш текстовый модуль настроен, пришло время обновить настройки строки.
Откройте настройки строки и обновите следующее:
Фоновое изображение: вставить фоновое изображение
Ширина желоба: 1
Ширина: 100%
Максимальная ширина: 100%
Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу.
Вот как выглядит дизайн на данный момент.
Создание строки текста отражения
Чтобы создать текст отражения для этого дизайна, мы собираемся отразить всю строку, чтобы мы могли включить фоновое изображение в отражение.
Дублируйте строку и обновите следующее:
Масштаб трансформации по оси Y: -100%
Теперь строка ниже является зеркальным отображением строки выше. Теперь все, что нам нужно сделать, это добавить оверлей.
Добавление наложения градиента с помощью текстового модуля
Чтобы добавить градиентное наложение к нашему отражению текста в нижней строке, мы можем использовать текстовый модуль, как мы это делали в первом дизайне отражения изображения выше. Как и раньше, мы можем дать текстовому модулю абсолютную позицию, чтобы он заполнял всю строку и располагался поверх другого текстового модуля с нашим текстом отражения. Затем мы можем добавить градиентный фон к наложению текстового модуля.
Идите вперед и создайте новый текстовый модуль под текстовым модулем в нижней строке.
Откройте настройки нового текстового модуля и удалите содержимое, чтобы текстовый модуль был пустым.
Затем обновите настройки следующим образом:
Цвет фонового градиента слева: #ffffff
Цвет фона градиента справа: rgba (255,255,255,0,13)
Стартовая позиция: 38%
Ширина: 100%
Высота: 100%
Затем добавьте следующий настраиваемый CSS к основному элементу:
position: absolute !important; top: 0;
Вот и все!
Конечный результат
Проверьте окончательный результат.
Вот тот же дизайн без фоновых изображений.
Последние мысли
Отражения могут выглядеть действительно круто, если вы потратите время на их правильное оформление. К счастью, у Divi есть все необходимое для этого. Существуют и другие методы создания отражений CSS, но, к сожалению, они не имеют кроссбраузерной поддержки. Дизайн в этом руководстве будет хорошо смотреться во всех браузерах.
Я обнаружил, что отражения отлично смотрятся в заголовках страниц и при демонстрации изображений для портфолио. И я уверен, что есть много других реализаций.
Я с нетерпением жду вашего ответа в комментариях.
Ваше здоровье!