학원/교육/반응형 사용가이드
워드프레스 및 테마, 플러그인에 대한 이해 없이 업데이트/추가 설치등을 하지 마시길 바랍니다. 각 프로그램의 버전차이로 사이트이 접속불가 및 오류가 발생할수 있습니다.
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 접속후 로그인 합니다.
상단 아이콘 클릭하면 사이트로 이동하고 다시 누르면 어드민으로 이동합니다.
- 설정-일반
사이트 제목과 태그라인을 바꿔줍니다.(사이트 검색시 노출되는 부분입니다.) 관리자 이메일 주소는 설정된 메일로 받으신 메일을 활성화 하셔야 어드민에서 변경이 완료됩니다.
- 파비콘 설정
사이트 아이콘인 파비콘을 설정하세요!. 파비콘은 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다.
Avada-Options-로고-파비콘
02. admin 사이드 메뉴 알아보기
*이미지를 클릭하면 크게 보실수 있습니다.
- Avada
아바다 테마 관련 메뉴로 테마옵션, 라이센스등록, 업데이트 등을 확인할수 있습니다. Option은 디자인시 사이트를 구성하는 옵션값을 정해 놓은것으로 임의로 변경시 레이아웃이 틀어질수 있으니 꼭 내용을 확인후 설정하시기 바랍니다.
글
뉴스룸 페이지에 보여지는 글들이 들어있습니다. 블로그 형식으로 카테고리를 설정할수 있는 속성을 가지며 여러 카테고리를 만들수 있고 각 카테고리별로 노출할수 있습니다. 새로추가 또는 Clone(복제) 을 눌러 새로운 글을 등록하여 사용합니다.
- 미디어
사이트에 등록된 모든 이미지를 볼수 있으며 각 이미지들 클릭하면 이미지의 크기등의 정보를 확인할수 있습니다. 사이트의 레이아웃이 어긋나지 않게 하기 위해 이미지 교체시 샘플 이미지의 크기를 확인하시고 같은 사이즈로 만드시길 권장드립니다.
- 페이지
사이트에 만들어진 모든 페이지가 보입니다. 편집하고자 하는 페이지에 마우스를 올려서 Live Builder 또는 편집하기로 편집합니다.
- Portfolio
템플릿에 보이는 HOME-프로젝트 부분과 사업실적 페이지들이 들어 있습니다. 카테고리를 설정할수 있는 속성을 가지며 제품, 시공사례, 서비스 등 여러 형태로 카테고리를 지정해 등록할수 있습니다.
- 새로추가-글/Portfolio
글 또는 Portfolio 추가시 만들어져 있는 페이지 폼을 불러와서 사용할수 있습니다. 원하시는 폼을 불러오고 제목/카테고리/특성이미지등을 수정후 저장하여 사용합니다.
- 메뉴
외모- 메뉴 : 사이트 메인 메뉴로 drag & drop 방식으로 편집이 가능합니다. 모든 페이지와 글이 연동되며 사용자정의 링크도 사용할수 있습니다. 원하는 페이지를 메뉴구조에 넣어 사용하면 됩니다. 메뉴 변경후 하단 메뉴저장을 누르세요.
- Options-Colors(사이트 칼라수정)
샘플사이트에 설정된 칼라를 한번에 변경할수 있는 옵션입니다.
STEP 3. 사이트 편집
사이트 편집에는 2가지 방법이 있습니다. admin(어드민) 에서 편집하는 페이지편집과 사이트 화면을 보면서 편집하는 Edit Live가 있습니다. 편하신 방법으로 수정하시면 됩니다. (아래 설명은 Edit Live로 설명 되었습니다)
- 페이지 편집
#Home #슬라이드 #컨테이너 #칼럼 #엘리먼트
아바다 테마가 제공하는 빌더로 편집합니다. 주로 새로운 페이지를 만들었으때 사용 하거나 페이지의 구조를 확인하기 좋습니다.
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. 헤더 / 푸터 편집
*영상를 클릭하면 보실수 있습니다.
- 헤더(Header) 수정
#Layout #메뉴 #Off Canvas #모바일메뉴
메뉴와 로고가 들어 있는 헤더를 수정하는 방법입니다.
메뉴를 수정하고 로고를 변경하는 방법을 안내합니다.
- 푸터(Footer) 수정
사이트 하단의 회사정보와 링크를 수정할 수 있는 푸터 수정방법입니다.
03. 페이지 편집하기
*영상를 클릭하면 보실수 있습니다.
메인페이지 수정 – Home 페이지 편집
#Home #슬라이드 #제목 #슬러그 #컨테이너 #칼럼 #엘리먼트 #타이틀바수정
아바다 빌더를 사용해 메인(Home) 페이지를 편집하는 방법입니다. 영상을 확인하세요.
서브 페이지 편집 – Edit Live
#서브페이지 #엘리먼트 #인사말 #강사소개 #교육과정 #타이틀바수정
Edit Live를 사용해 서브 페이지를 편집하는 방법입니다. 영상을 확인하세요.
04. 포스트 카드 / 학원소식, 고객후기
*영상를 클릭하면 보실수 있습니다.
- 포스트카드 사용된 페이지
Home 페이지의 고객후기, EVENT NEWS, 학원소식 페이지에 사용된 포스트 카드를 수정하는 방법입니다.
포스트카드는 글을 ‘카드 UI’ 형태로 자동 배치해주는 레이아웃 요소입니다.
- 글(Post) 사용법 / 고객후기 사용법
#학원소식 #고객후기
학원소식 페이지의 컨텐츠인 글을 수정하는 방법입니다.
05. 공지사항(게시판) / 문의하기(Form) 수정
*영상를 클릭하면 보실수 있습니다.
- 공지사항(게시판) 수정
#공지사항 #게시판 #게시글등록
공지사항 페이지에 들어있는 케이보드라는 게시판 플러그인에 대한 설명입니다.
- 고객문의(From) 수정
#컨텐트폼 #고객문의 #수신메일수정
문의하기 버튼을 누르면 문의 Form을 수정하는 방법입니다.
06. 지도수정
*이미지를 클릭하면 크게 보실수 있습니다.
카카오맵 사용(회사명이 검색될때)
카카오앱에 찾는 주소 및 회사명을 검색합니다. 검색후 지도에 표시된 명칭을 누르면 새창이 뜹니다. 새창의 깃발모양 아이콘을 클릭합니다.
- HTML 태그 복사
약도만들기 창이 뜨면 왼쪽의 주변지하철등의 원하는 노출정보를 체크후 소스 생성하기를 눌러 생성된 소스를 복사합니다.
- 복사한 태크 넣기
오시는길 페이지에 Eait Live눌러 원래 지도가 있던 Code Block (코드 블럭)에
기존거를 지우고 새로운 코드를 붙혀넣기 하시면 됩니다.
- 카카오맵 사용(주소만 검색될때)
카카오앱에 찾는 주소 및 건물명을 검색합니다. 검색된 주소를 선택후 지도위에 마킹를 클릭합니다. 그림과 같이 3번째 아이콘을 클릭후 HTML 태그를 선택합니다.
- HTML 태그 복사
HTML 태그 복사에 소스 생성하기 버튼을 누르면 생성되는 소스를 복사합니다.
- 복사한 태크 넣기
오시는길 페이지에 Eait Live눌러 원래 지도가 있던 Code Block (코드 블럭)에 기존거를 지우고 새로운 코드를 붙혀넣기 하시면 됩니다.
07. CSS 적용
*이미지를 클릭하면 크게 보실수 있습니다.
- 글로벌 CSS
사이트 전체에 적용할 css를 넣을수 있습니다. 다만, 워드프레스, 테마, 플러그인에 영항을 줄수 있으며 속도가 저하될수 있는점 참고해주세요.
- 페이지내 CSS
각각의 페이지에 CSS를 적용할수 있습니다. 다만, 워드프레스, 테마, 플러그인에 영항을 줄수 있으며 속도가 저하될수 있는점 참고해주세요.
STEP 4. AVADA THEME 라이센스 등록
테마의 지속적인 업데이트 제공과 편집을 쉽게 가능하게 하는 빌더 플러그인 등의 사용을 위해 테마를 구매해 라이센스를 등록하세요.
테마는 개인 소유물로 회사계정 또는 개인계정으로 회원가입후 구매하시면 됩니다. 본글에서는 테마포레스트에서 구매하여 등록하는 방법으로 설명되었습니다.
01. 테마 구매 & 코드등록
*이미지를 클릭하면 크게 보실수 있습니다.
- 테마 구매 & 다운로드
회원가입후 테마를 구매하세요. 이미지와 같이 계정에서 다운로드 메뉴에서 pdf 파일을 다운받습니다.
- 코드등록
PDF 파일에 적혀있는 코드를 복사해서 사이트 어드민의 Avada-Dashboard 페이지에 코드를 넣고 Register Now 누르면 등록됩니다.
