아바다 테마 데모 수정하기
- 워드프레스 테마
워드프레스의 강점 중 하나는 많은 테마와 플러그인을 사용할 수 있다는 점입니다. 정말로 많은 무료 및 유료 테마가 있으므로, 초보자의 경우에도 마음에 드는 데모가 있는 테마를 하나 구입하여 데모를 로드한 후에 콘텐츠를 바꾸는 방식으로 사이트를 만들 수 있습니다.
시작하기 전에 워드프레스의 기본 사용 방법을 익히고, 선택한 테마에서 사용하는 페이지 빌더(탑재된 경우) 사용법을 조금 익히면 보다 효과적으로 사이트를 만들 수가 있을 것입니다.
기본적인 워드프레스 사용법은 다음 글을 참고해보세요:
다음은 아바다 테마의 데모를 로드한 후에 데모 페이지 내의 콘텐츠를 수정하는 방법에 대해 간단히 살펴보겠습니다.
아다바 테마 데모 수정하기
※ 이 글 작성 이후에 추가된 라이브 편집기 기능을 사용하면 보다 직관적으로 수정이 가능합니다.
다음 그림은 Avada 데모 중 하나인 Salon 데모의 첫 페이지를 보여줍니다.
관리자로 로그인한 상태에서 수정을 원하는 페이지로 이동합니다. 그러면 상단에 "페이지 편집"이 표시됩니다. "페이지 편집"을 클릭하면 페이지를 편집할 수 있습니다. 위의 그림에서 동그라미가 쳐진 부분을 수정해보겠습니다.
"페이지 편집"을 클릭하면 다음과 같이 Fusion Builder 페이지 빌더에서 페이지 편집이 가능합니다.
만약 위의 같은 화면이 표시되지 않고 아래와 같은 화면이 표시되는 경우에는 "Edit With Fusion Builder"를 클릭합니다.
맨 위에 레볼루션 슬라이더가 표시되어 있습니다.
슬라이더를 편집하려면 "슬라이더 편집"을 클릭하면 됩니다. 그러면 레볼루션 슬라이더 플러그인에서 슬라이더를 편집할 수 있습니다.
슬라이더 부분이 표시되지 않거나 설정을 해야 하는 경우 페이지 편집 화면 맨 아래의 Fusion Page Options 부분에서 슬라이더를 설정할 수 있습니다.
아바다에서는 다양한 슬라이더를 이용할 수 있습니다.
개인적인 생각으로는 사이트 속도를 위해 슬라이더는 가급적 사용하지 않는 것이 바람직한 것 같습니다. 이미지로 대체하는 것을 고려해볼 수 있습니다. 슬라이더를 사용하면 사이트 속도에 영향을 미칠 수 있습니다.
이제 맨 위의 그림에서 수정하려는 부분을 Fusion Builder에서 수정해보도록 하겠습니다.
위의 그림에서 동그라미 부분을 수정하려고 합니다. 페이지 편집 화면에서 마우스로 스크롤하여 아래로 내리면 위의 부분이 삽입된 요소를 찾을 수 있습니다.
수정하고자 하는 부분에 마우스를 올립니다.
그러면 위의 그림과 같이 몇 개의 아이콘이 표시됩니다. 삭제하려면 맨 끝의 휴지통 아이콘을 클릭하면 됩니다. 여기에서는 수정을 하므로 연필 아이콘을 클릭합니다. 두 번째 아이콘은 요소를 복제(Clone)하는 기능을 합니다. 요소를 복제하여 다른 곳으로 끌어다 놓은 후에 수정하는 것도 가능합니다. 필요 없는 요소는 삭제하면 됩니다.
연필 아이콘을 클릭하면...
해당 요소는 Text Block입니다. Content 부분에서 콘텐츠를 변경할 수 있습니다.
아래로 내려보면 몇 가지 옵션이 더 표시됩니다.
Element Visibility에서는 작은 화면, 중간 화면, 큰 화면에 이 요소를 표시할지 여부를 지정할 수 있습니다. 가령 모바일에서는 표시하고 싶지 않다면 Samll Screen을 클릭하여 해제하면 됩니다.
아래의 CSS Class와 CSS ID를 지정하면 CSS로 제어가 가능합니다. Save를 클릭하면 수정 사항이 저장됩니다.
이미지를 교체하고 싶은 경우 마찬가지로 이미지 위에 마우스를 올려서 편집 아이콘(연필 모양 아이콘)을 클릭합니다.
그러면 위의 그림과 같이 이미지를 편집할 수 있는 창이 표시됩니다. 이미지를 제거하고 새로운 이미지로 대체 가능합니다.
그리고 마우스를 아래로 내리면 다양한 이미지 관련 옵션을 제어할 수 있습니다.
이미지 최대 너비, 스타일 타입, 허버 타입, 테두리 관련 설정, 정렬, 이미지 라이트박스 기능 사용 여부, 링크 추가, 화면 크기 지정(예: 모바일에서 표시 안 함), CSS 클래스와 ID 지정 등 다양한 설정이 제공됩니다.
새로운 콘텐츠를 추가하려는 경우 컨테이너와 컬럼을 추가하고 새로운 요소를 배치할 수 있습니다.
컨테이너나 컬럼의 설정을 변경하려면 해당 컨테이너나 컬럼 상단에 있는 설정 아이콘(연필 모양 아이콘)을 클릭합니다.
컨테이너 설정
컬럼 설정컨테이너 추가 버튼을 누르면 다음과 같이 컨테이너를 선택할 수 있는 화면이 표시됩니다.
마음에 드는 컨테이너를 선택하면 컨테이너가 삽입됩니다.
요소를 추가하려면 원하는 컬럼 내의 위치에서 + Element 부분을 클릭하면 됩니다.
그러면 다양한 요소를 추가할 수 있는 창이 표시됩니다.
처음에는 데모 페이지를 로드하여 각 요소를 확인하여 어떻게 작동하는지 파악하는 것이 도움이 될 것입니다.
그리고 다른 컨테이너나 컬럼, 요소를 복제하여 활용하거나 불필요한 요소는 삭제할 수 있습니다.
처음부터 모든 것을 익히기에는 불가능하겠지만, 조금 조작해 보면 쉽게 사용이 가능하다는 것을 알게 될 것입니다.
너무 조급해하지 말고 하나씩 살펴보면서 아바다 테마에 익숙해지면 원하는 대로 수정이 가능해질 것이라 생각됩니다. 곧바로 수정해야 하지만 사용법을 익힐 시간이 없다면 유료 1:1 강의를 통해 속성으로 기본적인 사용법을 배우는 것도 고려해볼 수 있을 것입니다.
그리고 잘 안 되는 부분이 있다면 아바다 지원을 활용해볼 수 있습니다. 처음에는 배워야 할 것이 제법 되지만 페이지 빌더의 기본적인 작동법에 익숙해지면 다른 페이지 빌더도 쉬게 느껴질 것입니다.
추가:
이 글을 작성한 이후에 Avada 테마에서는 프런트엔드 에디터 기능이 추가되었습니다. 브라어주에서 페이지를 표시한 다음 상단의 Edit Live를 클릭하면 브라우저에서 보이는 화면에서 쉽게 수정할 수 있습니다.
마치며
아바다 테마는 베스트셀링 워드프레스 테마로 6년 동안 판매 1위를 유지하고 있습니다. 아바다 테마는 1 사이트용으로만 사용이 가능합니다. Divi 테마를 이용하면 무제한 사이트에 설치하여 사용할 수 있습니다(에이전시에게 유리).
