7 Elementor Add-ons to Display Instagram Feed

So far, Elementor has no default widget to display Instagram feed yet. The only way to display your Instagram feed is by installing an add-on. But which add-on?

Most premium Elementor add-ons (including Essential Addons, Happy Addons, and JetElements) have a widget that allows you to display Instagram feed. In most cases, you need to enter an Instagram Access Token to display an Instagram feed from your account.

Here are 7 Elementor add-ons that have a widget to display Instagram feed.

1. Essential Addons

Essential Addons is one of the most popular Elementor add-ons. It is developed by WPDeveloper. Essential Addons is released as a freemium add-on. The widget to display Instagram feed — called Instagram Feed — is available on the pro version so you need to buy the pro version to display your Instagram feed. The Instagram Feed widget of Essential Addons will display your Instagram in a beautiful way. You can see the demo here. By default, the Instagram Feed widget will display your Instagram feed in 4 columns with the images displayed are 12. These numbers are customizable. You can also set things like border-radius, load more button, and so on.

2. JetElements

JetElements is a cheaper alternative to Essential Addons if you just need an add-on to display Instagram feed. It costs $19 per year. You can also get JetElements with a one-time purchase on the Jupiter X theme bundle and Monstroid2 theme bundle. In JetElements, the widget to display Instagram feed is called Instagram. This widget allows you to display the Instagram feed in three styles: grid, masonry, and list. You can display Instagram feed by a hashtag or a username. You need to integrate JetElements with your website first via Access Token to display your Instagram feed. You can see the demo of the Instagram widget of JetElements here.

3. Happy Addons

You can actually use Happy Addons for free as it is a freemium add-on. However, the widget to display Instagram feed is only available on the pro version so you need to use the pro version to display your Instagram feed. Happy Addons offers several styles to display your Instagram feed in a beautiful way. You can see them here.

Happy Addons itself is developed by weDevs, the developer of popular WordPress plugins such as WP Project Manager, WP User Frontend, and Dokan.

4. PowerPack

PowerPack is the best option if you are looking for a free Elementor add-on to display Instagram feed. PowerPack is basically a freemium add-on but the widget to display Instagram feed — called Instagram Feed — is available on the free version so you don’t need to spend any money only display your Instagram feed. Another good thing offered by PowerPack is that you don’t need to enter Access Token to display your Instagram feed. You just need to enter your Instagram username (just make sure your account is not set to private mode).

PowerPack allows you to display your Instagram feed in three different styles: grid, masonry, and carousel. You can add an overlay, show/hide comments and likes. There are also options to set the number of photos to be displayed as well as the number of columns. Fyi, PowerPack comes with a white label feature.

5. Unlimited Elements

Same as other add-ons above, Unlimited Elements is also released as a freemium add-on. This add-on has 5 widgets that you can use to display your Instagram photos: Grid Intagram Widget and Latest Instagram Image. To display your Instagram feed, you can use the Grid Intagram Widget as the Latest Instagram Image only displays the latest Instagram photo (a single image). The styling options offered by the Grid Instagram Widget are limited enough compared to other widgets of the add-ons above. You can display your Instagram photos without needing to enter the Access Token.

6. Element Pack

Element Pack is also released as a freemium Elementor add-on but the widget to display Instagram feed is available on the pro version. The Element Pack widget to display Instagram feed is called Instagram. It allows you to display Instagram in a grid style, masonry or carousel. You can see the demo on this page.

7. The Plus Addons

The Plus Addons is another Elementor add-on that has a widget to allow you to display Instagram feed. The widget to display Instagram feed offered by The Plus Addons is called Instagram Feed. This widget allows you to display an Instagram feed from a public account without entering an Access Token. You can display your Instagram feed in a wide range of styles as you can see on this demo page. The Plus Addons itself is a freemium Elementor add-on. The Instagram Feed widget is available on the pro version.

The bottom line

Instagram is today’s most popular social media platform. Even so, Elementor has no default widget to display Instagram feed. On the celebration of 12 million active installs, Elementor asked users to select a new widget to be developed via polling, one of the poling options was the Instagram widget. However, the polling results showed users prefer the Steps for Forms widget, a widget to create multi-step forms. So, if you need to display Instagram feed on an Elementor-powered page, you need to install an add-on. You can select one of the add-ons from the list above.

Monarch, a Robust Social Media Sharing Plugin for Marketing

Integrating your website with social media is inevitable, especially if you use your website for a business purpose. Providing social media sharing buttons will make it easy for your visitors to share the article they are reading or a product they are seeing. Monarch is one of the plugins that allow you to provide social media sharing buttons to your WordPress-based website. Monarch is especially a great social media sharing plugin for a marketing purpose as it comes with an analytics feature.

A brief intro about Monarch

Monarch is a social media sharing plugin developed by Elegant Themes, the developer of Divi Builder and Divi theme. Monarch is a paid plugin. To get the plugin, you need to be a paid subscriber of Elegant Themes that costs $89 per year (or $249 for a one-time purchase option). The Elegant Themes membership allows you to download all products developed by Elegant Themes, not limited to Monarch. The products are:

  • Divi Builder
  • Divi theme
  • Extra theme
  • Monarch
  • Bloom

Monarch review

Social media sharing buttons on a website are not accessories. They are part of the marketing tools. They allow visitors to share a page more easily. Monarch allows you to add the social media sharing buttons to a wide range of content types on your website. From pages, articles, to products. You can even add social media sharing buttons to media elements (such as images).

