Хотите научиться создавать открытку с эффектом портфолио? В этом новом уроке мы покажем вам, как это сделать с Elementor.
Если вы понятия не имеете, о чем мы хотим поговорить сегодня, предлагаем вам посмотреть следующее видео:
Тогда давайте вернемся к тому, почему мы здесь.
Для выполнения этого урока вам понадобится Про версия Elementor, потому что мы будем использовать пользовательский код CSS, который поддерживается только этой версиейElementor.
Читайте также: Как отобразить текст над изображением с помощью Elementor
Давайте создадим новый раздел со структурой из 3 столбцов, затем на панели определим Высокомерие из Мин. ВысотаА потом Минимальная высота давай нажмем на VH и установите ползунок на 100.
Давайте выберем средний столбец и поместим в этот столбец Виджет внутреннего раздела. Виджет «Внутренний раздел» по умолчанию настроен на 2 столбца. Под 2 колонки кинем виджет Название с названием Рестораны, Выбрать H4 для тега HTML и Центр для выравнивания.
Во вкладке Передовой виджета Заголовок, Введем 30 для Верхнее поле
Давайте еще раз выберем наш внутренний раздел. В панели изменим его Высокомерие из Мин. Высота и Минимальная высота давайте установим курсор на 380. Затем давайте удалим правый или левый столбец внутреннего раздела.
давайте бросим это Виджет изображения во внутреннем разделе и вставьте изображение из нашей библиотеки. давайте выберем Все для Размер изображения et Центр для Выравнивание.
NB: Если вы хотите иметь полные страницы, такие как наша, мы предлагаем вам захватить страницы с помощью расширения Chrome GoFullPage, но вы также можете использовать другое.
Узнайте также: Как создать галерею изображений с Elementor
Затем во вкладке Стиль, нажмите на PX de Ширина, установим ползунок на 260 и пограничные лучи из 10
Далее давайте изменим Box Shadow, изменив Blur на 40 и Diffuse на -10.
Во вкладке «Дополнительно» в разделе позиционирование, Выбрать абсолютный для Позиция, Горизонтальная ориентация из Неловкий, то décalage из 0, TheВертикальная ориентация из Bas.
Давайте продублируем наш виджет Image дважды. Неизбежно все они будут наложены друг на друга. Давайте вызовем навигатор, чтобы мы могли получить доступ к другим виджетам, скрытым первым.
Заменим изображение второго виджета и в его вкладке Передовой, давайте изменим их нижние поля et Неловкий введя 30 для каждого. Теперь вы увидите небольшое отставание,
Сделайте то же самое для третьего виджета изображения, но примените поля 60 для нижнего и левого полей. Теперь у вас должен быть обзор всех 3 виджетов изображений.
Выбираем наш виджет Внутренний раздел, переходим на его вкладку Передовой и в разделе Пользовательские CSS, скопируйте и вставьте следующий фрагмент кода:
selector .elementor-widget-image{
transition: ease-in-out 0.6s;
}
selector:hover .elementor-widget-image{
transform: scale(.65);
}
selector:hover .front-img{
transform-origin: center left;
}
selector:hover .mid-img{
transform-origin: center top;
}
selector:hover .last-img{
transform-origin: bottom right;
}
(Если у вас нет этого раздела, значит, у вас нет версии Pro, если вы хотите продолжить, вам необходимо обновить версию)
Теперь, если вы наведете курсор на нашу карту, у вас будет анимация масштабирования.
Давайте выберем наш первый виджет изображения (самый нижний) и на его вкладке Передовой, давай возьмем переднее изображение для CSS классы.
Для второго виджета изображения введите середина изображения для классов CSS.
Для третьего виджета изображения введите последнее изображение для классов CSS.
См. Также: Как создать галерею изображений с вкладками с помощью Elementor
Наведя курсор на нашу колонку, мы увидим великолепную анимацию содержание нашего внутреннего отдела.
Отобразим нашу страницу в режиме планшета. Мы увидим, что изображения будут отображаться некорректно.
Выберите первый виджет «Изображение» на вкладке «Стиль», давайте изменим ширину, щелкнув ПК, а затем введя 150 в качестве ширины. Давайте сделаем то же самое с двумя другими виджетами изображений.
Давайте выберем наш Внутренний раздел, в его разделе Содержание, давайте изменим Минимальная высота из 225.
Давайте также отобразим нашу страницу в режиме Смартфона, это априори не представляет никаких проблем. Но, если таковые имеются, давайте выберем наш Внутренний раздел, в его разделе Содержание, давайте изменим минимальную высоту.
Теперь давайте продублируем наш средний столбец 2 раза, затем удалим 2 других пустых столбца.
Давайте изменим заголовки этих столбцов, а затем изменим изображения.
У вас должен быть великолепный раздел, из которого вот результаты:
Вот и все, вы легко справились с этой задачей.
Получите Elementor Pro прямо сейчас!
Заключение
Вот оно! Вот и все для этой статьи, которая покажет вам, как создать карту с эффектом портфолио. Если у вас есть какие-либо опасения по поводу того, как туда добраться, сообщите нам об этом в течение Комментарии.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...