Best Elementor Add On – CrocoBlock Suite

Written by in Articles, News, Tutorials on September 7, 2018  |  No comments


Have you ever tried building websites code-free? Then you’ll share our passion to launching unique and functional web pages using drag-and-drop page builders.

Everyone who follows WordPress news knows about Elementor. The drag-and-drop page builder boasts more than 1 million active installs. The popularity of the visual editors grows instantly. So, the developers noticed the greater demand in solutions that can boost the performance of  Elementor-based websites.

If you are one of the avid fans of Elementor and look forward to making your site more functional and usable, then you simply cannot pass by CrocoBlock.

This brand-new service contains every elements that you need to build a functional, flexible, and dynamic web page without tweaking a single line of source code.

So, what’s under the hood of CrocoBlock? What does it include and why do you need it?

CrocoBlock is a subscription service containing:

Simply put, the service contains everything that you need to build a functional web project from scratch in the intuitive visual mode.

Step 1. Installation

Purchase the CrocoBlock subscription first. Navigate to Downloads from the account page. Here you’ll find 3 installation options:

  • Super Easy Installation Pack – installs all CrocoBlock products at once (i.e. Kava theme, a collection of Jet plugins, and demo content).

  • Easy Installation Pack – installs all CrocoBlock elements and Kava theme separately. Choose it if you do not need to install Kava theme at the moment or simply prefer working with a different WordPress theme.

  • Jet Plugins Pack – installs abundle of Jet plugins to your WP theme.

Today, you’ll learn how to use CrocoBlock Super Easy Installation.

In order to get started, we’ve prepared a site with the clean WordPress installation.

JetThemeWizard plugin is the first extension that you’ll come across with at the beginning of your work. It will take you through all installation steps in less than 2 minutes. Next, add the license key and select to use Kava child skin for your future site.

Choose 1 skin from the skins list. Click “Start Install”.

Next, choose the plugins that you will need in order to get the skin displayed properly. You will notice the plugins divided into 3 major blocks – Required, Recommended, and Extra. As you just start working with CrocoBlock, we recommend you to select all of the offered plugins. Once chosen, click Next. The entire process of the installation won’t take longer than 30 seconds.

If you need to install the demo content on your site, then select Append demo content to existing content, and the demo data will be installed in some mere 20 seconds.

The entire installation process won’t take longer than 2 minutes. However, the estimated depend on the number of content that’s present on your web page, as well as whether or not you work with the site that was live previously.

Step 2. CrocoBlock Dashboard

As soon as the installation is completed, you can find all of its components in your WordPress dashboard. These include the following blocks:

  • License – the active license code on your site;

  • Plugins – all plugins that are included in CrocoBlock subscription. This is the place where you can install/deactivate/upgrade any of them whenever you wish;

  • Theme – update and backup Kava theme;

  • Skins – shift for a different skin (instead of the one you selected previously) and install it on your site;

  • Settings – access the location relations, locations registration, etc;

  • User Guide – reach the detailed CrocoBlock tutorials, documentation, and the knowledge base.

You can change the current skin for another one whenever you wish. For example, you can shift for Dolcetti skin with a single click on the Install option.

The skin requires just the same set of plugins that we installed previously. So, you can go ahead and skip the plugins installation and move straight to the Demo Content install. The whole process won’t last for longer than 1 minute.

Step 3. Theme Part Templates

JetThemeCore plugin is the core feature making CrocoBlock so useful. It provides you with the access to such theme part templates as sections, headers, footers, single post templates, etc. In order to access them, navigate to CrocoBlock > My Library in your WordPress Dashboard.

Change the header of your template and customize its appearance. In order to create custom header and footer templates, and assign them to different pages of your site, navigate to Settings > Conditions.

By means of the Magic Button, you can access the headers library, choose any needed item, and click Insert to apply it.

Next, navigate to Settings > Conditions in order to choose a template or page where you’d like the header to be applied. The new footer can be inserted just the same way.

The situation is a little bit different when you create an Archive Page template. First, navigate to Theme Parts > Archive block > Create New Archive Template.

You’ll be redirected to Elementor editor every now and again. This lets you access a library of widgets and content modules, which allow you to bring changes to the data of your site, as well as showcase any piece of information without any manipulations with the source code.

Everyone who purchases CrocoBlock subscription will receive regular updates that deliver new and enhanced features. One of such upcoming improvements is the addition of ready-made Archive templates to the Magic button library.

The element that is worthy to be mentioned here is JetEngine  plugin, which is also included into CrocoBlock subscription service. It will come to everyone looking forward creating custom post types, enhancing the pages or templates with extra taxonomy or meta fields containing the necessary content types.

Step 4. Creating a Mega Menu

As soon as you insert the header into your your web page, you can proceed to the creation and personalization of the main navigation panel of your site. There are plenty of ways to add a menu to your web page. For example, you can make use of the JetMenu  plugin, Nav Menu widgets, and Hamburger panel widget. Also, you can add either vertical or horizontal mega menu.

In order to add a horizontal mega menu to the header of a site, take the following steps:

  • install the plugin from CrocoBlock > Plugins;

  • navigate to Appearance > Menus to check the menu.

In order to add a menu to the About item, hover it and choose JetMenu button to open the Content popup window.

Enable Mega Submenu option.

Click “Edit Mega Menu Item Content”.

