Elementor에서 사용자 정의 CSS를 추가하는 방법: 4가지 쉬운 방법

Elementor에서 사용자 정의 CSS를 추가하는 방법을 찾고 계십니까?

사용자 정의 CSS를 추가하여 이미 놀라운 Elementor 디자인을 확장하면 경쟁자보다 무적의 우위를 확보할 수 있습니다.

그렇다면 일부 Elementor 사용자 정의 CSS를 사용하고 경쟁이 치열한 디지털 세계의 군중 속에서 눈에 띄지 않겠습니까?

하지 말아야 할 이유가 없습니다.

그러나 끌어서 놓기 Elementor 페이지 빌더에 사용자 정의 CSS를 추가하는 방법은 무엇입니까?

글쎄, 당신은 여러 가지 방법으로 Elementor에서 사용자 정의 CSS를 추가할 수 있습니다. Elementor에서 사용자 정의 CSS를 추가하는 방법에 대한 자세한 내용을 보려면 계속 읽으십시오…

CSS 란 무엇입니까?

CSS(Cascading Style Sheets)는 HTML 또는 XML과 같은 마크업 언어로 구축된 웹 페이지의 레이아웃과 모양을 변경하는 데 사용하는 규칙 기반 스타일 시트 언어입니다. CSS를 사용하는 것은 콘텐츠와 스타일을 모두 별도의 파일에 보관하여 가장 유연하고 사용하기 쉽기 때문에 효율적인 웹 디자인 방법입니다.

Elementor 사이트에 맞춤 CSS를 추가해야 하는 이유는 무엇 입니까?

글쎄요, Elementor 자체가 아름다운 웹사이트를 만드는 데 필요한 모든 사용자 지정 옵션을 제공하기 때문에 필수 사항은 아닙니다. 그러나 코딩 방법을 알고 창의력을 사용하여 사이트의 모양을 향상시키려는 경우 Elementor에 Custom CSS를 추가할 수 있습니다.

• Elementor에서 사용자 정의 CSS를 사용하면 테마의 스타일을 재정의하여 새 스타일을 구현할 수 있습니다. 테마가 제공하는 페이지의 전체 모양이 마음에 들지만 한 섹션에서 레이아웃을 약간 변경하고 싶다면 Elementor 사용자 정의 CSS의 도움을 받아 그렇게 할 수 있습니다.

• 마찬가지로 사용자 정의 CSS 코드 조각을 사용하여 Elementor 사전 제작 템플릿의 디자인을 재정의할 수도 있습니다.

• 또한 Elementor에 사용자 정의 CSS 코드 스니펫을 추가하여 웹 사이트를 다른 장치에서 다르게 보이도록 사용자 정의 디자인할 수도 있습니다.

Elementor에서 사용자 정의 CSS를 추가하는 방법: 3가지 다른 방법

사용자 정의 CSS를 추가하는 것은 전혀 어려운 일이 아닙니다. 실제로 다양한 방법을 사용하여 Elementor에서 사용자 정의 CSS를 추가할 수 있습니다. 여기에서는 Elementor 사용자 지정 CSS를 추가하는 가장 안전한 4가지 방법을 공유합니다.

Elementor의 사용자 정의 CSS 코드 조각을 사용하여 CSS 추가

Elementor는 섹션, 열 및 위젯에 사용자 정의 CSS를 추가하는 고급 옵션을 제공합니다. 그러나 이 옵션은 Elementor Pro에서만 사용할 수 있습니다.

Elementor 웹사이트의 섹션/내부 섹션에 사용자 정의 CSS를 추가하려면 Six Dots를 클릭하여 편집 모드 로 이동한 다음 고급 탭 ⇒ 사용자 정의 CSS 로 이동하십시오. 이제 사용자 정의 CSS 탭을 확장하고 사용자 정의 코드를 추가하십시오.

마찬가지로 Elementor 위젯에 사용자 정의 CSS를 추가할 수도 있습니다. 이를 위해 위젯을 클릭하여 편집 모드로 이동한 다음 고급 탭 ⇒ 사용자 정의 CSS로 이동하십시오. 이제 사용자 정의 CSS 탭을 확장하고 사용자 정의 코드를 추가하십시오.

HTML 위젯을 사용하여 Elementor 사용자 정의 CSS 추가

WordPress 웹 사이트에 Elementor 사용자 정의 CSS를 추가하는 데 사용할 수 있는 두 번째 옵션은 HTML 위젯을 사용하는 것입니다. 이 옵션 의 경우 HTML 위젯을 드래그 앤 드롭 한 다음 스타일 태그 내에 CSS 코드를 추가하기만 하면 됩니다.

참고: HTML 태그를 사용하여 인라인 및 독립 실행형 CSS를 모두 추가할 수 있습니다. 걱정하지 마세요. 스타일만 사이트에 반영되고 원시 코드는 표시되지 않습니다.

