Вы когда-нибудь хотели представить создать карточку продукта с Elementor  ?

Это то, что мы покажем вам в этом уроке. Чтобы получить достаточно точное представление о том, о чем мы сегодня будем говорить, предлагаем вам посмотреть следующее видео:

создать карточку продукта с Elementor

В этом руководстве рассказывается о представлении продуктов, которые являются обувью, путем выделения их размеров, цветов и кнопки покупки для каждого из них. Эта информация появится при наведении курсора на каждую из карточек. Вот краткое изложение того, что мы будем делать.

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

Но вернемся к тому, для чего мы здесь.

Давайте создадим страницу и изменим ее с помощью Elementor.

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

На вкладке Стиль выберите цвет фона, чтобы #130640

В средний столбец вставьте Виджет изображения выбрав изображение обуви из своей библиотеки.

создать карточку продукта с Elementor

Перейдите на вкладку Стиль и в свойстве изображения установите ширину 80.

Затем перетащите Виджет заголовка и введите название Nike обувь - Это пример, это мог бы быть совсем другой бренд -  

Читайте также: Как оптимизировать макет вашего сайта с помощью Elementor

Установите для тега HTML значение H3 и отцентрируйте выравнивание.

Перейдите на вкладку Стиль и измените цвет текста на белый.

Измените и типографику

Затем перетащите Виджет внутреннего раздела ниже Виджет заголовка что вы вставили выше.

По умолчанию этот виджет предложит вам 2 столбца, удалите один из них. В этом Виджет внутреннего раздела, Вставить Виджет заголовка.

Дайте это как название Резать : и установите для тега HTML значение пролет.

создать карточку продукта с Elementor

На вкладке «Стиль» измените цвет заголовка, размер на 15 и жирность на 300.

создать карточку продукта с Elementor

На вкладке Advanced установите только Right margin на 5 и в свойстве позиционирование выбрать Встроенный (Авто).

Добавьте в тот же внутренний раздел виджет Button с текстом 8 и интервалом значков на 0.

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

На вкладке «Стиль» измените цвет текста и цвет фона кнопки соответственно на черный и белый, а в поле «Внутреннее поле» введите 6-10-6-10 соответственно для внутренних полей сверху-справа-снизу-слева.

На вкладке «Дополнительно» установите только левое поле на 5, а в свойстве «Позиционирование» выберите «Встроенный (Авто)».

Продублируйте эту кнопку 3 раза и измените текст последних 3 кнопок на 9,10,11 - вы также можете сделать это, используя буквы S, M, L, XL, XXL-

Щелкните раздел редактирования и установите для параметра "Горизонтальное выравнивание" значение "Центр".

Затем продублируйте этот Внутренний раздел -Внутренний раздел- и измените размер по цвету, удалите 3 кнопки и на той, которая останется, удалите текст кнопки.

Во вкладке Содержание кнопки, выберите значок «Круг» из библиотеки значков, нажмите «Вставить», чтобы добавить его в кнопку.

На вкладке «Стиль» укажите размер 24 для типографики, свяжите внутренние поля и введите 0. В цвете фона установите прозрачность на минимальное значение, а затем вы можете изменить цвет текста, например, на синий.

Затем продублируйте эту кнопку 3 раза и измените цвета двух других на желтый и красный. Затем щелкните внутреннюю секцию, чтобы отредактировать ее, и на вкладке «Дополнительно» установите для верхних и нижних полей значения -5 и 10.

Теперь мы собираемся добавить виджет кнопки под вторым виджетом внутреннего раздела, введите его как текст. Купи сейчас и выравнивание по центру. На вкладке «Стиль» установите для кнопки значение «Белый», а для текста кнопки - «Черный», затем установите для всех радиусов границ значение 20.

Выберите основной столбец, над которым мы работали, и установите выравнивание. вертикальный из Окружениена вкладке Стиль выберите тип фона как градиент и в качестве Типа выберите Радиальный затем на основном цвете установите прозрачность и расположение на 94. Для второго цвета установите местоположение на 77 и радиус кромок более 10.

На вкладке «Дополнительно» установите поля 0-35-0-35 и внутренние поля 50-20-50-20.

Затем вы можете скрыть панель, чтобы увидеть, как выглядит ваша работа. Вы увидите, что ваша карточка очень красивая, но мы собираемся воплотить ее в жизнь, анимируя определенные разделы. И для этого мы собираемся анимировать размер, цвет и кнопку покупки.

См. Также: Как изменить заголовок при прокрутке страницы в Elementor

Давайте сначала разделим первый внутренний раздел, в котором отображается размер продукта, и на вкладке «Дополнительно» определим Fade In Up as Movement Effect - Анимация входа и задержка анимации включены 300.

Сделаем то же самое с внутренним разделом, который отображает цвета, но с задержкой анимации 800. Для кнопки покупки задержка будет 1000

Теперь мы собираемся назначить класс спрятаться Внутренний раздел и кнопка покупки. Выберите первый внутренний раздел, на вкладке «Дополнительно» и в свойстве «Дополнительно» введите hide-first в поле «Классы CSS». Сделайте то же самое для другого внутреннего раздела и для кнопки покупки.

Поэтому мы собираемся добавить код CSS, который будет анимировать весь столбец. Скопируйте следующий код:

selector {

    Высота: 400px;

    дисплей: гибкий;

}

/ * CSS для Показать / Скрыть * /

selector .hide-first {

    Дисплей: нет;

}

selector: hover .hide-first {

    Дисплей: блок;

}

/ * Преобразование изображения * /

selector img {

    переход: легкость .5s;

}

selector: hover img {

    преобразовать: перевести (-20 пикселей, -40 пикселей) повернуть (-25 градусов) масштаб (1.4);

}

/ * Обзор мобильных * /

@media (max-width: 767 пикселей) {

 selector: hover img {

    преобразовать: перевести (-20 пикселей, 0 пикселей) повернуть (-10 градусов) масштаб (1);

}

selector {

    маржа: 50 пикселей 10 пикселей;

}

}

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

NB: Вы должны знать, что эта опция доступна только в том случае, если у вас есть Pro-версия.Elementor.

Если это будет сделано, ваша карта будет анимироваться при наведении курсора мыши, по умолчанию скрывая размеры, цвета и кнопку покупки.

Что касается объяснения кода, часть комментариев дает обзор. Но изменяя значения вы поймете для чего нужна каждая инструкция.

Смотрите также: Как добавить две кнопки рядом в один столбец с Elementor

Если все работает нормально, продублируйте этот столбец дважды и удалите остальные пустые столбцы.

Все, что вам нужно сделать, это заменить изображения и заголовки других блоков и, наконец, просмотреть свою работу.

Вы только что создали красивую карточку товара.

Получите Elementor Pro прямо сейчас!

Заключение

Так ! Вот и все, что касается этого урока, в котором показано, как создать карточку продукта с помощью Elementor. Если у вас есть какие-либо вопросы о том, как туда добраться, сообщите нам об этом в Комментарии.

Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

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

...