우커머스용 워드프레스 테마 Flatsome 데모 설치하기

2

Flatsome은 우커머스용 워드프레스 테마로서 현재 주간 판매 순위 5위를 차지하고 있는 인기 테마 중 하나입니다.

워드프레스 Flatsome 테마

워드프레스에서 쇼핑몰을 운영하려는 경우 Flatsome과 같은 우커머스 전용 테마를 사용하거나 Avada, Enfold 등의 다목적 테마를 사용할 수 있습니다.

지난 블랙프라이데이 기간 동안 Flatsome이 35달러에 할인 판매되어 Flatsome, Salient 등 몇 개 테마를 구입했습니다. 어제 Flatsome을 설치해보았습니다.

워드프레스 Flatsome 테마 설치

먼저 Envato Market에서 테마 설치 파일을 다운로드해야 합니다.

워드프레스 테마 다운로드

Download 페이지에서 해당 테마의 Download 드롭다운 메뉴에서 다운로드할 수 있습니다. All files & documentation을 선택하면 설치 파일과 설명서(documentation)를 비롯하여 모든 파일을 다운로드할 수 있습니다. Installable WordPress file only를 선택하여 다운로드하면 설치 파일만 다운로드됩니다. Flatsome은 설치 절차 중에 차일드 테마(자식 테마)를 설치하는 옵션이 있으므로 Installable WordPress file only를 선택하여 다운로드해도 됩니다.

워드프레스 관리자 페이지에서 외모 > 테마 > 새로 추가를 클릭하고 “테마 업로드” 버튼을 클릭하여 방금 다운로드한 테마 설치 파일을 업로드하여 설치합니다.

워드프레스 Flatsome 테마 설치

Welcome 화면이 표시됩니다. 설치하는 데 3~5분이 소요된다고 안내하고 있습니다. 하단의 Let’s Go!를 클릭합니다.

워드프레스 Flatsome 테마 설치

Activate Theme(테마 인증) 페이지가 표시됩니다. Purchase code를 입력하면 자동 테마 업데이트가 가능하고 지원을 받을 수 있습니다. 저는 임시 도메인에 설치했기 때문에 지금은 코드를 등록하지 않고 Skip this step을 선택했습니다. 아바다 같은 일부 테마의 경우 정품 인증을 하지 않으면 데모를 설치할 수 없지만, Flatsome은 데모 콘텐츠 설치가 가능합니다. 정품 인증을 하려면 “Activate“를 클릭합니다.

Flatsome 우커머스용 워드프레스 테마 설치 - 차일드 테마

두 번째 단계로 차일드 테마(자식 테마, 하위 테마)를 설치하는 화면이 표시됩니다. 이 단계는 필수가 아니므로 Skip this step을 선택하여 건너뛸 수도 있습니다. 차일드 테마를 만들려면 Create and Use Child Theme을 클릭합니다.

Flatsome 테마 설치 하기 - 필수 플러그인 설치

이제 기본 플러그인을 설치하는 화면이 표시됩니다. 다음과 같은 플러그인이 설치됩니다.

위의 화면에서는 Contact Form 7이 이미 설치되어 있으므로 Activation required(활성화 필요)가 표시되어 있습니다. Continue를 클릭하면 플러그인이 설치됩니다. Nextend Social Login은 설치 도중에 Ajax error 메시지가 표시되었지만, 설치 후에 살펴보니 정상적으로 설치되어 있네요.

Flatsome 테마 설치 - 데모 콘텐츠 설치

다음은 데모 콘텐츠를 설치하는 단계입니다. 설치를 원하는 데모 콘텐츠를 체크한 후에 Continue를 클릭합니다.

워드프레스 우커머스 전용 테마 - Flatsome 설치

다음 단계에서는 로고를 지정하고 전면 페이지로 사용할 디자인을 선택합니다. Select Preset에서 미리 만들어진 페이지를 전면 페이지로 선택하도록 합니다. 현재 총 17개 디자인이 제공됩니다.

참고로 데모 페이지에 이미지는 포함되어 있지 않습니다. 디자인을 선택하고 실제 사이트를 살펴보면 이미지가 없는 상태로 사이트가 표시됩니다. 더미 이미지는 실제 이미지로 대체해야 합니다.

Flatsome 테마 설치

Help and Support 페이지가 표시됩니다. 그러면 Agree and Continue를 클릭합니다.

Flatsome 테마 설치 완료

이제 설치가 완료되었습니다. Setup WooCommerce를 클릭하여 우커머스를 설정하거나 View your new website를 클릭하여 사이트를 볼 수 있습니다.

Flatsome 테마 설치 완료 - 전면 페이지

사이트를 방문하면 선택한 전면 페이지가 표시됩니다. 다만, 이미지는 포함되지 않았기 때문에 이미지는 표시되지 않습니다.

Flatsome에는 UX Builder라는 페이지 빌더가 사용됩니다.

UX Builder 페이지 빌더

Edit with UX Builder를 클릭하여 페이지를 편집할 수 있습니다.

워드프레스 Flatsome 페이지 빌더

다른 페이지 빌더와는 조금 다르게 느껴지지만, 익숙해지면 사용법은 비슷할 것 같습니다.

Flatsome 페이지 편집하기

새로운 Element를 추가하기 위해 더하기(+) 아이콘을 누르면 위의 그림과 같이 왼쪽에 레이아웃이나 콘텐츠를 추가할 수 있도록 표시됩니다.

워드프레스 알림판 > 설정 > 읽기에서 데모를 변경할 수 있습니다.

Flatsome 데모 페이지 변경하기

홈페이지 표시 > 정적인 페이지에서 원하는 데모를 선택하여 전면 페이지로 설정합니다.

마치며

이상으로 워드프레스 쇼핑몰에 많이 사용되는 Flatsome 테마의 설치 과정을 살펴보았습니다.

UX Builder라는 페이지 빌더를 사용하는 Flatsome은 우커머스에 특화된 다목적 반응형 우커머스 테마(Multi-Purpose Responsive WooCommerce Theme)입니다. 아바다 등 다목적 테마에서도 쇼핑몰 관련 데모를 제공하지만 개수가 몇 개 되지 않지만 Flatsome에서는 다양한 쇼핑몰 관련 데모 페이지를 제공합니다.

참고:

※일부 글에 제휴링크가 포함될 수 있습니다._커피 한잔 값으로 블로그 운영을 후원하실 수 있습니다.

댓글 2건
  1. 이카루스

    항상 워드프레스에 대해 좋은정보 잘 보고 갑니다.
    이제 몇 시간만 있으면 2018년도 지나 가네요.. 내년에도 항상 건강하시고 하시는 일 모두 잘 되시길 바랍니다.
    새해 복 많이 받으세요..!!

    1. Word

      2018년의 마지막 날이네요.

      한 해 잘 마무리하시고 새해에는 계획하는 모든 일이 성취되기를 기원합니다.

      이카루스님도 새해 복많이 받으세요.