The social media sharing buttons of Monarch are customizable. You can select which social media platforms you want to provide the buttons of, set the colors, set the icon style, and so on. More importantly, Monarch has a default analytics feature that allows you to monitor the sharing stats.

Here are some key features offered by Monarch.

Customizable social media sharing buttons

To start using Monarch, you need to set where you want to display the social media sharing buttons. Monarch allows you to display the social media sharing buttons on the following locations.

  • Sidebar
  • Inline
  • Popup
  • Fly-in
  • Media

You can display the social media sharing buttons on multiple locations according to your needs. Once you are done setting locations, you can set the social media platforms you want to display the buttons of. There are about 24 social media platforms supported by Monarch.

Some social media platforms that basically no longer exist (such as Google Plus) are still available on the list. So, you need to a bit thorough when selecting social media platforms. Oddly enough that there is no WhatsApp available on the list. The Elegant Themes might consider it a chat app instead of a social media platform. Just for comparison, WhatsApp — as well as other chat apps like LINE and Telegram — are available in AddThis.

Monarch allows you to use a different style for the social media sharing buttons on each location. Each location has a separate setting block.

There are four button (icon) styles offered by Monarch for each location. There are also three icon shapes you can choose from. By default, each icon has a background according to the official color of the social media platform it belongs to (such as light blue for Twitter and red for Pinterest). But you can customize the background color as well as the icon color to your liking.

Monarch allows you to save the settings you made into an external file and import the settings on other Monarch installs on different domains. The settings file is stored in a JSON format.

Built-in analytics

As mentioned earlier, Monarch comes with a default analytics feature that allows you to check the sharing stats. You can click the analytics icon (right-most) on the top bar of the Monarch settings panel. On the top section, the stats display the all-time sharing performance. You can see the number of total shares, total likes, and activities. You can check the stats per location by selecting a location from the dropdown menu.

To check total shares within a week, a month, and a year, you can simply scroll down your mouse. On the bottom section, you can see which articles have most shares.

Update

If you buy Monarch with a subscription model, you will receive updates during the active license period. If you buy Monarch with a one-time purchase option, Elegant Themes offers lifetime updates. To get the update notifications, you need to connect your website with your Elegant Themes account.

The verdict

Monarch is one of the recommended items if you are looking for a social media sharing plugin for a marketing purpose. It comes with an analytics feature to allow you to monitor the sharing performance of your website content. The social media sharing buttons/icons are also customizable and you can display them on 5 different locations.

The price of Monarch is a bit expensive but crucial to note that the subscription plan offered by Elegant Themes allows you to download all products developed by Elegant Themes, not just Monarch. Plus, you can use each product on unlimited websites, not just one website.

A downside of Monarch is that it still preserves social media platforms such as Google Plus that basically no longer exist. Also, it doesn’t support app chat apps like WhatsApp, LINE, and Telegram.

PS

Monarch can be installed on any WordPress theme, not just themes developed by Elegant Themes.

How to Add Twitter Feed in Elementor

Elementor has no default widget to display your Twitter feed (a social media giant with over 353.1 million users). If you want to display your Twitter feed, you can install an add-on that offers a widget to display a Twitter feed. Essential Addons and Happy Addons are two examples of the premium Elementor add-ons that have a widget to display Twitter feed. In this post, we will show you how to display a Twitter feed using Essential Addons.

Essential Addons has two widgets that you can use to integrate your Twitter with your Elementor-powered website. In addition to displaying your Twitter feed, you can also display your tweets in a carousel mode.

How to use Essential Addons to display Twitter feed in Elementor

The two widgets offered by Essential Addons that you can use display your tweets are Twitter Feed and Twitter Feed Carousel. Normally, you need to enter the Consumer Key and Consumer Secret to display a Twitter feed to a website. These two components already provided by Essential Addons so you just need to enter your username or hashtag if you want to display tweets by hashtag instead of a username.

To get started, make sure you have installed and activated Essential Addons. Once you ready, simply create a new page, post or template and edit with Elementor. Prepare a section or column where you want to display your tweets on the canvas area and drag the Twitter Feed widget there.

By default, the Twitter Feed widget displays the tweets of WPDeveloper, the developer of Essential Addons. To display the tweets of your account, go to the Account Name option under the Account Settings block under the Content tab and type your Twitter username. If you want to display tweets by a hashtag, type your preferred hashtag on the Hashtag Name option.

To set the layout, you can open the Layout Settings block. You can select the content layout, number of columns, content length, the gap between columns, and number of tweets. There is also an option to show/hide media elements.

You can open the Card Settings block to customize the Twitter card. You can show/hide your Twitter ava, show/hide tweet date, show/hide Twitter logo icon.

To style the widget, you can go to the Style tab. There are two blocks you can open. On the Card Style block, you can set the background of the card, padding, border radius, and box shadow.

On the Color & Typography block, you can set the text color as well as the typography of the title, tweet, and link.

To set the margin and the padding of the Twitter Feed widget, you can go to the Advanced tab.

If you prefer to display your tweets in a carousel mode, you can simply drag the Twitter Feed Carousel widget to the canvas area.

The bottom line

Since Elementor has no default widget to display a Twitter feed, you need to install an add-on if you want to display your tweets in an Elementor-powered page. Essential Addons is one of the add-ons that comes with a widget to display a Twitter feed. In addition, you can also display your tweets in a carousel mode.

How to Use the Posts Widget of Elementor

