클릭 투 콜, 이메일, SMS 및 방향 링크가 있는 Divi 모바일 연락처 바를 만드는 방법

게시 됨: 2020-06-04

세상이 모바일 장치에 살고 있기 때문에 웹 사이트에서 모바일 경험을 활용하는 클릭 가능한 연락처 링크를 제공하는 것이 합리적입니다. 클릭 투 콜 링크와 같은 이러한 연락처 링크는 클릭 한 번으로 휴대폰에서 통화를 시작할 수 있습니다. 길찾기 링크와 같은 다른 사용자는 Google 지도에서 회사 주소로 가는 길찾기를 열 수 있습니다. 이들은 사용자에게 정말 편리하며 특정 비즈니스에서는 필수입니다.

이 튜토리얼에서는 Click-to-Call, 이메일, SMS 및 길찾기 링크를 사용하여 Divi 모바일 연락처 표시줄을 만드는 방법을 보여 드리겠습니다. 이를 위해 우리는 Divi 빌더를 사용하여 글로벌 바닥글의 바와 버튼을 디자인할 것입니다. 그런 다음 각 연락처 링크에 사용자 지정 URL을 추가하여 필요한 기능을 집으로 가져옵니다.

시작하자!

엿보기

다음은 이 튜토리얼에서 구축할 디자인을 간략하게 살펴보겠습니다.

divi 모바일 연락처 바

무료로 레이아웃 다운로드

이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

Divi 사이트에 고정 연락처 막대 템플릿 다운로드를 추가하는 방법

경고!: 이 템플릿을 추가하면 Divi 사이트의 기본 웹사이트 템플릿(있는 경우)이 무시됩니다. 라이브 사이트에서 아무 것도 망치지 않도록 이것을 테스트 사이트에 추가하는 것이 좋습니다.

고정 바닥글 막대 템플릿을 자신의 웹사이트로 가져오려면 다운로드 zip 파일의 압축을 풀어 JSON 파일에 액세스합니다.

그런 다음 WordPress 대시보드로 이동하여 Divi > 테마 빌더로 이동합니다.

그런 다음 페이지 오른쪽 상단의 이식성 아이콘을 클릭합니다.

이식성 팝업 내에서 방금 압축을 푼 JSON 파일을 선택하고 "가져오기 전에 백업 다운로드" 옵션을 선택합니다. 이전에 기본 웹사이트 템플릿에 재정의하고 싶지 않은 항목이 있는 경우를 대비하여.

그런 다음 가져오기 버튼을 클릭합니다.

divi 모바일 연락처 바

마지막으로 Theme Builder 변경 사항을 저장하고 라이브 페이지를 확인하여 고정된 바닥글 표시줄을 확인합니다.

divi 모바일 연락처 바

자, 튜토리얼로 들어가 볼까요?

1부: 전역 바닥글 만들기

이 튜토리얼에서는 Divi 테마 빌더를 사용하여 글로벌 바닥글에 모바일 연락처 막대를 추가할 것입니다. Divi > Theme Builder로 이동하여 시작합니다. 그런 다음 기본 웹 사이트 템플릿 내부의 전역 바닥글 영역을 클릭합니다. 드롭다운에서 전역 바닥글 작성을 선택합니다.

divi 모바일 연락처 바

참고: 이미 전역 바닥글이 있는 경우 전역 바닥글 편집을 열고 현재 바닥글에 연락처 막대를 추가할 수 있습니다.

"처음부터 빌드" 옵션을 선택합니다.

divi 모바일 연락처 바

2부: 고정 컨텐츠 막대 만들기

전역 바닥글 레이아웃 편집기 내에서 기본 섹션에 1열 행을 추가하여 디자인 프로세스를 시작합니다.

divi 모바일 연락처 바

섹션 설정

모듈 추가를 시작하기 전에 섹션 설정을 열고 다음과 같이 높이를 설정합니다.

높이: 80px

divi 모바일 연락처 바

이것은 고정된 행이 결국 멈추게 될 페이지 하단의 공간을 만드는 데 중요합니다. 또한 기본 상단 및 하단 패딩도 제거합니다.

패딩: 0px 상단, 0px 하단

