플러그인 업데이트 Featurebox Widget

# Featurebox Widget – 이미지 기반 기능 소개 위젯

들어가며

케이테마 프리미엄 Featurebox Widget은 이미지를 중심으로 기능이나 서비스를 소개하는 위젯입니다. Iconbox와 달리 이미지를 메인으로 사용하여 더욱 시각적이고 감성적인 표현이 가능합니다.

주요 기능

Repeater 기반: 원하는 만큼 아이템 추가
이미지 중심: 사진, 일러스트, 스크린샷 등
Grid 레이아웃: 2, 3, 4열 선택 가능
정렬 옵션: 좌, 중앙, 우 정렬
완전한 반응형: 디바이스별 컬럼 수 설정
호버 효과: Zoom, Overlay, Grayscale 등

각 아이템 구성

이미지: 미디어 라이브러리에서 선택 (권장: 600x400px)
제목: 기능 이름
설명: 상세 설명
링크: 클릭 시 이동 (선택 사항)
버튼 텍스트: 선택적 버튼 추가

레이아웃 옵션

컬럼 수 (반응형)

데스크톱: 2, 3, 4열 (기본: 3)
태블릿: 2, 3열 (기본: 2)
모바일: 1, 2열 (기본: 1)

이미지 위치

Top: 이미지 상단, 텍스트 하단 (기본값)
Left: 이미지 왼쪽, 텍스트 오른쪽
Right: 이미지 오른쪽, 텍스트 왼쪽

간격

Row Gap: 행 간격
Column Gap: 열 간격

스타일 옵션

1. 이미지 스타일

크기: Width, Height 설정
Object Fit: Cover, Contain, Fill
Border Radius: 둥근 모서리
그림자: Box Shadow
호버 효과: Zoom, Grayscale to Color, Brightness 등
Overlay: 호버 시 오버레이

2. 제목/설명 스타일

Typography: 폰트, 크기, 굵기
색상: 텍스트 색상
간격: Margin

3. 버튼 스타일

Typography: 버튼 텍스트 스타일
배경색: 버튼 배경
텍스트 색상: 버튼 텍스트
호버 효과: 색상 변화
Border Radius: 둥근 모서리
패딩: 버튼 크기

4. 박스 스타일

배경: 단색, 그라디언트
패딩: 내부 여백
테두리: Border
그림자: Box Shadow
호버 효과: Transform, 그림자 강화

실전 활용 예제

예제 1: 제품 기능 소개 (3열, 이미지 Top)

설정:

컬럼: 3열
이미지 위치: Top
이미지: 제품 스크린샷 (600x400px)
이미지 호버: Zoom In (1.1배)
박스: 흰색, 그림자, Border Radius 15px
버튼: “자세히 보기” (Primary 컬러)

예제 2: 팀 소개 (4열, 이미지 Top)

설정:

컬럼: 4열
이미지: 팀원 사진 (정사각형, 400x400px)
이미지: Border Radius 50% (원형)
이미지 호버: Grayscale to Color
제목: 이름 (20px, Bold)
설명: 직책 및 소개
박스: 배경 없음, 중앙 정렬

예제 3: 서비스 상세 (1열, 이미지 Left)

설정:

컬럼: 1열
이미지 위치: Left (50%)
이미지: 서비스 일러스트 (800x600px)
텍스트: Right (50%)
제목: 큰 사이즈 (32px)
설명: 긴 텍스트 (여러 단락)
버튼: “자세히 알아보기”

디자인 팁

이미지 준비

일관된 비율: 모든 이미지 동일 비율 (16:9 또는 4:3)
고화질: 최소 600px 너비
최적화: WebP 포맷, 압축 (100KB 이하 권장)
스타일 통일: 사진/일러스트 중 하나로 통일

호버 효과 조합

Zoom + Grayscale: 흑백 → 확대 + 컬러
Zoom + Overlay: 확대 + 어두운 오버레이
Brightness + Shadow: 밝기 증가 + 그림자 강화

호환성

WordPress 5.0+
Elementor 3.0+
PHP 7.4+
케이테마 프리미엄 플러그인 2.0+

마무리

Featurebox Widget은 이미지를 활용한 시각적 스토리텔링에 최적화된 위젯입니다. 제품 기능, 팀 소개, 포트폴리오, 서비스 상세 등 다양한 용도로 활용하여 감성적이고 매력적인 콘텐츠를 만드세요!