Хотите научиться создавать открытку с эффектом портфолио? В этом новом уроке мы покажем вам, как это сделать с Elementor.

Если вы понятия не имеете, о чем мы хотим поговорить сегодня, предлагаем вам посмотреть следующее видео:

создать карту с эффектом портфолио

Тогда давайте вернемся к тому, почему мы здесь.

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

Читайте также: Как отобразить текст над изображением с помощью Elementor

Давайте создадим новый раздел со структурой из 3 столбцов, затем на панели определим Высокомерие из Мин. ВысотаА потом Минимальная высота давай нажмем на VH и установите ползунок на 100.

3 столбца

Давайте выберем средний столбец и поместим в этот столбец Виджет внутреннего раздела. Виджет «Внутренний раздел» по умолчанию настроен на 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 всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях.

...