Elementor: как создать шестнадцатеричную карту с эффектом

Нужно создать шестнадцатеричную карту с эффектом наведения через мощный Page Builder Elementor ? Если да, узнайте в этой статье, как туда добраться.

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

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

Также прочитайте наше руководство по: Как добавить хлебные крошки на сайт с Elementor

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

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

Во вкладке Стиль, давайте установим фоновое изображение, выбрав изображение из вашей библиотеки, а затем установим его положение на Улучшенный по центру, Повторить Не повторяется и размер на обложка.

Юг Наложение фона, Cliquez сюр градиент для Тип фона, выберите и измените основной цвет на #2299EF и расположение на 20, затем вторичный цвет на # 1917BC и расположение на 50, угол на 140 и непрозрачность на 0.85

Затем добавьте Виджет заголовка вВнутренний раздел и как Название, Дадим Имя, затем на вкладке Стиль виджета Заголовок изменим цвет на #FFFFFF. Затем добавьте Виджет текстового редактора, а во вкладке Стиль Отцентрируйте текст и измените цвет на #FFFFFF.

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

Выберите еще раз Внутренний раздел, перейдите на вкладку Передовой, в разделе Внутренняя маржа, входить 25-2-2-2

Снова выберите внутреннюю часть, перейдите на вкладку «Дополнительно» и в разделе «Пользовательский CSS» скопируйте и вставьте следующий код:

/*Traçage Hexagone*/
selector{
    clip-path: polygon(0 25%, 50% 0, 100% 25%, 99% 75%, 50% 100%, 0 75%);
    -webkit-transition: all 0.5s !important;
    transition: all 0.5s !important;
}

Далее добавим второй фрагмент кода ниже к предыдущему:

/*CSS pour Afficher/Masquer la Superposition du dégradé*/
selector .elementor-background-overlay{
    -webkit-transition: all 0.5s !important;
    transition: all 0.5s !important;
    opacity: 0 !important;
}
selector:hover .elementor-background-overlay{
    opacity: 0.85 !important;
}
/*CSS pour Afficher/Masquer l'élément de la colonne*/
selector .elementor-column{
    opacity: 0;
    -webkit-transition: all 0.8s !important;
    transition: all 0.8s !important;
}
selector:hover .elementor-column{
    opacity: 1;
}

Затем давайте также вставим фрагмент ниже.

/*CSS d'effet de transition avec ombre*/
selector:hover{
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
}
.hexa-mom::before{
    content: '';
    position: absolute;
    bottom: -70px !important;
    width: 100%;
    color: #fff;
    height: 60px;
    border-radius: 50%;
    background: -webkit-radial-gradient(rgba(0,0,0,0.15),transparent, transparent);
    background: radial-gradient(rgba(0,0,0,0.15),transparent, transparent);
    display: block;
    -webkit-transition: all 0.8s !important;
    transition: all 0.8s !important;
    z-index: 999;
}
.hexa-mom:hover::before{
    opacity: 1 !important;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
}

Затем выбираем среднюю колонку и во вкладке Передовой, входить шестигранная мама в поле CSS классы.

Давайте продублируем этот столбец 2 раза и удалим остальные 2 столбца.

Давайте изменим фоновое изображение других виджетов Внутренний раздел, Название и содержание текстового редактора, а также цвета градиентов наложения фона. У вас должен получиться такой результат:

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

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

Заключение

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

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

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

...