Elementor에서 겹치는 섹션을 만드는 방법

Rifat Jan 11, 2023

Elementor 에서 겹치는 요소는 독특하고 전문적이며 패셔너블한 외관을 제공할 수 있습니다. 또한 무미건조하거나 흥미롭지 않은 것처럼 보이지 않으면서 더 많은 정보를 작은 공간에 집어넣을 수 있습니다.

좋은 소식은 Elementor 를 사용하면 이미지, 텍스트 및 기타 요소를 겹칠 수 있는 만큼 간단하다는 것입니다. 오늘 튜토리얼에서 Elementor에서 겹치는 섹션을 만드는 방법을 보여 드리겠습니다.

겹치는 Elementor 섹션 만들기

대시보드의 페이지로 이동하고 Elementor를 사용하여 페이지를 시작하십시오. 그런 다음 Elementor로 편집을 선택합니다.

페이지가 로드되면 페이지 설정에서 페이지 레이아웃을 요소 캔버스로 설정합니다. 그런 다음 더하기 기호(+)를 눌러 단일 열이 있는 새 섹션을 추가합니다.

놀라운 웹사이트 만들기

최고의 무료 페이지 빌더 Elementor와 함께

지금 시작

새 섹션에서 위젯을 추가합니다. widget’s 아이콘을 클릭하고 검색에서 Divider를 입력하여 구분선 위젯을 가져오고 섹션으로 드래그합니다.

섹션 선택 후 오른쪽 섹션 편집 창에서 높이를 최소 높이 400픽셀로 설정합니다. 스타일 옆에 배경색을 지정합니다(제 선택은 빨간색). 구분선을 선택한 후 스타일에서 구분선에 흰색 배경을 지정합니다.

이제 섹션을 선택하고 복제하십시오.

이제 이전 섹션과 별도로 복제 섹션의 스타일을 지정하고 다른 배경색을 지정합니다.

다음 단계는 두 부분이 있으면 겹치는 것입니다.

파란색과 빨간색 섹션을 쌓는 방법을 시연하면서 시작하겠습니다.

이를 위해서는 Elementor Navigator가 필요합니다. 탐색 기호는 섹션 편집 하단 근처의 왼쪽에 있습니다.

탐색 아이콘을 클릭하면 네비게이터가 나타납니다. 네비게이터를 사용하여 섹션에 빠르게 액세스할 수 있으며 섹션을 탐색하는 데도 도움이 됩니다. 또한 옆에 있는 "눈"을 클릭하면 일부가 숨겨집니다.

파란색 섹션을 선택하고 왼쪽의 섹션 편집 메뉴에서 고급을 선택한 다음 여백에서 위쪽 여백을 -100픽셀로 지정합니다. 이렇게 하면 파란색 섹션이 첫 번째 섹션(위)으로 이동합니다.

빨간색 부분을 선택하고 고급을 선택한 다음 Z-인덱스를 선택하고 10으로 조정하여 빨간색 섹션이 파란색 섹션 위에 대신 나타나도록 합니다. 결과적으로 빨간색 섹션이 자동으로 파란색 섹션 위에 배치됩니다.

처음에는 파란색 부분이 빨간색보다 우선 순위가 높기 때문에 더 큽니다. 파란색 부분의 Z-index가 1이면 빨간색 부분의 Z-index가 0이면 맨 위에 있습니다. 본질적으로 Z-index가 높은 부분이 자동으로 낮은 부분 위로 미끄러집니다.

두 개 이상의 섹션이 있다고 상상해 봅시다.

이 기능을 보려면 다른 섹션을 만들어야 합니다.

파란색 섹션을 선택하고 복제합니다. 그런 다음 복제된 섹션을 선택하고 고급에서 Z-인덱스 및 여백을 0픽셀로 설정합니다. 스타일에서 색상을 변경할 수 있습니다.

Overlap Sections in Elementor

예를 들어 파란색 부분이 빨간색 부분과 녹색 부분 모두 위에 오도록 하려면 빨간색 부분보다 높은 Z-인덱스를 지정해야 합니다.

예를 들어 녹색 영역과 빨간색 섹션은 모두 Z-인덱스가 1입니다(기본값). 파란색 섹션에 Z-인덱스 3을 지정하고 선택합니다.

녹색 부분을 선택하고 고급에서 -20의 여백을 지정하여 이 수정 사항을 명확하게 볼 수 있도록 상단 섹션으로 이동할 수 있도록 합니다. 그러면 파란색 섹션이 두 영역 위에 있는 것으로 표시됩니다.

Overlap Sections in Elementor with Z index

반응형 설정에서도 이 중첩 효과가 작동합니다. 예를 들어 반응형 모드 메뉴에서 모바일 장치를 선택하고 먼저 보고 싶은 부분의 Z-지수를 높이도록 결정할 수 있습니다.

마무리

Elementor 에서는 영역을 중첩하기 위해 그렇게 할 수 있으며 중첩은 다른 장치에서도 작동합니다.

의견이나 질문이 있는 경우 아래 섹션을 사용하십시오. 또한 지인들에게 널리 알리고 CodeWatchers를 계속 팔로우하세요.

Divi WordPress Theme