Do you want your sections and columns to be clickable by your website’s visitors? Are you still using plugins to make your columns and sections clickable on your site?
Now with the addition of Flexbox containers into Elementor, you can convert your sections and columns into containers, which can be clickable without using any plugin.
Understanding Containers
Before we learn how to make containers clickable, it’s important to understand how containers work in Elementor.
While in the past, sections and columns were how designers would add widgets and content to the website, now it is recommended to use containers over the old sections and columns.
Not only do containers allow you to make them as a whole clickable by your site’s visitors to redirect them to a given URL, but containers also have a wide array of advantages over traditional columns and sections.
Benefits of Converting to Containers
To show you how much more effective containers are at making your website more interactive, here are some additional advantages that containers have over sections and columns.
Design Flexibility
Containers offer more control and customisation options compared to traditional section columns.
While a traditional section may take up the whole width of your page, you can freely customise the dimensions of containers, whether you want it to be 100% of the page’s width or smaller.
Responsive Design
We all know the importance of mobile responsiveness in designing websites, yet there is the issue of making your website cater to the many different devices that may visit your website.
With containers, you can set the alignment or sizing of the containers based on each type of device, and
Better Page Speed
If your web pages load slowly, changing to containers from sections and columns may solve the problem. By using less dividers (the HTML element), containers will be able to load faster than
Steps to Create Clickable Sections and Columns
Now that you understand what makes containers different from sections and columns, here is how to add a link to your containers to make them clickable.
1. Selecting the HTML Tag
First, create a new container or select the container you want to make clickable within the Elementor editor.
From the HTML tag dropdown selector, choose the “a” (link) tag option.
2. Adding a Link
After selecting the “a” tag, a link option will appear below. Enter the desired URL (beginning with https://) in the provided field.
You can also click on the gear icon to go to the link’s settings to change your clickable container such that it will open the link in a new tab.
3. Nesting Clickable Containers
If you intend to make a container clickable, ensure that there are no smaller clickable containers within the larger one as this would break the outer clickable container.
Converting Existing Sections and Columns into Containers
If you have an existing site that uses sections and columns, it is best that you convert them into containers to unlock advanced design capabilities and you will need to do this if you want to make your sections and columns clickable without installing plugins.
Before we begin, you must know that converting existing sections and columns is a one-way and final process. This means that you cannot convert a container back to a section or column.
1. Activate Containers (if necessary)
Source: Activate Elementor Experimental Features » Elementor
If you created this page before the release of containers, you will have to activate containers first as at the time of writing, containers are still classified as an experimental feature.
To do this, go to your WordPress dashboard, then go to Elementor, Features, and you can either click on “Activate All” to activate all ongoing experimental features or find containers then set it to “Active” if you do not want other experimental features to be activated.
2. Converting Sections to Containers
Source: Convert Existing Sections To Containers » Elementor
Click on the section or column you wish to convert within the Elementor editor.
Under “Edit Section” to the left of your screen, click on the “Convert” option to convert the selected section or column into a container.
3. Review and Adjust
After conversion, Elementor will create a duplicate of the section or column as a container below the original.
Manage and adjust the new container’s content and layout and delete the old section or column once you no longer need it.
Using containers is necessary for making sections and columns clickable in WordPress and moving forward, it is best that you start switching to containers as this will likely be the supported way of adding content in the foreseeable future.
Stay tuned for more tutorials and tips on utilising Elementor’s advanced capabilities to elevate your WordPress website’s design and functionality!
Related To:
Elementor Guide: Adding A New Page To Your WordPress Site
Elementor Guide: How To Add Pop-ups To Your WordPress Website
