독점 Cyber ​​Monday 베이커리 레이아웃 팩을 사용하여 비즈니스를 위한 위치 페이지를 만드는 방법

올해 사이버 먼데이 특가 상품을 구매한다는 것은 엄청난 양의 무료 상품도 제공한다는 의미입니다! 25% 할인을 받는 것 외에도 새로운 우아한 테마 멤버십을 구매하거나 기존 계정을 업그레이드하는 모든 사람(또는 이미 평생 멤버십이 있는 사람)은 사이버 먼데이 세일 기간 동안에만 다운로드할 수 있는 6개의 무료 독점 레이아웃 팩을 받게 됩니다.

사라지기 전에 독점 레이아웃을 다운로드하십시오!

이미 평생 회원이신가요? 사이버 먼데이 세일에 참여할 필요 없이 지금 팩을 다운로드할 수 있습니다!

독점 사이버 먼데이 베이커리 레이아웃 팩 내부 살펴보기

평생 회원 및 사이버 먼데이 신규 고객에게 제공하는 독점 레이아웃 팩 중 하나는 베이커리용입니다. 베이커리 웹사이트를 거부할 수 없게 만드는 5개의 맛있는 페이지로 구성되어 있습니다.

방문 페이지 디자인

사라지기 전에 독점 레이아웃을 다운로드하십시오!

이미 평생 회원이신가요? 사이버 먼데이 세일에 참여할 필요 없이 지금 팩을 다운로드할 수 있습니다!

레시피 페이지 디자인

사라지기 전에 독점 레이아웃을 다운로드하십시오!

이미 평생 회원이신가요? 사이버 먼데이 세일에 참여할 필요 없이 지금 팩을 다운로드할 수 있습니다!

메뉴 페이지 디자인

사라지기 전에 독점 레이아웃을 다운로드하십시오!

이미 평생 회원이신가요? 사이버 먼데이 세일에 참여할 필요 없이 지금 팩을 다운로드할 수 있습니다!

페이지 디자인 정보

사라지기 전에 독점 레이아웃을 다운로드하십시오!

이미 평생 회원이신가요? 사이버 먼데이 세일에 참여할 필요 없이 지금 팩을 다운로드할 수 있습니다!

연락처 페이지 디자인

사라지기 전에 독점 레이아웃을 다운로드하십시오!

이미 평생 회원이신가요? 사이버 먼데이 세일에 참여할 필요 없이 지금 팩을 다운로드할 수 있습니다!

독점 Cyber ​​Monday 베이커리 레이아웃 팩 받기

이 사용 사례를 시작하기 전에 새로운 우아한 테마 회원이 되거나 기존 계정을 업그레이드하거나 이미 평생 회원이 되어 얻을 수 있는 독점 사이버 먼데이 베이커리 레이아웃 팩을 손에 넣어야 합니다. 이미 평생 회원이라면 회원 영역에 로그인하여 여기에서 모든 독점 레이아웃 팩을 다운로드할 수 있습니다. 다른 모든 사람들은 튜토리얼의 나머지 부분을 따라하기 전에 아래 버튼을 사용하여 구매하거나 업그레이드해야 합니다.

사라지기 전에 독점 레이아웃을 다운로드하십시오!

이미 평생 회원이신가요? 사이버 먼데이 세일에 참여할 필요 없이 지금 팩을 다운로드할 수 있습니다!

독점 Cyber ​​Monday 베이커리 레이아웃 팩을 사용하여 비즈니스를 위한 위치 페이지를 만드는 방법

이 게시물의 나머지 부분에서는 Cyber ​​Monday 거래를 이용했거나 이미 평생 회원이고 Bakery Layout Pack에 액세스할 수 있다고 가정합니다.

회원 영역에서 새로운 베이커리 레이아웃 팩을 다운로드하면 아래 비디오를 시청하여 설정이 얼마나 쉬운지 확인할 수 있습니다. 또한 이 자습서를 따라 사이트를 추가 사용자 지정에 사용할 수 있도록 준비하는 것이 좋습니다.

이제 사용 사례 자체로 들어가 보겠습니다.