The pro version of Elementor comes with a widget called Posts. You can use this widget to display the existing articles on your website. By default, the Posts widget displays the newest articles on your website, but you can filter the articles by certain parameters. Some premium Elementor add-ons such as Essential Addons and JetElements also have a similar widget, but the native Posts widget of Elementor supports more filtering options.

You can use the Posts widget anywhere on your website. Whether on the homepage, on a category page, on an archive page, on the footer, on the sidebar, and so on. You can even use the widget to display the related articles on the single post template.

How to Use the Posts Widget of Elementor

Before getting started, just make sure that you have installed and activated the pro version of Elementor since the Posts widget is only available on the pro version.

Create a new page, post or template with Elementor. On the Elementor front-end editor, add a new section add drag the Posts widget to the section. You can find the Posts on the PRO block on the left panel.

As you can see, the widget will display the last articles on your website once you added it.

Filtering the Articles

To filter the articles, you can open the Query block under the Content tab. In addition to displaying the articles (posts), you can also use the Posts widget to display pages and WooCommerce products. You can set the content type (post, page or product) you want to display from the Source option.

Filter the Articles by Category and Tag

To filter articles by category or tag, click the Include By field and select Term. A Term field will appear afterward. Enter the category name or tag name you want and select from the appearing list.

You can add multiple categories or tags.

If you leave the Include By field empty, the Posts widget will display all articles on your website. You can hide articles in certain categories or tags by entering the categories or tags on the EXCLUDE tab.

Filter the Articles by Author

To filter the articles by author, simply select Author on the Include By field and enter the name of the author on the appearing field. You can add multiple authors.

To hide articles from certain authors, you can go to the EXCLUDE tab.

Select the Articles Manually

In addition to filtering the articles by category, tag, and author, you can also add the articles manually. This option is great if you want to display a featured article on the homepage or anywhere you want.

To add articles manually, select Manual Selection on the Source option and enter the title of the articles you want to display on the Search & Select field.

You can add multiple articles to be displayed.

Setting the Layout

After filtering the articles, you can set the layout. Open the Layout block under the Content tab. As you can see, there are several options you can set. You can set the skin, the number of columns to display your articles, posts per page, image position, image size, image ratio, excerpt length, and post meta.

Setting the Pagination

To set the pagination, open the Pagination block under the Content tab. There are three pagination types offered by the Posts widget: Numbers, Next/Previous, and the combination of the two.

A little note. The number on the Page Limit field controls the number of pages that can be accessed, not the number of articles. If you have 100 articles and you set the number to 5 — while you set the articles per page to 6 — the maximum articles can be accessed are 30 (6 x 5).

Styling the Widget

As usual, you can go to the Style tab to style the Posts widget. There are five blocks you can open.

Layout block

On this block, you can set the gap between columns and rows. You can also set the alignment of the content.

Box Block

On this block, you can set the border width of the box, border radius, border color, padding, content padding, box shadow, and background of the box.

Image Block

On this block, you can set border radius of the featured images of the articles as well as the gap between each featured image to the content. You can also apply some CSS filters if you want.

Content Block

On the Content block, you can customize the style of the content (Title, Meta, Excerpt, Read More). You can set the text color, typography (font size, font style, font family) and the spacing.

Pagination Block

You can style the pagination on this block. You can set the typography (font size, font style, font family), text color, and space between numbers. When setting the text color, you can set different colors for the normal condition, mouse hover and active.

If you want to set the padding and the margin of the Posts widget, you can go to the Advanced tab. To save time in styling the widget, you might want to install WunderWP. This plugin has 5 presets you can choose from.

The Bottom Line

You can use the Posts widget of Elementor to display the existing articles on your website. If you use your website to sell something via WooCommerce, you can also display products. This widget has a filtering feature that allows you to filter the articles by certain parameters. You can use the Posts widget on any part of your website.

How to Turn Google Sheets into a Beautiful WordPress Table with Essential Addons

There are several ways to create a table in WordPress. If you already have a table in Google Sheets, you can display it to your WordPress site without needing to recreate the table. This post will show you how to turn a spreadsheet file in Google Sheets into a beautiful table in WordPress using Essential Addons. This method is great to convey announcements such as graduation, test results, and so on.

Essential Addons itself is a freemium Elementor add-on. The widget to turn a Google Sheets spreadsheet into a WordPress table is available on the pro version. You can also use the free version of Elementor to create the table.

Before getting started, make sure you have installed and activated both Elementor and Essential Addons.

Step 1: Creating a Google Sheets API Key

Before being able to turn a spreadsheet file into a WordPress table, you need to integrate your WordPress site with Google Sheets first. You need an API key to do so.

Visit Google API Console and login with your Google account. Make sure to login with the same Google account as the one you use for Google Sheets. If you have no project yet, create a new one by clicking the dropdown menu on the top bar and click NEW PROJECT.

Give your new project a name and click the CREATE button.

Select the project you have just created from the dropdown menu on the top bar and click Library on the left panel.

Enable the Google Sheets API key. To do so, click VIEW ALL on the G Suite section. Seek for Google Sheets API and click. Click the ENABLE button to enable the API key.

Switch back to the Google API Console main dashboard (you can click the Google API Console logo on the top bar to do so). Click Credentials on the left panel and click the CREATE CREDENTIAL button on the top side, select API key.

Copy the generated API key.

Step 2: Start Creating the Table

Login to your WordPress dashboard and create a new page (Pages -> Add New) or a new post (Posts -> Add New) and edit it with Elementor.

