7가지 최고의 WordPress 아이콘 상자 플러그인(무료 및 유료)

아이콘 상자 디자인은 제품이나 서비스에 대한 간결한 개요를 보여주는 가장 좋은 방법입니다. 상자 모양의 디자인으로 정보를 표현하는 것은 콘텐츠를 보여주는 매력적인 방법이 될 수 있습니다. 그러나 WordPress 웹사이트에서 이 디자인을 만들려면 아이콘 상자 플러그인의 도움이 필요합니다.

그러나 플러그인의 경우 다양한 옵션이 있을 수 있습니다. 이것이 바로 이 게시물의 내용입니다. 최고의 WordPress 아이콘 상자 플러그인에 대해 알아보려면 계속 읽어보세요!

아이콘 상자란 무엇입니까?

아이콘 상자는 기능 상자와 같습니다. 기본적으로 상자 모양의 카드에 주요 정보를 표시할 수 있습니다.

일반적으로 웹사이트 사용자는 귀하의 서비스나 제품에 대한 자세한 설명을 좋아하지 않습니다. 그러나 아이콘 상자 플러그인을 사용하면 WordPress 웹사이트에서 이 지루한 경험을 쉽게 단순화할 수 있습니다.

이를 통해 콘텐츠 상자를 표시할 수 있으며, 그 안에는 일반적으로 탭하면 아이콘이 표시되고 제목, 설명, 버튼과 같은 기타 요소가 표시됩니다. 그리고 좋은 플러그인을 사용하면 아이콘 상자 요소를 사용자 정의하여 기본 USP (고유 판매 포인트)를 직관적으로 강조할 수 있습니다.

이제 최고의 아이콘 상자 플러그인에 대해 알아 보겠습니다…

상위 7개 WordPress 아이콘 상자 플러그인

다음은 우리가 엄선한 아이콘 상자 플러그인 컬렉션입니다. 우리는 이러한 플러그인을 테스트하고 모든 기능을 사용해 보았습니다. 우리가 소개할 플러그인에는 무료 옵션과 유료 옵션이 혼합되어 있습니다.

1. ElementsKit 아이콘 상자 위젯

플러그인 통계:

• 활성 설치: 100만 개 이상(무료 버전)
• 평점: 5.0 이상
• 가장 적합한 대상 : 다목적 아이콘 상자.

ElementsKit은 WordPress 웹사이트 어디에서나 시각적으로 매력적인 정보 또는 기능 상자를 제공하는 데 사용할 수 있는 완전한 다목적 아이콘 상자 플러그인 옵션입니다. ElementsKit 플러그인 아래에 위젯으로 이 기능이 있습니다.

ElementsKit 아이콘 상자 위젯은 아이콘, 제목, 설명, 버튼과 같은 모든 기능과 배지 및 워터마크와 같은 기타 고유 기능을 용이하게 합니다. 아이콘 상자 기능 측면에서 이 플러그인의 가장 큰 장점은 방대한 아이콘 컬렉션입니다. Font Awesome- Regular, Font Awesome- Solid, Font Awesome- Brands 및 ElementsKit Icon Pack에 액세스할 수 있습니다.

또한 ElementsKit은 호버 효과에 대한 여러 애니메이션 효과도 제공합니다. 아이콘에 개별적으로 적용하거나 아이콘 상자 전체에 적용할 수 있습니다. 따라서 제품이나 서비스의 핵심 부분을 표시하면서 더욱 강력한 기능을 갖게 됩니다.

장점:

• 장치에서 SVG 아이콘을 업로드하세요.
• 페이지 레이아웃 내에 쉽게 배치할 수 있습니다.
• 광범위한 아이콘 컬렉션.
• 아이콘 상자에 워터마크를 활성화합니다.
• 배지와 테두리를 추가하고 맞춤설정하세요.
• 마우스 오버 전용 버튼을 활성화합니다.
• 배경 오버레이로 아이콘 상자 스타일을 지정합니다.
• ElementsKit 플러그인의 무료 위젯으로 제공됩니다.

단점:

• 타사 애드온으로 제공됩니다.

2. Elementor 아이콘 상자 위젯