위치가 두 개 이상인 회사의 웹 사이트를 구축할 때 방문자에게 해당 정보를 전달하는 가장 좋은 방법을 생각하는 것이 중요합니다. 그들은 자신에게 가장 가까운 위치와 해당 위치와 관련된 중요한 정보를 알아야 합니다. 그리고 웹사이트용 위치 페이지를 구축하는 것은 좋은 시작입니다.

이 사용 사례에서는 Bakery Layout Pack을 사용하여 비즈니스를 위한 전문적인 위치 페이지를 구축하는 것이 얼마나 쉬운지 보여드리겠습니다.

베이커리 연락처 페이지 레이아웃의 프레임워크를 사용하여 지도 모듈에 핀을 추가하여 비즈니스의 모든 위치를 반영하는 방법과 각 위치에 대한 중요한 정보를 표시하기 위해 잘 구성되고 설계된 섹션을 보여 드리겠습니다. 레이아웃에서 이미 제공한 디자인 요소를 사용할 수 있기 때문에 이 프로세스가 신선하고 재미있습니다(적어도 저에게는 그렇습니다).

시작하자.

연락처 레이아웃을 사용하여 위치 페이지 구축부터 시작하십시오.

베이커리 연락처 페이지 레이아웃은 새로운 위치 페이지의 기초로 사용하기에 적합합니다. 상단에는 각 회사 위치를 표시하는 데 사용할 지도 모듈이 있습니다. 또한 필요에 따라 재정렬하고 수정할 수 있도록 이미 설계된 텍스트 모듈과 같은 다른 요소가 있습니다.

새 페이지 만들기

먼저 새 페이지를 만들고 제목(예: "Our Locations")을 지정하고 클릭하여 divi Builder를 사용한 다음 Visual Builder를 사용해야 합니다.

베이커리 연락처 페이지 레이아웃 로드

이 시점에서 이미 페이지 레이아웃이 Divi 라이브러리에 업로드되어 있어야 합니다. 페이지 하단의 보라색 메뉴를 클릭하여 열고 더하기 아이콘이 있는 "라이브러리에서 추가" 버튼을 선택합니다. 라이브러리 탭에서 로드를 선택한 다음 목록에서 베이커리 연락처 레이아웃을 선택합니다. 레이아웃이 페이지에 즉시 로드됩니다.

게시합니다.

특정 위치 정보에 대한 섹션 추가

연락처 페이지에는 특정 위치에 대한 추가 콘텐츠를 구축하는 데 사용할 콘텐츠가 많지 않습니다. 이제 Bakery Landing 페이지로 이동하여 페이지의 두 번째 섹션에서 행을 선택하고 라이브러리에 저장해 보겠습니다.

이제 위치 페이지로 돌아갑니다. 연락처 양식이 포함된 페이지 하단의 섹션을 복제합니다(나중에 필요하므로 삭제하지 마십시오). 지도 바로 아래 섹션의 섹션에서 전체 행을 삭제하고 라이브러리에서 저장한 행을 추가합니다.

다음으로 행의 열 레이아웃을 2/3 1/3 레이아웃으로 변경합니다.

하단 섹션의 오른쪽 열에서 주소 내용이 있는 텍스트 모듈을 찾습니다. 위 섹션에 있는 행의 오른쪽 열에 있는 이미지 모듈 아래로 드래그합니다.

그런 다음 왼쪽 열에 있는 텍스트 모듈의 콘텐츠를 업데이트하여 특정 회사 위치를 나타냅니다. 내 예에서는 다음을 추가하겠습니다.

본사
뉴욕시

이제 회사 위치의 이미지를 포함하도록 오른쪽 열의 이미지 모듈을 업데이트하십시오.

이것은 각각의 특정 위치 광고에 대한 좋은 섹션으로 사용됩니다.

이제 이 섹션을 복제하여 추가 위치를 추가하기만 하면 됩니다.

이 섹션을 두 번 복제하여 총 3개의 위치 섹션이 되도록 합니다. 그런 다음 중간 위치 섹션 배경색을 흰색으로 변경하여 섹션을 더 잘 분할할 수 있습니다.

그런 다음 위치별 콘텐츠로 복제된 섹션을 업데이트합니다. 이 예에서는 뉴욕 위치 외에 샌프란시스코 및 휴스턴에 대한 섹션도 생성하겠습니다.

문의 양식 바닥글 섹션 디자인

