Divi 플러그인 하이라이트: Caldera Forms Style Customizer for Divi and Extra

Caldera Forms는 웹사이트의 스타일과 잘 어울립니다. Divi 및 Extra Theme Customizer의 친숙한 스타일 도구를 사용하여 스타일을 지정하고 싶다면? Divi 및 Extra용 Caldera Forms Style Customizer라는 타사 플러그인을 사용하여 이 작업을 수행할 수 있습니다.

Caldera Forms는 표준 Theme Customizer 옵션을 사용하여 스타일을 지정할 수 있지만 이러한 옵션은 테마 스타일을 지정합니다. 즉, 양식의 텍스트 스타일을 변경하면 웹사이트 본문의 스타일도 변경됩니다. 콘텐츠와 별도로 양식의 스타일을 지정하려면 일반적으로 CSS를 사용하여 손으로 스타일을 지정해야 합니다. Divi 및 Extra용 Caldera Forms Style Customizer는 Theme Customizer에 스타일 기능을 추가하여 이 문제를 해결합니다.

이 플러그인 하이라이트에서 우리는 Divi 및 Extra 플러그인을 위한 Caldera Forms Style Customizer를 살펴보고 그것이 얼마나 사용하기 쉬운지 알아볼 것입니다. 이 타사 플러그인은 Caldera Forms를 통해 구입할 수 있습니다. 이름에서 알 수 있듯이 Divi 및 Extra 모두에서 작동합니다.

설치 및 활성화

정상적으로 플러그인을 업로드하고 활성화합니다. 조정할 설정이 없습니다. 기능을 사용할 준비가 되었습니다.

양식 사용자 정의

기본 스타일이 모두 적용된 페이지에 기본 연락처 양식을 삽입했습니다. 이 양식을 한 번에 하나씩 조정하겠습니다. 그러면 우리는 한두 가지 예를 보게 될 것입니다.

새로운 스타일 기능이 테마 커스터마이저에 추가되었습니다. Theme Customizer (또는 Module Customizer – 둘 다 작동)를 열고 Caldera Forms Style Customizer를 클릭합니다.

텍스트, 버튼, 필드, 토글 스위치, 날짜 선택기, 이동 경로 등을 포함하여 양식의 모든 측면을 사용자 지정할 수 있는 20개의 새로운 사용자 지정 탭이 추가되었습니다. 각 설정을 살펴보겠습니다.

텍스트 필드

텍스트 필드는 텍스트, 자리 표시자 및 테두리의 색상은 물론 필드의 테두리 너비, 테두리 반경 및 한 줄 높이를 변경합니다.

텍스트 필드 호버

텍스트 필드 Hover는 텍스트, 필드 및 테두리 색상을 변경합니다.

텍스트 필드 포커스

텍스트 필드 포커스는 포커스가 있는 필드의 텍스트, 배경 및 테두리 색상을 변경합니다. 이 예에서 중앙의 필드에는 호버가 있지만 배경이 어두운 필드에는 포커스가 있습니다.

드롭다운 선택

드롭다운 선택은 배경, 텍스트, 화살표 및 테두리 색상을 사용자 지정합니다. 테두리 너비와 반경을 조정할 수도 있습니다.

드롭다운 선택 호버

드롭다운 선택 호버는 호버의 배경, 텍스트, 화살표 및 테두리 색상을 제어합니다.

체크박스와 라디오 버튼

확인란 및 라디오 버튼은 확인란 및 라디오 버튼에서 선택한 항목의 색상을 조정합니다.

토글 스위치

토글 스위치는 선택되지 않은 스위치와 선택한 스위치의 배경, 글꼴 및 테두리 색상을 개별적으로 조정합니다. 두 스위치의 테두리 너비와 반경을 함께 조정할 수도 있습니다.

토글 스위치 호버

Toggle Switches Hover는 선택한 스위치와 선택하지 않은 스위치의 배경, 글꼴 및 테두리 색상을 개별적으로 조정합니다. 이것은 선택되지 않은 스위치입니다.

파란색은 선택된 스위치입니다.

제출 버튼

제출 버튼은 배경, 글꼴, 테두리 색상, 테두리 반경, 버튼 너비 및 위치를 제어합니다. 글꼴 크기와 문자 간격을 조정할 수도 있습니다. 텍스트 변환 기능은 텍스트의 대소문자를 변경합니다. 소문자, 대문자, 대문자, 이니셜 또는 상속을 선택합니다.

제출 버튼 호버

제출 버튼 호버는 배경, 글꼴 및 테두리의 호버 색상을 제어합니다.

리셋 버튼

재설정 버튼은 배경, 글꼴 및 테두리 색상을 제어합니다. 또한 글꼴 크기 및 문자 간격, 버튼 너비, 버튼 위치, 테두리 너비 및 테두리 반경을 조정할 수 있습니다. 이것은 또한 텍스트 변환이 있습니다.