플러그인 통계:

• 활성 설치: 5백만 이상(무료 버전)
• 평점: 4.6 이상
• 가장 적합한 대상 : 다목적 아이콘 상자.

WordPress 사이트에서 사용할 수 있는 또 다른 무료 플러그인은 Elementor Icon Widget입니다. 이 플러그인에서 제가 마음에 들었던 점은 ElementsKit에서처럼 추가 플러그인을 설치할 필요가 없다는 것입니다. Elementor와 ElementsKIt을 모두 설치해야 하는 경우. 그리고 사용자 인터페이스는 초보자에게 친숙합니다.

그러나 Elementor에는 버튼, 배지 또는 워터마크와 같은 ElementsKit의 일부 강력한 기능이 없습니다. 최소한의 아이콘 상자를 표시하는 데 적합합니다. 버튼 기능이 없기 때문에 방문자를 어디든 탐색할 수 없는 것처럼 말입니다.

Elementor Builder를 사용하여 아이콘 상자에 호버 효과를 추가하면 약간의 지원을 받을 수 있습니다. 그리고 우리가 선택한 ElementsKit과 같은 호버 효과에는 오프닝 애니메이션 효과가 없습니다. 그러나 Elementor 아이콘 상자는 작업하기 편리하며 사용자 정의 기능이 충분합니다.

장점:

• 아이콘을 사용자 정의하고 위치를 정의합니다.
• 호버에 애니메이션 효과를 적용합니다.
• 타이포그래피에 대한 스타일 옵션을 얻으세요.
• 모바일 반응형 아이콘 상자.

단점:

• 배지, 워터마크 또는 버튼을 추가할 수 없습니다.

3. 컬러박스 패널 및 정보 상자

플러그인 통계:

• 활성 설치: 1,000+
• 평점: 4.6 이상
• 가장 적합한 대상 : 다목적 아이콘 상자.

이 부트스트랩 기반 플러그인을 테스트했을 때 모든 유형의 장치와 호환되었습니다. 제가 찾은 가장 큰 단점은 사용자 인터페이스가 매우 복잡하다는 것입니다. WYSIWYG 기능을 제공하면서도 직관적인 경험을 만날 수 있습니다.

그럼에도 불구하고 이 플러그인을 사용하면 팀 상자, 정보 상자, 기능 상자와 같은 아이콘 상자를 만들 수 있습니다.

장점:

• 광범위한 색상 옵션이 제공됩니다.
• 5개의 상자 레이아웃을 용이하게 합니다.
• Font Awesome 아이콘을 지원하고 아이콘 선택기와 통합되었습니다.
• 드래그 앤 드롭 빌더와 통합되었습니다.
• 벽돌 및 동위원소 효과와 함께 사용할 수 있습니다.
• 아이콘 표시에 대한 두 가지 다른 옵션.

단점:

• 타이포그래피 및 아이콘 사용자 정의를 제공하지 마십시오.
• 자신의 아이콘을 업로드할 수 없습니다.
• 대부분의 기능은 Pro 버전에서 사용할 수 있습니다.

4. Betheme 아이콘 상자

플러그인 통계:

• 가장 적합한 대상 : 다목적 아이콘 상자.

이 아이콘 상자 요소는 Betheme 빌더 플러그인으로 구동됩니다. 상자 내의 다른 위치에 아이콘을 배치하려는 경우 이 플러그인을 사용하면 됩니다. 또한 아이콘 상자에 직관적인 호버 효과를 적용할 수도 있습니다. 특정 애니메이션 효과 중 하나는 마우스 커서를 위에 올리면 전체 상자가 움직이는 것입니다.

하지만 이 플러그인에는 무료 버전이 제공되지 않기 때문에 이러한 모든 기능을 사용하려면 비용을 지불해야 합니다. 그리고 같은 가격에 무료 대안이 있기 때문에 투자할 가치가 없습니다.

장점:

• 라이브러리에서 아이콘을 선택하거나 사용자 정의 아이콘을 추가하세요.
• 아이콘의 위치를 ​​다르게 설정하세요.
• 모든 장치에 대해 반응형 아이콘 상자를 만듭니다.
• 다양한 호버 애니메이션 효과를 적용하세요.
• 마우스를 올리면 전체 아이콘 상자를 이동합니다.

