주요 내용으로 건너 뛰기

Divi에서 스크롤 효과가있는 플로팅 접촉 섹션 만들기

Divi : 사용하기 가장 쉬운 WordPress 테마

Elementor로 웹 사이트를 쉽게 만들 수 있습니다

Elementor를 사용하면 전문적인 모양으로 웹 사이트 디자인을 쉽게 만들 수 있습니다. 자신이 할 수있는 일에 대해 비용을 지불하지 마십시오. [무료]

모든 웹 사이트에는 연락처 섹션이 필요하지만 표준 디자인을 사용해야한다는 의미는 아닙니다. Divi의 스크롤 효과를 사용하면 눈에 띄는 부동 접점 섹션을 만들 수 있습니다. 방문자가 연락처 양식과 상호 작용하도록 초대하는 수직 스크롤 연락처 섹션 레이아웃으로 사용자 상호 작용을 개선합니다. 이 기사에서는 모든 페이지에 추가 할 수있는 전폭 부동 접점 섹션을 만드는 방법을 보여줍니다. Divi Theme Builder를 사용하여 사이트 전체 바닥 글 상단에 추가 할 수도 있습니다.

아래에서 자신의 Divi 라이브러리에 다운로드 할 JSON 레이아웃이 포함 된 무료 다운로드 파일을 찾을 수 있습니다. 또한 맵 배경을 다시 만드는 데 도움이되는 PSD 템플릿과 맵 핀 SVG를 포함하여 자신 만의 색상으로 사용자 정의 할 수 있습니다.

요소 구조 만들기

이 디자인에서는 강조하려는 위치를 Google지도에 표시하는 배경 이미지를 사용할 것입니다. Photoshop 또는 다른 이미지 편집기를 사용하여이 작업을 수행 할 수 있습니다.

새 섹션 추가

이제 Divi Builder를 사용하여 부동 접점 섹션 생성을 시작할 때입니다! 가장 먼저 할 일은 새 페이지 또는 기존 페이지를 열고 새 섹션을 추가하는 것입니다.

콘텐츠 탭에서 Photoshop에서 만든 맵의 배경을 추가합니다.

  • 배경 이미지 : 수정 된지도
Divi 배경 이미지

간격

다음으로 디자인 탭에서 섹션 간격 설정을 사용자 지정합니다.

  • 상한 및 하한 : 50vh
  • 하단 패딩 : 0vw
Divi 1 섹션 간격 구성

시계

그런 다음 오버플로를 표시로 설정하십시오.

  • 가로 및 세로 오버플로 : 표시
플로팅 접점 섹션

위치

마지막으로 섹션의 Z 인덱스를 10으로 설정합니다.

  • Z 지수 : 10
Divi 섹션 위치

새 행 추가

기둥 구조

이제 몇 가지를 추가 할 때입니다. 먼저 2 개의 열이있는 행을 추가합니다.

행에 두 개의 열이 있습니다.

크기 조정

라인 매개 변수를 열고 다음과 같이 크기를 조정하십시오.

    • 사무실 : 90 %
    • 태블릿 및 휴대 전화 : 80 %
  • 최대 폭 : 90 %
Divi 라인 매개 변수

시계

고급 탭을 클릭 한 다음 오버플로를 조정합니다.

  • 가로 및 세로 오버플로 : 표시
Divi 라인 오버 플로우 구성

위치

위치 설정을 수정하여 행 설정을 완료하십시오.

  • 위치 : 상대
  • 오프셋 원점 : 왼쪽 상단
  • 수직 오프셋
    • 데스크톱 : -8vw
divi 라인 위치 구성

열 1 설정

배경

모듈을 추가하기 전에 개별 열의 스타일을 지정해야합니다. 열 1에 배경색을 추가하십시오.

Divi : 모든 시간의 최고의 WordPress 테마!

901.000 다운로드Divi는 세계에서 가장 인기있는 WordPress 테마입니다. 그것은 완전하고, 사용하기 쉽고 62 무료 템플릿 이상을 제공합니다. [추천]

  • 단색 : # 25274d
열 색상 1 divi

간격

다음 간격 설정을 조정하십시오.

  • 상하 패딩
    • 데스크톱 및 태블릿 : 7vw
  • 좌우 패딩
    • 데스크톱 : 3vw
    • 태블릿 및 전화 : 6vw
두 개의 열 섹션 간격 구성

경계

그런 다음 둥근 모서리를 테두리 설정에 추가하십시오.

  • 둥근 모서리 : 네 모서리 모두 10px
둥근 모서리 divi 섹션

스크롤 효과

마지막으로 스크롤 효과 설정에서 일부 세로 동작을 사용하십시오. 이것은 플로팅 효과를 만드는 데 도움이됩니다.

  • 스크롤 변환 효과 : 수직 동작
  • 수직 모션 / 데스크탑 세트
    • 오프셋 시작 : 4
    • 중간 오프셋 : 0 (50 %)
    • 종료 오프셋 : -4
  • 수직 모션 / 태블릿 및 전화 세트
    • 오프셋 시작 : 4
    • 중간 오프셋 : 0 (40 % 및 60 %)
    • 끝 오프셋 : -3
  • 트리거 모션 효과 : 요소 중간
