In this guide, we will show you how to add a “Flag Icons widget” to your Elementor website. The Flag Icons widget allows you to display stylish country or region flags, making it ideal for travel-related content, international events, or global business sections. Perfect for adding visual context and enhancing user experience, this widget helps you represent geographic information clearly and engagingly.
Let’s explore the customization options available in the “Flag Icons widget” for Elementor below.
Elementor Flag Icons Tutorial Video (Step by Step Guide)
Add a Free Flag Icons to Elementor
Add a Free Flag Icons to an Elementor Page
Elementor Flag Icons Widget General Settings
Flag Type
A dropdown menu to select the flag shape.
Square (1:1)
Rectangle (4:3)
Circular
Rounded Square
Layout
Dropdown to define the arrangement of flags.
Inline
Grid
Carousel
Marquee
Dropdown
Alignment
Responsive dropdown control for flag alignment.
Left
Center
Right
Gap
Responsive control with a slider and input to adjust spacing between flags.
Show Title
Toggle to enable or disable the display of country/region titles next to flags.
Show Tooltip
Toggle to enable or disable tooltip display on hover.
Enable Remote Connection
Activates remote connectivity between widgets to allow synchronized behavior across sections or pages.
Sync
Links this widget’s behavior with others to ensure synchronized transitions.
Show Debug
Displays technical information about connected remote widgets for testing or troubleshooting. Should be turned off before site launch.
Title
Text field for entering a name or label. Includes dynamic tag and AI text generation support.
Select Flag
Dropdown to choose a country or region flag. A note is shown if a specific flag is missing, directing users to submit a support request.
Show Custom Icon
Toggle to enable or disable using a custom icon instead of the default flag.
Link
Input field for adding a URL. Includes advanced link settings via the gear icon.
Elementor Flag Icons Widget Style Settings
Flag Icon Size
Responsive slider with input for adjusting the size of the flag icon.
Icon Align
Dropdown menu to set the alignment of the icon within its container (e.g., Left, Center, Right).
Icon Justify
A dropdown menu to control horizontal distribution within the layout container.
Start
Center
End
Icon Fit
Responsive dropdown to define how the icon fits within its box.
Item Width
Controls the width of the item. Supports responsive settings for different devices.
Item Height Type
Allows you to select how the height is determined.
Item Height
Sets the height of the item. Supports responsive settings for different devices.
Margin
Defines the outer spacing around the item for the Top, Right, Bottom, and Left sides. Supports responsive settings and linked values.
Border Radius
Controls the roundness of the item's corners for the Top, Right, Bottom, and Left sides. Supports responsive settings and linked values.
Normal / Hover Tabs
Switches between styling options for the normal (default) and hover states of the item.
Border Normal Type
Defines the border style for the item’s normal state.
Default
None
Solid
Double
Dotted
Dashed
Groove
Border Normal Width
Sets the thickness of the border on all sides for the item’s normal state. Supports responsive settings and linked values.
Border Normal Color
Sets the color of the border for the item’s normal state.
Icon Background
Sets the background color of the icon inside the item.
Box Shadow Normal
Configures the shadow effect around the item in its normal state.
Flag Icons Widget Design Examples For Elementor
Here are some live use cases for the Flag Icons widget.
Flag Icons for Delivery.
Flag Icons Widget For Hero Section.
Thank you for using the Stacking Cards Widget for Elementor! With its interactive stacking effect and sleek design, it’s the perfect tool for showcasing team members, product highlights, or creative content in a captivating way. Ideal for portfolios, business websites, and creative projects, this widget adds depth and motion to your layout, enhancing visual engagement. If you have any questions or need assistance, feel free to reach out. For inspiration and live demos, don’t forget to visit our website.