divi 모바일 연락처 바

행 설정

섹션이 준비되었으므로 고정 접촉 막대 역할을 하도록 행을 사용자 정의할 준비가 되었습니다. 행에 대한 설정을 열고 다음을 업데이트합니다.

배경

배경색: #751136

divi 모바일 연락처 바

크기

거터 폭: 1
폭: 100%
최대 너비: 100%
키: 상속

행은 고정되지만 페이지 하단의 공간에 행이 적절하게 포함될 수 있도록 행의 높이가 부모 섹션의 높이와 일치하기를 원합니다. 이렇게 하려면 높이에 "inherit" 텍스트를 입력해야 합니다.

divi 모바일 연락처 바

간격

패딩: 위쪽 0px, 아래쪽 0px, 왼쪽 15%, 오른쪽 15%

divi 모바일 연락처 바

맞춤 CSS

우리는 행 안의 내용이 세로로 정렬된 상태를 유지하고 열이 모바일에서 깨지지 않도록 하고 싶습니다. 이렇게 하려면 행의 기본 요소에 다음 사용자 정의 CSS를 추가합니다.

display:flex;
flex-wrap:nowrap;
align-items:center;

divi 모바일 연락처 바

고정 포지셔닝

행이 화면 하단에 뜨도록 고정하려면 다음과 같이 왼쪽 하단 위치에 고정 위치를 지정해야 합니다.

위치: 고정
위치: 왼쪽 하단
Z 인덱스: 99999

divi 모바일 연락처 바

3부: 클릭 유도문안, 이메일, SMS 및 길찾기 링크 구축

이제 연락처 표시줄이 완성되었으므로 사용자 지정 URL과 함께 클릭 가능한 연락처 버튼을 추가할 준비가 되었습니다.

클릭 투 콜 버튼 디자인

우리가 만들 첫 번째 연락처 버튼은 클릭 투 콜 버튼입니다. 그것을 만들려면 열에 새 블러브 모듈을 추가하십시오.

divi 모바일 연락처 바

콘텐츠

콘텐츠 탭에서 다음과 같이 광고 문구에 제목과 아이콘을 추가합니다.

제목: 전화
아이콘 사용: 예
아이콘: 전화

divi 모바일 연락처 바

배경

흰색 배경색을 지정하십시오.

배경색: #ffffff

divi 모바일 연락처 바

디자인 설정

디자인 탭으로 이동하여 다음과 같이 설정을 업데이트합니다.

상

아이콘 색상: #751136
아이콘 글꼴 크기 사용: 예
아이콘 글꼴 크기: 2em

divi 모바일 연락처 바

제목 글꼴

타이트 글꼴 스타일: TT
제목 텍스트 정렬: 가운데
제목 텍스트 색상: #751136
제목 텍스트 크기: 1em

divi 모바일 연락처 바

본문 텍스트 크기

눈치채셨겠지만, 우리는 "em" 길이 단위를 사용하여 광고 요소의 크기를 조정했습니다. 이것은 본문 텍스트의 크기에 상대적입니다. 따라서 (본문 텍스트가 표시되지 않더라도) 광고문안 본문 텍스트의 크기를 조정하면 em 길이 단위로 모든 광고문안 요소의 크기가 조정됩니다. 이것은 각 요소를 개별적으로 조정할 필요 없이 앞으로 버튼의 크기를 변경할 수 있는 편리한 방법입니다.

다음과 같이 본문 텍스트를 업데이트합니다.

본문 텍스트 크기: 12px

divi 모바일 연락처 바

크기

다음과 같이 광고 문구에 높이와 너비를 설정합니다.

폭: 4.5em
모듈 정렬: 중앙
높이: 4.5em

divi 모바일 연락처 바

패딩 및 모서리

패딩: 0.5em 상단

divi 모바일 연락처 바

박스 섀도우

박스 섀도우: 스크린샷 참조
상자 그림자 수평 위치: 0px
상자 그림자 수직 위치: 2px
그림자 색상: rgba(255,255,255,0.55)

divi 모바일 연락처 바

맞춤 CSS

blurb 모듈의 내용을 세로 중앙에 맞추려면 다음 Custom CSS를 Main Element에 추가합니다.