divi 섹션 스크롤 효과 사용자 지정

열 2 설정

위치

이제 두 번째 열의 매개 변수로 이동하겠습니다. 그에 따라 위치 매개 변수를 조정하십시오.

  • 위치 : 상대
  • 오프셋의 원점 : 왼쪽 상단
  • 수직 오프셋
    • 사무실 : 25vw
Divi 열 사용자 정의

스크롤 효과

또한이 열에 수직 이동을 추가합니다.

  • 스크롤 변환 효과 : 수직 이동
  • 수직 / 데스크탑 움직임 정의
    • 시작 오프셋 : 2
    • 평균 오프셋 : 0 (50 %)
    • 끝 오프셋 : -2
  • 수직 이동 / 태블릿 및 전화 정의
    • 시작 오프셋 : 0
    • 평균 오프셋 : 0 (50 %)
    • 끝 오프셋 : -2
  • 모션 효과 트리거 : 요소 상단
Divi 스크롤 효과

1 열에 텍스트 모듈 추가

내용

1 열의 텍스트 모듈부터 시작하여 모듈을 추가 할 시간입니다. 원하는 H2 콘텐츠를 추가합니다.

열 1 콘텐츠 모듈

제목 텍스트

디자인 탭으로 이동하여 다음과 같이 H2 텍스트 스타일을 지정합니다.

  • 타이틀 레벨 : H2
  • 글꼴 : Palanquin Dark
  • 글꼴 무게 : 굵게
  • 글꼴 스타일 : TT
  • 색상 : 노랑 # ffd868
  • 허리
    • 사무실 : 5vw
    • 태블릿 : 10vw
    • 전화 번호 : 12vw
  • 글자 간격 : 4px
상단의 Divi 글꼴 사용자 정의

1 열에 문의 양식 모듈 추가

내용

텍스트 모듈 아래에 문의 양식을 추가하십시오. 다음은 우리가 사용하는 필드입니다.

  • 이름
  • 이메일
  • 자료
  • 메시지
divi 문의 양식 추가

스팸 보호

연락처 양식 모듈의 스타일을 지정하기 전에. 스팸 방지를 활성화하고 ReCaptcha 계정을 연결하십시오.

  • 스팸 방지 서비스 사용 : 예
  • 서비스 제공 업체 : ReCaptcha
  • 계정을 선택하십시오
Divi 연락처 양식 스팸 보호

분야

디자인 탭으로 전환하고 다음과 같이 필드 스타일을 지정합니다.

  • 배경 색상 : Dark Blue # 25274d
  • 텍스트 색상 : 밝은 회색 # d1d1d1
  • 초점 배경 색상 : 진한 파란색 # 25274d
  • 초점 텍스트 색상 : 밝은 회색 # d1d1d1
  • 글꼴 : Palanquin
  • 스타일 : TT
  • 텍스트 크기
    • 사무실 : 0.9vw
    • 태블릿 : 2vw
    • 전화 번호 : 3vw
  • 글자 간격 : 1px
색상 필드 사용자 지정 1

단추

그런 다음 단추를 양식화하십시오.

  • 사용자 정의 스타일 : 예
  • 텍스트 크기 : 20px
  • 텍스트 색상 : 진한 파란색 # 25274d
  • 배경 색상 : 노란색 # ffd868
  • 테두리 반경 : 7px
  • 아이콘 색상 : Dark Blue # 25274d
  • 상단 여백 : 5px
divi 버튼 스타일 사용자 지정 1
Divi 버튼 색상 구성

크기 조정

그런 다음 크기 조정 매개 변수를 수정합니다.

  • 너비 : 100 %
  • 최대 폭 : 100 %
Divi 사이징 구성

간격

상단 패딩도 추가 할 예정입니다.

최고의 WordPress 테마 및 플러그인을 찾고 계십니까?

Envato에서 최고의 플러그인과 WordPress 테마를 다운로드하고 쉽게 웹 사이트를 만드십시오. 이미 49.720.000 다운로드 이상. [EXCLUSIVE]

  • 상단 패딩 : 4vw
Divi 간격

경계

경계 매개 변수를 사용자 정의하여 모듈 매개 변수를 완료하십시오.

  • 모서리가 둥근 입구 : 네 모서리에 6px
  • 출품작 테두리 스타일 : 네면 모두
  • 입구 테두리 너비 : 2px
  • 출품작 테두리 색상 : yellow # ffd868
Divi 테두리 구성

2 열에 소셜 미디어 추적 모듈 추가

내용

2 열로 이동하여 소셜 미디어 모듈을 추가합니다. 필요한 모든 소셜 네트워크를 사용하십시오.

  • Facebook
  • Twitter
  • 링크드 인
모듈은 소셜 네트워크에서 우리를 따르십시오

선취 특권

