본문 바로가기

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

2020. 2. 16. 댓글 0

워드프레스 Elementor 페이지 빌더는 무료이지만 기능상 유료 못지않아 현재 4백만 개 이상 사이트에 설치되어 사용되고 있습니다.

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

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

Elementor 페이지 빌더 템플릿

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

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

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

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

CSS max-height Property Example Set the maximum height of a

element to 50 pixels: p.ex1 {   max-height: 50px; } Try it Yourself » Definition and Usage The max-height property defines the maximum height of an element. If the content is larger than the m

www.w3schools.com

마치며

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

 

워드프레스 Elementor 페이지 빌더의 블록과 페이지 템플릿 사용하기

무료로 제공되는 페이지 빌더인 Elementor는 유료 페이지 빌더 못지 않은 다양한 기능으로 많은 사용자를 확보하고 있는 플러그인입니다. 페이지 빌더를 사용하면 사이트 속도가 느려질 수 있지만, Elementor는 비교적 빠른 속도를 보이는 것 같습니다.

www.thewordcracker.com

참고:

 

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

워드프레스 Divi 테마의 4.0 버전에는 Theme Builder가 새롭게 탑재되어 전체 사이트뿐만 아니라 개별 페이지, 블로그 페이지, 상품 페이지, 카테고리 페이지 등을 자유롭게 커스터마이징할 수 있게 되었습니다.

www.thewordcracker.com

 

※일부 글에 제휴 링크가 포함될 수 있습니다.

댓글0