Add a new section by clicking the plus button on the canvas area and add the Advanced Data Table widget to the section you have just added.

On the Data Source block under the Content tab, set the Source option to Google Sheets and enter your Google Sheets API key, sheet ID, and table range.

Note: If you see no option to enter the API key, sheet ID and table range, make sure to update your Essential Addons to the latest version.

Getting the sheet ID and table range

Before you copy the sheet ID and table range, make sure to set the spreadsheet file you want to display the table of to Public. To do so, click the Share button on the upper-right corner. Click Advanced on the appearing window.

Click Change and select the Public on the web option. Click the Save button.

Next, copy the sheet ID. Sheet ID is a random text on the URL structure of Google Sheets.

To get the table range, highlight the cells of the table and click the Data menu and select Named ranges. You can copy the data range from the panel on the right side.

Styling the table

If everything went well, you should see the data of your Google Sheets on the Elementor canvas as the following. You can set the width of the columns by dragging them to the left/right.

To style your table. you can go to the Style tab on the left panel. To set the width of the table, change the value on the Width option on the Table block. You can also set the border color of the table, border type, border width, and border radius from this block.

To customize the table header (top column), you can open the Head block. You can set the typography (font size, font family, font style), text alignment, text color, background color, and so on.

To customize the body (table data), you can open the Body block. You can set the typography (font size, font family, font style), text color, background color.

You can also set the style of the pagination from the Pagination block. To set the rows per page, you can open the Advanced Features block under the Content tab.

You can play around on the left panel to customize your table until you get satisfied with the look of your table. Once you are done, click the PUBLISH button on the bottom side on the left panel to publish your page.

The bottom line

Essential Addons is an Elementor add-on that comes with creative widgets. One of which is Advanced Data Table that allows you to turn a Google Sheets spreadsheet into a beautiful table in WordPress. This widget is great to display a long table such as a graduation announcement, test results, and so on. You can customize your table to make it more appealing to see.

How to Manually Update the Essential Addons Pro Plugin

There are two versions of Essential Addons: free and pro. The free version is hosted on WordPress.org, while the pro version is hosted on the server of the developer (WPDeveloper.net). If you update the free version, the required files for the new version are retrieved from the WordPress.org server. Similarly, if you update the pro version, the required files for the new version of Essential Addons Pro are retrieved from the WPDeveloper.net server.

Using the old version of Essential Addons will affect its compatibility with Elementor. Essential Addons itself will notify you if you are using the old version that is not compatible with the Elementor version installed on your WordPress. To update your Essential Addons, you can go to the plugins manager of WordPress. You will see an “update now” link below an installed plugin if a new version is available. Simply click the link to update the plugin.

If the method above doesn’t work for a certain reason, you can manually update your plugin.

How to Manually Update Essential Addons Pro Plugin

To update the pro version of Essential Addons, you need to download the file of the latest version of Essential Addons Pro from the WPDeveloper.net. Visit the WPDeveloper.net website and login with your account. Once logged in, go to the Downloads tab and click the link of the Essential Addons Pro file to download the file (available in ZIP).

Next, login to your WordPress dashboard and go to the plugins manager by clicking the Plugins menu on the left sidebar. Deactivate and delete the current version of Essential Addons Pro installed on your WordPress.

Note: Deleting your Essential Addons Pro won’t delete your previous work

Once the current version is deleted, install the new version from the ZIP file you have just downloaded. To do so, click the Add New button on the plugins manager page.

Click the Upload Plugin button, select the ZIP file of Essential Addons Pro, and click the Install Now button to install it. Activate the plugin right away once installed.

That’s it. Your Essential Addons Pro has been updated.

The bottom line

Essential Addons is one of the best premium add-ons for Elementor. It comes with over 50 widgets to allow you to add creative elements to your Elementor page. The developer (WPDeveloper) actually offers an auto-update feature that applies during the one-year active license. If it doesn’t work, you can perform a manual update as we have just covered above.

3 WordPress Themes Bundled with JetPlugins

JetPlugins is one of the best add-ons for Elementor. It’s not a single add-on. Instead, JetPlugins is a set of premium Elementor add-ons developed by Crocoblock. The set consists of 18 add-ons with each add-on is designed specifically for a specific use. For instance, JetWooBuilder is designed to help you to customize your WooCommerce-powered online store in which you can create a custom single product template, product category page, archive product page, and so on.

There are several ways to get an add-on from the JetPlugins family. You can get an add-on individually. This option is great if you only need a single add-on. Alternatively, you can also get the multiple add-ons at once via plans offered by Crocoblock. There are 3 main plans offered by Crocoblock: Design, Multi-Tool, and E-Commerce. Each plan offers different add-ons set.

One crucial thing to note. Crocoblock adopts a subscription-based business model. Meaning that you need to pay a subscription fee (billed yearly) to get the add-ons. There is also a one-time purchase option but the price is pretty high: $499.

Another option to get add-ons from the JetPlugins family is by buying the themes below. You can get the add-ons, along with other features offered by each theme, with a one-time purchase option.

1. Jupiter X

Jupiter X is one of the Elementor-based WordPress themes that is bundled with JetPlugins. Jupiter X is especially a great theme if you are looking for a WordPress theme for your client websites. It comes with a white label feature that allows you to rebrand Jupiter X with your brand or your company brand. Jupiter X is the newest generation of the Jupiter theme. The theme is rebuilt with Elementor from previously WPBakery.

