베스트셀링 인기 워드프레스 테마 Top 30 자세한 정보

엘리멘터 페이지 빌더 Z-index 설정 방법 (위젯 표시 순서 지정)

Last Updated: 2022년 12월 14일 | 댓글 남기기

워드프레스 엘리멘터 페이지 빌더로 페이지를 만들 때 여러 요소가 겹칠 때 표시 순서를 지정할 수 있습니다. CSS Z-index 속성은 요소의 겹침 순서를 지정하는 데 사용됩니다. 엘리멘터(Elementor)에서는 z-index 값을 지정할 수 있는 옵션이 제공됩니다.

CSS Z-index 속성

CSS Z-index 속성은 여러 요소들이 겹칠 때 표시 우선순위를 지정할 수 있습니다. Z-index 값이 높을 수록 앞쪽에 위치하게 됩니다.

엘리멘터 페이지 빌더 Z-index 설정 방법 (위젯 표시 순서 지정)

위의 그림에서 노란색 박스의 z-index를 3으로 지정하면 이 박스는 z-index 값이 2인 상자보다는 위에, z-index 값이 4 또는 6인 상자보다는 아래에 표시됩니다.

CSS Z-index 속성

상기 그림에서 노란색 상자의 z-index 값을 7로 설정하면 다른 모든 상자들보다 위에 표시됩니다.

참고로 Z-index 값의 최대 범위는 ±2147483647이라고 합니다.

엘리멘터 페이지 빌더에서 Z-index 사용 방법 (위젯 표시 순서 지정하기)

특정 요소가 다른 요소에 가려서 보이지 않거나, 두 개 이상의 섹션을 겹칠 때 표시 순서를 지정하고 싶은 경우 엘리멘터 페이지 빌더에서는 위젯 또는 섹션 설정 패널의 고급 탭 » 레이아웃 섹션표시 순서 옵션에서 z-index 값을 지정할 수 있습니다.

엘리멘터 페이지 빌더 위젯 표시 순서 지정하기

엘리멘터 페이지 빌더 한글 버전에서는 표시 순서로 번역되었는데요, 영문 버전에서는 Z-index로 되어 있습니다.

엘리멘터 페이지 빌더 Z-index 사용하기

표시 순서(Z-index) 옆의 기기 아이콘을 클릭하면 모바일 기기, 태블릿 기기, 데스크탑(PC)에 대하여 Z-index를 달리 설정하는 것이 가능합니다.

엘리멘토에서 모바일, 태블릿, PC 미디어쿼리 분기점을 변경하고 싶은 경우 다음 글을 참고하시기 바랍니다.

모바일 기기 가로 화면/세로 화면, 태블릿 장치 가로 화면/세로 화면, 노트북, 와이드스크린 등에 대하여 상세하게 분기점을 지정하여 반응형 레이아웃을 다르게 설정할 수도 있습니다.

마치며

이상으로 엘리멘터 페이지 빌더에서 위젯 또는 섹션 등의 표시 순서를 설정하는 방법에 대하여 살펴보았습니다.

아바다 테마에서도 비슷한 기능이 제공되는지 살펴보니 Z-index를 설정하는 옵션은 제공되지 않는 것 같습니다. 이런 옵션이 제공되지 않는 경우에는 CSS를 사용하여 특정 요소의 z-index를 지정할 수 있습니다.

참고


댓글 남기기

Leave a Comment

워드프레스 네이버 카페 방문하기

Thanks!