엘리멘터(Elementor)로 한국형 메가 메뉴 만들기

메가 메뉴는 SEO적인 측면에서 그리 바람직하지 않지만 많이 사용되고 있어 아바다 등 인기 테마에서는 메가 메뉴 기능을 기본적으로 제공합니다. 그리고 엘리멘터 프로에서도 메가 메뉴 기능이 제공됩니다. 하지만 일반적인 메가 메뉴와 달리 우리나라에서는 모든 최상단 메뉴에 대하여 동일한 하위 메뉴 항목(메가 메뉴 항목)이 표시되도록 하는 방식이 널리 사용되고 있습니다.엘리멘터를 사용할 경우 ElementsKit(엘리먼츠킷)을 사용하면 비슷하게 구현이 가능하지만, 원하는 대로 구현하려면 약간의 조정이 필요합니다.고객의 요청에 따라 Elementor Pro 외의 다른 추가적인 플러그 없이 한국형 메가 메뉴를 구현하는 작업을 맡았습니다. 가급적 쉽게 응용할 수 있도록 만들려고 합니다. 구글링 해보면 Elements..

이 블로그를 통해 언급한 적이 있듯이 워드프레스에서 두 개 이상의 페이지 빌더를 사용하지 않는 것이 바람직합니다. 빌더를 두 개를 동시에 활성화하면 충돌이 발생할 수 있고, 사이트 속도에도 부정적인 영향을 미칩니다. 최근 뉴스페이퍼 테마가 적용된 사이트에서 페이지를 수정해도 반영이 되지 않는 문제를 살펴본 적이 있습니다. 해당 사이트에 접속하여 살펴보니 엘리멘터(Elementor)가 함께 활성화되어 있고, 해당 페이지를 엘리멘터로 열어 본 적이 있어서 뉴스페이퍼 테마의 tagDiv Composer를 사용하여 수정을 해도 변경 사항이 반영되지 않는 문제가 나타나고 있었습니다.뉴스페이퍼/아바다 테마에서 엘리멘터(Elementor)를 사용하지 마세요뉴스페이퍼 테마에는 tagDiv Composer라는 자체 빌더..

엘리멘터 프로를 사용하는 경우 자체 컨택트 폼(Form) 위젯을 사용하여 사용자들로부터 문의를 받을 수 있습니다. 문의 폼에 이용 약관 또는 개인정보 보호정책 동의 필드를 추가하고 자세한 약관 내용을 팝업 형식으로 표시하는 경우가 많습니다. 이 글에서는 자바스크립트를 사용하여 이용약관 팝업을 표시하는 방법에 대하여 살펴보겠습니다.엘리멘터 컨택트 폼에서 이용약관 전문을 팝업으로 표시하는 방법엘리멘터 컨택트 폼에서 다음과 같이 이용약관을 텍스트 상자로 표시하려는 경우에는 이전 글을 참고할 수 있습니다.이용약관 내용을 텍스트 상자로 표시하는 대신, 클릭 시 라이트박스 팝업으로 표시하는 것도 가능합니다.간단하게는 HTML/CSS로 라이트박스를 표시할 수 있습니다. 다음 글에서 소개하는 코드를 사용할 수 있습니다..

워드프레스 인기 페이지 빌더인 엘리멘터(Elementor)를 사용하면 사이트 제작 시간과 노력을 크게 절감할 수 있습니다. 특히 엘리멘터 프로의 테마 빌더를 사용하면 헤더에서 푸터까지 사이트의 모든 섹션을 자유롭게 커스텀할 수 있습니다. 테마 빌더에서 헤더, 푸터 등 템플릿을 추가하거나 기존 템플릿을 편집하려고 시도할 때 "죄송합니다. 페이지에서 콘텐츠 영역을 찾을 수 없습니다. 엘리멘터가 이 페이지에서 작동하려면 현재 템플릿에서 "the_content" 함수를 호출해야 합니다" 오류가 표시되는 경우가 있습니다. 이 문제는 에러 메시지의 안내대로 페이지에서 콘텐츠 영역이 없기 때문에 발생합니다. 이 오류 메시지가 표시되는 경우 해결 방법에 대하여 살펴보겠습니다. 엘리멘터 테마 빌더: 템플릿 추가/편집 시..

엘리멘터(Elmentor)는 500만 개가 넘는 사이트에 설치되어 사용되고 있는 인기 워드프레스 페이지 빌더 플러그인입니다. 엘리멘터는 무료 버전과 프로 버전으로 제공됩니다. Elementor 프로 버전에서는 프로 템플릿과 프로 위젯, 그리고 컨택트 폼 등의 기능이 제공되고, 무엇보다 테마 빌더(Theme Builder)가 탑재되어 헤더부터 푸터까지 사이트의 모든 섹션을 워드프레스 알림판에서 커스텀하는 것이 가능합니다. 예를 들어, 블로그 포스트 템플릿이나 상품 상세 페이지 템플릿을 만들어 블로그 포스트나 상품 페이지를 원하는 대로 꾸밀 수 있습니다. 워드프레스 엘리멘터 테마 빌더로 포스트 템플릿 만들기 엘리멘터는 현재 500만 개가 넘는 사이트에 설치되어 사용되고 있는 인기 워드프레스 페이지 빌더입니다..