You’ll see Elementor admin panel in front of you. Enhance the menu with several columns and widgets. As soon as you achieve what you expected, click Update to save all changes, and navigate backward.

Add the menu to the header template while navigating to CrocoBlock > My Library. Start editing the necessary header template over there.

Come across the Mega Menu widget in the widgets list. Drag and drop it to the needed section. Choose a menu that you’d like to use and customize its appearance in Style block.

Hovering the needed menu item in the place where you added the menu to preview the results of the menu customization.

With the help of JetMenu, you can create vertical and horizontal fully responsive mega menus.

Step 5. Jet Addons for Elementor

JetMenu is just one extension from the collection of Jet plugins that are included in CrocoBlock subscription service. Some of them will help you to install skins, while others can be accessed from the CrocoBlock dashboard. So, let’s take a closer look at each of them.

  • JetElements includes a collection of 30+ fully editable widgets that can be added to Elementor. These include Inline SVG, Banners, Portfolio, Image Layouts, Timeline, etc.

  • JetBlog delivers 4 dynamic content widgets, which can be used to display posts  into listings/tiles/text tickers, as well as add video content to your web page by means of Video Playlist widget.

  • JetMenu makes it easy to create mega menus.

  • JetTabs helps you enhance the structure of your site’s pages. With its help, you can organize different pieces of data into usable tabs and accordion blocks.

  • JetTricks will make it easier to add stunning visual effects to Elementor-built section, columns and widgets.

  • JetBlocks plugin lets you add login and search forms, WooCommerce cart and Hamburger panel elements to the header. With its help, you can add the sticky effect for sections.

  • JetReviews plugin is used to create review blocks on the Elementor-based pages of your site.

Additionally, the subscription includes JetEngine,  JetThemeCore and JetWooBuilder plugins.

Step 6. Single Post Pages. Creating an Archive Page

JetEngine plugin will come in handy to you when you need to create Projects custom post types, Services post or a portfolio featuring multiple items. Also, it will help you create custom taxonomies, dynamic grid layouts, as well as work with single custom post and custom term templates. All of these layouts are just helpful when you need to create an Archive page template.

In order to get started, install and activate JetEngine plugin.

If you need to showcase your projects, you will need to take the following actions:

Add Projects post type via JetEngine >Post Types > Add New Button.

Next, enter the general information about your custom post type (e.g. title and slug).

Change the post settings. This may include the addition of a new icon, custom meta fields, etc.

Save the changes. Navigate to the Dashboard. You’ll find a new Projects item featuring the icon that you set for it in the previous step.

Navigate to JetEngine > Listings in order to create a new listing with Posts type.

Set the Projects post type as the needed post source.

Add a couple of Dynamic Field widgets and the Dynamic Image widget to the page. In the Dynamic Image widget, choose the content source that you need to output, i.e. the title and content for the dynamic fields and the thumbnail image.

With the help of the Dynamic Meta widget, you can display the publishing dates and the authors for custom post templates.

The template that we created as part of this tutorial is intended to be applied to all custom posts with the Projects type.

Next, we built a new Archive page template and added Listing Grid widget to it. The latter is especially useful to display a number of projects in the grid-based structure.

All this took us less than 5 minutes. If you wish, you can enhance the pages with custom taxonomies and complex filters, all of which can be adjusted with the help the drag-and-drop editor.

Step 7. Elementor WooCommerce  Features

If you need to build a web store or enhance your website with eCommerce functionality, then CrocoBlock subscription will help you manage this task perfectly well. The package includes JetWooBuilder plugin that features a collection of 15 dynamic content widgets. These will help you display WooCommerce products without CSS and PHP required. You can also benefit from the fully editable pre-made Single product pages.

Using JetWooBuilder plugin, you can:

  • create WooCommerce Single Product page templates;

  • add product and product taxonomy layouts;

  • display the dynamic content with the set of special widgets made specially for WooCommerce products.

Before you start adding WooCommerce products to your site, you need to create a new product page template while navigating to Products > Add New.

Navigate to WooCommerce > JetWoo Templates > Create New Template.Specify to what particular product you want to set the template. For example, while  adding dynamic WooCommerce widgets they will pull the needed data from the product you’ve set there, including the thumbnail image, reviews, rating, price, etc.

Next, use any of the ready-made Single Product page templates or create a custom template clicking on “Add New Template” button.

Elementor includes a set of widgets that are ready to be applied to the Single product page code-free. These include Add to cart button, Single Image/Title, etc.

Do you need to set a newly-created template for all products on your website? Navigate to WooCommerce > Settings > JetWooBuilder > SIngle Product template condition settings.

As you do this, you can add the products grid or tile on the homepage and display the products categories layout on the Shop page using any of these layout widgets:

  • Categories Grid;

  • Products List;

  • Products Grid;

  • Taxonomy Tiles.

The aforementioned widgets include easy-to-use order/query/robust style settings that can be managed using Elementor.

CrocoBlock is the ultimate pack of products needed to keep you web projects competitive for a lifetime. This is an ever-growing subscription service that delivers new web design opportunities instantly. The best thing about CrocoBlock subscription service is that you do not need to be a design or coding genius in order to manage it on your own. Everything is done in the intuitive visual mode. So, simply come up with the concept of your web project and bring it to live.

Tags: , , , ,

About the Author

View all posts by

Leave a Comment

comm comm comm