좋아요, 그럼 UIcore + 스켈레멘터(Skelementor) 기준으로
👉 메인페이지 섹션 구조 스케치를 아주 실무적으로 짜줄게요.
(엘리멘터 기본 개념은 유지하면서, UIcore 스타일에 맞춤)
✅ 워드프레스로 가능한가요?
👉 네, UIcore 테마 + 스켈레멘터로 전부 구현 가능합니다.
오히려 B2B 회사형 홈페이지에 이 조합이 잘 맞아요.
🧱 메인페이지 섹션 구조 스케치
(총 6섹션 / 스켈레멘터 기준)
🔹 기준:
- Desktop 1200~1320px
- 섹션은 위에서 아래로 단순하게
- 애니메이션 과도 ❌
1️⃣ HERO 섹션 (첫 화면)
📐 구조
[ Section ]
└─ Container (Full Width)
├─ Column (좌측 55%)
│ ├─ Heading (H1)
│ ├─ Text
│ └─ Button Group (2개)
└─ Column (우측 45%)
└─ Image🎯 포인트
- UIcore 기본 히어로 스타일 사용
- 배경: 연한 그레이 or 농장/사료 이미지
- 버튼:
- Primary: 거래 문의
- Secondary: 회사 소개
2️⃣ 회사 핵심 요약 섹션 (Strength)
📐 구조
[ Section ]
└─ Container (Boxed)
├─ Heading (H2)
└─ Icon Box x 3🎯 포인트
- 아이콘 + 짧은 문장
- 가로 3분할
- 문장 길이 최대 2줄
예:
- 해외 직수입
- B2B 축산 전문
- 안정적 물량 공급
3️⃣ 취급 사료 섹션 (Products Overview)
📐 구조
[ Section ]
└─ Container (Boxed)
├─ Heading (H2)
└─ Card Box x 3
├─ Image
├─ Heading (H3)
├─ Text
└─ Button (자세히 보기)🎯 포인트
- 카드 디자인 (UIcore Card 추천)
- 각각 링크:
- 소 사료
- 닭 사료
- 돼지 사료
4️⃣ 수입 · 유통 프로세스 섹션 (Process)
📐 구조
[ Section ]
└─ Container (Boxed)
├─ Heading (H2)
└─ Step Box x 4 (가로)
├─ Number
├─ Title
└─ Short Text🎯 포인트
- 스켈레멘터 Step / Timeline 위젯 활용
- 아이콘 or 숫자 강조
- 복잡한 설명 ❌
5️⃣ 타겟 고객 섹션 (For Who)
📐 구조
[ Section ]
└─ Container (Boxed)
├─ Heading (H2)
└─ Icon + Text x 3🎯 포인트
- “이런 분들께 적합합니다”
- 일반 소비자 제외 효과
6️⃣ 문의 유도 CTA 섹션 (Contact)
📐 구조
[ Section ]
└─ Container (Boxed or Full)
├─ Heading (H2)
├─ Text
└─ Button (문의하기)또는
[ Section ]
└─ Container
├─ Column (좌)
│ ├─ Heading
│ └─ Text
└─ Column (우)
└─ Form or Button🎯 포인트
- 배경색으로 섹션 구분
- 페이지 맨 아래 강한 CTA
📱 모바일 구조 팁 (중요)
- Hero → 이미지 아래로 내려오기
- 카드 3개 → 세로 1열
- 프로세스 4단계 → 2줄 또는 슬라이드
UIcore + 스켈레멘터는 모바일 제어가 쉬움 👍
🔌 사용 위젯 요약
- Heading / Text
- Icon Box
- Card Box
- Step / Timeline
- Button / Form
(전부 UIcore + 스켈레멘터 기본 제공)
🔑 구조 스케치 한 줄 요약
👉 섹션은 6개가 가장 안정적
👉 각 섹션은 “한 가지 역할”만 하게 설계
👉 UIcore는 여백, 스켈레멘터는 구조
다음으로 바로 실무에 도움 되는 건👇
👉 이 구조에 바로 넣을 수 있는 실제 문구 초안
👉 컬러 / 폰트 추천 (사료·축산 업종에 맞게)
어디까지 갈까요?