노코드 웹사이트 구축 TIP

Elementor 테마빌더 활용하기

💡 세 줄 요약
✅ 테마빌더로 코딩 없이 워드프레스 웹사이트의 헤더, 푸터 등 글로벌 요소를 관리할 수 있습니다.
✅ 테마빌더를 통해 페이지마다 반복되는 요소를 쉽게 관리할 수 있습니다.
✅ 웹사이트가 커지면서 더 효율적인 관리를 위해 테마빌더는 필수적인 도구가 될 수 있습니다.

코딩 몰라도 복잡한 웹사이트를 만들 수 있어?

마케터로 근무하다보니 다양한 서비스를 사용하게 됩니다. 그 중 Figma라는 디자인 서비스를 실무에 유용히 사용했습니다. “어? 이거 이렇게 하면 되려나? 와..되네!” Figma를 처음 사용하면서 계속 혼자 내뱉었던 말이에요. 그만큼 직관적인 사용성을 가진 툴이라는 거겠죠. 물론 디자이너분들이 쓰는 수준까지는 다루지 못하지만요..최소한의 디자인적인 감각과 브랜드가이드,브랜드 에셋이 있으면 마케터도 긴급한 상황에서 디자인 콘텐츠를 뽑아낼 수 있습니다. 개발은 개발자가..디자인은 디자이너가 하는게 맞습니다만 상황이 항상 좋지만은 않죠..😓

이 블로그를 만든 도구인 Elementor(이하 엘리멘토)도 Figma만큼 직관적입니다. 엘리멘토는 워드프레스(WordPress)에서 사용하는 비주얼 페이지 빌더 플러그인입니다. 드래그 앤 드롭 방식으로 웹페이지를 쉽게 디자인할 수 있는 도구예요. 엘리멘토를 사용하면 코딩 지식이 없어도 텍스트, 이미지, 버튼, 슬라이더와 같은 다양한 요소(위젯)를 웹페이지에 추가하고 배치할 수 있어요.

힘들게 유투브와 구글링하며 웹페이지를 만들었습니다. 그런데 웹사이트에는 웹페이지가 여러 개 있습니다. 이런 의문이 들 수도 있습니다. “그럼 100개의 페이지, 1억개의 페이지를 만든다면 반복되는 헤더와 푸터를 일일히 다시 만들어야돼?” 당연히 아닙니다. 엘리멘토에는 테마빌더라는 기능이 있습니다.

테마빌더를 통해 웹사이트의 글로벌 요소를 관리할 수 있어요.
엘리멘토 테마빌더란?

엘리멘토(Elementor) 테마빌더는 워드프레스(WordPress)용 비주얼 페이지 빌더로, 코딩 없이도 웹사이트의 다양한 요소를 자유롭게 커스터마이징할 수 있는 강력한 도구입니다.
Elementor 테마빌더는 일반적인 페이지 빌더와 달리, 웹사이트의 핵심 구조인 헤더, 푸터, 블로그 페이지, 404 페이지 등 모든 글로벌 요소들을 관리하고 디자인할 수 있게 해줍니다.
엘리멘토 테마빌더는 직관적인 인터페이스 덕분에 웹사이트 디자인의 자유도를 높여주며, 초보자와 전문가 모두에게 적합한 웹사이트 제작 도구로 인기를 끌고 있습니다.
🔗 엘리멘토로 만든 국내 웹사이트 : 네이버웍스
[출처👓] ChatGPT

쉽게 말해 테마빌더는 웹사이트의 주요 페이지들의 레이아웃을 만들고 관리하는 도구입니다. 예를 들어, 지금 보는 포스트 페이지의 화면 구성을 미리 제작할 수 있죠. 레이아웃만 만들고 본문은 워드프레스의 구텐베르크 빌더에서 작성하는 거예요. 모든 블로그 글에 이런 레이아웃을 적용해줘! 라고 조건을 걸어 놓는 것이죠.

우리가 줄이 있는 노트를 왜 구입하나요? 종이에 일일이 선을 긋기 귀찮기 때문이죠. 웹페이지도 마찬가지예요. 헤더나 푸터 같은 영역은 전체 페이지에 동일하게 출력돼요. 이걸 매 페이지마다 일일이 쓰는 건 비효율적이겠죠. 그래서 템플릿을 하나 만들어 두고, 웹페이지가 렌더링될 때 그 템플릿을 불러오는 거예요.

테마 빌더는 매우 강력한 도구지만, 아쉽게도 유료예요. Elementor 테마 빌더는 기본적으로 Elementor Pro 버전에서만 사용할 수 있어요. 무료 버전의 Elementor에서는 기본적인 페이지 빌더 기능은 제공되지만, 테마 빌더 기능은 포함되지 않습니다.

테마빌더 응용하기

저는 이 블로그에 발행되는 포스트에 구글 광고를 붙이면서 한편으로는 포트폴리오 카테고리의 콘텐츠에는 광고가 표시되지 않도록 설정하고 싶었습니다. (지금은 모바일에만 보이게 했어요) 이를 위해 테마 빌더를 활용해 포스트 아카이브에서 광고가 없는 레이아웃을 하나 더 만들어 포트폴리오 카테고리의 콘텐츠에만 적용되도록 설정했어요. 이렇게 하면 포트폴리오 콘텐츠에는 광고가 나타나지 않고, 다른 페이지에서는 정상적으로 광고가 표시됩니다. 더 우아한 방법이 있을 수는 있어요. 하지만 이렇게 쉽게 생각하는 바를 구현할 수 있습니다.

마치며

워드프레스로 만든 웹사이트의 볼륨이 커지면서 더 많은 페이지와 콘텐츠를 효율적으로 관리해야 할 시기가 올 것입니다. 테마 빌더는 다양한 페이지에 맞춤형 레이아웃을 적용하거나 특정 카테고리별로 레이아웃을 설정할 수 있는 기능으로 웹사이트의 유연성과 확장성을 도와줄 것 입니다.

LinkedIn
Facebook
Twitter
Email
Print
EDITOR
이런 글은 어떠신가요?

Special Offer

20% off

on your first order