1인지식창업 4일차

챌린지

랜딩페이지 구성요소 기획해보기

로고/타이틀/메뉴, Hero 섹션 (Headline), 내 소개 섹션, DB수집 섹션, 후기/리뷰 섹션, CTA 섹션, 회사정보

나도 지식창업을 알아볼거니 강의 참고해서 비슷하게 우선 제작해보자!

 

강의 요약

4-1. 워드프레스와 랜딩페이지
랜딩페이지란? 광고를 눌렀을 때 처음에 보여지는 페이지. 행동유도하는 페이지. ex) 제품구매, 회원가입, 어플설치, DB입력 등.
워드프레스는? 웹페이지 제작 및 관리를 위한 콘텐츠 관리 시스템. CMS. 홈페이지, 랜딩페이지, 쇼핑몰, 블로그 등 웹페이지를 만들고 관리하는 툴. 전세계 웹사이트의 1/3이상이 워드프레스로 제작. 구글 검색에 친화적이다. 다양한 기능의 무료 플러그인들. 커스터마이징이 쉽다. 

4-2. 호스팅과 관리자 모드 접속
호스팅 구매(웹페이지를 만들 공간 임대. 카페24를 통해서.) > 워드프레스 설치 및 기본세팅
> 필수 플러그인 설치 및 세팅 > 테마 설치 및 세팅 > Elementor 페이지 빌더 > 페이지 콘텐츠 구성 > DB확보용 신청폼 만들기 > 무료소책자 이메일 발송 자동화. 순으로 강의가 진행된다.
카페24 회원가입 후 > 카페24의 호스팅으로 로그인해서 워드프레스를 만들었다. 23000원정도 비용 1년치 지불했다.
서비스관리로 가면 운영사이트 사용자/관리자 확인이 가능하다.

4-3. 워드프레스 업데이트 및 기본세팅, 플러그인
워드프레스 관리자 모드에서 설정 > 일반에서 이름 설정하기. (구글검색할 때 노출되는이름.) 설정 > 고유 주소에서 구조를 "글 이름"으로 선택하기.
플러그인 들어가서 모든 플러그인 선택 > 비활성화 > 그다음 삭제. 비활성화가 되어야 삭제가 가능하다.
플러그인 설치 - 고급 편집기, 중복페이지, Insert headers and footers(노란색), Autoptimize. 설치 후 활성화도 시켜줘야 한다. 
고급편집기 설정에서는 편집기 메뉴를 선택하고 변경이 가능하다. Insert headers and footers 는 설정가보면 찾을 수 있다. 관리자 페이지의 디자인에서 홈페이지 기본 테마 설정이 가능하다.

4-4. 랜딩페이지 구성하고, 엘리멘터 구조 이해하기
보통 웹사이트의 구조가 로고/타이틀/메뉴, Hero 섹션 (Headline), 내 소개 섹션, DB수집 섹션, 후기/리뷰 섹션, CTA 섹션, 회사정보 로 이루어져있다.

헤더수정은 알림판에서 디자인 > 사용자정의 > 헤더빌더에서 할 수 있다. 이것저것 수정해보고 "공개"버튼을 눌러야 홈페이지가 수정이 완료된다. 바디수정은 알림판에서 > 페이지에서 할 수 있다.
랜딩페이지는 Home - 전면페이지, Elementor 이다. 위에 마우스 대고 "엘리멘터로 편집" 에서 수정할 수 있다.
각 컨테이너로 구성되어있는 곳들을 수정하면된다. 어려우면 구조를 보고 파악해보기.

4-5. 내 소개 섹션과 소책자신청 섹션
마찬가지로 소개에 따른 문구를 미리 만들어둔 다음에 편집기에서 디자인 골라서 수정하면 쉽다.
텍스트 편집기에서는 Shift+엔터, 제목에서는 html 태그가 필요하다. <br> 같은 것들. 
배경 수정할 때는 오버레이 활용해서 너무 그림에 글이 묻히지 않게 하기.

4-6. DB수집 신청폼 만들기
신청폼은 관리자 화면 아래에서 WP Forms에서 우리의 폼양식을 따로 만들 수 있다. 설정 > 알림에서 나에게 이메일을 보낼 수 있다. 설정 > 확인에서는 제출한 고객에게 확인 화면을 보여줄 수 있다. 오 짱신기..
교육 및 컨설팅 문의로 버튼을 누르면 오픈카톡으로 갈 수 있도록 하면 좋다. 오픈카톡 URL 만들어두기.

4-7. 템플릿 라이브러리 연결, 앵커기능
섹션을 추가할 때 가운데 라이브러리를 누르면 부분부분 필요한 것들을 가져와서 쓸 수 있다. (폴더모양 아이콘)
버튼을 눌렀을 때 다른 섹션으로 가려면 앵커기능을 활용하면 된다. 요소 추가할 때 기본 밑에 프로 밑에 일반이 있다.
거기서 메뉴 앵커를 활용하면 된다.(하고싶은 섹션 제목 위에 넣기.) (후기는 일반에서 증명서를 활용하면 된다.)
버튼안의 링크에 앵커 이름을 넣어주면 된다. 앞에 #을 꼭 붙여줘야 한다. 푸터수정은 헤더처럼 디자인 > 사용자정의하기에서 수정하면 된다. 

4-8. 구글시트 DB 자동 업데이트
Forms에 입력하면 자동으로 구글시트에 넣고, 그 이메일로도 정보가 갈 수 있도록 자동화 하는 방법이다. 
자동화 1단계 Uncanny Automator = 폼 신청서가 작성되면 > 구글시트 작성 자동화.
자동화 2단계 Zapier = 구글시트가 작성되면 > 구글 지메일 발송 자동화.

우선 우리가 만든 Forms 신청서를 편집한다. 마케팅란에서 Uncanny Automator, Zapier 찾을 수 있다. 다 설치하기.
Add trigger 하고 밑에 action에서 google sheets 를 등록해야한다. 
그다음 구글 드라이브에서 폴더 만들고 그 안에 보내주기로 한 책자, 파일 넣어두기. 
파일 설정 > 공유 에 들어가서 제한됨 > 링크가 있는 모든 사용자로 바꾸기.
https://drive.google.com/file/d/어쩌구 링크를 복사해두기.
그다음 신청자 폼을 스프레드시트 만들어두기. 

그다음 다시 화면수정으로 들어가서 Actins 추가하기. 매칭은 별표 눌러서 해두면 된다.

끝났으면 오른쪽에 Draft를 Live로 변경해야한다. 그럼 된다!!

이메일 발송은 Zapier를 사용해야한다. Zapier 검색해서 들어가서 구글로 가입하기. Create Zaps를 하나 하자. 
Trigger를 구글시트. 액션은 줄이 하나 생긴다면으로 한다. 트리거를 하고 나면 밑에 Send email을 선택하기. 
무료버전은 보내고 15분마다 자동화가 돌아서 15분 뒤에 메일이 올거다.

4-9. 네이버, 구글 사이트 등록하기
네이버에 사이트 등록하기 : 서치어드바이저에 등록하기. 등록하고 HTML 메타 테그 복사하기. 그 다음 플러그인 Insert Headers and Footers에 넣기. 설정에서 찾을 수 있고 Scripts in Headers에 넣으면 된다. 
구글은 서치콘솔에 등록하면 된다. 티스토리 페이지 등록하는거랑 똑같이 등록하면 된다. 여기도 마찬가지로 HTML 메타태그 복사해서 헤더에 넣으면 된다.
꼭 사이트 만들면 네이버, 구글에 사이트 등록해두기.