In this guide, we’ll show you how to add a free “Multi Line Button widget” to your Elementor website. This widget lets you create buttons with multi-line text and icons, perfect for clear, detailed call-to-actions without compromising your design. With customizable typography, icons, and styling, the Multiline Button widget blends seamlessly into any Elementor layout.
Let’s explore the customization options available in the “Multi Line Button widget” for Elementor below.
Elementor Free Multi Line Button Tutorial Video
Add a Free Multi Line Button to Elementor
Add a Free Multi Line Button Widget to an Elementor Page
Elementor Multi Line Button Widget General Settings
Title Text
Sets the main text shown on the button, typically the most prominent line.
Subtitle Text
Adds secondary text below the title, like a tagline or brief detail.
Link
Specifies the URL the button directs to when clicked.
Show Icon
Enables or disables the icon on the button.
Icon
Selects the icon to display next to the button text.
Button ID
Assigns a unique HTML ID for custom styling, scripts, or tracking.
Hover Effect
Select an animation effect to apply when the button is hovered. Options include:
Not Chosen (no animation)
Grow
Shrink
Pulse
Pulse Grow
Pulse Shrink
Push
Pop
Bounce In
Bounce Out
Rotate
Grow Rotate
Float
Sink
Bob
Hang
Skew
Skew Forward
Skew Backward
Wobble Vertical
Elementor Multi Line Button Widget Style Settings
Align Button
Control the horizontal alignment of the button itself. Options include:
Center
Left
Right
Align Inside Button
Control the alignment of content within the button. Options include:
Center
Left
Right
Border Radius
Adjusts how rounded the button’s corners appear.
Padding
Sets internal spacing between the button’s content and its edges.
Space Between
Controls vertical spacing between the title, subtitle, and icon within the button.
Button Width
Control the button’s width. Options include:
Auto Width
Full Width
Border Type
Select the style of the button’s border. Options include:
Default
None
Solid
Double
Dotted
Dashed
Groove
Box Shadow
Adds a shadow around the entire button with customizable color, blur, spread, and position.
Vertical Alignment
Control the vertical alignment of the element or its content. Options include:
Start
Center
End
Background (Toggle/Type Selector)
Selects the background type for the button’s normal state — solid/gradient (brush icon) or image (image icon).
Background Color
Sets the solid background color when the button is in its normal state.
Background Image
Uploads or selects an image as the button background in its normal state.
Background Hover (Toggle/Type Selector)
Defines the background style on hover, with options for color, gradient, or image.
Title Typography
Controls the font family, size, weight, line height, letter spacing, text transformation, and style for the button’s title text.
Title Color
Sets the title text color in its normal state.
Title Color Hover
Sets the title text color on hover for interactive effects.
Title Shadow
Adds a shadow to the title text with options for color, blur, and positioning.
Subtitle Typography
Controls the font family, size, weight, line height, letter spacing, text transformation, and style for the button’s subtitle text.
Subtitle Color
Sets the subtitle text color in its normal state.
Subtitle Color Hover
Sets the subtitle text color on hover.
Subtitle Shadow
Adds a shadow to the subtitle text with options for color, blur, and positioning.
Icon Size
Controls the size of the button’s icon.
Icon Color
Sets the icon color in its normal state.
Icon Color Hover
Sets the icon color on hover for an interactive effect.
Icon Space
Adjusts the space between the icon and the button text.
Icon Padding
Sets the internal spacing around the icon, with options for individual or linked sides.
Multi Line Button Widget Design Examples For Elementor
Here are some live use cases for the Multi Line Button widget.
Before and After Widget with the Multi-Line Button widget.
Hotspots positioned with the Multi-Line Button widget.
Thank you for using the Multiline Button widget for Elementor! This free widget lets you create buttons with multi-line text and icons, perfect for clear, detailed call-to-actions without affecting your design. With customizable typography, icon placement, and styles, it fits seamlessly into any layout. For help or inspiration, feel free to check out our website.