Elementor 사이트 설정에서 사용자 정의 CSS 추가

사이트 설정 옵션을 사용하여 Elementor에서 사용자 정의 CSS를 추가할 수도 있습니다. 왼쪽 상단 모서리에 있는 햄버거 메뉴를 클릭한 다음 설정 아래 에서 사이트 설정 옵션을 클릭하여 글로벌 사이트 설정 옵션에 액세스합니다.

이제 사용자 정의 CSS 옵션까지 아래로 스크롤 하고 탭을 열고 여기에 사용자 정의 스타일을 추가하십시오.

WordPress 사용자 정의 설정에서 Elementor의 사용자 정의 CSS 추가

사용자 정의 CSS를 추가하기 위해 Elementor에서 제공하는 옵션을 반드시 사용할 필요는 없습니다. WordPress 사용자 정의 옵션을 사용하여 사용자 정의 CSS를 추가할 수도 있습니다.

이를 위해 WordPress 대시보드 ⇒ 모양 ⇒ 사용자 정의로 이동합니다.

이제 WordPress 사이트를 사용자 정의하는 데 사용할 수 있는 많은 설정을 찾을 수 있습니다. 아래로 스크롤하여 추가 CSS 탭 을 열어 사이트에 사용자 정의 CSS를 추가합니다.

Elementor 사용자 정의 CSS가 작동하지 않는 문제를 수정하는 방법

때때로 Elementor에 사용자 정의 CSS를 추가하면 일부 기술적인 문제로 인해 사이트에 즉시 반영되지 않을 수 있습니다. 이 문제를 해결하기 위해 채택할 수 있는 단계는 다음과 같습니다.

CSS 재생성

CSS를 재생성하면 이 문제를 해결할 수 있습니다. CSS를 재생성하려면 Elementor ⇒ 도구로 이동하여 CSS 및 데이터 재생성 을 클릭한 다음 변경 사항 저장을 클릭하십시오.

웹사이트 캐시 및 브라우저 캐시 지우기

WordPress 캐시 플러그인으로 웹사이트의 캐시를 지웁니다. 서버 수준 캐시가 있으면 지울 수도 있습니다. 웹 사이트 캐시를 지운 후 브라우저 캐시를 지우고 사이트를 새로 고쳐 CSS가 작동하는지 확인하십시오.

테마 비호환성

때로는 Elementor 테마 비호환성으로 인해 사용자 정의 CSS가 프런트 엔드에 표시되지 않을 수 있습니다. CSS가 작동하는지 확인하기 위해 기본 테마로 전환할 수 있습니다. CSS가 기본 테마와 함께 프런트 엔드에 표시되면 호환성 문제에 대해 테마 개발자에게 문의하세요.

Elementor와 함께 다른 페이지 빌더 사용

동시에 여러 페이지 빌더를 사용하면 사용자 정의 CSS가 작동하지 않을 수 있습니다. 간단한 이유는 다른 페이지 빌더의 CSS가 서로 충돌할 수 있고 다른 페이지 빌더가 Elementor 사용자 정의 CSS를 재정의할 수 있기 때문입니다. 이러한 경우 Elementor 페이지 빌더만 사용해야 합니다.

자주 묻는 질문

Elementor 사용자 지정 CSS와 관련된 가장 인기 있는 몇 가지 질문에 대한 답변을 살펴보세요.

Elementor에서 사용자 정의 CSS를 어떻게 사용합니까?

4가지 방법으로 Elementor에서 사용자 정의 CSS를 추가할 수 있습니다. 이러한 방법은 HTML 블록, Elementor 사용자 정의 CSS 스니펫, WordPress 사용자 정의 옵션 및 Elementor 사이트 구축 설정을 사용하는 것입니다.

Elementor에 사용자 정의 CSS를 무료로 추가하려면 어떻게 해야 합니까?

WordPress 사용자 정의 옵션에서 Elementor 웹 사이트에 사용자 정의 CSS를 무료로 추가할 수 있습니다.

Elementor 사용자 정의 CSS로 마무리

이제 Elementor에서 사용자 정의 CSS를 추가하는 데 사용할 수 있는 4가지 방법을 알게 되었습니다. 모두 사용할 수 있지만 우선 순위의 CSS 계층 구조를 염두에 두어야 합니다. 예를 들어 인라인 스타일은 페이지 수준이나 웹사이트 수준에서 작성된 CSS보다 항상 우선 순위가 높습니다.

따라서 CSS를 잘 알고 있는 경우에만 사용자 정의 CSS를 사용하는 것이 좋습니다. 그렇지 않으면 득보다 실이 더 많아 결국 웹사이트의 모양과 레이아웃을 망칠 수 있습니다.

CSS 전문가라면 걱정할 것이 없습니다. 이 블로그에 설명된 방법을 사용하여 자유롭게 사용자 정의 CSS를 추가하여 웹사이트의 모양을 성공적으로 변경하십시오.