워드프레스 Elementor 페이지 빌더에서 섹션 높이 조정하기

워드프레스 Elementor 페이지 빌더는 무료이지만 기능상 유료 못지않아 현재 4백만 개 이상 사이트에 설치되어 사용되고 있습니다. (2021년 7월 현재 사용자 수가 더 늘어서 이제 500만 개가 넘는 사이트에 활성화되어 있습니다.)

워드프레스 Elementor Page Builder 플러그인

Elementor는 무료 버전에서 일부 페이지 템플릿을 로드하여 활용할 수 있습니다.

Elementor 페이지 빌더 템플릿

무료 템플릿을 세어 보니 약 40개 정도네요. PRO라고 표시된 템플릿은 Elementor PRO 버전에서만 사용할 수 있습니다.

하지만 블로그/매거진 템플릿은 부족한 편입니다. Elementor의 무료 버전에는 매거진 요소가 없기 때문에 원하는 레이아웃의 블로그/매거진 사이트를 만들기가 쉽지 않을 수 있습니다. 뉴스, 매거진, 블로그 사이트를 원하는 경우 Newspaper (뉴스페이퍼), Jannah 같은 뉴스, 매거진에 특화된 테마를 활용해볼 수 있습니다.

Elementor 페이지 빌더에서 섹션 높이 조정하기

엘리멘터 페이지 빌더에서 섹션 높이지를 조정하는 방법을 간단히 살펴보겠습니다. 

먼저 편집할 섹션을 클릭합니다. 그런 다음 아래 그림에서 6개 점으로 된 아이콘(Edit Section 아이콘)을 클릭하면 왼쪽에 Edit Section 패널이 표시됩니다.

Layout 탭에서 Content Width (콘텐츠 폭), Heigh (높이) 등을 설정할 수 있습니다. Height는 다음 세 가지 옵션 중에서 선택할 수 있습니다.

• Default
• Fit To Screen
• Min Height

Fit To Screen은 화면 크기에 맞게 섹션 높이가 조정됩니다. Min Height를 선택하면 최소 높이를 지정할 수 있습니다.

보다 정교하게 지정하고 싶은 경우 Minimum Height와 함께, CSS 클래스를 지정하여 Max Height를 지정할 수 있습니다.

Advanced 탭을 클릭하면 CSS ID와 CSS Classes를 지정할 수 있습니다. CSS ID는 링크를 클릭할 때 섹션으로 이동시킬 때 이용할 수 있습니다.  CSS 클래스를 지정하고 CSS 코드를 통해 max-height나 원하는 스타일을 지정할 수 있습니다. max-height에 대한 자세한 내용은 w3 schools 문서를 참고해보시기 바랍니다.

CSS max-height property

마치며

Elementor (엘리멘터)는 무료 버전에서는 2% 부족한 면이 있지만 잘 활용하면 훌륭한 사이트를 만들 수 있습니다. 페이지 빌더는 쉽게 사이트를 만들도록 디자인되었기 때문에, 처음 접하는 경우 무료 템플릿을 로드하여 어떻게 만들어졌는지 분석해볼 수 있습니다. 어느 정도 익숙해지면 어느 정도 원하는 사이트를 만들 수 있을 것입니다.

https://avada.tistory.com/2337

워드프레스 Elementor Pro 라이선스 활성화하기 (엘리멘터 프로 설치 및 템플릿 로드)

https://avada.tistory.com/2659

워드프레스 엘리멘터 헤더 템플릿 만들기 (헤더 & 푸터 커스텀)

참고:

Divi 4.0 업데이트: 카테고리, 개별 페이지 등의 헤더, 본문, 푸터를 자유롭게 디자인