You can read the review of Jupiter X theme we have written.

Not all JetPlugins members are included in the Jupiter X theme bundle. The developer selected only the essential JetPlugins members. The following are the JetPlugins members included in the Jupiter X theme bundle.

JetElements allows you to add creative elements such as Instagram feed, pie chart, and so on to your Elementor-powered page, while JetPopup allows you to create popups. Jupiter X comes with over 200 premade website templates. A website template is a set of Elementor templates that you can import in a single click. A website template consists of a header template, footer template, homepage template, about page template, contact page template, and other templates. There are also section templates you can use if you want to create a new page with Elementor.

Jupiter:

  • Developer: Artbees
  • Price: $59

2. Monstroid2

Monstroid2 is another Elementor-based WordPress theme that is bundled with JetPlugins. This theme has some things in common with Jupiter X. It’s also a multi-purpose theme that you can use to create any type of website. From a blog, a magazine, an e-commerce website, a portfolio website, and so on. The difference, this theme has no white label feature.

You can read the review of Monstroid2 we have written.

There are 9 JetPlugins members included in the Monstroid2 theme.

  • JetThemeCore
  • JetElements
  • JetBlocks
  • JetBlog
  • JetTricks
  • JetMenu
  • JetTabs
  • JetWooBuilder
  • JetPopup

Monstroid2 is especially a great option if you have fallen in love with Elementor’s intuitive front-end editor, yet lazy enough to upgrade to the pro version due to the subscription-based model adopted by Elementor. The JetThemeCore add-on included in the theme bundle will replace the theme builder feature of Elementor where you can create a custom header template and custom footer template.

Same as Jupiter X, Monstroid2 also comes with premade website templates (called skins) to allow you to create a beautiful website in no time. The Monstroid2 developer promises to release a new skin each week.

By the way, we have written an article that compares the differences between Jupiter X and Monstroid2 in case you are curious.

Monstroid2:

  • Developer: Zemez
  • Price: $75

3. Woostroid2

Woostroid2 is a perfect option if you want to create an e-commerce website. This theme is developed by the same developer as Monstroid2 (Zemez), but it is designed specifically for e-commerce websites. Woostroid2 comes with skins designed specifically for e-commerce websites. Plus, it is also bundled with JetPlugins members for WooCommerse such as JetWooBuilder, JetProductGallery, JetSmartFilters, and JetCompareWishlist.

You can use JetSmartFilters to add an advanced filtering feature to your e-commerce website. While for JetCompareWistlist, you can use it to allow your visitors to add a product to a list. Here are the JetPlugins members included in the Woostroid2 theme bundle:

  • JetElements
  • JetMenu
  • JetWooBuilder
  • JetProductGallery
  • JetSmartFilters
  • JetCompareWishlist
  • JetPopup
  • JetTabsJetBlog
  • JetTricks
  • JetBlocks
  • JetThemeCore

Woostroid2:

  • Developer: Zemez
  • Price: $114

The bottom line

JetPlugins is a set of Elementor add-ons developed by Crocoblock. Consisting of 18 add-ons, JetPlugins is the perfect alternative to Elementor Pro. The problem is that Crocoblock — same as Elementor — adopts a subscription-based payment model, which is not liked by some people. Jupiter X, Monstroid2, and Woostroid2 are Elementor-based WordPress themes that are bundled with JetPlugins. From those themes, you can get JetPlugins, as well as other features, with a one-time purchase option.

How to Use a Big Grid Shortcode in tagDiv Composer

tagDiv Composer is a page builder plugin designed specifically to create online magazines, news portals, and blogs. It has lots of design elements (called shortcodes) to make it easy for you to create the homepage of your website as well as other parts that display the content of your website dynamically such category pages, archives pages, and so on. One of the shortcodes offered by tagDiv Composer is Big Grid.

Big Grid is not a single shortcode. Instead, it is one of the shortcode groups available on tagDiv Composer. A Big Grid shortcode is used to display articles on your website in a grid style. The number of the boxes in a Big Grid shortcode is varied depending on the Big Grid you use. tagDiv Composer has about 33 Big Grid shortcodes.

Big Grid shortcodes are great to create the hero section of your online magazine or blog although you can also use it in any section. Articles displayed on a Big Grid shortcode are filterable. You can filter articles by category, tag, and author. You can also manually select articles to be displayed on a Big Grid shortcode by entering their post IDs.

How to use a Big Grid shortcode in tagDiv Composer

To get started, create a new page (Pages -> Add New) and edit it with tagDiv Composer by clicking the TAGDIV COMPOSER button. If you are new to tagDiv Composer, you can read this post to learn the basic use of tagDiv Composer.

Add a Big Grid shortcode you want to use and drag it to the canvas area. You can find a Big Grid shortcode on the Big Grid shortcodes section.

As you can see, the shortcode you have just added displays your articles in a grid style. By default, it displays the latest articles on your website. You can filter the articles.

Filtering the articles

To filter the article, you can go to the Filter tab. There are several parameters you can use to filter the articles. From post ID, category, author, slug to post type.

  • Filtering articles by post ID

To filter the articles by post ID, you can paste the IDs or the articles you want to display and separating them by commas.

To get the post ID of an article, you can edit the concerned article and go to the address bar of your web browser to see the URL. Post ID is a random number between “=” and “&” signs of the URL.

Alternatively, you can also go to Post -> All Posts. Hover your mouse over the Edit link on the article you want to check the post ID of and check the URL on the bottom-left corner of the screen.

  • Filtering articles by category

