Elementor 포트폴리오 효과 카드를 만드는 방법

포트폴리오 효과로 카드를 만드는 방법을 배우고 싶습니까? 이 새로운 튜토리얼에서 우리는 그것을 사용하는 방법을 보여줄 것입니다 Elementor.

오늘 우리가 무엇에 대해 이야기하고 싶은지 잘 모르겠다면 다음 비디오를 시청하도록 초대합니다.

그런 다음 왜 우리가 여기 있는지 다시 돌아 갑시다.

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

3열 구조로 새 섹션을 만든 다음 패널에서 고도 에 최소 높이그리고 최소 높이 클릭하자 VH 슬라이더를 100.

가운데 열을 선택하고 이 열에 내부 섹션 위젯. 내부 섹션 위젯은 기본적으로 2개의 열로 구성됩니다. 2열 아래에 위젯을 놓으십시오. 표제 제목과 함께 레스토랑, 선택하다 H4 HTML 태그의 경우 센터 정렬을 위해.

elementor-how-to-create-a-card-with-portfolio-effect-2 » BlogPasCher

탭에서 고급 제목 위젯의 30 용 상단 여백

다시 내부 섹션을 선택하겠습니다. 패널에서 수정해 보겠습니다. 고도 에 최소 높이 과 최소 높이 커서를 설정하자 380. 그런 다음 내부 섹션의 오른쪽 또는 왼쪽 열을 삭제해 보겠습니다.

버리자 이미지 위젯 내부 섹션에서 라이브러리의 이미지를 삽입하십시오. 선택하자 전체 용 이미지 크기 et 센터 용 조정.

주의: 우리와 같은 완전한 페이지를 갖고 싶다면 Chrome 확장 프로그램 GoFullPage를 사용하여 페이지를 캡처하도록 초대하지만 다른 페이지를 사용할 수도 있습니다.

발견 : Elementor로 이미지 갤러리를 만드는 방법

그런 다음 탭에서 스타일, 클릭 PX de 폭, 슬라이더를 260 과 경계 광선 에 10

elementor-how-to-create-a-card-with-portfolio-effect-6 » BlogPasCher

다음으로 Blur를 40으로, Diffuse를 -10으로 변경하여 Box Shadow를 수정하겠습니다.

고급 탭의 섹션에서 위치, 선택하다 압솔뤼 용 위치, 수평 방향 에 좌회전라고도 명명되는 시차 에 0은수직 방향 에 낮은.

elementor-how-to-create-a-card-with-portfolio-effect-8 » BlogPasCher

이미지 위젯을 두 번 복제해 보겠습니다. 필연적으로 그것들은 모두 겹쳐질 것입니다. 네비게이터를 불러와 첫 번째 위젯에 숨겨진 다른 위젯에 액세스할 수 있도록 합시다.

두 번째 위젯과 해당 탭의 이미지를 교체해 보겠습니다. 고급, 수정하자 하단 여백 et 좌회전 입력하여 30 각각. 이제 약간의 지연이 표시됩니다.

elementor-how-to-create-a-card-with-portfolio-effect-10 » BlogPasCher

세 번째 이미지 위젯에 대해 동일한 작업을 수행하되 다음의 여백을 적용합니다. 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 버전이 없는 것입니다. 계속하려면 버전을 업그레이드해야 합니다.)

이제 지도 위로 마우스를 가져가면 확대/축소 애니메이션이 표시됩니다.