재설정 버튼 호버

Reset Button Hover는 배경, 텍스트 및 테두리의 버튼 색상을 조정합니다.

기타 버튼

Caldera에는 몇 가지 다른 유형의 버튼이 있습니다. 기타 버튼은 제출 및 재설정을 제외한 모든 것을 제어합니다. 글꼴, 테두리 및 배경의 색상을 조정하고 테두리 너비와 반경을 조정합니다. 이 예에서는 이전 및 다음 버튼을 만들었습니다.

기타 버튼 호버

기타 버튼 호버는 글꼴, 테두리 및 배경에 대한 호버 색상을 제어합니다.

날짜 선택기

날짜 선택기는 동일한 탭에 일반 색상과 마우스 오버 색상을 포함합니다. 글꼴과 배경의 색상을 조정합니다. 이 예에서는 10 위로 마우스를 가져갔고 12가 선택되었습니다.

파일 목록 업로드

파일 목록 업로드는 업로드되는 파일 목록 내의 배경 및 텍스트 색상을 제어합니다.

섹션 나누기

섹션 나누기는 섹션 나누기의 색상, 테두리 너비, 위쪽 및 아래쪽 여백을 제어합니다.

빵 부스러기

이동 경로를 사용하면 활성 페이지와 기타 링크, 구분 기호, 배경 및 테두리의 글꼴 색상을 선택할 수 있습니다. 테두리 너비와 반경을 조정합니다.

성공 알림

성공 경고는 글꼴, 배경 및 테두리 색상, 테두리 반경 및 너비를 조정합니다. 또한 상자 높이를 조정합니다.

여러 가지 잡다한

기타는 필수 아이콘의 색상, 오류 필드, 설명 텍스트, 신용 카드 색상 및 신용 카드 아이콘 위치에 대한 제어를 제공합니다. 설명 텍스트에는 글꼴 크기, 문자 간격 및 텍스트 변환 옵션이 포함됩니다. 저는 대문자를 선택했습니다.

예

이력서 업로드 양식을 만들고(사실 이것은 Caldera Forms에 내장되어 있지만 버튼을 눌러 선택했습니다) 모달로 설정했습니다. 먼저 Divi Builder로 페이지의 스타일을 지정하고 싶습니다.

배경 이미지를 추가하고 배경과 섞이지 않고 대비되는 색상을 선택했습니다.

이것은 다른 배경과 동일한 설정을 사용합니다. 이번에는 모달에서 양식을 사용하지 않았습니다. 흰색 배경 대신 양식 필드가 이미지 바로 위에 배치됩니다.

수입 수출

사용자 지정 도구에서 만든 Caldera Forms 스타일을 쉽게 가져오거나 내보낼 수 있습니다. 대시보드에서 Caldera Forms , Styles – Import/Export로 이동합니다 . 이렇게 하면 스타일을 JSON 파일로 가져오고 내보내므로 이 플러그인을 사용하는 모든 웹사이트에서 Caldera Form 스타일을 쉽게 사용할 수 있습니다. 가져온 파일의 스타일로 모든 스타일을 덮어씁니다.

라이선스 및 지원

플러그인은 1년 라이선스(연간 반복)로 구입할 수 있습니다. 라이센스를 통해 플러그인을 1개, 5개 또는 15개의 웹사이트(선택한 계층에 따라 다름)에서 사용할 수 있으며 1년의 지원 및 업데이트가 포함됩니다.

마지막 생각들

이 플러그인은 사용하기 쉽습니다. 커스터마이저 설정은 직관적입니다. 그것들은 레이블이 잘 붙어 있고 의미 있는 방식으로 배열되어 있습니다. 원하는 설정을 찾는 데 어려움이 없었습니다. 한 번에 기본 설정으로 돌아가거나 전역 조정(예: 모든 색상의 전체 어둡기 증가 또는 감소)을 수행하는 쉬운 방법을 보고 싶습니다. 그것은 아마도 현실적이지 않지만 흥미롭게 들립니다.

사용자 지정 설정으로 개별 양식의 스타일을 지정할 수 없습니다. 모든 양식은 전역 설정과 동일한 스타일을 사용하며 Caldera의 스타일 기능을 사용하여 개별적으로 스타일을 지정해야 합니다. 이것이 테마 커스터마이저의 특성입니다. 전 세계적으로 Caldera Forms의 스타일을 지정하는 데 관심이 있다면 Divi 및 Extra용 Caldera Forms Style Customizer를 사용하는 것보다 더 쉬운 방법은 없습니다.

우리는 당신의 의견을 듣고 싶습니다. Divi 및 Extra 플러그인용 Caldera Forms Style Customizer를 사용해 보셨습니까? 의견에 대해 어떻게 생각하는지 알려주십시오.

Irina Strelnikova/Shutterstock.com을 통한 주요 이미지