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