X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X Master Addon의 양식 7 요소에 문의하세요 내 널리 사용되는 문의 양식 7 플러그인을 사용하여 생성된 양식을 통합하고 스타일을 지정하는 데 사용되는 특수 위젯입니다 엘리멘터 디자인. 이를 통해 Elementor 를 통해 강력한 시각적 사용자 정의를 얻는 동시에 CF7 의 강력한 기능을 활용할 수 있습니다.
문의 양식 7 요소를 사용하면 다음을 수행할 수 있습니다:
- 선택 드롭다운에서 기존 문의 양식 7 양식을 사용하세요.
- 여러개 중에서 선택 디자인 변형 (스타일 원 통해 스타일 일레븐).
- 의 가시성을 제어합니다 오류 메시지 그리고 검증 오류.
- 완전히 사용자 정의하십시오 양식 컨테이너, 입력 및 텍스트 영역 필드, 라벨, 그리고 제출 버튼 위한 보통의 그리고 호버 상태.
- 의 디스플레이를 스타일링합니다 오류 및 유효성 검사 메시지.
그럼 이 요소를 어떻게 추가하고 커스터마이징하는지 살펴보겠습니다.
Elementor의 문의 양식 7 위젯은 무엇입니까? #
Contact Form 7 Elementor 위젯은 Elementor 내부에 있는 기존 Contact Form 7 양식을 표시하고 디자인을 시각적으로 완벽하게 제어할 수 있는 Master Addons 요소입니다. CF7 이 양식 로직과 이메일 전달을 계속 처리하면서 컨테이너,입력 필드,라벨, 제출 버튼,Elementor 의 스타일 탭의 오류 메시지를 스타일링합니다. Master Addons 는 11 개의 디자인 사전 설정 (무료 플러그인의 경우 스타일 1~4,Pro 의 경우 스타일 5~11) 을 제공하므로 CSS 를 작성하지 않고도 사이트에 맞게 일반 CF7 양식의 스타일을 변경할 수 있습니다. 무료의 일부입니다 마스터 애드온 위젯 및 확장 라이브러리. CSS 및 Elementor Pro Form 위젯과의 개요 및 비교는 다음을 참조하세요 문의 양식 7 Elementor 위젯 페이지.
문의 양식 7 요소 추가 및 구성 #
Elementor에 스타일이 지정된 문의 양식 7 양식을 추가하려면: Elementor로 페이지를 편집하고 드래그하세요 문의 양식 7 캔버스에 위젯을 놓고 드롭다운에서 양식을 선택하고 디자인 변형(스타일 1~4는 무료)을 선택한 다음 컨테이너, 필드, 라벨을 미세 조정하고 제출 버튼을 입력하세요 스타일 탭. 아래의 단계는 각 부분을 자세히 걷습니다.
다음 단계에 따라 웹사이트의 모든 페이지에 문의 양식 7 요소를 추가하고 구성하세요.
1단계: 페이지를 만들거나 편집합니다 #
- WordPress 대시보드에서 다음으로 이동하세요 페이지 → 새로 추가 새 페이지를 만들려면. 기존 페이지를 선택하고 를 클릭할 수도 있습니다 편집.
- 다음으로 “를 클릭합니다Elementor 로 편집” 단추.
2 단계: 문의 양식 7 요소를 찾습니다 #
- 왼쪽 Elementor 패널에서 검색 창을 사용하여 “를 찾습니다문의 양식 7.”
- 페이지의 원하는 섹션에 추가 기능을 드래그 앤 드롭하세요.
3 단계: 문의 양식 7 설정을 사용자 정의합니다 #
애드온을 배치한 후 왼쪽 패널, 주로 패널 아래에 사용자 정의 섹션을 찾을 수 있습니다 콘텐츠 그리고 스타일 탭.
콘텐츠 탭 #
여기에서 양식을 선택하고 오류 가시성을 정의합니다.
문의 양식 7: #
- 문의 양식 선택: 드롭다운 목록에서 표시하려는 특정 문의 양식 7 양식을 선택하세요.
- 오류 스타일(오류 메시지/검증 오류): 여부를 선택합니다 쇼 또는 숨기기 개별 필드(오류 메시지) 및 양식 수준 유효성 검사 메시지(유효성 검사 오류) 아래의 공지입니다.
디자인 레이아웃: #
- 디자인 변형: 양식에 대해 미리 디자인된 스타일을 선택합니다(스타일 원 통해 스타일 일레븐).
스타일 탭 #
이것은 당신이 형태와 그 요소의 시각적 인 모습을 제어하는 곳입니다.
폼 컨테이너: #
- 배경 유형: 전체 양식 컨테이너의 배경 스타일 설정: 클래식 또는 그라데이션.
- 테두리 상단 색상: 컨테이너의 상단 테두리에 대한 색상을 설정합니다.
- 폼 너비(%) / 폼 패딩: 양식 컨테이너의 크기와 내부 간격을 제어합니다.
제목: #
- 색상/정렬/타이포그래피: 양식의 제목을 스타일링합니다(CF7 구조에 있는 경우).
입력 및 텍스트 영역: #
- 배경색/텍스트 색상: 모든 입력 및 텍스트 영역 필드의 배경 및 텍스트 색상을 설정합니다.
- 패딩: 필드의 내부 간격을 조정합니다.
- 필드 너비(%): 필드의 가로 크기를 설정합니다.
- 테두리 유형/테두리 반경: 입력 필드의 테두리 스타일과 둥근 모서리를 설정합니다.
라벨: #
- 색상/타이포그래피: 필드 레이블의 텍스트 색상과 글꼴 설정을 스타일 지정합니다.
제출 버튼: #
- 버튼 타이포그래피: 버튼 텍스트의 글꼴 설정을 제어합니다.
- 일반 / 호버: 두 상태 모두에서 버튼에 대해 다음을 설정합니다:
- 배경 유형
- 텍스트 색상
- 테두리 색상
- 테두리 반경/패딩: 버튼의 둥근 모서리와 내부 간격을 설정합니다.
오류: #
- 오류 메시지(필드 아래): 필수 필드 메시지와 같이 개별 필드 아래에 표시되는 공지를 스타일 지정합니다.
- 텍스트 색상 / 배경색 / 테두리 유형.
- 검증 오류(전체 양식): 제출이 유효성 검사에 실패할 때 표시되는 양식 수준 메시지의 스타일을 지정합니다.
- 배경색 / 텍스트색 / 테두리 유형.
4단계: 페이지를 저장하고 게시합니다 #
모든 것을 원하는 대로 맞춤 설정하면:
- “를 클릭합니다출판하다” 버튼 (새 페이지인 경우) 또는 “업데이트” (기존 페이지를 편집하는 경우).
- 양식 제출 및 프런트엔드의 오류 메시지를 테스트하여 모든 스타일이 올바르게 적용되었는지 확인합니다.
자주 묻는 질문 #
Elementor 에서 Contact Form 7 의 스타일을 어떻게 지정합니까?
마스터 애드온 연락처 양식 7 위젯을 Elementor 페이지에 추가하고 드롭다운에서 양식을 선택한 다음 스타일 탭을 엽니다. 거기에서 양식 컨테이너,입력 및 텍스트 영역 필드,라벨, 제출 버튼 및 오류 메시지를 다시 스타일링할 수 있습니다. 또한 디자인 사전 설정 (4 개는 무료,7 개는 Pro 와 함께 제공) 을 선택하여 수동 스타일링을 건너뛸 수도 있습니다.
Master Addons에서 Contact Form 7 위젯이 무료인가요?
예. Contact Form 7 위젯은 무료의 일부입니다 마스터 애드온 위젯 및 확장 라이브러리. 당신은 단지 무료 문의 양식 7 플러그인과 마스터 애드온 설치 및 활성; 아무 Elementor 프로가 필요하지 않습니다. 스타일 하나에서 스타일 네 무료이며,스타일 다섯에서 스타일 일레븐 마스터 애드온 프로가 필요합니다.
Master Addon에는 Contact Form 7 디자인 스타일이 몇 개 포함되어 있나요?
Master Addons 에는 Style One 에서 Style Eleven 까지 라벨이 붙은 11 가지 디자인 변형이 포함되어 있습니다. Style One 에서 Style Four 까지는 무료이며 Style Five 에서 Style Eleven 까지는 Master Addons Pro 가 필요합니다. 디자인 레이아웃 섹션에서 하나를 선택하여 즉시 완전한 모양을 적용한 다음 브랜드에 맞게 스타일 탭에서 색상,테두리 및 타이포그래피를 조정하십시오.
문의 양식 7 제출 버튼에 멋진 글꼴 아이콘을 추가할 수 있나요?
예. 이 위젯에 내장된 버튼 스타일링 외에도 방법에 대한 가이드를 따라 보내기 버튼에 아이콘을 추가할 수 있습니다 문의 양식 7 제출 버튼 안에 글꼴 멋진 아이콘을 적용합니다. 여기에서 설정한 Normal 및 Hover 버튼 스타일과 잘 어울립니다.
Elementor 에서 내 문의 양식 7 스타일이 표시되지 않는 이유는 무엇입니까?
이것은 거의 항상 캐싱 또는 플러그인 충돌입니다. 연락처 양식 7 과 마스터 애드온이 모두 활성 상태인지 확인하고,마스터 애드온 연락처 양식 7 위젯 (일반 CF7 단축 코드가 아님) 을 사용하고 있는지 확인한 다음 페이지 캐시와 하드 재로드를 제거하십시오. 자산을 린 상태로 유지하는 것도 도움이됩니다; 에 대한 팁을 참조하십시오 elementor 웹사이트의 속도를 높이세요.
