포트폴리오/갤러리/반응형 사용가이드

User Guide

포트폴리오/갤러리/반응형 사용가이드

STEP 1. 워드프레스 기본 이해

구매하신 상품은 워드프레스 홈페이지입니다.
워드프레스는 세계적으로 가장 많이 활용되는 컨텐츠 관리 시스템으로 CMS (Contents Management System)툴로 웹사이트를 만드는 프로그램으로 사용되고 있습니다. 워드프레스는 기본적으로 [워드프레스+테마] 를 기본 구조로 하며 필요한 기능을 도와주는 플로그인을 추가하여 사용합니다.

Theme (테마)

폰트/레이아웃/헤더/푸터 등의 기능 담당.
무료/유료 테마 로 나뉘며 유료는 도메인 하나당 하나의 라이센스를 원칙으로 합니다.
무료는 기본적인 기능들만 제공하므로 사이트 만들기에 한계가 있습니다.

Builder (빌더)

무료테마에 빌더(디자인 편집) 플러그인을 설치해 사이트 만들기도 합니다. 대표적인 것으로는 Elementor가 있는데 무료를 제공하지만 다양한 기능을 사용하려면 유료로 전환해야 합니다. 매년 결제해야 하는 부담이 있습니다. (도메인 하나당 하나의 라이센스를 원칙)

Pulgin (플러그인)

무료/유료로 나뉘며 필요한 기능에 따라 다양하게 선택하여 설치후 사용할수 있습니다.
상담하기, 게시판, Quick메뉴, 결제등등.
워드프레스가 처음이신 분들은 교육상품을 판매하고 있으니 구매하셔서 공부해보시는걸 추천드립니다.
교육상품 구매하기

STEP 2. 사이트 구조 및 어드민 알아보기

구매하신 상품은 유료 테마인 Avada theme로 만들어졌습니다.
Avada theme는 워드프레스 테마중 제일 많이 팔린 테마로 자체 빌더를 가지고 있으며 한번 구매하면 한사이트에 한하여 평생 사용이 가능합니다.

다양한 기능과 플러그인을 제공하는 Avada theme는 Patcher로 주기적인 업데이트와 오류개선을 제공하여 사이트를 보다 안정적으로 관리할수 있습니다. 디자인이나 페이지 편집을 편리하게 도와주는 Avada Core 와 Avada Buildr를 제공합니다. 유료인 Slider Revolution도 제공하면 기타 플러그인들을 제공합니다.
테마는 개인 소유물도 인정되어 호스팅과 도메인처럼 구매하셔서 사용하셔야 합니다. 추후 지속적인 업데이트를 위해 테마를 구매하시기 바랍니다. 위에 설명드린 바와 같이 한번만 구매하시면 됩니다. 테마를 구매하여 라이센스를 등록하는 방법은 아래에서 설명 드리겠습니다.

01. admin(어드민) 접속 및 기본설정

*이미지를 클릭하면 크게 보실수 있습니다.
  • 보내드린 이메일에 어드민 url 접속후 로그인 합니다.

  • 상단 아이콘 클릭하면 사이트로 이동하고 다시 누르면 어드민으로 이동합니다.

  • 설정-일반
    사이트 제목과 태그라인을 바꿔줍니다.(사이트 검색시 노출되는 부분입니다.) 관리자 이메일 주소는 설정된 메일로 받으신 메일을 활성화 하셔야 어드민에서 변경이 완료됩니다.
설정-일반

02. admin 사이드 메뉴 알아보기

*이미지를 클릭하면 크게 보실수 있습니다.
  • Avada

아바다 테마 관련 메뉴로 테마옵션, 라이센스등록, 업데이트 등을 확인할수 있습니다. Option은 디자인시 사이트를 구성하는 옵션값을 정해 놓은것으로 임의로 변경시 레이아웃이 틀어질수 있으니 꼭 내용을 확인후 설정하시기 바랍니다.
  • 미디어
사이트에 등록된 모든 이미지를 볼수 있으며 각 이미지들 클릭하면 이미지의 크기등의 정보를 확인할수 있습니다. 사이트의 레이아웃이 어긋나지 않게 하기 위해 이미지 교체시 샘플 이미지의 크기를 확인하시고 같은 사이즈로 만드시길 권장드립니다.
  • 페이지