문의 양식이 포함된 하단에 저장한 섹션을 기억하십시오. 이것은 위치 페이지의 훌륭한 바닥글 섹션으로 사용됩니다. 우리가 해야 할 일은 약간 수정하는 것입니다.

먼저 오른쪽 열의 나머지 모듈을 삭제해 보겠습니다. 그런 다음 행 열 레이아웃을 하나의 열 레이아웃으로 업데이트합니다. 이제 한 열 행에 있는 문의 양식만 볼 수 있습니다.

다음을 클릭하여 행 설정을 편집하고 다음을 업데이트합니다.

콘텐츠 탭에서…

배경색: #ffffff

디자인 탭에서…

맞춤 패딩: 위쪽 5%, 오른쪽 5%, 아래쪽 5%, 왼쪽 5%

상자 그림자: [상자 그림자 선택]

이제 섹션의 배경 이미지를 추가해 보겠습니다. 섹션 설정으로 이동하여 레이아웃에 포함된 배경 이미지 중 하나를 선택합니다.

엄청난! 이제 지도 모듈로 이동합니다.

Google API 키 추가

이 시점에서 Google API 키를 만든 다음 테마 옵션에 추가해야 합니다.

새 위치 핀으로 지도 모듈 업데이트

이 시점에서 대부분의 페이지가 완성되었습니다. 남은 것은 페이지 상단의 지도 모듈에 대한 업데이트뿐입니다. 페이지 섹션(뉴욕시, 샌프란시스코, 휴스턴)에서 만든 세 섹션에 대한 새 핀 위치를 추가해야 합니다.

다음과 같이 맵 모듈을 편집하고 설정을 업데이트하려면 클릭하십시오.

새로 시작할 수 있도록 모듈에 표시된 핀 하나를 지우십시오. 그런 다음 새 핀을 추가하고 다음과 같이 설정을 업데이트합니다.

제목: 뉴욕 시티 베이커리
내용: 추가 정보
지도 핀 주소: 뉴욕시

찾기 버튼을 클릭합니다.

그런 다음 새 핀을 추가하고 다음과 같이 설정을 업데이트합니다.

제목: 샌프란시스코 베이커리
내용: 추가 정보
지도 핀 주소: 샌프란시스코

찾기 버튼을 클릭합니다.

그런 다음 새 핀을 추가하고 다음과 같이 설정을 업데이트합니다.

제목: 휴스턴 베이커리
내용: 추가 정보
지도 핀 주소: 휴스턴, 텍사스

찾기 버튼을 클릭합니다.

지도 센터 주소를 New York City로 남길 수 있습니다. 그러나 방문자가 처음 지도를 볼 때 모든 위치를 볼 수 있도록 충분히 멀리 축소하도록 지도 표시를 조정합니다.

고정 콘텐츠 상자에 앵커 링크 추가

추가 기능으로 핀을 클릭할 때 표시되는 핀 콘텐츠 내부에 앵커 링크를 추가하여 사용자 경험을 향상할 수 있습니다. 이 앵커 링크는 해당 위치의 정보를 보여주는 페이지의 특정 섹션으로 사용자를 페이지 아래로 안내합니다.

맵 모듈 설정을 연 다음 첫 번째 핀 설정을 편집합니다. "추가 정보"라는 내용 상자의 텍스트를 강조 표시한 다음 링크 아이콘을 클릭하여 링크로 만듭니다. URL에 "#newyork"를 입력하고 확인을 클릭합니다.

샌프란시스코 핀(URL "#sanfran" 사용)과 휴스턴 핀(URL "#houston" 사용)에 대해 동일한 작업을 수행합니다.

이제 핀에서 방금 생성한 링크 URL에 해당하는 각 섹션에 사용자 정의 CSS ID를 추가하기만 하면 됩니다.

"뉴욕시" 섹션의 경우 고급 탭의 섹션 설정을 CSS ID "newyork"로 업데이트하고 설정을 저장합니다.

이제 사용자가 New York 핀에서 "추가 정보" 링크(URL #newyork 포함)를 클릭하면 페이지가 해당 섹션으로 이동합니다.

San Francisco 섹션(CSS ID "sanfran" 사용) 및 Houston 섹션(CSS ID "houston" 사용)에 대해 동일한 작업을 수행합니다.

그게 다야 모두 완료되었습니다!