B2B 사이트의 핵심인 문의하기 양식과 UIcore/엘리멘터의 모바일 가독성 조절 방법입니다! 이 두 가지만 잘 설정해도 사이트의 완성도가 확 올라갑니다. 🙂
B2B 거래는 개인 거래와 다르기 때문에, 상담 전 상대방의 신원과 규모를 미리 파악하는 것이 중요합니다. 엘리멘터의 ‘Form’ 위젯에 다음 항목들을 추가해 보세요.
| 항목명 | 위젯 타입 | 이유 |
| 업체명 / 농장명 | Text | 어떤 규모의 비즈니스인지 파악하기 위함 (필수) |
| 담당자 성함 | Text | 상담 시 호칭을 위해 필요 (필수) |
| 연락처 | Tel | 빠른 상담 진행을 위해 가장 중요 (필수) |
| 이메일 | 견적서나 자료 전달용 | |
| 문의 축종 | Select (드롭다운) | 소, 돼지, 닭 등 관심 분야를 미리 파악 |
| 예상 주문량 | Text or Select | ‘월 10톤 미만’, ’50톤 이상’ 등 규모 확인 |
| 문의 내용 | Textarea | 구체적인 요청 사항 기록 |
| 개인정보수집동의 | Acceptance | 법적 필수 사항 (체크박스) |
💡 팁: 너무 많은 항목을 넣으면 문의를 포기할 수 있으니, 업체명, 이름, 연락처 정도만 필수(Required)로 설정하고 나머지는 선택사항으로 두는 것이 좋습니다.
2️⃣ 모바일 글자 크기 조절법 (엘리멘터 & UIcore)
PC에서는 예쁜데 모바일에서 글자가 너무 커서 깨진다면, 엘리멘터의 **’반응형 편집 모드’**를 활용해야 합니다.
방법 A: 엘리멘터 위젯에서 직접 조절
- 글자 크기를 줄이고 싶은 제목(Heading) 위젯을 클릭합니다.
- 왼쪽 설정창에서 [스타일(Style)] -> [타이포그래피(Typography)] 옆의 펜 아이콘을 누릅니다.
- ‘Size’ 글자 왼쪽에 있는 모니터 아이콘을 클릭하고 [모바일(Mobile)] 아이콘을 선택합니다.
- 모바일 화면을 보면서 바(Bar)를 움직여 적당한 크기(예: 24px~28px)로 줄입니다.
- 주의: 여기서 바꾸는 크기는 모바일 화면에만 적용됩니다!
방법 B: UIcore 테마 옵션에서 한 번에 조절
UIcore를 쓰고 계시다면 전체적인 규칙을 정할 수 있습니다.
- 워드프레스 관리자에서 **[Theme Options] -> [Typography]**로 이동합니다.
- H1, H2 등 각 태그별로 Responsive Settings 아이콘이 있습니다.
- 모바일 아이콘을 선택한 뒤, 기본 배율을 조금씩 낮춰주면 사이트 전체의 모바일 글꼴이 일괄적으로 보기 좋게 바뀝니다.
3️⃣ 추가 꿀팁: 모바일 여백(Padding)
글자 크기만큼 중요한 게 여백입니다. 모바일에서는 화면이 좁기 때문에 좌우 여백을 20px 정도로 줄여줘야 글자가 답답하게 갇히지 않습니다.
- **섹션 선택 -> [고급(Advanced)] -> [패딩(Padding)]**에서 모바일 아이콘을 누르고 좌우 여백을 조절해 보세요.
이제 문의 양식까지 갖춰지면 홈페이지가 제 역할을 할 준비가 끝납니다! 😊
혹시 다음 단계로 이런 게 궁금하신가요?
- “문의가 왔을 때 제 이메일로 알림이 오게 설정하는 법 알려드릴까요?”
- “사료 사진을 배경으로 넣을 때 글자가 잘 보이게 어둡게 만드는 법(Overlay) 알려드릴까요?”