월요일 마스터 클래스: 사용자가 Elementor에서 저지르는 가장 일반적인 실수

Elementor는 항상 사용자 경험과 사용 편의성 측면에서 선두주자였습니다. 그러나 우리는 일을 단순하게 만드는 것을 목표로 하지만 항상 학습 곡선이 있습니다. 시작을 시작하는 데 도움이 되도록 Elementor에서 사람들이 가장 흔히 저지르는 실수와 이러한 실수에 대한 솔루션을 나열하기로 결정했습니다.

이러한 실수 중 일부를 스스로 했다는 것을 깨달았다면 그것에 대해 자책하지 마십시오. 어떤 도구나 작업을 마스터한다는 것은 항상 배울 것이 조금 더 있다는 것을 의미합니다. 기술을 연마하려는 경우 열린 마음을 유지하는 것이 좋습니다. Elementor 기술을 다음 단계로 끌어 올릴 수 있도록 일반적인 실수와 그 해결 방법을 살펴보겠습니다.

호환되지 않는 테마를 사용하는 Elementor의 첫 번째 일반적인 실수부터 시작하겠습니다.

Elementor는 범용 플러그인입니다. WordPress 코딩 표준을 준수하도록 설계되었으므로 WordPress Codex를 따르는 모든 테마는 Elementor와 호환됩니다. 그러나 이것은 WordPress에서 작동하는 모든 테마가 코딩 표준을 따른다는 것을 의미하지 않으며 모든 사람이 Elementor를 염두에 두고 테마를 만든다는 의미도 아닙니다. 이 때문에 때때로 페이지 편집에 문제가 있는 사용자의 이야기를 듣게 됩니다.

다음은 호환되지 않는 테마를 사용하여 발생하는 몇 가지 일반적인 문제입니다.

• 전폭 페이지가 없는 경우
• 헤더 아래 공간을 제거하기 어려움
• 글꼴이나 색상을 변경할 수 없음

이 실수를 피하기 위한 몇 가지 솔루션이 있습니다.

가장 간단한 방법은 테마를 호환 가능한 유사한 것으로 변경하는 것입니다. WordPress 호환 테마를 찾을 수 있는 가장 좋은 장소는 해당 저장소입니다. 더 좋은 점은 Astra 및 OceanWP와 같은 Elementor와 잘 작동하는 테마를 사용하는 것입니다.

문제를 해결하는 또 다른 방법은 문제가 되는 테마에 대해 지원팀에 연락하여 버그 수정을 요청하는 것입니다. 또는 약간의 코드에 정통한 경우 코드를 자세히 살펴보고 요구 사항과 호환되도록 하여 직접 수행하십시오.

아마도 가장 좋은 해결책은 Hello 테마와 Elementor의 테마 빌더를 사용하여 이전 마스터 클래스에서 했던 것과 같은 방식으로 모든 것을 사용자 정의하여 필요한 대로 작동하고 표시하는 것입니다.

다음으로 흔히 범하는 실수는 열과 스페이서 위젯을 사용하여 요소를 배치하는 것입니다. 우리는 첫날부터 추가 열과 스페이서 위젯을 사용하여 요소를 배치하고 정렬한 많은 사용자를 보아왔습니다. 이것은 불필요할 뿐만 아니라 페이지에 해롭습니다.

페이지에 열을 추가할 때마다 페이지의 골격 역할을 하는 HTML 코드에 마크업을 추가합니다. 그 모든 추가 마크업이 추가되어 시스템이 더 많은 작업을 수행할 수 있게 되어 결국 페이지 로딩 시간에 균형이 무너집니다. 또한 빈 '콘텐츠' 요소를 사용하여 레이아웃을 정렬하면 검색 엔진에 잘못된 인상을 주어 사이트 순위가 낮아집니다.

