Contact Info Widget Documentation #

Contact Info Widget #

The Contact Info widget allows you to display contact information in an organized, professional format with icons and customizable styling. Perfect for business contact details, office locations, customer service information, or any structured contact data with visual icons and clean presentation.

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

How to Use the Contact Info Widget #

Step 1: Add the Widget

• Open a page in the Elementor Editor.
• Search for Contact Info.
• Drag and drop the widget into your desired section.

Step 2: Configure Label

Go to Content tab → Label.

Title

• Enter a title for your contact information section (e.g., “Dhaka Office”, “Contact Us”, “Get In Touch”).
• Default text is “Dhaka Office”.
• This appears as the main heading above your contact details.

Step 3: Add Contact Information

Go to Content tab → Content.

Contact List Add multiple contact items using the repeater:

For Each Contact Item:

Icon

• Choose from Font Awesome icons or upload custom SVG.
• Select icons that match your contact type (phone, email, location, etc.).
• Default icons provided: map marker (address), envelope (email), phone.

Value

• Enter the contact information text (e.g., “123 Main Street”, “info@company.com”, “+1234567890”).
• Supports any text format for flexible contact details.

Default Contact Items:

• Address – Map marker icon with “Address” text
• Email – Envelope icon with “example@gmail.com”
• Phone – Phone icon with “+1234567890”

Managing Items:

• Click Add Item to create additional contact entries.
• Reorder items using drag & drop functionality.
• Remove items easily when not needed.

Step 4: Style the Container Box

Go to Style tab → Box.

State Styling Configure different appearances for:

• Normal – Default container appearance.
• Hover – Container styling when users hover over it.

Normal State Options:

• Background – Set solid colors or gradients (default: #eee).
• Margin – External spacing around the container.
• Padding – Internal spacing within the container.
• Border – Add borders with custom styles.
• Border Radius – Create rounded corners.
• Box Shadow – Add depth with shadow effects.

Hover State Options:

• Hover Transition – Control animation speed (default: “all 0.3s ease”).
• All normal state options available for hover effects.
• Creates smooth transitions between normal and hover states.

Step 5: Style the Title

Go to Style tab → Title.

Title Styling

• Text Color – Set title text color.
• Typography – Font family, size, weight, line height, letter spacing.
• Padding – Internal spacing around the title.
• Margin – External spacing around the title.

Step 6: Style the Divider

Go to Style tab → Divider.

Divider Line A horizontal line that appears below the title:

• Background – Set line color or gradient (default: #333).
• Border – Add additional border styling if needed.
• Width – Control line width (10-100%, default: 15%).
• Margin – Control spacing around the divider line.

Step 7: Style the Content

Go to Style tab → Content.

Contact Text Styling

• Color – Set text color for contact values.
• Typography – Font settings for contact information text (default: 24px).
• Padding – Internal spacing around contact text.
• Margin – External spacing around contact text.

Step 8: Style the Icons

Go to Style tab → Icon.

Icon View Style Choose from three display options:

• Default – Simple icons without background or border.
• Stacked – Icons with background color containers.
• Framed – Icons with border outlines.

Icon Shape (for Stacked and Framed styles)

• Square – Sharp corners (default).
• Rounded – Slightly rounded corners.
• Circle – Fully circular icon containers.

Icon Colors

• Icon Background Color – Background for stacked style (default: #f4f4f4).
• Icon Border Color – Border color for framed style (default: #2e3192).
• Icon Color – Color for the icon itself.

Icon Sizing

• Icon Size – Control icon dimensions (10-100px, default: 20px).

Icon Spacing

• Icon Margin – External spacing around icon containers.
• Icon Padding – Internal spacing within icon containers.

Step 9: Advanced Options

Use Elementor’s Advanced tab for:

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

✅ Final Output #

The Contact Info widget creates a professional, organized display of contact information with customizable icons, clean typography, and flexible styling options—perfect for business contact sections, office details, and customer service information.

💡 Tips for Better Results #

• Use relevant icons that clearly represent each contact type (phone for phone numbers, envelope for email, etc.).
• Keep contact information current and accurate for better user experience.
• Choose appropriate icon styles that match your overall design theme.
• Use consistent formatting for similar contact types (e.g., all phone numbers in same format).
• Test hover effects to ensure they enhance rather than distract from usability.
• Consider mobile display when setting padding and margins.
• Use contrasting colors for better readability and accessibility.
• Group related information logically (e.g., all office locations together).