사이트에 만들어진 모든 페이지가 보입니다. 편집하고자 하는 페이지에 마우스를 올려서 Live Builder 또는 편집하기로 편집합니다.
  • Portfolio
템플릿에 보이는 첫번째 페이지 HOME 과 Portfolio페이지의 컨텐츠들이 Portfolio(포트폴리오)에 들어 있습니다. (명칭이 같아 혼동될수 있으니 어드민의 Portfolio은 한글(포트폴리오)로 페이지의 Portfolio는 영어로 기재하여 설명하겠습니다.) 포트폴리오 편집은 하단에서 참고해주세요.
  • 메뉴
외모- 메뉴 : 사이트 메인 메뉴로 drag & drop 방식으로 편집이 가능합니다. 모든 페이지와 연동되어 페이지를 체크하여 추가버튼을 누르면 메뉴주로에 추가되는 상식입니다. 빈메뉴인 사용자정의 링크도 사용할수 있습니다. 메뉴 변경후 하단 메뉴저장을 누르세요.
  • 새로추가-글/Portfolio
글 또는 Portfolio 추가시 만들어져 있는 페이지 폼을 불러와서 사용할수 있습니다. 원하시는 폼을 불러오고 제목/카테고리/특성이미지등을 수정후 저장하여 사용합니다.

STEP 3. 사이트 편집

사이트 편집에는 2가지 방법이 있습니다. admin(어드민) 에서 편집하는 페이지편집과 사이트 화면을 보면서 편집하는 Edit Live가 있습니다. 편하신 방법으로 수정하시면 됩니다. (아래 설명은 페이지편집으로 설명 되었습니다)

01. 페이지 편집

*이미지를 클릭하면 크게 보실수 있습니다.
  • 페이지 편집

상단의 페이지편집을 누르거나 어드민-페이지-편집을 누리면 아바다 테마가 제공하는 빌더로 편집하는 방법입니다.. 주로 새로운 페이지를 만들었으때 사용 하거나 페이지의 구조를 확인하기 좋습니다.
Container(컨테이너) > Column(칼럼) > Elements(앨리먼트) 구조입니다.
각 편집 아이콘을 누르셔서 옵션별로 편집하시면 됩니다.

  • Edit Live
사이트 화면을 보면서 편집할수 있는 기능입니다. 기존샘플 페이지를 수정할때 사용합니다. 수정하고자 하는 부분에 마우스를 올리면 나오는 펜촉 아이콘을 눌러 왼쪽 옵션창이 열리면 수정합니다. Column의 영역의 크기를 변경할수 있으며 왼쪽 옵션창의 4개의 탭마다 설정할수 있는 옵션들이 있으니 필요한 부분들의 설정하여 사용하면 됩니다. 이후 다른 편집들도 동일합니다.
  • Title 편집
페이지 편집에서 수정하고자하는 글자가 있는 Elements(앨리먼트)찾아 펜촉을 누릅니다. Title (타이틀) 창이 나오면 글자를 편집할때 에디터 창을 Text 탭에 놓고 수정하시기 바랍니다. (다른 문서의 글을 복사 붙혀넣기 하면 잘못된 코드가 들어갈수 있느니 참고해주세요. 직접 타이핑 권장)
  • 이미지 수정
수정할 이미지에 펜촉을 클릭하고 Edit누루면 미디어창이 열리고 이미지크기를 확인후 선택하며 수정합니다.
  • 고객문의 수정
어드민-Avada-Form 에서 Edit 눌러 원하시는 필드값대로 수정하시면 됩니다.
편집창 하단으로 스크롤을 내려 문의 받으실주소를 Notifications메뉴에서 고객문의를 눌러 보이는 이메일 자리에 수정하시면 됩니다.

  • 템플릿 디자인 저장하여 사용하기 

템플릿의 각 요소들을 저장해 다른곳에서 불러와 동일하게 사용이 가능합니다.  Container(컨테이너), Column(칼럼), Elements(앨리먼트) 모두 가능하니 기존 샘플을 저장해서 다른곳에 사용해 보세요.
Container(컨테이너)을 예로 들어 설명하겠습니다. 저장할 컨테이너를 누르고(위이미지) 이름을 지정한후 SAVE CONTAINER누르면 저장됩니다. 원하는 곳에 +Container 를 누르면 저장한게 보이며 저장한 파일을 누르면 불러와 집니다.

02. 포트폴리오 편집

