워드프레스 엘리멘터 프로를 사용하여 테마 빌더의 헤더 템플릿에서 헤더에 메뉴(Nav Menu)를 추가하거나 페이지에 메뉴를 배치할 때 메뉴 레이아웃이 깨져서 제대로 작동하지 않는 경우가 있습니다. 엘리멘터로 만든 메뉴가 깨져 표시되는 경우 아래 사항을 참고하여 문제 해결을 시도해보시기 바랍니다.
워드프레스 엘리멘터 메뉴가 깨져 표시되는 문제
Elementor Pro에서 다음과 같이 메뉴가 이상하게 표시되는 문제를 호소하는 분들이 계십니다.
이 문제가 발생하면 다음과 같은 조치를 취하여 문제를 해결할 수 있습니다.
기본적인 조치
먼저 테마를 임시적으로 다른 테마로 바꾸어서 문제가 사라지지 않는지 체크해보시기 바랍니다.
또한, 워드프레스 알림판 > Elementor (엘리멘터) > Tools (도구) > Regenerate CSS & Data (CSS 및 데이터 재생성) 버튼을 클릭하여 CSS를 재생성하도록 합니다.
그리고 캐시를 모두 삭제합니다.
- 워드프레스 플러그인 캐시
- 서버 캐시 (해당 시. 호스팅 업체에 문의해보세요)
- 브라우저 캐시
엘리멘터 실험 기능: Inline Font Icons 비활성화
Inline Font Icons(인라인 폰트 아이콘) 기능이 활성화되어 있는지 체크합니다. 이 옵션의 값이 alpha 상태로 표시되면 eicon과 eicon:before CSS가 깨지게 됩니다.
워드프레스 알림판 > Elementor (엘리멘터) > Settings (설정) > Experiments (실험)로 이동하여 Inline Font Icons 옵션을 Inactive (비활성) 상태로 설정합니다.
최적화 플러그인 비활성화
해외 호스팅 중 하나인 사이트그라운드(SiteGround)에서는 Siteground Optimizer라는 최적화 플러그인을 제공합니다. 이 플러그인이 문제를 일으킨다고 하는 사용자들이 있습니다. 이 플러그인이 사용되고 있다면 비활성화하여 문제가 해결되는지 체크해보시기 바랍니다.
이 플러그인이 설치되어 있지 않은 경우, Autoptimize나 Clearfy와 같은 최적화 플러그인이 설치되어 있다면 비활성화하여 문제가 해결되는지 확인하도록 합니다.
마치며
이상으로 워드프레스 Elementor 페이지 빌더로 만든 Nav Menu가 제대로 작동하지 않는 경우 대처 방법에 대하여 살펴보았습니다. 이 문제는 CSS 최적화 플러그인이나 캐시 플러그인 때문에 발생할 가능성이 높으며, 엘리멘터의 실험적인 기능인 Inline Font Icons 옵션 때문에 발생할 수도 있습니다. 위에서 제시한 사항을 하나씩 시도해보고, 그래도 문제가 해결되지 않으면 엘리멘터 고객지원센터에 지원을 요청해보시기 바랍니다.
참고
https://avada.tistory.com/2324
뉴스페이퍼 테마 라이센스 이해하기 (Themeforest 워드프레스 테마)
워드프레스에는 다양한 무료 및 유료 테마가 있습니다. Themeforest 마켓에서 판매되는 테마들이 특히 인기를 끌고 있습니다. 아바다, 엔폴드, BeTheme, 뉴스페이퍼 등 많은 유료 워드프레스 테마가
avada.tistory.com
https://avada.tistory.com/2565
워드프레스 Divi 테마용 무료 카메라 제품 레이아웃 팩(Camera Product Layout Pack) 다운로드
인기 워드프레스 테마인 Divi 테마로 유명한 Elegant Themes에서 Divi용 무료 카메라 제품 레이아웃 팩(Cammera Product Layout Pack)을 최근 공개했습니다. Divi 테마를 사용하는 경우 Divi 빌더에서 레이아웃 디
avada.tistory.com
https://avada.tistory.com/2581
워드프레스 엘리멘터 페이지 빌더 팝업 만들기
워드프레스에는 다양한 팝업 플러그인이 있습니다. Popup Maker와 같은 무료 플러그인을 사용하면 버튼 클릭 시 팝업이 표시되도록 할 수 있습니다. 이 글에서는 엘리멘터 페이지 빌더의 팝업 기능
avada.tistory.com