엘리멘터 사용법 ( FEAT. 세일즈맵, 자피어)

랜딩페이지 만들기 최종장에 해당하는 엘리멘터 사용과 여러 연동 툴에 대한 내용으로 성장기 작성해보려 합니다.

LEARN

우선 위픽 세일즈 페이지를 만들고 수정할 수 있는 어드민 계정을 만들어야 합니다. 계정을 만들고 접속하면 페이지 

항목에서 페이지 새로 추가를 통해 새로운 페이지를 생성합니다. 처음 제작 시에는 비공개로 제작합니다. URL은

sales.wepick.kr/(   ) 뒤의 빈칸을 새로 생성하는 페이지의 내용에 맞추어 작성하면 주소가 만들어집니다. 

다음으로 엘리멘터로 편집을 누르고 본격적으로 페이지 작성을 들어갑니다. 가장  먼저 해줘야 할 것은 맨 왼쪽 아래의 설정에서 페이지 레이아웃을 엘리멘터 전체 너비로 설정해 줘야 합니다. 

그 후 크게 이미지와 텍스트를 나누어 제작합니다. 이미지는 업로드 후 콘텐츠에서 이미지 크기를 full로 설정 후 

스타일에서 너비를 통해서 크기를 정할 수 있습니다. 이미지의 크기가 세로로 긴 형태이면 양 옆의 흰 공간이 생기기 때문에 섹션 단위로 들어가 스타일에서 색상을 맞추어 주면 세로 이미지여도 어색하지 않게 조정해 줄 수 있습니다.

다음으로 텍스트를 작성할 때는 제목 단락으로 작성합니다. 작성한 텍스트의 색상과 크기 폰트는 스타일로 적용 할 수 있습니다. 또 한 가지 방법은 css코드를 이용하는 방법으로 css로 색상을 변경하면 스타일보다 우선 적용 되기 때문에 더 이상 스타일로 변경 불가 합니다. 제목 단락에서 가장 중요한 점은 줄 바꿈이 안되기 때문에 꼭 css코드로 적용해야 합니다. 적용 방법은 <br>을 이용하면 흔히 쓰는 엔터의 기능처럼 사용할 수 있습니다. 

만약 이미지 위로 텍스트를 올리고 싶다면, 텍스트 고급 설정에서 텍스트의 위치를 절대 위치로 변경하고 섹션 위에서 상단 여백으로 이미지 위에 원하는 위치로 텍스트를 올릴 수 있습니다.

슬라이드 단락을 만들고 싶다면, 미디어 캐러셀을 이용할 수 있습니다. 미디어 캐러셀의 콘텐츠 영역으로 들어가면 처음 슬라이드의 개수를 추가할 수 있습니다. 추가한 슬라이드에서 항목 당 다른 이미지를 추가 할 수 있고, 이미지 별 링크도 삽입 할 수 있습니다. 스타일 내비게이션 설정으로 슬라이드를 넘기는 화살표를 설정할 수 있습니다. 

다음으로 문의하기 버튼을 만드는 방법입니다. 단추단락을 이용해 섹션에 버튼을 추가할 수 있습니다. 추가한 버튼을 스타일을 이용해 크기 및 색상을 변경합니다. 또한 마우스 오버 기능을 이용해 커서가 올라갔을 때의 색상 변화와 모션 효과를 추가할 수 있습니다. 마지막으로 만들어진 버튼에 세일즈 맵 링크를 걸어줍니다. 세일즈 맵 링크는 세일즈맵 사이트에서 만든 웹 폼 링크로 링크를 통해 고객이 폼을 작성하면 작성한 내용이 세일즈맵으로 들어가게 됩니다.

이렇게 세일즈맵으로 들어온 정보를 crm거래로 들어오게 연결하기 위해서 자피어를 이용합니다. 자피어를 이용하여세일즈맵으로 제출된 정보를 콘코드 crm에 넘겨주도록 설정합니다. 콘코드 crm에 표기되는 항목들과 세일즈맵의 정보를 연동 시켜 줍니다. 

그렇게 만들어진 페이지를 업데이트하고 공개로 설정을 변경하면 페이지를 완성하게 됩니다. 

아직 세일즈맵과 자피어의 정확한 이용 방법은 모르지만 현재까지 제가 배운 점들을 공유해 보았습니다. 

읽어주셔서 감사합니다.