To filter the articles by category, you can simply select a category you want. Only articles under the selected category will be displayed on the Big Grid shortcode.

  • Filtering articles by multiple categories

You can also filter articles by several categories. To do so, simply enter the IDs of the categories on the Multiple taxonomies filter field and separate them with commas.

Same as post, you can also find the ID of a category by editing it or by hovering your mouse the Edit link on the Categories page (Posts -> Categories).

If you want to display all articles from all categories with an exception, this is also possible. For instance, you want the articles under the “Windows” category not to be displayed. In such a case, you can select All categories on the Category filter option then add the ID of the category you want to exclude on the Multiple taxonomies filter field and “-” as the prefix. You can exclude multiple categories.

  • Filtering articles by tags

To filter the articles by tags, you can simply enter the tags’ name to the Filter by tag slug field and separate them with commas.

  • Filtering articles by authors

To filter the articles by authors, you can simply enter the IDs of the authors to the Multiple authors filter field. Separate the author IDs with commas.

  • Filtering articles by post type

If you have custom post types on your WordPress site, you can also filter the articles on a Big Grid shortcode by post types. By default, WordPress has two post types: Post and Page. You can simply enter the post types to the Post Type field to filter them. Separate them with commas.

Customizing the Big Grid shortcode

Once done filtering the articles, you can start customizing the Big Grid shortcode. You can set things like typography, overlay color, the gap between boxes, and so on.

Boxes in a Big Grid shortcode are called modules so you will find the label “module” instead of “box” when customizing the Big Grid shortcode.

tagDiv Composer itself offers several premade style presets to allow you to instantly get a beautiful Big Grid shortcode. To use one, go to the General tab and click PRE-MADE STYLE PRESETS and select a style preset you like.

To set the length of the title, you can go to the CONTENT LENGTH block under the General tab.

Here some customization options you might want to set.

  • Modules gap

To set the gap between modules (boxes), you can go to the Layout tab. Set the gap on the Modules gap option (you need to enter the number manually).

Below the Modules gap option, you can also set the horizontal alignment of the post meta as well as the horizontal alignment. You can also disable/enable the zoom effect.

  • Module elements

Modules in a Big Grid shortcode are divided into two categories, no matter the number of modules (boxes) a Big Grid shortcode has. To customize the elements on each module category, you can go to the module category you want to customize the elements of:

You can set the image size, image alignment, meta info width, meta info margin, meta info padding, article title space, article title padding, and so on. You can also show/hide the author and date.

  • Module typography, image effect, overlay

To set the typography of the elements on a module (meta and title), you can go to the Style tab. You can set the typography of each element (font family, font size, font style) on the MODULE FONTS block.

Read this post to learn more about how to customize a text in tagDiv Composer.

To set the color of the texts, you can go to the COLORS block, still under the Style tab.

To add effects to images on the modules, you can go to the IMAGE EFFECTS / BLEND MODES block. Select an image effect and blend mode you like and choose the colors by clicking the color selectors. Set the brightness, contrast, and saturation accordingly.

In addition to adding effects and blend modes to the image on the modules, you can also set the overlay of the modules. You can set a different module for each module. Go to the COLORS block to set the overlay.

To set the margin, padding, and background of the Big Grid shortcode, you can go the to Css tab.

The bottom line

Big Grid shortcodes are crucial enough when you are creating the homepage of an online magazine or blog with tagDiv Composer. A Big Grid shortcode is great to create the hero section of your online magazine as it instantly displays articles in a grid style. You can use a Big Grid shortcode to display the featured articles, headlines, and other crucial content.

How to Integrate Mailchimp with WordPress in Newspaper Theme

Newspaper theme comes with a feature that allows you to integrate your website with Mailchimp. You can add a Mailchimp form anywhere on your website. Be it on the single post template, sidebar, homepage or footer. No need to deal with PHP, HTML or CSS to do so. You can use tagDiv Composer to add a Mailchimp form.

Before being able to add a Mailchimp form using tagDiv Composer, you need to enable the tagDiv Newsletter plugin first. If you haven’t enabled this plugin, you can go to Newspaper -> Plugins to enable it. This plugin adds a shortcode in tagDiv Composer called Newsletter.

How to add a Mailchimp form in Newspaper theme using tagDiv Composer

To add a Mailchimp form in Newspaper theme, you need to edit the page or template you want to add the form to using tagDiv Composer. By the time this article is written (March 22, 2020), Newspaper offers no WordPress widget to add a form to a WordPress’ native sidebar. So, the only way to add a Mailchimp form is by editing a template or page using tagDiv Composer.

Newspaper theme itself allows you to create a custom template for the single post, category page, author page, header, and footer. You can create a custom template where you want to add the Mailchimp form to. In this example, we will demonstrate how to add a Mailchimp form to the single post template.

We have written an article that covers how to create a custom single post template in Newspaper. You can read it for the detailed instructions.

To get started, visit the Mailchimp website and login with your account. On the Mailchimp dashboard, click the Create menu and select Signup Form.

On the Embedded form tab, select an audience from the dropdown menu and click the Begin button.

Go to the Condensed tab and copy the code.

Switch back to your WordPress dashboard and go to Cloud Templates -> All Templates. Select a template you want to add the Mailchimp form to and click the Edit template link. This will load the template to the front-end editor of tagDiv Composer.

On the tagDiv Composer front-end editor, add the Newsletter shortcode to an area you want to add the Mailchimp form.

