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


Displaying News Tab Shortcode

To add the shortcode:

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

News tab shortcode - visual composer screen

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

News tab shortcode - add element

4When 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

5Configure the settings as required. Other settings are explained in next sections.
SettingDescription

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.
6Click 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!

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.