New Features: Responsive Row Layout, Show Elements when Sticky, and More

One update after another - Visual Composer team is on fire, creating new features on our users' requests! 🔥

While working on the new features, we kept the focus on the mobile optimization which is more than just a responsive site design. It’s crucial to ensure that your visitors who reach your site from iPads and mobile devices have a high-quality experience.

But that’s not all we’re bringing up - let’s discover the 2.9 update and get introduced with few more awesome features, so needed when creating your website!

Responsive Row Layouts

Your website needs to be optimized for a mobile - it’s not a wonder, it’s a must! The fact that half of the world's population uses mobile phones worldwide has inspired the designers to change the strategy to think mobile first.

If the default Stacking option is not enough for you and a different layout is needed to have a fully responsive website, the Row Custom Responsiveness option is exactly what you need, as it gives you a full control of how your page layout looks on different devices.

For example, you might want to have two columns side by side on the mobile phone, whereas, for a desktop and iPad you want to display a four column row. You can also hide a certain column on one of the devices by simply typing ‘hide’ in the table row for the needed device.

Adjust how content looks on mobile with custom responsiveness settings

How to Set Different Responsive Row Layouts?

First, access Visual Composer frontend editor from your WordPress admin, then do the following:

  • Choose the row you want to customize;
  • Hover the row section and click on Row Layout option;
  • Set Custom responsiveness settings toggle ON.

The table of your row columns will appear with the default values shown for each device: desktop, iPad, and mobile in both - portrait and landscape view.

Once the row layout values are set, you can easily check the outcome by simply switching to different device previews from the Visual Composer editor or simply stretch the browsing window and see how the layout changes for a certain device size.

Show Element When Sticky

Alongside the opportunity to create sticky rows, columns, and sections, we have dug deeper with the options offering you to highlight a specific sticky element that only shows up on a scroll with a specific row that’s defined to be sticky.

This option is great for marketing purposes such as getting more subscribers to newsletters and other activities. You can set a sticky Subscribe button element to show it straight after the top menu disappears when scrolling down, thus making a focus on the button gaining more clicks.

Another great example for an online store - you can highlight a discount for a limited scroll exactly on the row where the product on sale is displayed, then hide the sticky discount row when the user scrolls lower.

This new feature is created to give you more options to highlight something on your website that’s on demand, so use it wisely to get your top happenings noted!

Define a Sticky Element

In the fronted editor of your WordPress site, create a new row with the needed element, then:

  • Navigate to Row Edit window;
  • Scroll down to the option Sticky and enable it;
  • Set the Display element only when it becomes sticky toggle ON.

Compatibility with WpDataTables

Tables and charts, as much as we need them, is one tricky thing to build to make them look good on your WordPress site. Going technical, or fiddling with shortcodes is tiring and can take loads of time.

Now, there is a way to do it fast and easy - the wpDataTables is one of the top-used WordPress plugins which lets you create beautiful tables and charts without going technical.

How to Start with WpDataTables?

First, download and activate the wpDataTables plugin on your WordPress site, then download the WpDataTables elements from the Visual Composer Hub (available for Premium users.) The rest is easy - start creating colorful and transparent tables or charts choosing a style and layout you need and insert them straight from the Visual Composer editor.

We hope that you will appreciate these new features while creating sites mobile friendly with a focus on the better users experience.

Welcome to share your experience on the new features, comment below your thoughts and recommendations, they are always appreciated! 🤗