display:flex;
align-items:center;

다음 Blurb 이미지를 추가하여 광고 아이콘 아래의 간격을 제거합니다.

margin-bottom: 0.3em;

divi 모바일 연락처 바

통화 링크 URL 추가

휴대폰에서 통화를 시작할 통화 링크 URL을 추가하려면 접두사 "tel:" 뒤에 번호를 추가합니다.

모듈 링크 URL: tel:555-555-5555

divi 모바일 연락처 바

이메일 버튼 디자인하기

이메일 버튼을 만들려면 전체 열을 복제하십시오.

divi 모바일 연락처 바

이메일 아이콘 및 링크 URL 추가

그런 다음 새 제목과 아이콘으로 2열의 중복 광고 문구를 업데이트합니다.

모바일 앱에서 이메일을 시작할 통화 링크 URL을 추가하려면 접두사 "mailto:" 뒤에 이메일 주소를 추가하세요.

모듈 링크 URL: mailto:[이메일 보호]

divi 모바일 연락처 바

SMS(문자 메시지) 버튼 디자인

SMS 버튼을 생성하려면 2열을 복제하십시오.

divi 모바일 연락처 바

SMS 아이콘 및 링크 URL 추가

그런 다음 새 제목과 아이콘으로 2열의 중복 광고 문구를 업데이트합니다.

모바일 앱에서 이메일을 시작할 통화 링크 URL을 추가하려면 접두사 "sms:" 뒤에 이메일 주소를 추가하세요.

모듈 링크 URL: SMS:+15555555555

divi 모바일 연락처 바

길찾기 버튼 디자인하기

SMS 버튼을 생성하려면 3열을 복제하십시오.

길찾기 아이콘 및 링크 URL 추가

그런 다음 새 제목과 아이콘으로 3열의 중복 광고 문구를 업데이트합니다.

Google 지도를 통해 길찾기를 시작하는 통화 링크 URL을 추가하려면 이러한 길찾기 URL 구조를 사용하세요.

이 튜토리얼에서는 사용자의 현재 위치에서 캘리포니아 마운틴뷰에 있는 GooglePlex까지의 길찾기 링크를 추가할 것입니다.

모듈 링크 URL:

https://www.google.com/maps/dir/?api=1&destination=1600+amphitheatre+pkwy+mountain+view+CA

divi 모바일 연락처 바

URL에 자신의 주소를 추가하려면 URL에서 "destination=" 뒤의 텍스트를 바꾸고 단어를 더하기("+") 기호로 구분해야 합니다.

divi 모바일 연락처 바

버튼을 클릭하면 다음과 유사한 내용이 표시됩니다...

divi 모바일 연락처 바

데스크탑에서 섹션 숨기기

연락처 막대가 모바일 장치에만 표시되기를 원하기 때문에 데스크톱에서 전체 섹션을 비활성화할 수 있습니다. 이렇게 하려면 섹션 설정을 열고 다음을 업데이트하십시오.

비활성화 켜기: 데스크탑

divi 모바일 연락처 바

최종 결과

divi 모바일 연락처 바

더 많은 연락처 링크

HTML5를 사용하면 전화번호로 제한되지 않습니다. 이메일, 메시징, 팩스 등과 같은 다른 클릭 유도문안을 추가할 수 있습니다. HTML5 프로토콜에는 다음이 포함됩니다.

전화: – 전화 걸기
mailto: – 이메일 앱 열기
통화: Skype를 엽니다.
sms: – 문자 메시지 보내기
팩스: – 팩스 보내기

원하는 경우 길찾기 URL에 대한 대상 Waze 링크를 추가할 수도 있습니다.

마지막 생각들

연락처 표시줄은 사용자가 모바일 장치에서 편리하게 연락할 수 있도록 하려는 모든 회사 웹사이트에 훌륭한 추가 기능인 것 같습니다. 링크 URL의 구조에 익숙해지면 원하는 모든 유형의 연락처 링크로 설정됩니다.

자세한 내용은 전화 링크에 대한 게시물을 확인하십시오.

댓글로 여러분의 의견을 기다리겠습니다.

건배!