단점:

• 전체 요금제에 대한 비용을 지불해야 합니다.

5. 서비스 박스 쇼케이스

플러그인 통계:

• 활성 설치: 5,000+
• 평점: 4.8 이상
• 가장 적합한 대상 : 서비스 기반 아이콘 상자.

Service Box Showcase 플러그인은 사전 제작된 템플릿을 사용하여 아이콘 상자를 디자인하는 간편한 방법을 제공합니다. 이름이 정의된 대로 서비스를 보기 좋게 표시하는 데 사용할 수 있습니다.

이 플러그인 대시보드에는 다양하고 유용한 설정이 포함되어 있지만 무료 버전에서는 그 중 일부만 사용할 수 있습니다. 모든 브라우저와도 호환되는 반응형 아이콘 상자를 디자인할 수 있습니다.

Service Box Showcase 플러그인의 또 다른 좋은 점은 이전 플러그인의 프로 버전에서만 사용할 수 있는 더 읽기 버튼을 추가할 수 있다는 것입니다.

장점:

• Font Awesome 아이콘과 아이콘 선택기를 지원합니다.
• 드래그 앤 드롭 API와 통합되었습니다.
• 쉽게 정렬할 수 있도록 드래그 가능한 FAQ 항목을 사용합니다.
• 아이콘을 표시하고 더 많은 버튼을 읽으려면 선택하세요.
• 아이콘 상자에 회전식 스타일을 제공합니다.
• 제목 및 버튼 텍스트에 대한 사용자 정의 옵션을 제공합니다.

단점:

• 단일 목적으로 개발되었습니다.
• 대부분의 기능은 Pro 버전에서 사용할 수 있습니다.

6. 서비스 박스

활성 설치 : 500+

평점 : 5.0

가장 적합한 대상 : 서비스 기반 아이콘 상자.

Service Box는 아이콘 상자를 위한 간단한 플러그인입니다. 서비스 정보를 표시하는 데 매우 효과적입니다. 다양한 서비스 스타일을 보여주는 것 외에도 그리드 및 슬라이더 보기로 서비스를 표시할 수 있습니다. 또한 서비스 상자를 그룹화할 수도 있습니다.

장점:

• 그리드 및 슬라이더 보기로 서비스를 보여주세요.
• 16가지의 다양한 스타일을 적용해보세요.
• 서비스 상자를 그룹화하십시오.
• 배경색과 이미지를 추가합니다.
• 아이콘 상자가 있는 버튼을 추가합니다.
• 아이콘 상자 타이포그래피의 스타일을 지정하세요.

단점:

• 주로 서비스 기반의 아이콘 박스 제작을 위해 개발되었습니다.
• 배지 및 워터마크를 추가할 수 없습니다.

7. 정보 상자(구텐베르그 블록)

활성 설치 : 1000+

평점 : 5.0

가장 적합한 대상 : 다목적 아이콘 상자.

이 목록에 추가하려는 마지막 플러그인은 Info Box입니다. 이 WordPress 플러그인은 Gutenberg 편집기용으로 개발되었습니다. 이를 통해 구텐베르그 웹사이트에 대한 완전히 사용자 정의된 아이콘 상자를 만들 수 있습니다.

다양한 사전 설정 레이아웃을 사용하여 애니메이션 아이콘 상자 만들기를 시작할 수 있습니다. 모든 콘텐츠 요소의 위치를 ​​개별적으로 설정하기 위한 컨트롤을 제공합니다. 또한 아이콘 상자의 각 요소에 대한 모든 사용자 정의 기능을 용이하게 합니다. 전반적으로 아이콘 상자에 대한 완벽한 솔루션입니다.

장점:

• 구텐베르그 기반의 직관적인 인터페이스.
• 아이콘 대신 이미지를 표시할 수 있습니다.
• 아이콘 스타일을 지정하는 사용자 정의 기능을 이용하세요.
• 제목, 부제, 버튼과 같은 모든 요소의 스타일을 지정하는 컨트롤을 받으세요.

