Divi 플러그인 하이라이트 – Gravity Divi 모듈

Gravity Forms는 WordPress에서 가장 널리 사용되는 양식 플러그인 중 하나입니다. 단축 코드를 사용하여 Divi와 호환되지만 Divi 모듈에서 가능한 것을 최대한 활용하지 못합니다. 다행히 Gravity Divi Module이라는 타사 플러그인을 사용할 수 있어 Divi Builder에 Gravity Forms를 추가할 수 있습니다.

Gravity Divi Module은 Gravity Forms를 Divi 및 Extra 레이아웃으로 완전히 통합하는 CodeCraters의 타사 플러그인입니다. Divi 모듈 사용자 정의를 사용하여 양식의 스타일을 지정할 수 있습니다. 이 플러그인 하이라이트에서는 모듈이 무엇을 할 수 있는지 살펴보겠습니다. 샘플의 경우 Gravity Forms에서 제공하는 템플릿과 Unsplash.com의 이미지를 사용하고 있습니다.

Gravity Forms에 대한 자세한 내용은 다음의 우아한 테마 문서를 참조하십시오.

• Gravity Forms – Personal Edition 자세히 살펴보기
• Divi처럼 보이도록 Gravity Forms 스타일을 지정하는 방법(+ Bonus Look!)

Gravity Divi 모듈 설치 및 설정

먼저 이 플러그인을 사용하기 위해서는 Gravity Forms가 설치되어 있어야 합니다. Gravity Forms가 설치되면 Gravity Divi Module 플러그인을 업로드하고 활성화하십시오. 플러그인이 활성화되면 Gravity Divi라는 Divi Builder에 새 모듈이 추가됩니다. 설정이 필요하지 않습니다.

내용 설정을 사용하면 양식을 선택하고, 양식의 제목을 표시하고, 설명을 표시하고, AJAX를 활성화하고, 텍스트 색상을 선택하고, 배경을 조정할 수 있습니다.

디자인 설정에는 양식 제목, 설명, 요소 및 텍스트 자체에 대한 텍스트 조정이 포함됩니다. 여백과 패딩, 버튼 스타일을 위한 간격도 포함됩니다. 이러한 설정은 텍스트 모듈에서 Gravity Forms 단축 코드를 사용하는 것보다 더 많은 제어를 제공합니다. 고급 설정에는 양식 필드의 시작 탭을 지정할 수 있는 탭 색인이 포함됩니다.

드롭다운 상자에서 양식을 선택합니다. Divi 페이지를 생성할 때 아직 양식을 생성하지 않았다면, Choose Gravity Form 아래의 콘텐츠 설정에서 링크를 클릭하여 생성할 수 있습니다. 양식을 생성하면 이 드롭다운 상자에 나타납니다.

조정

기본 스타일을 사용하는 고급 문의 양식입니다. Divi 스타일과 잘 어울립니다. 조정하는 것은 쉽습니다.

다음은 몇 가지 기본 사용자 정의를 살펴보겠습니다. 헤더 텍스트의 글꼴 크기를 늘리고 모든 글꼴의 색상을 변경하고 어두운 오버레이가 있는 배경 이미지를 추가하고 패딩을 추가했습니다.

이 예에서는 양식 제목을 비활성화했습니다.

여기서는 드롭다운 상자에서 새 양식을 선택했습니다. 이러한 조정이 모듈에서 수행되었기 때문에 글꼴 및 배경에 대한 설정을 유지합니다. 간단한 설명이 포함된 빠른 샘플입니다. 양식 제목을 비활성화하고 설명을 활성화했습니다.

Divi 레이아웃 예제의 Gravity Divi 모듈

Gravity Module의 가장 큰 장점은 모듈 설정이 있는 Divi Builder입니다. 즉, Gravity Forms에서 사용하던 모듈 설정을 사용할 수 있습니다. 다음은 Divi 레이아웃 내의 몇 가지 예입니다.

개인 모듈 레이아웃의 고급 연락처 양식

배경 이미지가 있는 간단한 레이아웃에 통합된 고급 문의 양식입니다. 양식이 페이지 디자인과 섞일 수 있도록 텍스트를 밝게 변경하고 제목 글꼴 크기를 40으로 늘리고 양식 요소 텍스트를 빨간색으로 변경했습니다.

