In this new tutorial, we will show you how to create a multiline button with icon in Elementor.
It should be noted that you will not need any additional plugin to do so. The version Elementor Pro will give you everything you need to get there
To get an idea of what we will be doing in this tutorial, the following video will show you a preview of what we will be doing together.
Now let's get to work.
See also How to Create a Custom Page for WooCommerce in Hementor
Let's create a new section by choosing the one with a column.
Then a in the side panel, let's select Min Height for Height and Minimum height let's click on VH and set the slider to 100.
Now drag the Button widget in our work area
In the tab Contents from the sidebar Let's change the field texts grabbing Download on App Store, Then on Alignment let's click on Center
Then click on the icon library button, type apple in the search bar, select the icon we are interested in and click on the insert button.
Back to the sidebar, let's change the Icon Spacing to 14
Read also: How to create an effect card from a portfolio in Elementor
In the tab Style, let's modify the background color button on Black
Let's change it size typography on 25
Public chat border radius, let's enter 20 for all edge radii. For the internal margins, let's enter 14-36-14-36 for the margins Up, Right, Down, and Left.
See also: How to change image at the click of a button in Elementor
Now we are going to go to the tab Contents and let's transform the button text into two lines.
To do this, copy and paste the following code into the text field:
<span class="top-small-text">TEXTE DE PREMIERE LIGNE</span> <br> TEXTE DE DEUXIEME LIGNE
Let's then change the text FIRST LINE TEXT to Download on and the text of SECOND LINE TEXT in App Store
Now we need to have more control over the first and second line
To do this, let's go to the tab Advanced then in the section Custom CSS, copy and paste the following code:
selector .elementor-button-icon{
font-size: 62px;
}
selector .top-small-text{
font-size: 16px;
color: #ffffff;
}
NOTE : If you do not have this section, you must quickly upgrade to the Pro version.
So to personalize your button enough you can for example enlarge the icon by modifying the value of font-size from the code section:
selector .elementor-button-icon{
font-size: 62px;
}
Read also: How to export and import Elementor models
To customize the color of the first line just change the value of color and if you want to change the font size value you have to change the font-size from the following section of code:
selector .top-small-text{
font-size: 16px;
color: #ffffff;
}
And here you have just created a multiline button with icon. You can preview it.
Get Elementor Pro Now!!!
Conclusion
So ! That's all for this article which shows you how to create a multiline button with icon in Elementor. If you have any concerns about how to get there, we'd love to hear from you in the Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
