Betheme은 우리나라 정서와 잘 맞는 테마 중 하나로 우리나라에서도 많이 사용되고 있는 인기 워드프레스 테마 중 하나입니다. 비테마는 아바다 테마에 이어 베스트셀링 테마 목록에서 2위를 줄곧 차지했지만, 지금은 살펴보니 4위에 랭크되어 있네요.
BeTheme은 자체 페이지 빌더인 BeBuilder가 탑재되어 있지만 엘리멘터 페이지 빌더도 지원하고 엘리멘터용 데모도 제공하고 있습니다. (참고로 예전에는 Muffin Builder라는 명칭이 사용되었지만 이제는 BeBuilder로 이름이 바뀐 것 같습니다.)
이 글에서는 비테마의 사이드바 메뉴를 커스터마이징하는 방법에 대하여 간단히 살펴보겠습니다.
워드프레스 Betheme 테마 사이드바 메뉴 커스터마이징하기
비테마(Betheme)는 엘리멘터를 지원하지만 템플릿 등 일부 기능은 여전히 BeBuilder로 편집이 가능합니다. Templates 섹션에서 헤더, 메가 메뉴, 사이드바 메뉴, 푸터, 팝업 등 사이트의 모든 섹션에 대한 템플릿을 만들 수 있습니다. 템플릿은 BeBuilder로 편집할 수 있습니다.
클라이언트께서 햄버거 메뉴를 눌렀을 때 표시되는 사이드바 메뉴(오프 캔버스 메뉴)에 로고를 추가할 것을 요청해왔습니다.
사이브바 메뉴를 커스텀하고 싶은 경우 템플릿에서 사이드바 메뉴 템플릿을 생성하여 Sidebar Menu Builder(Vertical Header 빌더라고도 함)를 사용하여 구성할 수 있습니다.
사이드바 메뉴를 만드는 방법은 다음 유튜브 영상을 참고해 보세요.
사이트에 사이드바 템플릿이 사용되지 않았고 햄버거 메뉴를 눌렀을 때 메인 메뉴가 세로로 표시되고 있었습니다. 저는 고객의 요청에 따라 현재 상태를 유지한 채 사이드바 메뉴에 CSS를 사용하여 로고를 추가하는 방법으로 작업했습니다. 저는 다음과 같은 CSS 코드를 사용하여 로고를 적당한 곳에 위치시켰습니다.😄
#menu-main-menu {
margin-top: -100px;
text-align: center;
}
#menu-main-menu::before {
content: url("/wp-content/uploads/2024/08/logo.png");
display: block;
width: 100px;
height: auto;
transform: scale(0.5) translateX(-50%) translateX(-30px);
margin: -120px auto -30px;
left: 50%;
}만약 Betheme 테마에서 사이드바 메뉴 템플릿을 만들지 않고 로고만 사이드바 메뉴에 추가하고 싶은 경우 위의 코드를 응용할 수 있을 것입니다. (실제 코드는 상황에 따라 적절히 수정해야 합니다.)
사용자 CSS 코드는 모양 » 사용자 정의 » 추가 CSS에 추가하거나 차일드 테마의 스타일시트 파일(style.css)에 추가하시면 됩니다.
제대로 사이드바 메뉴를 구성하고 싶다면 Templates 페이지에서 Add New Template 버튼을 눌러 새 사이드바 메뉴 템플릿을 만들어 편집하는 것을 고려할 수 있습니다.
비테마는 많은 기능을 제공하는 다목적 테마이기 때문에 아바다 테마만큼이나 다소 복잡한 테마 옵션을 제공합니다.
이 테마를 제대로 사용하려면 테마의 메뉴얼을 살펴보고 유튜브 영상을 참조하면 도움이 될 것입니다. 워드프레스와 테마, 페이지 빌더에 대하여 잘 모르는 상태에서 무작정 시작하면 간단한 것도 커스텀하는 데 시간이 오히려 더 걸릴 수 있습니다.
마치며
이상으로 워드프레스 인기 테마 중 하나인 Betheme 테마에서 사이드바 메뉴를 구성하는 방법에 대하여 살펴보았습니다. 제가 아는 디자이너 몇 분은 Betheme이나 Divi 등 특정 테마만을 사용하여 사이트를 제작하고 있습니다. 특정 테마 한 두 개의 사용법을 제대로 익히면 거의 대부분의 사이트를 제작할 수 있을 것입니다. 한 두 테마에 정통하게 되면 다른 테마도 비교적 쉽게 다룰 수 있게 됩니다.😄
또한, 요즘은 코딩을 모르더라도 챗GPT와 같은 AI를 사용하여 커스텀할 수 있는 가능성이 더 확대된 것 같습니다. 최신 기술을 잘 활용하면 사이트 제작이나 워드프레스 홈페이지 관리에 도움이 될 것입니다.
댓글 남기기