본문으로 바로가기
  1. Home
  2. 워드프레스/플러그인
  3. 엘리멘터 페이지 빌더에 HTML 코드 추가하기 (Elementor)

엘리멘터 페이지 빌더에 HTML 코드 추가하기 (Elementor)

· 댓글 2

엘리멘터 페이지 빌더(Elementor Website Builder)는 현재 500만 개가 넘는 워드프레스 사이트에 설치되어 사용되고 있는 인기 플러그인입니다. 페이지 빌더에서는 보통 HTML/자바스크립트 코드를 추가할 수 있는 요소를 제공합니다. 엘리멘터(엘레멘토) 페이지 빌더에서도 HTML 코드를 추가할 수 있는 위젯이 제공됩니다.

HTTML 코드 추가하기

HTML 코드를 추가하려면 엘리멘츠 탭에서 html로 검색합니다. 그러면 HTML 위젯이 검색 결과에 표시됩니다.

HTML 위젯을 끌어다가 원하는 곳에 놓습니다.

그러면 HTML 코드를 추가할 수 있는 상자가 왼쪽에 표시됩니다. 원하는 코드를 추가하도록 합니다.

JS/CSS 코드 추가하기

페이지 빌더에서 직접 CSS 코드를 추가하는 기능은 엘리멘터 프로 버전에서 제공됩니다.

Elementor 무료 버전

무료 버전에서는 위의 그림과 같이 맞춤 CSS 코드를 추가하려면 PRO 버전으로 전환할 것을 안내합니다. 엘리멘터 PRO 버전에서는 아래 그림과 같이 Custom CSS 추가가 가능합니다.

인기 워드프레스 테마 중 하나인 Jupiter 테마는 기본 페이지 빌더를 비주얼 컴포저 (현재 명칭 'WPBakery Page Builder')에서 엘리멘터로 바꾸었습니다. 쥬피터 테마에서는 페이지 내에서 CSS 코드뿐만 아니라 JS 스크립트 추가도 가능합니다.

워드프레스에서 자바스크립트를 로드하는 방법은 다음 글을 참고해보세요.

 

워드프레스에서 js 스크립트 파일과 스타일시트를 올바르게 로드하는 방법 - 워드프레스 정보꾸

워드프레스에서 자바스크립트(js) 파일이나 스타일시트 파일(css)을 로드하려면 wp_enqueue_script() 함수를 사용합니다. 이 글에서는 다양한 상황에서 js/css 파일을 워드프레스에 로드하는 방법에 대

www.thewordcracker.com

마치며

이상으로 인기 페이지 빌더 플러그인인 에서 HTML 코드를 추가하는 방법에 대해 살펴보았습니다.

아바다 (Avada), 엔폴드 (Enfold) 등의 인기 워드프레스 테마에는 자체 페이지 빌더가 사용됩니다. 이러한 테마를 사용하는 경우에도 쉽게 페이지 빌더의 기능을 사용하여 HTML/Javascript 코드를 추가할 수 있습니다.

아바다 테마에서는 Code Block 요소를 사용하여 코드를 추가할 수 있다.

참고

avada.tistory.com/2029

 

워드프레스 엘리멘터 페이지 빌더 커스텀 카테고리 템플릿 만들기

워드프레스에서 카테고리 템플릿은 보통 테마에서 제공하는 템플릿을 사용하게 됩니다. 무료 테마의 경우 카테고리 템플릿이 정해져 있고, 커스텀하고 싶은 경우 테마 폴더 내의 category.php 파일

avada.tistory.com

avada.tistory.com/916

 

워드프레스 아바다(Avada) 테마 데모 설치 및 제거

워드프레스 아바다(Avada)는 현재 45만 개 이상 판매된 베스트셀링 테마입니다. 아바다 테마가 Themeforest에서는 가장 많은 판매량을 자랑하고 있으며, 최근 50만 고객을 돌파한 Elegant Themes의 Divi 테

avada.tistory.com

 

SNS 공유하기
💬 댓글 2
logo

도움이 되시는 분들이 많으실듯 합니다.

logo

페이지 빌더는 코딩을 모르더라도 쉽게 전문적인 사이트를 만들 수 있다는 장점이 있고, 사용이 쉬운 편입니다.

이름을 저장합니다.

가성비가 뛰어난 웹호스팅

저렴하고 가성비 좋은 웹호스팅

최근 댓글

블로그를 방문해주셔서 감사⋯ 💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada 광고주 URL 차단기능이 있었⋯ 💬똘켓 방문자들로부터 문의를 받으⋯ 💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada 사이트에서 방문자들로부터⋯ 💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada 워드프레스 엘리멘터 문의폼⋯ 💬空空(공공)

워드프레스 시작 가이드

워드프레스 시작하기