배경 이미지가 Gravity 모듈로 확장되도록 모듈의 행을 Person 모듈과 동일한 섹션에 배치했습니다. 양식은 페이지 하단에 양식을 첨부한 것처럼 보이지 않고 페이지 디자인에 맞습니다.

가입 레이아웃

이 예는 대학 및 전문대학을 위한 무료 홈페이지 레이아웃의 일부 레이아웃 요소를 사용합니다.

Gravity 모듈은 텍스트 모듈이 있는 2/3, 1/3 레이아웃 내에 배치됩니다.

사용자가 다음을 클릭할 때 다중 페이지 양식이 페이지를 다시 로드하지 않도록 양식 제목과 AJAX를 활성화했습니다. 양식 제목 글꼴은 30%로 설정됩니다. 레이아웃의 스타일에 잘 맞습니다. 다른 변경 사항은 필요하지 않았습니다.

결혼식 회신

이것은 사진과 조화를 이루는 부드러운 색상과 우아한 글꼴을 사용합니다(이 이미지에서는 보기 어려울 수 있습니다. 저는 일반적으로 더 높은 대비를 사용하지만 결혼식 웹사이트에서는 부드러운 대비를 선호합니다). 색상은 사진 자체에서 가져온 다음 가독성을 높이기 위해 어두워집니다.

이 레이아웃은 섹션에 배경이 있는 단일 모듈입니다. 나는 모든 글꼴을 Tangerine으로 변경하고 글꼴 크기를 늘리고 굵게 만들고 이미지 내 색상에 따라 색상을 황갈색 또는 빨간색으로 조정했습니다.

피자 주문서

이 예에서는 Gravity Forms에서 Build Pizza 양식 템플릿을 사용합니다.

이 레이아웃은 Gravity 모듈과 여러 이미지 모듈이 있는 1/3, 2/3 레이아웃을 사용합니다. 섹션에 배경을 추가하고 패딩이 있는 행에 오버레이를 추가하여 모든 것이 디자인된 공간에 맞도록 했습니다.

텍스트를 Light로 설정하고 글꼴을 Arimo로 변경했으며 각 양식 요소의 글꼴 크기를 개별적으로 조정했습니다.

버튼 텍스트와 테두리를 흰색으로 설정하고 버튼 테두리 반경을 30으로 조정했습니다.

사람 모듈 레이아웃의 고급 연락처 양식이 있는 추가 테마

Gravity Module은 Extra와도 호환됩니다. 다음은 Extra가 포함된 첫 번째 예(Person Module Layout의 고급 연락처 양식)를 살펴보겠습니다. Extra의 페이지에는 전각 페이지 템플릿을 사용하고 있습니다. Divi 페이지와 동일하게 보입니다.

내가 만든 유일한 변경은 버튼 스타일입니다. 파란색 버튼은 잘 섞이지 않았고 흰색 텍스트는 파란색 배경에 잘 어울립니다.

라이선스 및 지원

플러그인은 무제한 라이센스와 함께 제공되므로 귀하와 귀하의 클라이언트 모두를 위해 원하는 만큼 많은 웹사이트에 플러그인을 설치할 수 있습니다. 여기에는 평생 업데이트와 6개월 지원도 포함됩니다.

Gravity Divi Module은 개발자 상점에서 구입할 수 있습니다.

마지막 생각들

Gravity Divi 모듈은 Divi 레이아웃 내에서 Gravity Forms를 통합하는 훌륭한 방법을 제공합니다. Gravity Forms 단축 코드를 사용하는 것보다 더 많은 기능을 추가합니다. Gravity Forms의 모든 장점은 Divi Builder와 이미지, 오버레이 및 그라디언트, 글꼴 및 버튼 설정, 패딩 등과 같은 배경 설정을 포함하는 모듈의 설정에 의해 향상됩니다.

Divi Builder와 함께 Gravity Forms를 사용하는 데 관심이 있다면 Gravity Divi Module이 필요한 솔루션일 수 있습니다.

이제 당신의 차례입니다. Gravity Divi 모듈을 사용해 보셨습니까? 아래 의견에 어떻게 생각하는지 알려주십시오.

Bloomicon/Shutterstock.com을 통한 추천 이미지