Elementor의 모든 단일 요소와 위젯에는 여백, 패딩 및 Z-색인 매개변수가 있습니다. 위젯 콘텐츠 및 스타일 탭에 추가 정렬 및 위치 지정 옵션이 있는 경우도 많습니다. 이러한 옵션을 사용하여 Elementor는 코드에 최소한의 데이터만 사용하도록 합니다. 또한 이 데이터를 CSS 코드에 유지하면 마크업 코드에 추가할 필요가 없습니다. 이렇게 하면 스타일 붙여넣기 옵션을 사용할 때 간격을 복사/붙여넣기할 수도 있습니다.

간단하게 알림: 여백 값은 위젯 프레임 외부의 공간을 정의하는 반면 패딩 값은 프레임 내부, 프레임과 요소 사이의 공간을 정의합니다.
패딩과 여백 사용에 익숙해지세요. 결국, 그것이 그들이 설계된 이유입니다.

칼럼 주제에 대해 이야기하는 동안 또 다른 일반적인 칼럼 실수를 언급할 차례입니다.

내부 섹션 위젯의 잘못된 사용 또는 일부 사용자가 열 위젯이라고 부르는 것.
새 섹션을 추가하는 가장 좋은 방법은 새 섹션 추가를 클릭하는 것입니다. 불행히도 섹션에 여러 열을 할당하는 대신 일부 사용자는 Inner-Section 위젯에서 드래그하는 습관을 들이고 있습니다.

섹션을 설정할 때 가장 좋은 방법은 실제로 새 섹션 추가 버튼을 사용한 다음 원하는 열 수를 선택하는 것입니다. 이렇게 하면 섹션 전체에 걸쳐 모든 것이 멋지고 균일하게 유지될 뿐만 아니라 마크업 조명을 유지하면서 애니메이션 배경 및 전경과 같은 일부 항목을 독립적으로 유지할 수 있습니다.

내부 섹션 위젯은 사용자가 다소 균일한 섹션 내에서 구분을 만들 수 있도록 설계되었습니다. 섹션에 열을 추가하기만 하면 열 핸들을 마우스 오른쪽 버튼으로 클릭하고 새 열을 추가하기만 하면 됩니다.

또 다른 일반적인 실수는 먼저 캐시를 비활성화하거나 지우지 않고 웹사이트를 만드는 것입니다. 웹사이트는 지속적으로 변경 및 업데이트되고 있습니다. 그것은 우리가 주어진 것으로 받아들이는 것입니다. 우리는 너무 자주 사용자가 백엔드에서 사이트를 변경하는 데 몇 시간을 소비한다는 사실을 발견했지만, 이것이 실제로 존재하는 프론트엔드의 사이트에는 전혀 차이가 없다는 것을 발견했습니다.

당사 사이트의 캐싱은 프런트 엔드에 상주하고 귀하의 웹사이트를 방문하는 사람들의 콘텐츠 요청에 응답하도록 설계되었습니다. 캐시는 수요가 많은 콘텐츠 데이터를 보유하고 다운로드 시간을 줄이는 데 도움이 됩니다. 가장 일반적으로 브라우저 캐시가 있지만 호스트 서버에 캐시 플러그인과 웹사이트 캐시도 있습니다.
시스템에 변경 사항을 알리지 않는 한 이러한 캐시는 처음에 정의한 콘텐츠를 계속 전송합니다.

다음은 이러한 실수를 방지하는 데 도움이 되는 몇 가지 방법입니다.
브라우저에서 페이지를 새로 고치면 브라우저 캐시가 지워집니다. Mac에서는 Command + R을, PC에서는 Control F5를 눌러 이 작업을 수행할 수 있습니다.

브라우저 설정으로 이동하여 캐시 삭제 옵션을 찾을 수도 있습니다.
이를 수행하는 또 다른 방법은 주소 표시줄의 URL 뒤에 물음표를 추가하고 그 뒤에 약간의 횡설수설을 추가하는 것입니다. 이것은 브라우저가 이 정보를 검색하도록 합니다. 이렇게 하면 페이지의 새 버전이 다시 로드됩니다.

