News Tab Shortcode

Last Updated on

News Tab shortcode is one of the Jupiter shortcodes that allows you to create a tabbed content box. The difference with regular tabs is that the content of this box is dynamic. It will gather the news section of your website and put an overview of them inside this box. The news tab is perfect for a quick overview of your website news on the front page for example. Please note that in order to make it work, you need to add some News Posts to the website first. So, make sure you have some News posts in the News Section on your WordPress website before using this shortcode.

In this article, we’ll explain about configuring News tab shortcode.

News tab shortcode - demo

In this article

Displaying News Tab Shortcode

To add the shortcode:

Add a new page or edit an existing page.
From Visual Composer screen, click + button.

News tab shortcode - visual composer screen

In Add Element pop-up screen, search for News Tab and click on it to be added to the page.

News tab shortcode - add element

When the shortcode is added, a new pop-up screen called News Tab Settings opens. It gives you the ability to configure the shortcode settings.

News tab shortcode - News tab settings

Configure the settings as required. Other settings are explained in next sections.
Widget TitleAdds the main title for your News Tab in the front end of the website.
Tab TitleAdds the tab title for your News Tab in the front end of the website.
Click Save Changes and publish or update the page to check the result.

Configuring News Tab Settings

After you added the News tab shortcode, a pop up window will appear where you can set options for this shortcode.

Setting Description
Mobile Friendly Tabs?Use this option to decide upon view of this shortcode in when visiting with mobile devices. If enabled, tabs functionality will be removed in mobile devices, each tab and its content will be inserted below each other. Available options are: Yes Please!, No!
Note: Our recommended option is to change the shortcode behavior and stack all shortcode text as a normal content.

Adding an Extra Class Name

Extra Class Name field in the setting pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a style sheet or JavaScript file.

You can read Adding custom CSS class to a shortcode article for further explanation.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket