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
템플릿의 제품소개 페이지와 하부메뉴 페이지에 보이는 제품 및 서비스 내용이 들어 있습니다. 카테고리를 설정할수 있는 속성을 가지며 여러 카테고리를 만들수 있고 각 카테고리별로 노출할수 있습니다. 새로추가로 새로운 컨텐츠를 등록할수 있습니다.
- KBoard
게시판이 들어있으며 고객지원-게시판과 채용공고 게시판이 만들어져 있습니다. 게시판 생성으로 게시판을 추가로 만들수 있습니다.
- 메뉴
외모- 메뉴 : 사이트 메인 메뉴로 drag & drop 방식으로 편집이 가능합니다. 모든 페이지와 연동되어 있습니다. 메뉴 변경후 하단 메뉴저장을 누르세요.
03. 슬라이더 편집하기
*이미지를 클릭하면 크게 보실수 있습니다.
- Slider Revolution
메뉴를 클리하시면 옆에 슬라이더가 보이며 펜모양 아이콘을 클릭하면 편집창이 열립니다.
- Slides
상단의 슬라이더메뉴에서 해당슬라이더서 선택하며 수정이 가능합니다.
복사/삭제가 가능합니다.
- Text 편집
LAYER OPTION-Content 에서 텍스트 내용으 수정하수 있으며 Style메뉴에서 크기와 색상등을 변경할수 있습니다. 저장필수!
- 배경 이미지 편집
오른쪽 편집메뉴에서 SLIDE OPTION-Background 에서 이미지 또는 다른 포멧으로 변경 가능합니다. 저장필수!
- 반응형 설정
브라우저 사이즈에 따라 반응형 설정을 가능합니다. 모바일만 활성화 되어있습니다.
STEP 3. 사이트 편집
사이트 편집에는 2가지 방법이 있습니다. admin(어드민) 에서 편집하는 페이지편집과 사이트 화면을 보면서 편집하는 Edit Live가 있습니다. 편하신 방법으로 수정하시면 됩니다. (아래 설명은 Edit Live로 설명 되었습니다)
- 페이지 편집
아바다 테마가 제공하는 빌더로 편집합니다. 주로 새로운 페이지를 만들었으때 사용 하거나 페이지의 구조를 확인하기 좋습니다.
Container(컨테이너) > Column(칼럼) > Elements(앨리먼트) 구조입니다.
각 편집 아이콘을 누르셔서 옵션창이 뜨고 옵션창 별로 원하시는 목적으로 편집하시면 됩니다. * 새로운 디자인 또는 다른 레이아웃을 만들때 사용하면 좋습니다.
아래 이미지로 페이지구조와 각각 아이콘의 기능을 확인하세요!
- Edit Live
사이트 화면을 보면서 편집할수 있는 기능입니다. 기존샘플 페이지를 수정할때 사용합니다. 수정하고자 하는 부분에 마우스를 올리면 나오는 아이콘을 눌러 왼쪽 옵션창이 열리면 수정합니다. 수정후 상단 눈모양 아이콘을 눌러 수정확인을 한후 저장을 눌러야 반영됩니다. * 샘플디자인을 그대로 컨텐츠만 변경이 사용하면 좋습니다. 이후 설명은 Edit Live를 이용한 설명입니다.
01. 빌더 구조 이해하기
*이미지를 클릭하면 크게 보실수 있습니다.
- Avada Builder 구조 이해하기
빌더의 구조는 Container(컨테이너) 안에 Column(칼럼) 안에 Elements(앨리먼트)가 들어 있는 구조로 Avada 빌더의 핵심 구성 요소로, 웹 페이지를 설계하는 기본적인 블록입니다.
Container(컨테이너): 큰 레이아웃 단위로, 여러 개의 칼럼(Column)과 앨리먼트(Element)를 포함
- Column(칼럼) :컨테이너 안에서 세부적인 레이아웃을 나누는 요소.(1/2, 1/3, 또는 30%, 50% 등 100분율로 나눌수 있음)
- Elements(앨리먼트) :텍스트, 버튼, 이미지, 아이콘 등 다양한 콘텐츠 요소를 추가하는 기능.
- 컨테이너(Container), 컬럼(Column), 엘리먼트(Element) 옵션
각 컨테이너/ 칼럼 / 앨리먼트의 옵션을 다르게 설정할수 있으며 PC/모바일도 따로 설정할수 있습니다. 컨테이너/ 칼럼 / 앨리먼트의 펜촉아이콘을 눌러 옵션을 확인해보세요.
- General (일반 설정) : 기본적인 설정을 조정하는 영역으로 너비, 정렬 방식, 패딩(padding), 마진(margin) 등을 설정, 특정 화면 크기 노출여부 설정
- Design (디자인 설정) : 디자인 스타일을 변경하는 옵션 / 여백 (Margin, Padding),정렬 (Alignment), 테두리 (Border), 그림자 (Box Shadow)
- Background (배경 설정) : 배경색, 배경 이미지, 배경 반복, 배경 크기 조정 등의 설정
- Extras (추가 설정) : 애니메이션 및 고급 기능을 설정할 수 있는 영역
- 패딩(Padding), 마진(Margin), 테두리(Border)
이미지와 같이 컨테이너/ 칼럼 / 앨리먼트를 둘러 싼 패딩(Padding), 마진(Margin), 테두리(Border)를 확인하세요.
패딩(Padding) : content와 border 사이의 간격 (안쪽 여백)
테두리(Border) : 박스의 테두리 (내용과 패딩 안에 포함)
마진(Margin) : border 밖의 여백으로,
각 컨테이너/ 칼럼 / 앨리먼트의 여백을 조절할수 있는 옵션입니다.
02. 페이지편집(Avada Builder)
*이미지를 클릭하면 크게 보실수 있습니다.
- 페이지 편집(Builder 사용)
아바다 빌더를 사용해 페이지를 편집하는 방법입니다. 영상을 확인하세요.
#타이틀 #이미지 #버튼 #칼럼 #컨테이너 #반응형
- Avada-Options
아바다 테마 옵션에서는 사이트의 전체에 영향을 미치는 칼라(color), 헤딩태그(Heading Typography), 파비콘(Favicon)등을 있으며 수정시 사이트 전체에 반영된 옵션이 수정됩니다.
03. 페이지 편집(Edit Live)
*이미지를 클릭하면 크게 보실수 있습니다.
- Title 편집
글자를 편집할때 에디터 창을 Text 탭에 놓고 수정하시기 바랍니다.
- 버튼 & 링크 수정
버튼 링크와 버튼 텍스트를 수정하시고 디자인 탭(붓모양 아이콘)에서 칼라와 모양 등도 변경 가능합니다.
- 이미지 수정
수정하고자 하는 이미지에서 편집을 눌러 이미지 등록하거나 미디어 라이브러리에서 선택후 수정 가능합니다.
- 배경이미지 수정
컨데이너 옵션 배경탭에서 Background 를 눌러 미디어 라이브러리에서 선택후 이미지 등록하거나 영상을 삽입해 사용가능합니다.
페이지 타이틀 수정
각 페이지의 타이틀 수정은 페이지 옵션에서 가능합니다. 이미지 & 제목 변경이 가능합니다.
- 고객문의 수정
Avada Form 에서 Edit Form 을 눌러 전문보기(개인정보취급방침)을 수정하시고 문의받으실 메일주소를 수정하세요.
템플릿 디자인 저장하여 사용하기
템플릿의 각 요소들을 저장해 다른곳에서 불러와 동일하게 사용이 가능합니다. Container(컨테이너), Column(칼럼), Elements(앨리먼트) 모두 가능하니 기존 샘플을 저장해서 다른곳에 사용해 보세요. 칼럼을 예로 들어 설명하겠습니다.
- 칼럼 저장하여 사용하기
저장하고자 하는 칼럼의 저장 아이콘을 누르고
① 이름을 지정하고 ② 저장을 누릅니다.③그럼 저장된걸 확인할수 있습니다. ④원하시는 곳에 칼럼의 +를 눌러 ⑤ 저장된걸 눌르면 원하는곳에 불려와 집니다. 그상대에서 수정할수 있습니다.
04. 포트폴리오 편집
*이미지를 클릭하면 크게 보실수 있습니다.
- Portfolio 카테고리
Portfolio페이지는 어드민의 포트폴리오로 만들어졌습니다. 보여주고 싶은 포트폴리오 카테고리를 선택하며 보여줄수 있습니다. 카테고리를 편집하거나 새로 추가하여 사용할수 있습니다.
- Portfolio 편집
새로추가 또는 기존 샘플을 편집하여 사용하시거나 Clone을 눌러 복사하셔서 사용할수 있습니다.
Portfolio 편집(영상보기)
각 포트폴리오 페이지의 1.제목 2. 컨텐츠 3.내용변경 4.카테고리 5.대표이미지(썸네일미이지)등을 수정하고 저장합니다.(아래 영상을 참고하세요.)
Portfolio 수량 및 옵션
Portfolio페이지 편집에서 Post Cards의 편집을 눌러 각강의 옵션들을 설정할수 있습니다. 이미지를 참고하시고 다른 옵션들은 원하시는 대로 수정하시면 됩니다.
이미지를 참고하시고 다른 옵션들은 원하시는 대로 수정하시면 됩니다.
04. 포트폴리오 편집(Edit Live)
*이미지를 클릭하면 크게 보실수 있습니다.
- Portfolio 카테고리
제품소개 페이지는 포트폴리오로 만들어졌습니다. 제품소개 1/2 페이지에 포트폴리오 카테고리를 선택하며 보여줄수 있습니다.
- Portfolio 편집
각 포트폴리오 페이지의 제목과 컨텐츠, 카테고리, 대표 이미지등을 수정합니다.
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 누르면 등록됩니다.