일부 사용자는 WP Rocket 또는 WP Fastest Cache와 같은 캐시 플러그인을 사용하여 브라우저 외부에서 데이터 캐싱을 수행하여 페이지를 더 빠르게 로드할 수 있습니다.

여기에서 사이트를 편집하거나 변경하기 전에 WordPress 대시보드에서 캐시 플러그인을 비활성화하는 것이 좋습니다. 이 작업을 잊어버린 경우 플러그인 설정의 옵션을 사용하여 캐시를 지우십시오.
때때로 호스팅 서버의 캐싱을 새로 고쳐야 합니다. Elementor 편집기에서 업데이트를 클릭한 후 페이지를 다시 로드하지 못하면 이것이 문제를 일으키는지 확인할 수 있습니다.
그렇다면 WordPress 대시보드에서 Elementor > 도구 >로 이동하고 일반 탭에서 CSS 재생성 버튼을 클릭한 다음 저장합니다. 문서에서 이와 같은 문제에 대한 더 많은 옵션을 찾을 수 있습니다.

다음으로 흔한 실수는 잘못된 크기의 이미지를 사용하는 것입니다. 페이지에 할당된 위치에 비해 너무 작거나 너무 큰 이미지를 업로드하는 사용자가 부족하지 않습니다. 그런 다음 이미지 위젯의 설정을 조정하여 이미지를 강제로 맞춥니다. 이는 다양한 크기의 이미지를 이미지 갤러리나 캐러셀에 업로드하고 동일한 어려움을 겪는 사용자에게도 해당됩니다. 일반 독자는 계획이 올바르게 작동하고 프로세스에서 시간을 절약하는 열쇠라는 것을 알고 의심할 여지 없이 동의할 것입니다.

Sketch나 Photoshop과 같은 디자인 도구 또는 Pixlr과 같은 온라인 사이트를 사용하여 각 사진의 크기와 치수를 계획하고 미리 이미지를 준비하면 많은 시간과 번거로움을 줄일 수 있습니다.

이미지 크기를 계산하는 동안 파일 크기도 작업할 수 있습니다. 페이지 로딩 시간을 늦추는 고해상도 이미지는 확실히 많은 방문자가 사이트에서 이탈하게 만듭니다. Optimole과 같은 도구를 사용하여 이미지 크기를 자동으로 줄이거 나 Tiny PNG와 같은 외부 서비스를 사용할 수 있습니다.

다음 실수로 넘어가기: 기본 색상을 설정하지 않음. 사용자의 삶을 더 쉽게 만들기 위해 정확하게 설계된 Elementor에는 많은 옵션이 있습니다. 디자인 기본 색상을 설정하면 웹사이트 전체에서 색상 구성표가 일관되게 유지될 뿐만 아니라 상당한 시간을 절약할 수 있습니다.

가장 좋은 방법은 Elementor에서 첫 번째 빈 페이지를 연 다음 페이지 빌드를 시작할 때 이 작업을 수행하는 것입니다. 메뉴의 팔레트에서 기본 색상을 선택하고 적용합니다. 우리는 실제로 이전 마스터 클래스에서 이것을 설정하는 방법을 다루었습니다.

이 목록에는 사용자가 범하는 모든 실수가 포함되어 있지 않습니다. 예를 들어, 텍스트를 정리하는 대신 인라인 스타일을 포함하는 텍스트 편집기에 텍스트를 붙여넣는 것과 같이 언급할 수 있는 다른 것들이 많이 있습니다. 그러나 이 6가지 실수를 극복하면 좋은 출발을 시작하고 Elementor를 더 잘 이해하고 활용하는 데 도움이 됩니다.

Elementor를 적절하게 사용하면 귀하가 제작하는 웹 사이트에서 즉시 엄청난 개선이 나타나는 방법에 놀랄 것입니다.

언급해야 하는 일반적인 실수를 놓쳤다고 생각하거나 귀하 또는 귀하의 고객이 Elementor를 사용하여 자주 범하는 몇 가지 일반적인 오류를 발견했다면 아래 의견에서 이를 공유해 주십시오.