모든 웹사이트에는 연락처 섹션이 필요하지만 이것이 표준 디자인을 따라야 한다는 의미는 아닙니다. Divi의 스크롤 효과를 사용하면 눈에 띄는 플로팅 연락처 섹션을 만들 수 있습니다. 방문자가 귀하와 상호 작용하도록 초대하는 세로 스크롤 연락처 섹션 레이아웃으로 사용자 상호 작용을 향상시킵니다. 연락처 양식. 이 문서에서는 모든 페이지에 추가할 수 있는 전체 너비 부동 연락처 섹션을 만드는 방법을 보여줍니다. Divi Theme Builder를 사용하여 사이트 바닥글 상단에 추가할 수도 있습니다.
아래에서 자신의 Divi 라이브러리에 다운로드 할 JSON 레이아웃이 포함 된 무료 다운로드 파일을 찾을 수 있습니다. 또한 맵 배경을 다시 만드는 데 도움이되는 PSD 템플릿과 맵 핀 SVG를 포함하여 자신 만의 색상으로 사용자 정의 할 수 있습니다.
요소 구조 만들기
이 디자인에서는 보여주고 싶은 위치를 Google 지도에 표시하는 배경 이미지를 사용합니다. Photoshop 또는 다른 이미지 편집기를 사용하여 이 작업을 수행할 수 있습니다.
새 섹션 추가
이제 Divi Builder를 사용하여 부동 접점 섹션 생성을 시작할 때입니다! 가장 먼저 할 일은 새 페이지 또는 기존 페이지를 열고 새 섹션을 추가하는 것입니다.
콘텐츠 탭에서 Photoshop에서 만든 맵의 배경을 추가합니다.
- 배경 이미지 : 수정 된지도
간격
다음으로 디자인 탭에서 섹션 간격 설정을 사용자 지정합니다.
- 상한 및 하한 : 50vh
- 하단 패딩 : 0vw
시계
그런 다음 오버플로를 표시로 설정하십시오.
- 가로 및 세로 오버플로 : 표시
위치
마지막으로 섹션의 Z 인덱스를 10으로 설정합니다.
- Z 지수 : 10
새 행 추가
기둥 구조
이제 몇 가지를 추가 할 때입니다. 먼저 2 개의 열이있는 행을 추가합니다.
크기 조정
라인 매개 변수를 열고 다음과 같이 크기를 조정하십시오.
- 폭
- 사무실 : 90 %
- 태블릿 및 휴대 전화 : 80 %
- 최대 폭 : 90 %
시계
고급 탭을 클릭 한 다음 오버플로를 조정합니다.
- 가로 및 세로 오버플로 : 표시
위치
위치 설정을 수정하여 행 설정을 완료하십시오.
- 위치 : 상대
- 오프셋 원점 : 왼쪽 상단
- 수직 오프셋
- 데스크톱 : -8vw
열 1 설정
배경
모듈을 추가하기 전에 개별 열의 스타일을 지정해야합니다. 열 1에 배경색을 추가하십시오.
- 단색 : # 25274d
간격
다음 간격 설정을 조정하십시오.
- 상하 패딩
- 데스크톱 및 태블릿 : 7vw
- 좌우 패딩
- 데스크톱 : 3vw
- 태블릿 및 전화 : 6vw
경계
그런 다음 둥근 모서리를 테두리 설정에 추가하십시오.
- 둥근 모서리 : 네 모서리 모두 10px
스크롤 효과
마지막으로 스크롤 효과 설정에서 일부 세로 동작을 사용하십시오. 이것은 플로팅 효과를 만드는 데 도움이됩니다.
- 스크롤 변환 효과 : 수직 동작
- 수직 모션 / 데스크탑 세트
- 오프셋 시작 : 4
- 중간 오프셋 : 0 (50 %)
- 종료 오프셋 : -4
- 수직 모션 / 태블릿 및 전화 세트
- 오프셋 시작 : 4
- 중간 오프셋 : 0 (40 % 및 60 %)
- 끝 오프셋 : -3
- 트리거 모션 효과 : 요소 중간
열 2 설정
위치
이제 두 번째 열의 매개 변수로 이동하겠습니다. 그에 따라 위치 매개 변수를 조정하십시오.
- 위치 : 상대
- 오프셋의 원점 : 왼쪽 상단
- 수직 오프셋
- 사무실 : 25vw
스크롤 효과
또한이 열에 수직 이동을 추가합니다.
- 스크롤 변환 효과 : 수직 이동
- 수직 / 데스크탑 움직임 정의
- 시작 오프셋 : 2
- 평균 오프셋 : 0 (50 %)
- 끝 오프셋 : -2
- 수직 이동 / 태블릿 및 전화 정의
- 시작 오프셋 : 0
- 평균 오프셋 : 0 (50 %)
- 끝 오프셋 : -2
- 모션 효과 트리거 : 요소 상단
1 열에 텍스트 모듈 추가
내용
1 열의 텍스트 모듈부터 시작하여 모듈을 추가 할 시간입니다. 원하는 H2 콘텐츠를 추가합니다.
제목 텍스트
디자인 탭으로 이동하여 다음과 같이 H2 텍스트 스타일을 지정합니다.
- 타이틀 레벨 : H2
- 글꼴 : Palanquin Dark
- 글꼴 무게 : 굵게
- 글꼴 스타일 : TT
- 색상 : 노랑 # ffd868
- 허리
- 사무실 : 5vw
- 태블릿 : 10vw
- 전화 번호 : 12vw
- 글자 간격 : 4px
1 열에 문의 양식 모듈 추가
내용
텍스트 모듈 아래에 연락처 양식. 다음은 우리가 사용하는 필드입니다.
- 이름
- 이메일
- 자료
- 보내실 내용
스팸 보호
모듈의 스타일을 지정하기 전에 연락처 양식. 스팸 방지를 활성화하고 ReCaptcha 계정을 연결하세요.
- 스팸 방지 서비스 사용 : 예
- 서비스 제공 업체 : ReCaptcha
- 계정을 선택하십시오
분야
디자인 탭으로 전환하고 다음과 같이 필드 스타일을 지정합니다.
- 배경 색상 : Dark Blue # 25274d
- 텍스트 색상 : 밝은 회색 # d1d1d1
- 초점 배경 색상 : 진한 파란색 # 25274d
- 초점 텍스트 색상 : 밝은 회색 # d1d1d1
- 글꼴 : Palanquin
- 스타일 : TT
- 텍스트 크기
- 사무실 : 0.9vw
- 태블릿 : 2vw
- 전화 번호 : 3vw
- 글자 간격 : 1px
단추
그런 다음 단추를 양식화하십시오.
- 사용자 정의 스타일 : 예
- 텍스트 크기 : 20px
- 텍스트 색상 : 진한 파란색 # 25274d
- 배경 색상 : 노란색 # ffd868
- 테두리 반경 : 7px
- 아이콘 색상 : Dark Blue # 25274d
- 상단 여백 : 5px
크기 조정
그런 다음 크기 조정 매개 변수를 수정합니다.
- 너비 : 100 %
- 최대 폭 : 100 %
간격
상단 패딩도 추가 할 예정입니다.
- 상단 패딩 : 4vw
경계
경계 매개 변수를 사용자 정의하여 모듈 매개 변수를 완료하십시오.
- 모서리가 둥근 입구 : 네 모서리에 6px
- 출품작 테두리 스타일 : 네면 모두
- 입구 테두리 너비 : 2px
- 출품작 테두리 색상 : yellow # ffd868
2 열에 소셜 미디어 추적 모듈 추가
내용
2 열로 이동하여 소셜 미디어 모듈을 추가합니다. 필요한 모든 소셜 네트워크를 사용하십시오.
- 페이스북
- 트위터
- 링크드 인
선취 특권
스타일을 지정하기 전에 해당 네트워크에 대한 링크를 추가하십시오.
기사의 맥락
이제 첫 번째 소셜 네트워크를 열고 배경색을 변경하십시오.
- 색상 : 진한 파란색 # 25274d
요소 아이콘
같은 요소의 디자인 탭에서 다음과 같이 아이콘 설정을 변경합니다.
- 색상 : 노랑 # ffd868
- 아이콘 글꼴 크기
- 책상 및 태블릿 : 31px
- 전화 : 26 픽셀
아이템 간격
그런 다음 작은 여백을 추가하여 아이콘을 서로 분리하십시오.
- 오른쪽 여백 : 1vw
항목 스타일 복사 및 붙여 넣기
나머지 소셜 네트워크의 스타일을 지정하려면 기본 콘텐츠 창으로 돌아가 첫 번째 아이콘에서 요소 스타일을 복사합니다. 그런 다음 나머지 소셜 네트워크에 요소 스타일을 붙여 넣습니다.
조정
기본 디자인 탭으로 전환하고 모듈이 왼쪽 정렬되었는지 확인합니다.
- 모듈의 정렬 : 왼쪽
크기 조정
그런 다음 모듈의 크기를 조정하십시오.
- 너비 : 100 %
간격
또한 기본 채우기를 모두 지 웁니다.
- 상하 좌우 패딩 : 0vw
경계
마지막으로 테두리 설정에서 둥근 모서리를 추가합니다. 모든 아이콘의 테두리를 한 번에 조정합니다.
- 둥근 모서리
- 왼쪽 상단 및 오른쪽 : 7 픽셀
- 왼쪽 아래 및 오른쪽 : 0px
2 열에 텍스트 모듈 추가
내용
소셜 미디어 모듈 아래에 다른 텍스트 모듈을 추가하십시오. 원하는 콘텐츠를 추가하십시오. 두 개의 주소, 전화 번호와 이메일을 추가했습니다. 각 항목의 제목에 모두 대문자로 굵게 표시하십시오.
- 본사 : 1587 Sukhumvit Soi 21, 방콕, 태국.
- 판매 시점 : 엠포 리움 몰 2 층
- 전화 : (321) 564 2398
- 이메일 : [이메일 보호]
문맥
모듈의 배경색을 변경합니다.
- 색상 : 진한 파란색 # 25274d
텍스트
디자인 탭으로 전환하고 텍스트 스타일을 지정합니다.
- 글꼴 : Palanquin
- 색상 : 노랑 # ffd868
- 크기 : 18px
간격
또한 사용자 지정 간격 값을 추가합니다.
- 최고 마진
- 사무실 : -60px
- 태블릿 및 휴대 전화 : -50 픽셀
- 상하 좌우 패딩
- 사무실 : 3vw
- 태블릿 : 6vw
- 전화 번호 : 8vw
경계
그리고 테두리 설정에서 둥근 모서리를 추가하여 모듈을 완성합니다. 그게 다야!
- 둥근 모서리 : 오른쪽 위, 왼쪽 아래 및 오른쪽 아래에 10 픽셀.
측량
이제 부동 연락처 섹션을 다시 만들었으므로 다양한 화면 크기에서 결과를 마지막으로 살펴 봅니다.
추가 자료
멋지 능숙 방금 읽은 내용을 보완할 수 있습니다. 그것들은 추가로 사용해야 하거나 권한이 없는 사람들이 사용해야 합니다. 디비 테마.
완료하는 방법
새로운 Divi 스크롤 효과를 사용하면 모든 표준 레이아웃이 멋진 디자인으로 바뀝니다. 자신 만의 배경을 만들어 완성 된 디자인의 모양을 더 잘 제어 할 수 있습니다. 질문이나 제안이 있으시면 아래 댓글 섹션에 댓글을 남겨주세요!
