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은 디자인시 사이트를 구성하는 옵션값을 정해 놓은것으로 임의로 변경시 레이아웃이 틀어질수 있으니 꼭 내용을 확인후 설정하시기 바랍니다.
- 글
News 페이지에 보여지는 글들이 들어있습니다. 블로그 형식으로 카테고리를 설정할수 있는 속성을 가지며 여러 카테고리를 만들수 있고 각 카테고리별로 노출할수 있습니다. 새로추가 또는 Clone 을 눌러 새로운 글을 등록하여 사용합니다.
- 미디어
사이트에 등록된 모든 이미지를 볼수 있으며 각 이미지들 클릭하면 이미지의 크기등의 정보를 확인할수 있습니다. 사이트의 레이아웃이 어긋나지 않게 하기 위해 이미지 교체시 샘플 이미지의 크기를 확인하시고 되도록 같은 사이즈로 만드시길 권장드립니다.
- 페이지
사이트에 만들어진 모든 페이지가 보입니다. 편집하고자 하는 페이지에 마우스를 올려서 Live Builder 또는 편집을 눌러 편집합니다. 또한 같은 페이지를 Clone 눌러 복사하여 사용 가능합니다. 복사시 페이지의 Url 변경을 해주세요.
<STEP 3-1 참고>
- Portfolio
템플릿의 Product 페이지에 보이는 제품과 기기 내용이 들어 있습니다. 카테고리를 설정할수 있는 속성을 가지며 여러 카테고리를 만들수 있고 각 카테고리별로 노출할수 있습니다. 새로추가로 새로운 컨텐츠를 등록할수 있습니다. 페이지 디자인은 2가지 스타일로 선택하여 사용가능합니다.
- 새로추가-글/Portfolio
글 또는 Portfolio 추가시 만들어져 있는 페이지 폼을 불러와서 사용할수 있습니다. 원하시는 폼을 불러오고 제목/카테고리/특성이미지등을 등록후 저장하여 사용합니다. <STEP 3-2 참고>
- 메뉴
외모- 메뉴 : 사이트 메인 메뉴로 drag & drop 방식으로 편집이 가능합니다. 모든 페이지와 글이 연동되며 사용자정의 링크도 사용할수 있습니다. 메뉴 변경후 하단 메뉴저장을 누르세요.
03. 슬라이더 편집하기
*이미지를 클릭하면 크게 보실수 있습니다.
- Slider Revolution
메뉴를 클리하시면 옆에 슬라이더가 보이며 펜모양 아이콘을 클릭하면 편집창이 열립니다. (기존샘플을 복사해두고 수정하시면 샘플과 수정본을 비교해 확인하며수정 하시기 권해드립니다.)
- Slides
상단의 슬라이드 메뉴에서 해당 슬라이드를 선택하며 수정이 가능합니다.
복사/삭제가 가능합니다.
- Text 편집
LAYER OPTION-Content 에서 텍스트 내용으 수정하수 있으며 Style메뉴에서 크기와 색상등을 변경할수 있습니다. 저장필수!
- 배경 이미지 편집
오른쪽 편집메뉴에서 SLIDE OPTION-Background 에서 이미지 또는 다른 포멧으로 변경 가능합니다. 저장필수!
- 반응형 설정
디바이스 사이즈에 따라 반응형 설정을 가능합니다. 디바이스 크기를 설정할수 있습니다.
STEP 3. 사이트 편집
사이트 편집에는 2가지 방법이 있습니다. admin(어드민) 에서 편집하는 페이지편집과 사이트 화면을 보면서 편집하는 Edit Live가 있습니다. 편하신 방법으로 수정하시면 됩니다. (아래 설명은 Edit Live로 설명 되었습니다)
01. 페이지 편집
*이미지를 클릭하면 크게 보실수 있습니다.
- 페이지 편집
아바다 테마가 제공하는 빌더로 편집합니다. 주로 새로운 페이지를 만들었으때 사용 하거나 페이지의 구조를 확인하기 좋습니다.
Container(컨테이너) > Column(칼럼) > Elements(앨리먼트) 구조입니다.
각 편집 아이콘을 누르셔서 옵션별로 편집하시면 됩니다.
- Edit Live
사이트 화면을 보면서 편집할수 있는 기능입니다. 기존샘플 페이지를 수정할때 사용합니다. 수정하고자 하는 부분에 마우스를 올리면 나오는 아이콘을 눌러 왼쪽 옵션창이 열리면 수정합니다. 수정후 상단 눈모양 아이콘을 눌러 수정확인을 한후 저장을 눌러야 반영됩니다.
- Title 편집
글자를 편집할때 에디터 창을 Text 탭에 놓고 수정하시기 바랍니다.
- 버튼 & 링크 수정
버튼 링크와 버튼 텍스트를 수정하시고 디자인 탭에서 칼라등도 변경 가능합니다.
- 이미지 수정
수정하고자 하는 이미지에서 편집을 눌러 이미지 등록하거나 미디어 라이브러리에서 선택후 수정 가능합니다. 이미지는 앨리먼트 or 백그라운드에 있습니다.
- 배경이미지 수정
컨데이너 옵션 배경탭에서 Background 를 눌러 미디어 라이브러리에서 선택후 이미지 등록하거나 영상을 삽입해 사용가능합니다.
페이지 타이틀 수정
각 페이지의 타이틀 수정은 페이지 옵션에서 가능합니다. 이미지 & 제목 변경이 가능합니다.
- 고객문의 수정
Avada Form 에서 Modal Options 눌러 (개인정보취급방침)을 귀사에 맞게 수정하세요. Edit Form 을 눌러 문의 받으실 메일주소를 수정하세요.
템플릿 디자인 저장하여 사용하기
템플릿의 각 요소들을 저장해 다른곳에서 불러와 동일하게 사용이 가능합니다. Container(컨테이너), Column(칼럼), Elements(앨리먼트) 모두 가능하니 기존 샘플을 저장해서 다른곳에 사용해 보세요. 칼럼을 예로 들어 설명하겠습니다.
- 칼럼 저장하여 사용하기
저장하고자 하는 칼럼의 저장 아이콘을 누르고
① 이름을 지정하고 ② 저장을 누릅니다.③그럼 저장된걸 확인할수 있습니다. ④원하시는 곳에 칼럼의 +를 눌러 ⑤ 저장된걸 눌르면 원하는곳에 불려와 집니다. 그상대에서 수정할수 있습니다.
02. 포트폴리오 편집
*이미지를 클릭하면 크게 보실수 있습니다.
- Portfolio 카테고리
제품리스트 페이지는 포트폴리오로 만들어졌습니다. 보여주고 싶은 포트폴리오 카테고리를 선택하며 보여줄수 있습니다.
- Portfolio 옵션 편집
제품리스트 페이지에 한줄에 몇개씩 보여 줄건지 간격은 어떻게 할지 정하수 있습니다. 반응형에 따라서도 설정이 가능합니다.
- Portfolio 편집
각 포트폴리오 페이지의 제목과 컨텐츠, 카테고리, 대표이미지등을 수정합니다.
03. Global Option
*이미지를 클릭하면 크게 보실수 있습니다.
- 글로벌 옵션
글로벌 옵션은 사이트 전체적인 디자인 가이드(칼라, 폰트, 크기 반응형등등)로 수정시 사이트 전체에 적용되는 옵션입니다. 수정시 유의하시기 바랍니다.
- LOGO & Favicon
글로벌 옵션에서 로고와 파비콘을 사이즈를 참고하셔서 변경해주세요.
로고는 PC/모바일 둘다 설정해야 합니다.
- 하단정보 수정
푸터에 마우스 올리면 나오는 수정을 눌러 에디터창에서 각각의 정보를 수정하세요.
04. 반응형 (Visibility)
*이미지를 클릭하면 크게 보실수 있습니다.
- 컨테이너 반응형 설정
컨테이너를 각각의 크기에서 보여줄지 말지를 선택할수 있습니다. 버튼을 눌러 껏다 켰다 할수 있습니다.
- 반응형 설정
PC모양 아이콘이 있는 부분들은 반응형 설정이 가능합니다. 각 디바이스 별로 옵션값을 다르게 설정하수 있습니다.
05. 지도수정
*이미지를 클릭하면 크게 보실수 있습니다.
카카오맵 사용(회사명이 검색될때)
카카오앱에 찾는 주소 및 회사명을 검색합니다. 검색후 지도에 표시된 명칭을 누르면 새창이 뜹니다. 새창의 깃발모양 아이콘을 클릭합니다.
- HTML 태그 복사
약도만들기 창이 뜨면 왼쪽의 주변지하철등의 원하는 노출정보를 체크후 소스 생성하기를 눌러 생성된 소스를 복사합니다.
- 복사한 태크 넣기
오시는길 페이지에 Eait Live눌러 원래 지도가 있던 Code Block (코드 블럭)에
기존거를 지우고 새로운 코드를 붙혀넣기 하시면 됩니다.
- 카카오맵 사용(주소만 검색될때)
카카오앱에 찾는 주소 및 건물명을 검색합니다. 검색된 주소를 선택후 지도위에 마킹를 클릭합니다. 그림과 같이 3번째 아이콘을 클릭후 HTML 태그를 선택합니다.
- HTML 태그 복사
HTML 태그 복사에 소스 생성하기 버튼을 누르면 생성되는 소스를 복사합니다.
- 복사한 태크 넣기
오시는길 페이지에 Eait Live눌러 원래 지도가 있던 Code Block (코드 블럭)에 기존거를 지우고 새로운 코드를 붙혀넣기 하시면 됩니다.
STEP 4. AVADA THEME 라이센스 등록
테마의 지속적인 업데이트 제공과 편집을 쉽게 가능하게 하는 빌더 플러그인 등의 사용을 위해 테마를 구매해 라이센스를 등록하세요.
테마는 개인 소유물로 회사계정 또는 개인계정으로 회원가입후 구매하시면 됩니다. 본글에서는 테마포레스트에서 구매하여 등록하는 방법으로 설명되었습니다.
01. 테마 구매 & 코드등록
*이미지를 클릭하면 크게 보실수 있습니다.
- 테마 구매 & 다운로드
회원가입후 테마를 구매하시고 계정에서 다운로드 메뉴에서 pdf 파일을 다운받습니다.
- 코드등록
PDF 파일에 적혀있는 코드를 복사해서 사이트 어드민의 Avada-Dashboard 페이지에 코드를 넣고 Register Now 누르면 등록됩니다.
