법률/세무/학원/기업 사용가이드
STEP 1. 워드프레스 기본 이해
구매하신 상품은 워드프레스 홈페이지입니다.
워드프레스는 세계적으로 가장 많이 활용되는 컨텐츠 관리 시스템으로 CMS (Contents Management System)툴로 웹사이트를 만드는 프로그램으로 사용되고 있습니다. 워드프레스는 기본적으로 [워드프레스+테마] 를 기본 구조로 하며 필요한 기능을 도와주는 플로그인을 추가하여 사용합니다.
Theme (테마)
폰트/레이아웃/헤더/푸터 등의 기능 담당.
무료/유료 테마 로 나뉘며 유료는 도메인 하나당 하나의 라이센스를 원칙으로 합니다.
무료는 기본적인 기능들만 제공하므로 사이트 만들기에 한계가 있습니다.
Builder (빌더)
무료테마에 빌더(디자인 편집) 플러그인을 설치해 사이트 만들기도 합니다. 대표적인 것으로는 Elementor가 있는데 무료를 제공하지만 다양한 기능을 사용하려면 유료로 전환해야 합니다. 매년 결제해야 하는 부담이 있습니다. (도메인 하나당 하나의 라이센스를 원칙)
Pulgin (플러그인)
무료/유료로 나뉘며 필요한 기능에 따라 다양하게 선택하여 설치후 사용할수 있습니다.
상담하기, 게시판, Quick메뉴, 결제등등.
워드프레스가 처음이신 분들은 교육상품을 판매하고 있으니 구매하셔서 공부해보시는걸 추천드립니다.
STEP 2. admin(어드민) 사이드 메뉴 알아보기
구매하신 상품은 유료 테마인 Avada theme로 만들어졌습니다.
Avada theme는 워드프레스 테마중 제일 많이 팔린 테마로 자체 빌더를 가지고 있으며 한번 구매하면 한사이트에 한하여 평생 사용이 가능합니다.
다양한 기능과 플러그인을 제공하는 Avada theme는 Patcher로 주기적인 업데이트와 오류개선을 제공하여 사이트를 보다 안정적으로 관리할수 있습니다. 디자인이나 페이지 편집을 편리하게 도와주는 Avada Core 와 Avada Buildr를 제공합니다. 유료인 Slider Revolution도 제공하며기타 플러그인들을 제공합니다.
테마는 개인 소유물도 인정되어 호스팅과 도메인처럼 구매하셔서 사용하셔야 합니다. 추후 지속적인 업데이트를 위해 테마를 구매하시기 바랍니다. 위에 설명드린 바와 같이 한번만 구매하시면 됩니다. 테마를 구매하여 라이센스를 등록하는 방법은 아래에서 설명 드리겠습니다.
01. admin(어드민) 접속 및 사이트 설정
*이미지를 클릭하면 크게 보실수 있습니다.
- 보내드린 이메일에 어드민 url 접속후 로그인 합니다.
상단 아이콘 클릭하면 사이트로 이동하고 다시 누르면 어드민으로 이동합니다.
- 설정-일반
사이트 제목과 태그라인을 바꿔줍니다.(사이트 검색시 노출되는 부분입니다.) 관리자 이메일 주소는 설정된 메일로 받으신 메일을 활성화 하셔야 어드민에서 변경이 완료됩니다.
02. admin(어드민) 왼쪽 메뉴들
*이미지를 클릭하면 크게 보실수 있습니다.
- Avada
아바다 테마 관련 메뉴로 테마옵션, 라이센스등록, 업데이트 등을 확인할수 있습니다. 아바다 메뉴중 Options(전체설정) / Layout(헤더/푸터) / Off Canvas(간편문의) / Form(문의폼) /Library(심화학습)등을 안내해드립니다. 아바다 메뉴중 Layout에서 헤더(Haesder), 푸터(footer), 페이지타이틀바(tltle bar), 로고(Logo)등을 설정할수 있습니다. 가이드를 끝까지 정독해주세요.
- 미디어
사이트에 등록된 모든 이미지를 볼수 있으며 각 이미지들 클릭하면 이미지의 크기등의 정보를 확인할수 있습니다. 사이트의 레이아웃이 어긋나지 않게 하기 위해 이미지 교체시 샘플 이미지의 크기를 확인하시고 같은 사이즈로 만드시길 권장드립니다.
- 글
글은 웹사이트내에서 운영 가능한 블로그 형태입니다. 여러 카테고리를 설정할수 있는 속성을 가지며 각 카테고리별로 노출할수 있습니다. 새로추가로 새로운 글를 등록하여 사용합니다. 샘플은 성공사례, 사회공헌 카테고리로 나눠져 있으며 페이지 디자인 레이아웃은 어드민 왼쪽 메뉴 Avada-Layout에서 설정합니다.
- 페이지
사이트에 만들어진 모든 페이지를 확인할 수 있습니다. 편집하고자 하는 페이지에 마우스를 올려서 Live Builder 또는 편집하기로 편집합니다.
- 메뉴
모양- 메뉴 : 사이트 메인 메뉴로 drag & drop 방식으로 편집이 가능합니다. 모든 페이지와 연동되어 페이지를 체크하여 메뉴에추가 버튼을 누르면 메뉴 리스트에 추가되는 방식입니다. 빈메뉴인 사용자정의 링크도 사용할수 있습니다. 메뉴 변경후 하단 메뉴저장을 누르세요.
- 플러그인
사이트에 설치된 전체 플러그인을 확인할수 있습니다. 디자인설치 받으신 상태가 테마 및 플러그인의 버전별 호환상을 확인한 상태로 각 플러그인에 대한 이해없이는 업데이트시 사이트에 문제가 발생할수 있으니 참고해주세요.
03. 슬라이드 편집
*이미지를 클릭하면 크게 보실수 있습니다.
- Slider Revolution
Slider Revolution는 avada 테마가 제공해주는 슬라이더로 반응형 설정이 가능한 슬라이더 입니다.
- 슬라이더 페이지에 넣기
슬라이더는 페이지 편집에서 Slider Revolution 앨리먼트에서 원하는 슬라이더를 선택해 넣을수 있습니다.
STEP 3. 사이트 편집 및 수정
사이트 편집에는 Avada Builder를 이용한 2가지 방법이 있습니다. Avada Builder는 사이트의 편집을 쉽게 도와주는 툴로 admin(어드민) 에서 편집하는 페이지편집과 사이트 화면을 보면서 편집하는 Edit Live가 있습니다. 편하신 방법으로 수정하시면 됩니다. (아래 설명은 페이지편집으로 설명 되었습니다)
01. 페이지 편집 방법
*이미지를 클릭하면 크게 보실수 있습니다.
- 페이지 편집
수정하고자 하는 페이지에서 상단의 페이지편집을 누르거나 어드민-페이지-편집을 누르면 아바다 테마가 제공하는 Avada Builder로 편집하는 방법입니다. 주로 자사 컨텐츠 변경시 페이지의 구조를 확인하며 편집하기 좋습니다.
이미지의 각 아이콘의 속성을 확인하세요. 편집/복사/저장/삭제 각 편집 아이콘을 누르셔서 옵션별로 편집하시면 됩니다.
- Edit Live
사이트 화면을 보면서 편집할수 있는 기능입니다. 기존샘플 페이지를 부분적으로 수정할때 사용합니다. 수정하고자 하는 부분에 마우스를 올리면 나오는 펜촉 아이콘을 눌러 왼쪽 옵션창이 열리면 수정합니다. Column의 영역의 크기를 변경할수 있으며 왼쪽 옵션창의 4개의 탭마다 설정할수 있는 옵션들이 있으니 필요한 부분들의 설정하여 사용하면 됩니다. 이후 다른 편집들도 동일합니다.
02. 빌더 구조 / 헤더 / 푸터 / 고객문의 / 간편문의
*이미지를 클릭하면 크게 보실수 있습니다.
- 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 밖의 여백으로,
각 컨테이너/ 칼럼 / 앨리먼트의 여백을 조절할수 있는 옵션입니다.
- Avada-Options
아바다 테마 옵션에서는 사이트의 전체에 영향을 미치는 칼라(color), 헤딩태그(Heading Typography), 파비콘(Favicon)등을 있으며 수정시 사이트 전체에 반영된 옵션이 수정됩니다.
- 파비콘 수정(Avada-Options)
파비콘은 사이트의 브라우저 텝에 노출되는 아이콘입니다. 파비콘 아이콘은 반드시 수정하세요. 수정을 안하시면 워드프레스 아이콘이 노출됩니다.
- 헤더수정(로고, 메뉴)
헤더 수정하는 방법입니다.
- 푸터수정(하단정보)
푸터를 수정하는 방법입니다.
- 문의양식(Froms) 수정
문의 양식를 이메일로 받는 컨텍트폼을 수정하는 방법을 안내합니다.
#고객문의 #간편문의
- 간편문의(Off Canvas) 수정
사이트 전체 페이지에 고정된 간편문의 에 대한 수정 안내입니다.
#간편문의 #PC버전 #모바일버전
03. 빌더로 수정하는 방법 알아보기
*영상과 소리를 키워 시청하세요
페이지 추가 및 복제
페이지를 추가하고 복제하는 방법입니다. 샘플페이지를 복제해서 페이지를 수정하는 방법을 안내합니다. 수정할 페이지를 복제해 두고 페이지를 수정하면 설치 받으신 샘플 페이지를 보전해 샘플페이지와 비교하며 작업할수 있습니다.
- 텍스트 편집
텍스트를 수정하고 디자인을 변경하는 방법입니다. 모든 텍스트는 H 태그로 되어 있으며 제목(Heading)을 정의하는 태그로, h1부터 h6까지 총 6단계가 있습니다. 숫자가 작을수록 제목의 중요도가 높으며, 글씨 크기가 커집니다.
- 이미지 편집
Elements(앨리먼트)에 속한 이미지 수정 방법입니다. 기존 이미지사이즈를 참고해서 수정하세요.
배경 이미지 편집
Container(컨테이너) 또는 Column(칼럼)에 들어 있는 배경이미지 수정방법입니다.
- 링크 수정
Column(칼럼)에 들어 있는 링크 수정방법입니다.
#Home-서비스 #구성원소개
- 버튼 수정
Elements(앨리먼트)에 속한 있는 버튼 수정방법입니다.
04. 글 편집 / 사이드바(레이아웃) 설정
*이미지를 클릭하면 크게 보실수 있습니다.
- 글 편집
글은 우리가 알고 있는 블로그와 같은거라고 생각하시면 됩니다. 디자인 샘플에는 사회공헌/성공사례 두 카테고리로 되어 있으면 카테고리는 추가/삭제 가능합니다.
#성공사례 #사회공헌 #글
- 글 사이드바/레이아웃 설정
글은 왼쪽의 컨텐츠 부분과 오른쪽의 사이드바로 나눠져 있으면 사이드에는 다른 글의 리스트와 카톡링크, 오시는길 링크등을 노출할수 있는 배너가 있습니다.
#성공사례 #사회공헌 #Avada-Layouts
- 포스트카드(Post Cards)설정
포스트카드는 글 또는 포트폴리오로 만들어진 컨텐츠를 모아서 보여주는 앨리먼트입니다 .
#성공사례 #사회공헌 #Avada-Layouts
05. 심화학습 : 반응형 / 레이아웃 저장 & 불러오기
*이미지를 클릭하면 크게 보실수 있습니다.
- 반응형(모바일/중간크기/PC)
container(컨테이너) / Column(칼럼)/ Elements(앨리먼트)의 반응형 설정방법입니다.
워드프레스는 디바이스 크기별로 옵션을 다르게 설정하거나 디바이스마다 보이거나 안보이게 설정이 가능합니다.
- 디자인 레이아웃 저장하여 사용하기
컨테이너 또는 칼럼 또는 앨리먼트의 레이아웃을 저장하여 원하는 페이지 또는 위치에 불러와 사용하는 방법입니다. 이 방벙을 사용하면 샘플페이지의 디자인 레이아웃을 다양하게 활용해서 페이지를 꾸밀수 있습니다.
STEP 4. AVADA THEME 라이센스 등록
테마의 지속적인 업데이트 제공과 편집을 쉽게 가능하게 하는 빌더 플러그인 등의 사용을 위해 테마를 구매해 라이센스를 등록하세요.
테마는 개인 소유물로 회사계정 또는 개인계정으로 회원가입후 구매하시면 됩니다. 본글에서는 테마포레스트에서 구매하여 등록하는 방법으로 설명되었습니다.
01. 테마 구매 & 코드등록
*이미지를 클릭하면 크게 보실수 있습니다.
- 테마 구매 & 다운로드
회원가입후 테마를 구매하시고 계정에서 다운로드 메뉴에서 pdf 파일을 다운받습니다.
- 코드등록
PDF 파일에 적혀있는 코드를 복사해서 사이트 어드민의 Avada-Dashboard 페이지에 코드를 넣고 Register Now 누르면 등록됩니다.
