최근 Elementor의 Pro 버전이없는 독자 중 한 명이 자신의 웹 사이트에 사용자 정의 CSS를 추가하는 방법에 대해 우리에게 도전했습니다.
문제가 좀 더 복잡하기 때문에 여러 사용자가이 문제에 직면 할 수 있다고 생각했습니다. 그래서 우리는 그곳에가는 방법에 대한 자세한 기사를 제공하기로 결정했습니다.
이 기사에서는 Elementor 페이지 또는 웹 사이트에 사용자 정의 CSS를 쉽게 추가하는 방법을 보여줍니다.
Elementor 페이지 또는 웹 사이트에 사용자 정의 CSS를 추가하는 세 가지 방법은 다음과 같습니다.
- HTML 요소를 통해 CSS 코드를 추가합니다.
- 플러그인을 통해 스 니펫 코드.
- Elementor의 테마 커 스터 마이저 사용
방법 1 : Elementor의 HTML 요소에서 CSS 코드 추가
단일 페이지에만 CSS를 추가하려는 경우이 방법을 사용하십시오.
1 단계 : Elementor의 HTML 요소 드래그 앤 드롭
이 HTML 요소를 페이지의 아무 곳에 나 배치 할 수 있으며 제대로 작동합니다.
2 단계 : HTML 편집 아이콘 클릭
아이콘을 클릭하십시오 HTML 편집 Elementor HTML 요소의 오른쪽에 있습니다. 그것을 클릭하면 화면 왼쪽에 HTML 편집 도구 상자가 나타납니다.
3 단계 : CSS 코드 추가
- 탭을 클릭하십시오 내용 드롭 다운 목록을 엽니 다. HTML 코드.
- CSS 코드를 비콘.
방법 2 : Code Snippets 플러그인을 통한 Elementor 용 커스텀 CSS
코드 조각 플러그인 사용의 이점 :
- WordPress 테마를 변경하거나 업데이트하려면 항상 CSS가 적용됩니다.
- 플러그인과 같은 CSS 코드를 활성화하거나 비활성화 할 수 있기 때문에 CSS 코드를 추가하는 가장 편리하고 효율적인 방법입니다.
1 단계 : 대시 보드에서 확장 메뉴 열기
2 단계 : 새 플러그인 추가
버튼을 클릭하십시오 에 추가 »새 플러그인 추가 페이지에 액세스합니다.
- 플러그인 찾기 " 코드 스 니펫 ".
- 버튼을 클릭하여 설치하십시오 지금 설치 연구 결과가 긍정적이면.
3 단계 : 플러그인 활성화
버튼을 클릭하십시오 활성화 »설치가 완료되면 플러그인 활성화 코드 조각.
4 단계 : 플러그인 페이지를 열고 코드 스 니펫 추가
- 메뉴를 엽니 다 발췌 대시 보드에서
- 버튼을 클릭 누보 새 코드 조각을 추가하려면
5 단계 : 스 니펫 생성 및 활성화
- 코드 조각에 이름을 지정하십시오.
- 태그 안에 코드를 작성합니다. 이 코드는 아래에서 복사 할 수 있습니다.
- 버튼을 클릭하십시오 저장 (Save Changes) 코드 조각을 저장합니다.
- CSS를 저장 한 후 " 활성화 CSS 코드를 활성화합니다.
코드 복사
add_action( 'wp_head', function () { ?>
<style>
//VOTRE CODE ICI
</style>
<?php } );방법 3 : Elementor 테마 사용자 지정 프로그램 사용
참고 : 테마를 변경하면이 사용자 정의 CSS가 손실되므로이 방법을 사용하기 전에주의하십시오..
1 단계 : 테마 사용자 지정 도구 열기
웹 사이트로 이동하여 상단 탐색 모음에서 사용자 정의 옵션을 클릭하십시오. 테마 사용자 지정 창이 열립니다.
2 단계 : 추가 CSS 탭을 클릭합니다.
그러면 CSS 입력 페이지가 열립니다.
3 단계 : CSS 코드 추가
좋은 ! 이제 Elementor 페이지 또는 웹 사이트에 사용자 정의 CSS를 쉽게 추가하는 방법을 알았습니다. 이렇게하면 Elementor Free의 고유 한 웹 페이지 디자인이 더 유연 해집니다.
지금 Elementor Pro를 받으세요!
프리미엄 워드 프레스 플러그인도 만나보세요
당신은 다른 것을 사용할 수 있습니다 워드 프레스 플러그인 현대적인 외관을 제공하고 블로그 또는 웹사이트의 처리를 최적화합니다.
우리는 여기에 당신을 도울 수있는 프리미엄 WordPress 플러그인을 제공합니다.
1. FileBird
WordPress FTP에 업로드한 수천 개의 이미지, 비디오 또는 문서 파일을 관리하는 데 어려움을 겪은 적이 있습니까? 예 또는 아니요, 중요하지 않습니다. 중요한 것은 워드 프레스 플러그인 FileBird를 사용하면 미디어 파일을 쉽게 관리하고 라이브러리에 더 많은 기능을 제공할 수 있습니다.
완벽한 사용자 인터페이스 및 상황에 맞는 메뉴를 통해 사용자는 파일을 폴더로 끌어다 놓거나 컴퓨터에서와 같은 방식으로 폴더를 빠르게 작성, 이름 바꾸기 또는 삭제할 수있는 권한을 가질 수 있습니다.
이 플러그인을 사용하면 미디어 파일이 체계적으로 구성되고 페이지에 삽입하거나 게시 할 이미지를 쉽게 선택할 수 있습니다. 또한이 플러그인은 특히 가장 많이 사용되는 플러그인과 완벽하게 호환됩니다. WooCommerce또한 많은 언어를 지원합니다.
자세한 내용을 알아 보려면 파일 및 폴더의 워드 프레스를 관리하는 방법
따라서 당신이 향상을 원한다면 미디어 라이브러리 관리라고도 명명되는 워드 프레스 플러그인 FileBird는 당신의 비밀 무기가 될 수 있습니다.
2. 궁극적 인 WooCommerce 확장 카테고리
Ce 워드 프레스 플러그인 지루한 WooCommerce 카테고리의 긴 목록을 쉽게 수정하고 아코디언 메뉴에서 다른 수준의 하위 항목으로 교체할 수 있습니다.
주요 기능은 다음과 같습니다. 활성화 가능성 및 마지막으로 자동 작동 (매개 변수 필요 없음!), 여러 수준의 범주 (범주, 하위 범주 등) 지원, 강조 표시 활성 카테고리, 현재 카테고리가 내부에있는 경우 모든 상위 카테고리 열기, 모든 항목과의 호환성 WooCommerce 테마희망에 부응하여 무료 업데이트 매우 적극적인 고객 지원.
3. WavePlayer
이름에서 짐작할 수 있듯이 WavePlayer는 재생되는 오디오 파일의 파형을 가져오는 오디오 플레이어 플러그인입니다. 이 플러그인을 사용하면 트랙을 호스팅하거나 간단히 다른 서비스와 통합할 수 있습니다.클라우드 호스팅, SoundCloud와 같은.
또한 팟 캐스팅 목적으로 사용할 수 있으며 HTML5 지원, 반응 형 레이아웃, WooCommerce 통합 등과 같은 다른 기능을 제공합니다.
게시하기 전에 시각적으로 재생 목록을 만들 수도 있습니다. 또 다른 필수 기능은 속도와 효율성입니다.
추천 자료
웹 사이트 구축 및 관리에 도움이되는 기타 권장 리소스에 대해 알아보십시오.
- 압축 및 워드 프레스에서 이미지 크기를 조정하는 방법
- 워드 프레스 호스팅과 이메일 주소가하는 방법
- 워드 프레스 블로그에 이미지의 이름을 변경하는 방법
- 워드 프레스 로그인 페이지로 연결되는 링크를 찾는 방법
결론
여기 ! 이것으로이 튜토리얼을 마치고 Elementor에 사용자 정의 CSS를 무료로 추가하는 데 도움이되기를 바랍니다. 주저하지 마십시오 좋아하는 소셜 네트워크에서 친구들과 공유.
그러나 귀하는 우리와 상담 할 수 있습니다. 능숙, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작.
제안이나 의견이 있으면 섹션에 남겨주세요 commentaires.
...