*이미지를 클릭하면 크게 보실수 있습니다.
  • Portfolio 카테고리
Portfolio페이지는 어드민의 포트폴리오로 만들어졌습니다. 보여주고 싶은 포트폴리오 카테고리를 선택하며 보여줄수 있습니다. 카테고리를 편집하거나 새로 추가하여 사용할수 있습니다.
  • Portfolio 편집
기존 샘플을 편집하여 사용하시거나 Clone늘 눌러 복사하셔서 사용할수 있습니다.
각 포트폴리오 페이지의 1.제목 2. 컨텐츠 3.내용변경 4.카테고리 5.대표이미지(썸네일미이지)등을 수정하고 저장합니다.

  • Portfolio 수량 및 옵션

Portfolio페이지 편집에서 Post Cards의 편집을 눌러 각강의 옵션들을 설정할수 있습니다. 이미지를 참고하시고 다른 옵션들은 원하시는 대로 수정하시면 됩니다.
이미지를 참고하시고 다른 옵션들은 원하시는 대로 수정하시면 됩니다.

03. 추가 및 삭제

*이미지를 클릭하면 크게 보실수 있습니다.

  • 페이지 추가 & 삭제

사이트의 모든 페이지는 어드민-페이지 메뉴에 들어 있습니다.
페이지 메뉴에서 페이지추가를 눌러 추가하거나
휴지통을 눌러 삭제,Clone을 눌러 페이지를 복사할수 있습니다.
상단 메뉴에 + 새로추가에서 페이지 선택후 사용할 수도 있습니다.
Edit Live에서도 + 아이콘을 눌러 페이지를 눌러 추가할수 있습니다.

  • 포트폴리오 복사 & 삭제

템플릿에 있는 시공사례와 제품소개는 Portfolio 메뉴에 들어있습니다.
Portfolio 메뉴에서 새로추가를 눌러 추가하거나
휴지통을 눌러 삭제,Clone을 눌러 복사할수 있습니다.
상단 메뉴에 +새로추가에서 포트폴리오 선택후 사용할 수도 있습니다.
Edit Live에서도 + 아이콘을 눌러 페이지를 눌러 추가할수 있습니다.

04. 반응형 (Visibility)

*이미지를 클릭하면 크게 보실수 있습니다.
  • 컨테이너 반응형 설정
컨테이너를 각각의 크기에서 보여줄지 말지를 선택할수 있습니다. 버튼을 눌러 껏다 켰다 할수 있습니다.
  • 반응형 설정
PC/타블렛/모바일 모양 아이콘이 있는 부분들은 반응형 설정이 가능합니다. 각 디바이스 별로 옵션값을 다르게 설정하수 있으니 필요에 따라 사용하시면 됩니다.

05. Global Option

*이미지를 클릭하면 크게 보실수 있습니다.
  • LOGO & Favicon
글로벌 옵션에서 로고와 파비콘을 사이즈를 참고하셔서 변경해주세요.
  • 하단정보 수정
어드민의 Abada-Layout에서 footer을 수정하세요.
하단 정보수정은 Nested Columns 편집을 눌러 text 에디터창에서 전화번호/이메일/주소등을 변경하세요. 보이는 소스코드들은 아이콘입니다. 아이콘이 필요없다면 삭제하셔도 됩니다.

STEP 4. AVADA THEME  라이센스 등록

테마의 지속적인 업데이트 제공과 편집을 쉽게 가능하게 하는 빌더 플러그인 등의 사용을 위해 테마를 구매해 라이센스를 등록하세요.
테마는 개인 소유물로 회사계정 또는 개인계정으로 회원가입후 구매하시면 됩니다. 본글에서는 테마포레스트에서 구매하여 등록하는 방법으로 설명되었습니다.

01. 테마 구매 & 코드등록

*이미지를 클릭하면 크게 보실수 있습니다.
  • ENVATO MARKET
테마포레스트 사이트(ENVATO MARKET)는 워드프레스 테마 마켓으로 AVADA 테마는 전세계적으로 가장 많이 팔린 테마입니다.
  • 테마 구매 & 다운로드
회원가입후 테마를 구매하시고 계정에서 다운로드 메뉴에서 pdf 파일을 다운받습니다.
  • 코드등록
PDF 파일에 적혀있는 코드를 복사해서 사이트 어드민의 Avada-Dashboard 페이지에 코드를 넣고 Register Now 누르면 등록됩니다.