네이버 카페를 통해 엘리멘터에서 내부 섹션 위젯이 사라졌다는 질문이 간혹 올라옵니다. 기존에는 섹션을 추가하는 방식이었지만, 엘리멘터 3.6 버전부터 Flexbox Container(플렉스박스 컨테이너)가 도입되었습니다. 플렉스박스 컨테이너를 비활성화하고 기존의 섹션을 사용할 수 있지만, 플렉스박스 컨테이너에 익숙해지면 기존보다 수월하게 레이아웃 작업이 가능하게 될 것입니다. 워드프레스 엘리멘터: 내부 섹션 위젯이 사라졌습니다 오랫동안 엘리멘터를 사용하였다면 섹션 안에 내부 섹션을 추가하는 방식에 익숙해져 있을 것입니다. 하지만 다음 그림과 같이 "내부 섹션" 위젯이 표시되지 않고, 대신 레이아웃 부분에 "컨테이너" 위젯이 표시될 수 있습니다. Elementor 3.6에서 플렉스박스 컨테이너가 도입되었습..

네이버 카페에 워드프레스 엘리멘터(Elementor) 페이지 빌더를 설치하기 위해 PHP 버전을 8.2로 변경했지만 엘리멘터가 설치되지 않는 문제에 관한 질문이 올라와서 이 문제를 잠시 살펴보았습니다. 위의 그림과 같이 "이 플러그인은 사용중인 PHP 버전에서 작동하지 않습니다" 경고가 표시되면서 플러그인을 설치할 수 없는 문제가 발생했습니다. 워드프레스 엘리멘터(Elementor)의 PHP 요구 사항 Elementor 페이지 빌더 플러그인 사이트의 정보에 의하면 엘리멘터의 설치 요구 사항은 다음과 같습니다. 워드프레스 버전 6.0 이상 PHP 버전 7.3 이상 PHP 8.2라면 엘리멘터를 최신 버전으로 업데이트하거나 설치할 수 있습니다. 닷홈에서 PHP 버전을 8.2로 변경했다고 합니다. 위의 그림에서..

워드프레스 엘리멘터(Elementor) 페이지 빌더에서 특정 섹션이나 위젯을 편집기에서 숨기고 싶을 때가 있습니다. 이 경우 반응형 옵션을 사용하여 쉽게 숨길 수 있습니다. 엘리멘터에서 섹션/위젯을 쉽게 숨기는 방법 특정 섹션이나 위젯을 숨기려면 해당 섹션/위젯을 선택한 다음, 왼쪽의 섹션 편집 화면에서 고급 탭을 클릭합니다. 반응형 섹션에서 "데스크톱에 숨기기", "태블릿에 숨기기", "모바일에 숨기기" 옵션을 모두 숨기기로 선택합니다. 그러면 위의 그림과 같이 해당 섹션이나 위젯은 회색으로 바뀌면서 선택할 수도 수정할 수도 없게 됩니다. 숨긴 섹션이나 위젯을 편집하려면 먼저 해당 섹션/위젯을 선택하여 설정 화면을 표시해야 합니다. 하지만 위의 그림 상태에서는 숨긴 섹션/위젯은 선택이 되지 않습니다. ..

엘리멘터 프로의 테마 빌더를 사용하면 워드프레스 관리자 페이지 내에서 헤더, 푸터, 카테고리 페이지, 싱글 포스트 페이지 등의 템플릿을 만들어 헤더부터 푸터까지 쉽게 커스터마이징이 가능합니다. WPML은 워드프레스 사이트에 영어, 일본어, 중국어, 스페인어 등 다국어 버전을 추가할 때 사용할 수 있는 다국어 번역 플러그인입니다. WPML에서는 엘리멘터 템플릿을 글이나 페이지를 번역하듯이 쉽게 번역할 수 있습니다. 워드프레스 엘리멘터 템플릿을 WPML을 사용하여 다른 언어로 번역하기 WPML을 사용하면 워드프레스 사이트에 영어 등 다국어 버전을 추가하고 언어 간 콘텐츠 연동이 가능합니다. 다국어 사이트로 구성한 후에 새로운 콘텐츠를 추가하는 경우 쉽게 다른 언어로 번역이 가능합니다. 번역은 기본적으로 인간..

워드프레스 문의 폼 플러그인 중 하나인 Forminator에서 전화번호 필드를 3개의 필드로 구현하기 위해 자바스크립트 코드를 만들어 추가했습니다. 테스트 사이트에서는 잘 작동하는 코드가 고객사 사이트에서 PC에서는 문제가 없었지만 모바일 기기에서는 작동하지 않는 문제가 발생하는 특이한 현상을 접하게 되었습니다. 워드프레스 엘리멘터: 자바스크립트 코드가 모바일에서만 작동하지 않는 경우 엘리멘터에서 JavaScript 코드가 모바일에서 작동하지 않는 문제에 대하여 Elementor 플러그인 포럼에 올라온 질문이 있습니다. 여기에 대하여 엘리멘터 팀에서는 자스 코드를 사용자 정의 코드(Custom Code) 섹션에 추가해야 한다고 안내하고 있습니다. Hi, for Javascript code, you sho..