단점:

• 배지나 워터마크 기능이 없습니다.

최고의 WordPress 아이콘 상자 플러그인을 선택하는 방법

아이콘 상자 디자인에 가장 적합한 WordPress 플러그인을 선택하는 데 아직도 혼란스러우신가요? 일반적으로 WordPress 요구 사항에 따라 여러 플러그인 옵션이 제공됩니다. 그러나 모든 플러그인이 특정 요구 사항과 기본 설정을 제공하는 것은 아닙니다.

따라서 아래에서는 정보 상자를 표시하기 위해 올바른 플러그인을 선택할 때 몇 가지 기본 최소 요구 사항을 간략하게 설명합니다.

요구 사항 설정

우리가 이미 알고 있듯이 아이콘 상자는 여러 요소로 구성됩니다. 그러나 이 모든 것을 하나의 버킷으로 모으는 것은 대부분 어려운 일입니다. 또한 디자인에는 배지나 워터마크 표시와 같은 특정 요구 사항이 있을 수 있습니다. 그리고 가장 중요한 것은 플러그인 아이콘 라이브러리에 선호하는 아이콘이 포함되어야 하며 아이콘 대신 이미지를 업로드할 수 있는 옵션이 지원되어야 한다는 것입니다.

사용자 정의 옵션

아이콘 상자 플러그인을 사용하는 주요 목적 중 하나는 특정 정보를 더욱 매력적으로 만드는 것입니다. 그리고 이미 마음 속에 스타일링 아이디어가 있을 수도 있습니다. 그래서 커스터마이징이 중요한 역할을 합니다. 예를 들어 상자 전체가 아닌 아이콘에만 호버 효과를 적용할 수 있습니다. 따라서 이 아이콘을 설치하기 전에 사용자 정의 기능의 가용성을 확인해야 합니다.

사용자 인터페이스

대시보드가 ​​복잡하면 아이콘 상자 디자인이 더 어려워질 수 있습니다. 이를 위해서는 설정을 더 쉽게 제어할 수 있는 사용자 인터페이스가 필요합니다. WYSIWYG 구축 경험이 있는 플러그인이 있어야 합니다. Elementor 또는 ElementsKit 플러그인은 이러한 기능을 용이하게 합니다.

미리 만들어진 레이아웃

미리 만들어진 레이아웃을 사용하면 쉽게 디자인 영감을 얻고 몇 분 안에 작업을 시작할 수 있습니다. 일부 플러그인은 작업을 더 쉽게 만들기 위해 전문적으로 디자인된 레이아웃을 제공합니다. 따라서 해당 아이콘 상자 플러그인의 레이아웃 키트가 있는지 확인해야 합니다.

반응형 디자인

아이콘 상자의 반응성은 모든 장치에서 완벽하게 표시되어야 하기 때문에 중요합니다. 반응형 설정을 더 잘 이해하려면 설명서나 튜토리얼을 읽어보세요.

플러그인 충돌

우리는 아이콘 박스 같은 디자인이 필요할 때 단일 목적의 플러그인을 설치하는 경우가 많습니다. 그렇게 하면 플러그인 수가 늘어나고 플러그인 간에 충돌이 발생할 수도 있습니다. 그렇다면 해결책은 무엇일까요? 가장 좋은 방법은 다양한 기능을 갖춘 플러그인을 사용하는 것입니다. 예를 들어 ElementsKit을 사용하면 아이콘 상자를 포함한 웹 사이트 디자인의 다양한 요구 사항을 충족할 수 있습니다.

최종 단어

이 목록의 모든 플러그인은 각자의 방식으로 유익합니다. 모두 WordPress 웹사이트를 위한 멋진 아이콘 상자를 만드는 데 도움이 됩니다. 그런 다음 기능과 사용자 인터페이스에 대한 개인 선호도에 따라 결정됩니다.

이제 이 목록에 있는 대부분의 플러그인은 무료이므로 직접 사용해 보시고 실제로 사용하기 편한 플러그인을 찾으세요. 그리고 이것은 최고의 WordPress 아이콘 상자 플러그인을 찾는 데 적합한 방법이 될 것입니다.