On the Newsletter Provider option under the General tab, select Mailchimp and paste the code you have copied to the available field.

As you can see, the form will appear right after the code is pasted.

Customizing the form

You can customize the look of the form to your liking. The Newsletter shortcode itself comes with 8 premade form styles. You can select one from the Style option under the Style tab.

You can also customize the form style you selected. You can, for instance, set the button color, text color, typography, border radius, and so on. Just play around on the Style tab until you get satisfied with the look of your form.

Once you are done editing the form, click the floppy disk icon on the top bar of the left panel to save the changes and click the X icon to exit the tagDiv Composer front-end editor.

The bottom line

If you use Newspaper theme, you can add a beautiful Mailchimp form to your website without dealing with CSS or HTML. Also, you don’t need to install an extra plugin since Newspaper already has a default plugin to add a Mailchimp form. You just need to activate the plugin. In addition to Mailchimp, you can also add a MailerLite form.

Although this article demonstrated how to add a Mailchimp form to a single post template, you can add the form anywhere you want. Such as the footer, homepage, category page, author page, and so on.

How to Create a Custom Single Post Template in Newspaper Theme

By default, Newspaper theme offers thirteen different single post templates. They are not customizable (unless you have both CSS and PHP knowledge). If you really want to customize the single post template of your Newspaper theme, you can create a custom single post template. Creating a custom single post template allows you to control everything. From the typography of the text content, featured image size, post meta elements, and so on. Newspaper theme comes with a Cloud Templates feature that allows you to create a custom single post template without coding. You can create the custom single post template using tagDiv Composer, the default page builder of Newspaper theme.

You can then apply the custom single post template you have created to the entire website or specific categories. You can also use the custom template you have created on individual posts.

How to create a custom single post template in Newspaper theme

Before getting started, make sure you have activated the tagDiv Cloud Library plugin. If you haven’t done so, go to the Newspaper -> Plugins to activate the plugin.

Once you are ready, go to Cloud Templates -> All Templates. Click the Add New button on the top side to create a new template.

The templates library will appear once you clicked the Add New button above. Go to the Single tab and select the single post template you like.

Click the CREATE TEMPLATE button to import the template you selected to the tagDiv Composer front-end editor.

Once the template is loaded to the tagDiv Composer front-end editor, you can start customizing it. Each template consists of varied shortcodes (design elements). Here are some elements you might want to customize:

  • Featured image

To customize the feature image, find the Single Post Feature Image or Single Post Bg Featured Image shortcode and click Element to turn the shortcode into an editing mode then go to the left panel to customize it.

On the General tab, you can set the image size, image height, overlay color and so on. On the Style tab, you can set the image effects if you want. On the Css tab, you can set the margins, paddings, border color, border radius, and so on.

  • Post title

To customize the post title, find the Post Title shortcode and click Element to turn it into an editing mode and go to the left panel to customize it.

To change the font size, font style, font family, and text color, you can go to the STYLE block under the General tab. You can read this post to learn more about how to customize the text in tagDiv Composer.

Go to the Css tab to set the margins and paddings.

  • Post content

To customize the post content, find the Post Content shortcode and click Element to turn it the shortcode into an editing mode.

On the General tab, you can set the content width and image align.

To customize the content body (text), you can go to the Style tab. You can set the text color on the Post content color option, the headings colors on the H1-6 color option, the link color on the Links color option, the blockquote color on the Default blockquote color option, and the image caption text color on the Image caption text color option.

While to customize the typography (font size, font family, font style), you can go to the block on the bottom side. There are eleven elements you can customize their typography of: post content, H1 – H6, lists, blockquote, image caption, pagination text.

If you want to add an ad to the content body, you can go to the Ads tab. Paste the ad code to the area you want the ad to appear. To display ad in a certain paragraph, enter your preferred paragraph on the Par field.

You can go to the Css tab to set the margins and paddings.

To make it easy for you to identify your template later, you can rename it. To do so, click anywhere outside the canvas area and click EDIT.

Once you are done customizing the template, click the floppy disk icon to save the changes and click the X icon to exit the tagDiv Composer front-end editor.

If you prefer to create the custom single post template from scratch, you can simply clean up the canvas area and add the shortcodes yourself. Here are the shortcodes you can use when creating a custom single post template with tagDiv Composer.

  • Single Post Categories
  • Single Post Subtitle
  • Single Post Date
  • Single Post Modified
  • Single Post Author
  • Single Comments Counter
  • Single Post Views
  • Single Post Share
  • Single Post Feature Image
  • Single Post Bg Featured Image
  • Single Content
  • Single Post Source
  • Single Post Via
  • Single Post Tags
  • Single Post Next Prev
  • Single Post Author Box
  • Single Related Posts
  • Single More From Author
  • Single Post Comments
  • Single Post Smartlist
  • Single Post Review Overview
  • Single Post Review Overall
  • Single Post Review Summary
  • Page Title
  • Breadcrumbs

Applying the template

As we mentioned at the beginning, you can apply the custom single post template you have created to the entire website, certain categories or individual posts.

Applying the custom single post template to the entire website

Go to Newspaper -> Theme panel. On the POST SETTINGS block, click the Default post template (site wide) option and select the template you have just created. Click the SAVE CHANGES button.

Applying the custom single post template to a certain category

Go to Newspaper -> Theme panel. Open the CATEGORIES block and scroll down to the Per category settings section (bottom-most). Open a category you want to apply the template to and click the dropdown on the POST CLOUD LIBRARY TEMPLATE option and select the custom single post template you have just created. Click the SAVE CHANGES button.

