생성하시겠습니까? 연락처 양식 끈적끈적한 디비에서?
Divi의 내장된 고정 옵션을 사용하면 몇 번의 클릭으로 페이지에 멋진 시각 효과를 만들 수 있습니다.
페이지의 모든 요소에 고정 효과를 적용할 수 있지만 이 튜토리얼에서는 연락처 양식 당신이 만든 모든 Divi 페이지에 붙어 있습니다.
또한 가이드를 읽어보십시오 DIVI에서 고정 글로벌 헤더를 만드는 방법
이 예에서는 스크롤할 이미지와 연락처 정보를 추가합니다. 연락처 양식 그 자리에 머물게 됩니다.
측량
다음은 우리가 디자인할 내용의 미리보기입니다. 모바일에서는 고정 효과를 적용하지 않습니다.
Divi 페이지에 고정 연락처 양식을 추가하는 방법
미리 정의된 레이아웃으로 새 페이지 만들기
Divi 라이브러리에서 미리 정의된 레이아웃을 사용하여 시작하겠습니다. 이 예에서는 연락처 페이지를 사용합니다. 미용 제품 레이아웃 팩 .
귀하의 페이지에 새 페이지를 추가하십시오. 사이트 웹 제목을 지정한 다음 'Divi Builder 사용' 옵션을 선택합니다.
이 예에서는 Divi 라이브러리에서 미리 만들어진 레이아웃을 사용할 것이므로 '레이아웃 선택'.
찾아 선택 연락처 페이지 레이아웃'의미용 제품'.
고르다 '레이아웃 선택' 페이지에 레이아웃을 추가합니다.
이제 튜토리얼을 계속할 준비가 되었습니다.
고정 연락처 양식 레이아웃 변경
이 자습서에서는 사용자가 오른쪽 열(1열)의 다른 콘텐츠 모듈을 스크롤하는 동안 왼쪽 열(2열)의 문의 양식이 고정 상태를 유지하기를 원합니다. 이렇게 하면 연락처 양식을 눈에 띄게 만드는 동적 스크롤 효과가 제공됩니다. 미리 정의된 템플릿을 수정하여 시작하겠습니다.
참조 : DIVI에서 슬라이딩 및 푸시 메뉴를 만드는 방법
새 섹션 만들기
페이지에 새 섹션을 추가합니다.
그런 다음 두 개의 열이 있는 새 행을 삽입합니다. 이 섹션은 페이지의 아무 곳에나 추가할 수 있습니다. 이 자습서를 진행하면서 다른 섹션은 결국 제거됩니다.
섹션 설정을 열고 레이아웃 디자인과 일치하도록 배경색을 변경합니다.
- 배경: #EEE8E2
열 1에 고정 모듈 추가
열 1에 연락처 양식 모듈을 추가합니다. 이 자습서를 따르고 있거나 페이지에 이미 연락처 양식이 있는 경우 모듈 '연락처 양식' 열 1에 존재합니다.
텍스트 모듈 이동 연락처 이 섹션의 맨 위에 있습니다. 끈적거리기도 합니다. 레이아웃 스타일과 일치하도록 텍스트 설정에 흰색 테두리를 추가합니다.
- 테두리 너비: 20px
- 테두리 색상: #FFFFFF
원본 레이아웃에는 텍스트와 테두리 사이에 여백이 포함되어 있지만 작은 화면에서는 연락처 양식의 아래쪽이 잘리기 때문에 건너뜁니다.
2열에 스크롤 모듈 추가
2열에서 모든 스크롤 모듈을 추가합니다. 우리의 경우 두 개의 이미지 모듈, 연락처 정보 및 위치 정보를 열 2로 이동합니다. 모듈을 새 섹션으로 이동한 후에는 나머지 빈 섹션을 삭제할 수 있습니다.
팁: 여러 모듈을 동시에 이동해야 하는 경우 ' 키를 길게 누릅니다.할 수있다' 키보드에서 이동하려는 모듈을 선택합니다. 모듈 이동 기능을 사용하여 모든 모듈을 동시에 이동합니다.
우리가 선택한 레이아웃의 큰 오프셋 이미지는 가로 스크롤 문제를 일으킬 수 있습니다. 이 문제를 해결하기 위해 일부 설정을 변경해 보겠습니다.
읽기 : DIVI에서 로그인 양식으로 전역 헤더를 만드는 방법
섹션 설정을 엽니다. 아래에 고급, 가시성으로 이동한 다음 수평 및 수직 오버플로 설정을 업데이트합니다.
- 수평 오버플로: 숨김
- 수직 오버플로: 숨김
이제 페이지는 열 1에 고정 콘텐츠가 있고 열 2에 스크롤 콘텐츠가 있는 다음과 같이 표시되어야 합니다.
연락처 양식을 고정으로 만드는 마지막 단계를 수행할 준비가 되었습니다.
연락처 양식을 고정으로 만들기
레이아웃이 준비되면 연락처 양식에 고정 설정을 활성화할 수 있습니다. 고르다 '행 설정'를 선택한 다음 1열 설정을 선택합니다.
고급 탭에서 '스크롤 효과'로 이동합니다. 여기에서 고정 매개변수를 설정할 것입니다.
- 고정 위치: 상단에 고정
- 스틱 상단 오프셋: 15px
- 하단 고정 한계: 라인
그리고 그게 다야! 이제 열 1에 고정 설정을 추가하여 페이지를 아래로 스크롤할 때 연락처 양식과 제목을 고정합니다. 문의 양식 옆에 2열 스크롤의 내용이 표시되어야 합니다.
최종 결과
이제 작동 중인 고정 연락처 양식을 살펴보겠습니다.
지금 DIVI를 다운로드하세요!!!
결론
그래서 ! 이것이 이 기사의 전부입니다. Divi의 고정 설정은 연락처 양식 또는 페이지의 다른 요소의 모양을 개선하는 쉬운 방법입니다. 모든 섹션, 행 또는 모듈에 고정 설정을 적용하여 사이트 웹 어려운.
Divi의 고정 기능으로 할 수 있는 작업에 대해 자세히 알아보려면 자습서를 확인하세요. 예를 들어 에 대한 자습서를 참조할 수 있습니다. 글로벌 헤더에 연락처 양식을 추가하는 방법.
상담도 가능합니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
