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