Elementor: 효과가 있는 XNUMX진법 지도를 만드는 방법

강력한 호버 효과가 있는 헥스 맵 생성 필요 페이지 빌더 Elementor ? 그렇다면이 기사에서 거기에 도달하는 방법을 찾으십시오.

이 튜토리얼에서 다룰 내용에 대한 개요를 보려면 다음 비디오를 시청하시기 바랍니다.

이 튜토리얼을 완료하려면 다음이 필요합니다. Elementor의 Pro 버전이 버전에서만 지원되는 사용자 정의 CSS 코드를 사용할 것이기 때문에Elementor.

다음에 대한 가이드를 읽어보십시오. 웹사이트에 탐색경로를 추가하는 방법 와 Elementor

다음과 같은 구조로 새 섹션을 생성해 보겠습니다. 3 열, 그런 다음 패널에서 고도 에 최소 높이그리고 최소 높이 클릭하자 VH 슬라이더를 100으로 설정합니다.

추가하자 내부 섹션 위젯 – 내부 섹션 – 중간 열. 이 위젯은 기본적으로 2개의 열로 구성되어 있으므로 그 중 하나를 삭제하겠습니다. 구성해보자 고도 에 최소 높이 과 최소 높이 정의하자 슬라이더를 400으로.

탭에서 스타일, 라이브러리에서 이미지를 선택하여 배경 이미지를 설정한 다음 위치를 우수한 중심, 반복 반복되지 않음 그리고 사이즈 씌우다.

약 배경 오버레이에 클릭 타락한 용 배경 유형, 기본 색상을 선택하고 변경하십시오. #2299EF 및 위치 20, 다음 보조 색상 기원전 1917년 및 위치 50, 각도 140 그리고 불투명도 0.85

그런 다음 추가 타이틀 위젯 L에서 '내부 섹션 ~로 표제, 이름을 지정하고 Title 위젯의 Style 탭에서 색상을 다음으로 변경합니다. #FFFFFF. 그런 다음 추가 텍스트 편집기 위젯, 그리고 탭에서 스타일 텍스트를 가운데에 두고 색상을 다음으로 변경합니다. #FFFFFF.

참조 : Elementor로 가격표 위젯에 이미지를 추가하는 방법

다시 선택 내부 섹션, 탭으로 이동 많은, 섹션 내부 마진, 시작하다 25-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);
}