Join my newsletter to receive weekly insights on Elementor, web design and WordPress. 7,000+ people already subscribed.
The magic of 'fit-content' keyword in Elementor
|
Howdy Reader 👋🏻 Did you even spot a design element that looks like a button but it’s not a button? Here is the design element I meant. In Elementor, you can create something like that using the Button widget. But I don’t recommend this method because the Button widget is not designed for this matter. Instead, you can use the fit-content keyword. It is a magic keyword in CSS to make the size of an element to adapt to its content automatically. In the case of the button-like element above (you can call it 'pill' or whatever you want), the width of the “button” will adjust automatically according to the number of the characters of the label. In other words, the more characters you have on the “button”, the wider the “button” will be. Conversely, the fewer the characters you have, the narrower the “button will be”. The use of the fit-content keyword is quite useful if you often use Elementor’s Theme Builder to create single post templates or Loop templates. You can use it to create, for instance, a label and populate it with dynamic content (e.g., custom field). You can also use the fit-content keyword to create something like this. Or this. Adding the fit-content keywordYou can use the fit-content keyword to set both the width and height of an element. To do so, you can select the pencil icon when setting a unit in Elementor and type fit-content. Go try using the keyword and find the magic. Talk soon, Aliko Founder of Totheweb (UtilizeWP, WPPagebbuilders, Pagebuildertemplates.com) |
Aliko
Join my newsletter to receive weekly insights on Elementor, web design and WordPress. 7,000+ people already subscribed.
Howdy Reader 👋🏻 Elementor is always marketed as a no-code website builder. And that’s the truth. With Elementor, you can create a professional website without touching a single line of code. You can even use it to create a super complex dynamic website by pairing it with plugins like ACF and JetEngine. The next question is, how far can you go with the default styling options that Elementor offers? Because in many cases, what’s available in the Elementor settings panel is not enough. I will...
Howdy Reader 👋🏻 A small detail can make your Elementor design look better. Sometimes, it can be as simple as the button design. The main goal of every website is to generate conversions. And to generate conversions, you need good click rates. A simple trick to increase click rates on your website is by making your button look eye-catching. People are likely to click a button if it looks different from buttons they usually see on the internet. This is a natural behavior. I have four simple...
Howdy Reader 👋🏻 Have you tried Elementor v4? If so, what are your thoughts? I personally love the overall idea of Elementor v4. Especially, regarding the number of elements. Elementor v4 has way fewer elements than Elementor version 3, but they are all essentials. Honestly, I don’t think that more elements means better. I still use Elementor v3 on my daily basis and have no plan to switch to Elementor v4 before the beta status is lifted. When designing a page using Elementor v3, in most real...