가장 인기있는 워드프레스 사이트 빌더 중 하나인 엘리멘터 Elementor로 웹사이트 작업을 하던 중 갑자기 헤더와 푸터에 메뉴가 중복해서 나오는 오류가 발생하였습니다. 처음에는 플러그인 충돌이 의심되어, 플러그인을 모두 비활성화 한 후 하나씩 활성화하면서 점검해보았으나 특별히 충돌하는 플러그인이 발견되지 않았습니다. 결국 다른 방법으로 문제를 해결할 수 있었는데, 오늘은 이 엘리멘터 메뉴 중복 문제를 어떻게 해결했는지 공유하고자 합니다.
엘리멘터 메뉴 중복 오류 해결 과정
데스크톱의 경우, 오류 발생 전에는 헤더 메뉴가 위와 같이 정상적으로 나오고 있었습니다.
그러다가 갑자기 메뉴가 모바일 레이아웃 스타일로 바뀌면서 위아래로 중복해서 나오기 시작했습니다.
푸터의 메뉴 위젯 또한 처음에는 위와 같이 정상적으로 나오고 있었습니다.
그러다가 헤더 메뉴와 마찬가지로 이 메뉴 위젯도 세로로 중복해서 나오기 시작했습니다.
이 문제를 해결하기 위해, 관리자 대쉬보드(알림판)에서 [엘리멘터 Elementor] – [도구 Tools]로 이동합니다.
‘일반 General’ 탭에서 맨 첫 항목 ‘CSS 및 데이터 재생성 Regenerate CSS & Data’의 ‘파일 및 데이터 재생성 Regenerate Files & Data’ 버튼을 클릭합니다. 엘리멘터에서 설정한 스타일은 업로드 폴더의 CSS 파일과 사이트 데이터베이스에 저장되는데, 이 버튼을 클릭하면 가장 최근 설정에 따라 CSS 파일과 데이터베이스 설정이 자동으로 재생성됩니다. 이 간단한 작업을 통해, 헤더 메뉴와 푸터 메뉴 위젯은 정상화되었습니다.
엘리멘터 CSS 및 데이터 재생성
엘리멘터 메뉴 중복 오류 외에도, 특정 상황에서 웹사이트의 디자인과 기능이 최신 상태이고 제대로 작동하는지 확인하기 위해 CSS와 데이터를 다시 생성해야 할 수 있습니다. ‘CSS 및 데이터 재생성’이 필요한 경우는 다음과 같습니다.
- 테마 혹은 플러그인 업데이트로 인한 호환성 문제 해결: 워드프레스 테마 또는 플러그인을 업데이트하는 경우 기존 엘리멘터 스타일 또는 데이터와 호환성 문제가 발생할 수 있습니다. CSS와 데이터를 다시 생성하면 이러한 문제를 해결하는 데 도움이 될 수 있습니다.
- 중요한 디자인 변경 사항 적용 후: Elementor를 사용하여 레이아웃, 색상, 글꼴 또는 기타 스타일 요소 수정과 같은 중요한 디자인 변경을 수행하는 경우 CSS를 재생성하면 변경 사항이 웹 사이트에 정확하게 적용됩니다.
- 캐시로 인한 버전 불일치 문제 해결: 캐시된 CSS 및 데이터로 인해 사용자 클라이언트에 표시되는 내용과 엘리멘터 편집기에서 디자인한 내용이 일치하지 않을 수 있습니다. 이 때 CSS와 데이터를 재생성하면 이러한 캐시를 삭제하고 최신 스타일과 데이터를 적용하게 됩니다.
- 예상치 못한 오동작 발생시 해결: 웹사이트에서 예상치 못한 동작이나 문제가 발생하는 경우, CSS 및 데이터를 다시 생성해주면 문제를 일으킬 수 있는 캐싱과 오래된 데이터 오류를 제거해주어 문제 해결에 도움이 됩니다.
- 성능 최적화: CSS 및 데이터 재생성으로 최적화된 스타일과 데이터를 재생성하면 웹사이트를 효율적으로 로딩하여 성능 최적화의 효과도 볼 수 있습니다.
- 브라우저 호환성 문제 해결: 때로 브라우저별 특성이나 자체 버그로 인해 웹사이트 로딩에 문제가 발생할 수 있습니다. 이 때 CSS를 재생성하면 스타일이 서로 다른 브라우저 간에도 호환성을 보장해줍니다.
참고 사이트: 엘리멘터 공식 홈페이지 https://elementor.com/
