본문으로 바로가기
  1. Home
  2. 워드프레스/테마
  3. 워드프레스 아바다 테마의 컨테이터, 컬럼, 요소에 CSS 클래스 추가하기

워드프레스 아바다 테마의 컨테이터, 컬럼, 요소에 CSS 클래스 추가하기

· 댓글 0

워드프레스에서 페이지 빌더를 사용하면 홈페이지 제작이 수월해집니다. 코딩 지식이 없어도 페이지 빌더를 사용하여 사이트 제작이 가능합니다. CSS에 대한 지식이 있으면 더욱 수월하게 원하는 레이아웃의 페이지를 만들 수 있습니다.

워드프레스 아바다 테마의 컨테이터, 컬럼, 요소에 CSS 클래스 추가하기

페이지 빌더에서는 특정 요소에 CSS 클래스와 CSS ID를 추가할 수 있는 옵션을 제공합니다.

참고로 기본 편집기인 블럭 에디터(구텐베르크 편집기)에서도 CSS 클래스를 블럭에 추가할 수 있는 옵션을 제공합니다. 블럭에서 맨 아래의 '고급'을 클릭하면 Additoinal CSS Class(es) 옵션이 표시됩니다.

아바다(Avada) 테마에는 Fusion Builder라는 자체 페이지 빌더가 사용되고 있습니다. Fusion Builder를 사용하는 경우 컨테이너 (①), 컬럼 (②), 엘리먼트 (③)에 CSS 클래스와 CSS ID를 추가할 수 있습니다. 

Fusion Builder에는 백엔드 에디터와 Fusion Builder Live라는 프런트엔드 에디터(비주얼 에디터), 두 가지 에디터가 제공됩니다. 위의 그림은 기본 퓨전 빌더인 백엔드 에디터입니다. 위와 같은 그림에서 편집 아이콘 (연필 모양의 아이콘)을 클릭하여 CSS 클래스와 ID를 지정할 수 있습니다.

Fusion Builder Live에서도 비슷한 방법으로 CSS 클래스와 아이디를 넣을 수 있습니다.

다른 페이지 빌더에서도 비슷한 방법으로 CSS 클래스를 추가할 수 있습니다. 

아바다 테마와 인기 매거진 테마인 뉴스페이퍼 테마에서는 데모를 제거하는 옵션을 제공합니다. 이 두 테마에서는 데모를 로드한 후에 마음에 들지 않으면 데모를 삭제하고 다른 데모를 다시 설치할 수 있습니다.

엘리멘터 페이지 빌더에 CSS 클래스 지정하기

인기 워드프레스 페이지 빌더인 Elementor에서도 CSS 클래스를 지정할 수 있는 옵션이 제공됩니다.

 

워드프레스 엘리멘터 페이지 빌더: CSS 클래스 지정하기

워드프레스 인기 페이지 빌더 플러그인인 엘리멘터 페이지 빌더(Elementor Page Builder)에서는 다른 워드프레스 페이지 빌더나 기본 편집기 (블록 에디터)와 같이 각 요소나 섹션에 CSS 클래스를 지정

avada.tistory.com

참고:

SNS 공유하기
💬 댓글 0

이름을 저장합니다.

가성비가 뛰어난 웹호스팅

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

최근 댓글

가성비적인 측면에서 괜찮은⋯ 💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada 요가하구 비보북 너무 괜찮은⋯ 💬Hman 윈도우 11은 아직 사용해 보⋯ 💬空空(공공) 감사합니다. 다시 한번 차근⋯ 💬viator_min 사이트 속도가 느리면 SEO(검⋯ 💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada

워드프레스 시작 가이드

워드프레스 시작하기