스타일을 지정하기 전에 해당 네트워크에 대한 링크를 추가하십시오.

기사의 맥락

이제 첫 번째 소셜 네트워크를 열고 배경색을 변경하십시오.

  • 색상 : 진한 파란색 # 25274d
divi 1 배경 수정

요소 아이콘

같은 요소의 디자인 탭에서 다음과 같이 아이콘 설정을 변경합니다.

  • 색상 : 노랑 # ffd868
  • 아이콘 글꼴 크기
    • 책상 및 태블릿 : 31px
    • 전화 : 26 픽셀
색상 divi 사용자 지정

아이템 간격

그런 다음 작은 여백을 추가하여 아이콘을 서로 분리하십시오.

  • 오른쪽 여백 : 1vw
소셜 공유 간격 구성

항목 스타일 복사 및 붙여 넣기

나머지 소셜 네트워크의 스타일을 지정하려면 기본 콘텐츠 창으로 돌아가 첫 번째 아이콘에서 요소 스타일을 복사합니다. 그런 다음 나머지 소셜 네트워크에 요소 스타일을 붙여 넣습니다.

스타일 요소 복사
스타일 요소 divi 붙여 넣기

조정

기본 디자인 탭으로 전환하고 모듈이 왼쪽 정렬되었는지 확인합니다.

  • 모듈의 정렬 : 왼쪽
정렬 선택

크기 조정

그런 다음 모듈의 크기를 조정하십시오.

  • 너비 : 100 %
분할 크기 구성

간격

또한 기본 채우기를 모두 지 웁니다.

  • 상하 좌우 패딩 : 0vw
divi 간격 구성

경계

마지막으로 테두리 설정에서 둥근 모서리를 추가합니다. 모든 아이콘의 테두리를 한 번에 조정합니다.

  • 둥근 모서리
    • 왼쪽 상단 및 오른쪽 : 7 픽셀
    • 왼쪽 아래 및 오른쪽 : 0px
Divi 모듈 테두리 구성

2 열에 텍스트 모듈 추가

내용

소셜 미디어 모듈 아래에 다른 텍스트 모듈을 추가하십시오. 원하는 콘텐츠를 추가하십시오. 두 개의 주소, 전화 번호와 이메일을 추가했습니다. 각 항목의 제목에 모두 대문자로 굵게 표시하십시오.

  • 본사 : 1587 Sukhumvit Soi 21, 방콕, 태국.
  • 판매 시점 : 엠포 리움 몰 2 층
  • 전화 : (321) 564 2398
  • 이메일 : [이메일 보호]
Divi 텍스트 모듈 주소 구성

문맥

모듈의 배경색을 변경합니다.

  • 색상 : 진한 파란색 # 25274d
텍스트 모듈 배경 구성

텍스트

디자인 탭으로 전환하고 텍스트 스타일을 지정합니다.

온라인 상점을 쉽게 만들 수 있습니다.

무료 WooCommerce를 다운로드하십시오. 전자 상거래 플러그인은 WordPress에서 실제 제품과 디지털 제품을 판매하는 플러그인입니다. [추천]

  • 글꼴 : Palanquin
  • 색상 : 노랑 # ffd868
  • 크기 : 18px
Divi 모듈 텍스트 글꼴

간격

또한 사용자 지정 간격 값을 추가합니다.

  • 최고 마진
    • 사무실 : -60px
    • 태블릿 및 휴대 전화 : -50 픽셀
  • 상하 좌우 패딩
    • 사무실 : 3vw
    • 태블릿 : 6vw
    • 전화 번호 : 8vw
Divi 간격 여백

경계

그리고 테두리 설정에서 둥근 모서리를 추가하여 모듈을 완성합니다. 그게 다야!

  • 둥근 모서리 : 오른쪽 위, 왼쪽 아래 및 오른쪽 아래에 10 픽셀.
둥근 테두리 divi 텍스트 모듈

측량

이제 부동 연락처 섹션을 다시 만들었으므로 다양한 화면 크기에서 결과를 마지막으로 살펴 봅니다.

플로팅 접점 섹션

추가 자료

이 자료는 방금 읽은 내용을 보완 할 수 있습니다. 추가로 또는 Divi 테마가없는 사용자가 사용할 수 있습니다.

완료하는 방법

새로운 Divi 스크롤 효과를 사용하면 모든 표준 레이아웃이 멋진 디자인으로 바뀝니다. 자신 만의 배경을 만들어 완성 된 디자인의 모양을 더 잘 제어 할 수 있습니다. 질문이나 제안이 있으시면 아래 댓글 섹션에 댓글을 남겨주세요!

이 문서에는 메모의 0을 포함

코멘트를 남겨주세요

귀하의 이메일 주소는 공개되지 않습니다. 필수 필드는 표시됩니다 *

이 사이트는 원하지 않는 것을 줄이기 위해 Akismet을 사용합니다. 댓글 데이터 사용 방법에 대해 자세히 알아보기.

맨 위로
0 주식
짹짹
레지스터