In the ever-evolving world of web design, staying ahead of the curve is essential. That’s why we’re thrilled to announce an exciting enhancement to our existing macros features. Now, you can seamlessly incorporate images and icons directly into your titles, taking your website’s aesthetics to a whole new level. Let’s delve into this upgrade and see how it can make your titles more memorable, catchy, informative, and ultimately, help them stand out.
Understanding Macros
Before we explore the new features, let’s revisit the concept of macros. In web development, macros allow you to add code to your widgets without the need to write complex code manually. They simplify the process by providing a standardized notation that enables you to manipulate text effortlessly.
{{text}} – transforms to text (italics)
((text)) – transforms to text(bold)
text^N – transforms to textN (superscript)
|| – transforms to <br> (a single line break)
These macros have been helpful tools for customizing your text quickly. However, now you can do much more.
What’s New? Image & Icon Shortcodes In Title
First and foremost, the enhanced macros can now be utilized in all Elementor widgets, including native ones. This expanded compatibility means you can apply macros to a broader range of elements, increasing your design possibilities.
Additionally, the latest macros update brings the capability to use shortcodes in conjunction with macros. This means you can now employ shortcodes like [image] and [icon] directly within your titles, allowing for even greater flexibility and control.
Customization Options
Let’s explore the customization options offered by these macros in more detail. Here are two examples of [image] and [icon] shortcodes:
[image id=24841 size=0.9em valign=bottom thumb=tiny css="border-radius:25%; margin: 0.1em;"]
The image id is found in the Dashboard -> Media library. Icon names can be checked online using the following url (replace the website url and your theme/skin name if needed): https://qwery.ancorathemes.com/wp-content/themes/qwery/skins/default/css/font-icons/demo.html
[icon name=clock size=1em margin=0.1em] With these shortcodes, you can embed an image or an icon directly into your title. The result is a visually appealing title that captures your audience’s attention. Moreover, you have a variety of parameters at your disposal to fine-tune the appearance of the macros:
id – image ID uploaded to Media Library
url – image URL, can be used instead of image ID
name — icon name or code
alt – image alt text
valign – vertical alignment (options include top, bottom, and center)
size – CSS size (e.g., 2em, 10px, 30%)
thumb – registered thumbnail size (options include full names, e.g. ‘basekit-thumb-large’, ‘woocommerce-product’, etc., or short names, such as ‘tiny’)
css – custom CSS styles for further customization.
You can also use shortened versions of popular CSS properties, such as ‘color’, ‘bgcolor’ (background-color), ‘bdcolor’ (border-color), ‘border’ (border-width), ‘radius’ (border-radius), padding, and margin.
In Conclusion
Incorporating images and icons directly into your titles is a new and exciting trend in web design. These features open up a world of creative possibilities, allowing you to craft unique and visually appealing titles for your websites.
We invite you to explore the potential of these macros and wish you the best of luck in creating amazing websites that leave a lasting impression on your visitors. Elevate your design game today with the power of macros and take your web projects to the next level!