저처럼 웹사이트에 대한 아이디어가 많고, 그 아이디어를 현실로 구현하고 싶어하는 분들이 많으실 겁니다. Elementor는 드래그 앤 드롭 기능과 미리 만들어진 요소들을 통해 독창적인 디자인을 쉽게 만들 수 있도록 도와주지만, 때로는 순수 CSS의 힘을 따라갈 수 없습니다. 이 글에서는 Elementor에 사용자 정의 CSS를 추가하여 웹사이트 디자인을 한 단계 더 발전시키는 방법을 알아보겠습니다!
Elementor에 사용자 지정 CSS를 추가하는 3가지 인기 있는 방법
Elementor에 사용자 지정 CSS를 추가하는 방법은 여러 가지가 있습니다. 그중 가장 효과적인 세 가지 방법을 살펴보겠습니다.
- 워드프레스 커스터마이저를 사용하세요
- CSS 플러그인을 사용하세요
- HTML 위젯 사용
워드프레스 커스터마이저를 사용하세요.
Elementor에 사용자 지정 CSS 코드를 추가하려면 다음 단계를 따르세요
- 외관 > 사용자 정의 로 이동하세요.
- WordPress 사용자 정의 도구에서 '추가 CSS'를 클릭합니다.
- 추가 CSS 섹션이 열립니다. 텍스트 상자에 코드를 붙여넣거나 '사용자 지정 CSS 추가' 버튼을 클릭하여 컴퓨터에서 파일을 찾아 추가할 수 있습니다.
CSS 플러그인을 사용하세요
Elementor에 사용자 지정 CSS를 추가할 수 있도록 해주는 Simple CSS, Custom CSS Pro, CSS Hero 등 다양한 플러그인이 시중에 나와 있습니다.
먼저 [사용자 지정 CSS 및 JS] > [사용자 지정 CSS 추가] 클릭합니다 .
왼쪽에는 기본 CSS 편집기가 나타납니다. 오른쪽의 설정 옵션을 사용하여 CSS 코드를 내부적으로 로드할지 또는 외부 스타일시트에서 로드할지 선택할 수 있습니다. 또한 코드를 헤더에 표시할지 푸터에 표시할지 선택할 수 있습니다
CSS 코드 편집이 완료되면 '게시' 버튼을 누르세요.
참고: 코드가 실제로 어떻게 작동하는지 보려면 프런트엔드 보기로 전환하세요.
HTML 위젯 사용
Elementor에 사용자 지정 CSS를 추가하려면 HTML 위젯을 사용할 수 있습니다. 이 옵션을 사용하려면 HTML 위젯을 드래그 앤 드롭 하고 <style> 태그 안에 CSS 코드를 추가하기만 하면 됩니다.
커스텀 CSS는 웹사이트에 사용자 지정 코드를 추가하는 방법입니다. 웹사이트의 디자인이나 사용자 경험을 변경하는 것부터 추가 기능을 구현하는 것까지 다양한 용도로 사용할 수 있습니다.
이제 사용자 지정 CSS를 추가하는 방법을 알았으니 다음 단계를 따라 웹사이트에서 사용할 수 있습니다
- Elementor 편집기 창을 열고 왼쪽 상단의 '+' 아이콘을 클릭합니다
- '사용자 정의 코드'를 클릭한 다음 `.elementor-custom-css{display:none;}` 코드를 붙여넣으세요. 이 코드는 설정 > 사용자 정의 CSS 또는 외관 > 테마 옵션 > 사용자 정의 CSS(사용 중인 WordPress 버전에 따라 다름)에서 찾을 수 있습니다.
결론
이제 사용자 지정 CSS를 추가하는 방법을 알았으니 Elementor의 유연성을 최대한 활용할 수 있습니다. 다음에 무언가가 예상대로 작동하지 않을 때 플러그인이나 테마를 변경하는 대신 CSS 코드를 추가해 보세요!
관련 콘텐츠
- CSS 프레임워크란 무엇인가요?
- 워드프레스에서 사용하지 않는 CSS를 제거하는 방법은 무엇인가요?
