Info Box Widget Documentation #

The Info Box widget allows you to create attractive information cards with icons or images, headings, descriptions, and call-to-action buttons. Perfect for service highlights, feature showcases, team member cards, or any content that needs visual appeal with structured information presentation.

Live Demo: https://turbo-addons.com/info-box/

How to Use the Info Box Widget #

Step 1: Add the Widget

1. Open a page in the Elementor Editor.
2. Search for Infobox.
3. Drag and drop the widget into your desired section.

Step 2: Configure Icon/Image

Go to Content tab → Icon / Image.

Select Type

Choose between two visual options:

• Icon – Use Font Awesome icons or custom SVG icons.
• Image – Upload custom images or select from media library.

Icon Configuration (when Icon selected)

• Click the icon selector to choose from available icon libraries.
• Default icon is info-circle (fas fa-info-circle).
• Supports Font Awesome and custom SVG icons.

Image Configuration (when Image selected)

• Image – Upload or select image from media library.
• Supports all standard image formats (JPG, PNG, SVG, WebP).
• Automatically includes alt text for accessibility.

Step 3: Configure Heading

Go to Content tab → Heading.

Heading Text

• Enter your main heading text (e.g., “Our Services”, “Why Choose Us”).
• Default text is “Infobox Heading”.
• Supports dynamic content and multi-line text.

Step 4: Configure Description

Go to Content tab → Description.

Description Text

• Use the rich text editor (WYSIWYG) for formatted content.
• Add links, bold text, lists, and other formatting.
• Supports dynamic content and HTML formatting.
• Default text is “This is a short description of the infobox.”

Step 5: Configure Button

Go to Content tab → Button.

Show Button

• Enable/disable the button display.
• Default is enabled (“Yes”).

Button Text

• Enter button label text (e.g., “Learn More”, “Get Started”).
• Default text is “Info Button”.

Button URL

• URL – Enter destination link.
• Open in new window – Enable for external links.
• Add nofollow – Enable for SEO purposes.

Button Icon

• Select icon to display with button text.
• Choose from Font Awesome or upload custom SVG.

Icon Position

• Left – Place icon before button text (default).
• Right – Place icon after button text.

Step 6: Style the Box Container

Go to Style tab → Box.

Image/Icon Position

Choose layout direction:

• Left to Right – Icon/image on left, content on right.
• Top to Bottom – Icon/image on top, content below (default).
• Right to Left – Icon/image on right, content on left.
• Bottom to Top – Icon/image on bottom, content above.

Content Alignment

• Left – Align all content to the left.
• Center – Center all content (default).
• Right – Align all content to the right.

Padding

• Control internal spacing for the entire info box.

State Styling

Configure different appearances for:

• Normal – Default appearance.
• Hover – When users hover over the info box.

Available Options for Each State:

• Background – Solid colors, gradients, or video backgrounds.
• Box Shadow – Add depth with shadow effects.
• Border – Custom border styles and colors.
• Border Radius – Create rounded corners.

Step 7: Configure Spacing

Go to Style tab → Spacing.

Icon/Image Gap

• Control spacing between icon/image and content (default: 15px).

Content Spacing

• Control spacing between heading, description, and button (default: 15px).

Step 8: Style the Icon

Go to Style tab → Icon (visible when Icon type selected).

Icon Size

• Adjust icon dimensions (10-300px, default: 64px).

Icon Margin & Padding

• Margin – External spacing around the icon.
• Padding – Internal spacing within icon container.

State Styling

• Normal – Default icon appearance.
• Hover – Icon styling when hovering over info box.

Available Options:

• Background – Icon container background color.
• Icon Color – Icon color for font icons and SVG fill.
• Border – Icon container border styling.
• Border Radius – Rounded corners for icon container.
• Box Shadow – Shadow effects for icon container.

Step 9: Style the Image

Go to Style tab → Image (visible when Image type selected).

Image Margin

• External spacing around the image.

Image Size

• Control image width (10-500px or 5-100%).
• Height adjusts automatically to maintain aspect ratio.

Image Border

• Add borders around the image.

Image Border Radius

• Create rounded corners or circular images.

Image Box Shadow

• Add shadow effects to the image.

Step 10: Style the Heading

Go to Style tab → Heading.

Typography

• Font family, size, weight, line height, letter spacing.

Heading Margin & Padding

• Control spacing around and within the heading.

Heading Colors

• Normal – Default heading color.
• Hover – Heading color when hovering over info box.

Step 11: Style the Description

Go to Style tab → Description.

Typography

• Complete font customization for description text.

Description Margin & Padding

• Control spacing around and within the description.

Description Colors

• Normal – Default description text color.
• Hover – Description color when hovering over info box.

Step 12: Style the Button

Go to Style tab → Button (visible when button is enabled).

Button Margin & Padding

• Margin – External spacing around the button.
• Padding – Internal spacing within the button.

Typography

• Font settings for button text.

State Styling

• Normal – Default button appearance.
• Hover – Button styling on hover.

Available Options for Each State:

• Background Color – Button background.
• Text Color – Button text color.
• Icon Color – Button icon color.
• Border – Button border styling.
• Border Radius – Rounded button corners.
• Box Shadow – Button shadow effects.

Step 13: Advanced Options

Use Elementor’s Advanced tab for:

• Margin & padding
• Responsive visibility
• Motion effects
• Custom CSS (optional)

Final Output #

The Info Box widget creates a professional, visually appealing information card with flexible layouts, comprehensive styling options, and interactive elements—perfect for service showcases, feature highlights, and content presentation.

Tips for Better Results #

• Use consistent styling across multiple info boxes for cohesive design.
• Keep headings concise and descriptive for better readability.
• Optimize images for web to ensure fast loading times.
• Choose appropriate icon sizes that balance with your content.
• Test hover effects to ensure they enhance user experience.
• Use contrasting colors for better accessibility and readability.
• Consider mobile layout when choosing icon/image positions.
• Keep descriptions focused and action-oriented for better engagement.