Elementor Basics
If you want to fill missing gaps regarding responsive website design, you should visit Elementor’s academy.
Learn how to use the power of responsive design and get pixel-perfect results on every screen size. The jump from desktop to mobile can be tricky. Find how to avoid big mistakes, often web developers make. In Elementor, settings are inherited from desktop to mobile, downwards. And that is one of the most important things to remember. Probably, the best tip I got from one of many videos in their selection.
You can also learn from the web development stage or by topic. Whether it is optimizing and styling the navbar or column width and alignment per device, you will find everything.
Elementor Template Shortcode
As we all know, Elementor Template Library is a very effective tool for users. Simply because it allows you to easily export or import pre-design layouts & save tons of your time. You can include any template using just a shortcode, another impressive thing about Elementor – it lets you insert your ready-made templates inside any of your pages through a shortcode. In this article, we are going to give you a walk-through tutorial on how you can easily include Elementor Template by using a Shortcode.
Well, Elementor Template Shortcode can be very useful for lots of purposes. For instance, it can come very handful if your website is not entirely designed with Elementor. But if you need to do some tweaking in those particular pages and include your pre-made Elementor layouts, then you can simply just insert the Shortcode for the respective template. Afterward, you will be all set.
Generally, this type of scenario arises when you have built-in pages offered by your Theme. If they are not compatible with Elementor Page Builder, trying to convert it to an Elementor page, might be troublesome or can even break the layout. In the meantime, Elementor incompatible Plugins don’t give you the access to Edit their pages with it. As a result, you will miss out the chance to design the page as per your liking. However, Elementor Template Shortcode takes care of this hassle completely and lets you include your pre-made layouts.
Image Hotspots
Make your image and website stand out by creating interactive image hotspots, also called pins. To start, you will use Elementor’s widget called Flip Box. Image hotspots represent pins displayed on specific areas of the image that reveal more information upon interacting with them.
We will write steps you shouldn’t miss.
- Insert image in a column
- Find Flip Box and place it above the image
- Choose Icon for Flip Box, and reduce the opacity of the box
- In Advanced Menu, choose Custom in Positioning, or 100% if you want full width. For the responsive design, we advise you to use percentages.
- The back of the Flip Box should contain the information or description you prefer.
- Make sure the image takes 100% of column width and height
- Add more hotspots by duplicating the first, and then change the width and the height.
For more info and a video tutorial use this link.