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

워드프레스 정보를 제공하는 블로그 Avada 2020. 2. 16. 01:30 • 댓글:

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

워드프레스 Elementor 페이지 빌더에서 섹션 높이 조정하기
워드프레스 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

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% 부족한 면이 있지만 잘 활용하면 훌륭한 사이트를 만들 수 있습니다. 페이지 빌더는 쉽게 사이트를 만들도록 디자인되었기 때문에, 처음 접하는 경우 무료 템플릿을 로드하여 어떻게 만들어졌는지 분석해볼 수 있습니다. 어느 정도 익숙해지면 어느 정도 원하는 사이트를 만들 수 있을 것입니다.

https://avada.tistory.com/2337

 

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

워드프레스 엘리멘터 페이지 빌더(Elementor Page Builder)는 무료로 사용할 수 있지만 프로 기능과 더 많은 템플릿을 사용하려면 엘리멘터 프로 라이선스를 활성화해야 합니다. 이 글에서는 엘리멘터

avada.tistory.com

https://avada.tistory.com/2659

 

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

워드프레스에서 페이지에 따라 다른 헤더나 푸터를 사용하고 싶은 경우가 있습니다. 일반적인 테마에서는 헤더는 사이트 전체에 공통으로 사용되고, 페이지에 따라 다른 헤더를 사용하려면 테

avada.tistory.com

참고:

 

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

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

www.thewordcracker.com