워드프레스에서 페이지 빌더를 사용하면 홈페이지 제작이 수월해집니다. 코딩 지식이 없어도 페이지 빌더를 사용하여 사이트 제작이 가능합니다. 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