Applying the custom single post template to individual posts

In addition to applying the custom single post template you have just created to the existing articles via Newspaper theme panel, you can also apply it to new articles you want to create. To do so, just write a new article just like usual using Gutenberg editor. Before you click the Preview or Publish button, select a custom single post template beneath the text editor area.

The verdict

The Cloud Templates feature of Newspaper theme is pretty cool since it offers limitless options to customize your theme. In addition to creating a custom a custom single post template, this feature also allows you to create a custom header, custom footer, custom category page, and custom 404 page. No coding skill is required since the customization process is done via tagDiv Composer front-end editor.

How to Create a Custom Single Product Template in WooCommerce with Elementor

The theme builder feature of Elementor (the pro version) allows you to create custom templates for the parts of your theme, including the single product page if you use WooCommerce. No coding skill is required to create a custom single product template with Elementor. You can use the visual editor of Elementor.

When creating a custom single product template for your WooCommerce store using Elementor, you can set where the template to be applied. Whether to the entire website, a certain product, products under a certain category, products under a certain tag, and so on. The custom single product template you create will replace the default single product template of your active theme.

How to Create a Custom Single Product Template for WooCommerce with Elementor

The process of creating a custom single product template for WooCommerce in Elementor is no different from creating a custom single post template. You can either create a custom single product template from a premade template or from scratch. Elementor offers 4 premade custom single product templates you can choose from.

The following are the Elementor widgets you can use to create a custom single product template:

  • WooCoomerce Breadcrumbs
  • Product Title
  • Product Images
  • Product Price
  • Add to Cart
  • Product Rating
  • Product Stock
  • Product Meta
  • Short Description
  • Product Content
  • Product Data Tabs
  • Additional Information
  • Product Related
  • Upsells

In this article, we will show you how to create a custom single product template from a premade template.

To get started, go to Templates -> Theme Builder to open the Theme Builder screen. Click the plus icon on the Single Product tab on the left panel.

On the appearing Elementor templates library window, select a premade template you like and click the Insert button to import it to the Elementor front-end editor.

Once the template is loaded to the Elementor front-end editor, you can actually click the PUBLISH button to publish the template. But before doing so, you might want to edit some parts to tailor them with your business brand or your taste. To make it easy for you to learn the template structure, you can use Navigator feature.

To edit a widget, you can click the widget handle (or simply select it via Navigator) to turn the widget into an editing mode. You can then switch to the left panel to edit the widget.

Once you are done editing the template, click the PUBLISH button on the bottom side on the left panel. On the appearing dialog, click the ADD CONDITION button to set where this template you want to apply.

To apply the custom single product template to all products, you can select Products. To set the custom single product template to products under a certain category or tag, select the category/tag you want from the dropdown menu. Click SAVE & CLOSE.

Until here, you have successfully created your custom single product template. You can exit the Elementor front-end editor to switch back to the WordPress dashboard.

Elementor itself allows you to create multiple custom single product templates. You can, for instance, create two or more custom single product templates and apply each custom single product template to products under different categories or tags.

How to Customize Text in tagDiv Composer

tagDiv Composer is a great page builder to create an online magazine, blog or other dynamic website types. However, it’s a bit harder to use, at least if compared to Elementor or Divi Builder. In some settings that involve numbers — such as text size, padding, and margin — you have to enter the numbers manually. Another thing that is a bit hassle to do is customizing the text. This post will show you to customize a text in tagDiv Composer.

We have actually written this article in case you are new to tagDiv Composer. However, since the article would be too long if we write every single setting in that article, we decided to write a separate article dedicated to text customization.

How to customize text in tagDiv Composer

Just like other page builders, tagDiv Composer also allows you to customize a text such as changing the font, setting text color, setting the font size, setting the font family, setting the font style, and so on. However, as we have mentioned earlier. Customizing a text in tagDiv Composer is a bit hassle. On the settings block where you can customize a text, there are no labels that tell you about what you can do with a setting option (except the text color). Also, to set the font size, you need to enter the number manually.

There are several tagDiv Composer shortcodes that involve text settings:

  • Column text
  • Text with title
  • Page title
  • Inline text
  • Testimonial
  • Text with image
  • Title
  • Text with title
  • Title over image
  • Column title
  • And so on

Add one of the shortcodes above to the canvas area. We add the Column Title shortcode in this example.

Hover your mouse over the shortcode you have just added and click Element to turn the shortcode into an editing mode then go to the left panel to customize it.

You can customize the text from the STYLE block under the General tab on the left panel.

  • Set the text color

To set the text color, click the color selector on Title color (this label can be different depending on the shortcode). For the Column Title shortcode, there are two colors you can set: normal condition and hover. You can either use a solid color or a gradient color.

  • Set the font size, vertical gap and horizontal gap (space between letters)

As mentioned, you need to enter the number manually to set the font size. You can enter the number on the tiny field under the text icon. To set the vertical gap, you can enter the number next to the font size. To set the space between letters, you can enter the number on the letter spacing icon (right-most).

  • Set the font family, font transform, font style, and font weight

On the same row where you set the font size above, you will find several other setting options: font family, font style, font transform, and font weight. You can click the tiny arrow icon to set these settings.

If you want to add more advanced customizations — such the background color, margins, and paddings — you can go the Css tab.

Pin It on Pinterest

Creating with WordPress?‚Äč

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.