Как создать пост с 3D-вывеской с эффектами наведения в Divi
Опубликовано: 2019-05-13Все мы знаем, что хороший веб-сайт позволяет посетителям быстро и эффективно находить то, что они ищут. И всегда помогает, если вы можете сделать свой контент более интересным. В этом уроке я покажу вам, как создать 3D-пост с вывеской, который привлечет внимание пользователей и упростит для них поиск того, что они ищут, уникальным способом. Для этого мы будем использовать параметры преобразования Divi и свойство css перспективы в нескольких модулях рекламных объявлений, чтобы создать трехмерный эффект знаков, повернутых на посте.
Давайте начнем!
Sneak Peek
Загрузите макет поста 3D-вывесок БЕСПЛАТНО
Чтобы ознакомиться с дизайном 3D Sign Post из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.
Скачать бесплатно
Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.
Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.
Давайте перейдем к руководству, ладно?
Подпишитесь на наш канал Youtube
Что вам нужно для начала
Для начала вам понадобится следующее:
- Убедитесь, что на вашем сайте WordPress установлена и активна тема Divi.
- Если вы хотите создать собственное изображение для публикации, вам понадобится редактор фотографий, например Photoshop, Gimp или Sketch. Или вы можете использовать изображение, представленное в бесплатном макете, загружаемом для этого дизайна выше.
- Помимо этого, мы будем строить все с нуля в интерфейсе Divi Builder.
Создание изображения для подписи
Самый простой способ создать знаковый пост для этого дизайна - создать небольшой повторяющийся блок изображения, который мы можем добавить в качестве фонового изображения, которое повторяется вертикально вниз по разделу или строке страницы. Если вы хотите пропустить этот шаг, вы можете импортировать макет json, включенный в бесплатную загрузку выше, чтобы начать. Но если вы хотите создать свой собственный цвет по вашему выбору, вот как это сделать.
В этом примере я собираюсь использовать Photoshop, но процесс очень похож и для других популярных фоторедакторов.
В Photoshop щелкните, чтобы создать новый документ с настраиваемой высотой и шириной 25 пикселей.
Установите цвет переднего плана на черный (# 000000) или любой другой цвет, который вы хотите.
Затем выберите инструмент «Ведро с краской» и щелкните внутри слоя с пустым квадратом, чтобы закрасить квадрат в черный цвет.
Затем сохраните изображение в формате jpeg на свой компьютер. Это изображение, которое мы будем использовать в дизайне, чтобы создать пост для нашего дизайна поста с надписью 3D.
Реализация дизайна поста для 3D-вывески в Divi
Как только вы будете готовы, обязательно создайте новую страницу, дайте ей название и разверните Divi Builder во внешнем интерфейсе. Выберите вариант «Строить с нуля».
Ваш чистый холст ждет!
Теперь создайте новый обычный раздел со строкой из одного столбца.
Настройка строки
Прежде чем мы добавим модуль, откройте настройки строки и обновите следующее:
Фоновое изображение: [вставить произвольное квадратное изображение для сообщения]
Размер фонового изображения: фактический размер
Повтор фонового изображения: повторить Y (по вертикали)
Затем обновите следующее:
Ширина желоба: 1
Максимальная ширина: 980 пикселей
Пользовательское заполнение: 2vw сверху, 2vw снизу
Затем нам нужно добавить следующий настраиваемый CSS к основному элементу столбца следующим образом:
perspective: 1000px;
Это свойство css перспективы необходимо для получения трехмерного эффекта знака (или рекламного объявления) всякий раз, когда мы поворачиваем его с помощью параметров преобразования.
Чтобы узнать больше об этом, посмотрите, как перспектива работает с параметрами преобразования Divi.
Создание вывески с помощью модуля Blurb
Чтобы создать нашу первую вывеску на нашем посту 3D-указателя, мы будем использовать модуль аннотации. Продолжайте и добавьте в строку модуль аннотации.
Затем откройте настройки рекламного объявления и обновите его содержимое следующим образом:
Уменьшите фиктивное содержание, чтобы включить только пару строк текста.
Значок использования: ДА
Значок: стрелка влево (см. Снимок экрана)
Цвет фона: # 1a233f
Цвет значка: # 9eb3c2
Расположение изображения / значка: слева
Использовать размер шрифта значка: ДА
Размер шрифта значка: 80 пикселей
Ориентация текста: по центру
Шрифт заголовка: Playfair Display
Цвет текста заголовка: # 9eb3c2
Размер текста заголовка: 38 пикселей (рабочий стол), 26 пикселей (телефон)
Максимальная ширина: 600 пикселей
Выравнивание модуля: по центру
Пользовательские отступы: 5% сверху, 5% снизу, 5% слева, 5% справа
Закругленные углы: 20 пикселей
Ширина границы: 3 пикселя
Цвет границы: # 21335e
Это позаботится о стилизации нашего модуля рекламного сообщения, но для получения нашего трехмерного эффекта нам нужно использовать параметры преобразования, чтобы повернуть наш модуль рекламного сообщения. Для этого обновите следующее:
Преобразование, поворот оси X: 20 градусов
Дублируйте строку, чтобы увидеть больше знаков
Теперь, когда у нас есть один из наших дизайнов знаков, мы можем продублировать ряд, чтобы сделать больше. Каждый раз, когда мы дублируем строку, нам просто нужно будет обновлять вращение преобразования, чтобы знаки поворачивались с разным градусом вокруг поста.
Идите вперед, продублируйте строку и обновите модуль рекламного сообщения в новой строке следующим образом:
Преобразование, поворот оси X: -30 градусов
Дублируйте строку, чтобы создать третий знак, и обновите модуль рекламного объявления в этой новой строке следующим образом:
Преобразование, поворот оси X: 40 градусов
Изменение направления второго знака
Сейчас все стрелки указывают в одном направлении. Чтобы изменить направление слева направо, нам нужно немного обновить настройки модуля рекламного сообщения.
Откройте настройки модуля аннотации во второй строке (средней) и обновите следующее:
Значок: стрелка вправо (см. Снимок экрана)
Ориентация текста: влево
Мы можем изменить порядок содержимого рекламного объявления так, чтобы текст был слева, а значок - справа. Для этого нам нужно добавить одну строку настраиваемого CSS в основной элемент следующим образом:
direction: rtl;
Теперь содержание рекламного объявления перевернуто, и у вас есть знак, указывающий в новом направлении!
Поверните знаки обратно в исходное состояние при наведении курсора
Одна из замечательных особенностей этой настройки заключается в том, что вы можете легко добавить состояние зависания, чтобы вернуть повернутый модуль обратно в исходное (0 градусов) вращение. Это позволяет пользователю взаимодействовать с контентом и четко видеть текст при наведении курсора на модуль.
Поскольку мы хотим добавить одно и то же состояние наведения ко всем трем модулям рекламных сообщений, используйте множественный выбор, чтобы выбрать все три модуля рекламных сообщений, и откройте настройки одного из модулей, чтобы вызвать модальные настройки элемента. Затем обновите следующее:
Преобразовать, повернуть ось X (при наведении): 0 градусов
Сохраняем настройки и все!
Теперь ознакомьтесь с дизайном и функциональностью.
Настройка нашего раздела с помощью фонового изображения
На последнем этапе мы можем добавить новое фоновое изображение в наш раздел. Это, конечно, необязательно, но правильное изображение может выглядеть действительно круто, особенно если вы используете эффект параллакса.
Откройте раздел и добавьте новое фоновое изображение. (Я использую изображение из нашего пакета макетов агентства)
Затем обновите следующее:
Использовать эффект параллакса: ДА
Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу.
Конечный результат
Последние мысли
Создание поста с трехмерной вывеской действительно добавляет креативный и привлекательный элемент дизайна на ваш сайт, который действительно может сделать ваш контент заметным (в буквальном смысле). А эффект наведения позволяет пользователю просматривать контент без 3D-эффекта в качестве приятного отката. Не забывайте, что вы можете легко добавить URL-адрес ссылки в модуль рекламного сообщения, чтобы он мог служить интерактивным элементом навигации, если хотите. В любом случае, я надеюсь, что это даст вам вдохновение для вашего следующего проекта.
Я с нетерпением жду вашего ответа в комментариях.
Ваше здоровье!