Top Elementor Add-Ons: Step-by-Step Guide to CrocoBlock

The page builder allows creating websites, however, you can boost their functionality with Elementor add-ons, and CrocoBlock, check a guide

By Claudio Pires
Updated on November 22, 2022
Top Elementor Add-Ons: Step-by-Step Guide to CrocoBlock

Today, it is hard to find someone unaware of page builders and how to utilize them. They make adding content to your website very easy, but not only that. Page builders allow creating entire websites and boosting their functionality with Elementor add-ons and a CrocoBlock guide.

The same applies to the Elementor page builder and the CrocoBlock service available for subscription. Combined, they let you create page templates, Mega Menus, theme parks, and single WooCommerce pages. With this combination, you won’t write a single line of code while building a robust and functional website.

With CrocoBlock, you get everything you need to get a completely new website that has various skins, features, and a Jet plugins kit compatible with Elementor.

CrocoBlock subscription includes:

  • a set of 10 Jet plugins for Elementor;
  • 1000+ premade templates for sections and pages;
  • 30 skins on various topics;
  • clean and free Kava theme;
  • weekly updates for the integrated products;
  • premium 24/7 support.

Even though these are standard features, they have already impressed many users. Indeed, it’s better to demonstrate the use of the service in actual cases. So, let’s take a closer look at the steps of website creation and explore the Crocoblock functionality.

Top Elementor Add-Ons

Step 1. Installation: Elementor Add-Ons & CrocoBlock Guide

Once WordPress is active, you can go to the Admin panel, which lets you easily install any themes, skins, and plugins without an FTP connection or a cPanel required.

You can access CrocoBlock products from your client’s account in the Downloads section. Here you may also choose the quick pack or download and activate the products separately.

Separate installation works best with WordPress. Those not sure which plugins are required for their projects typically go for Super Easy Installation Pack. It contains the JetThemeWizard plugin to set up the Kava theme, Jet Elementor add-ons, and the skin you’ve chosen for your website.

Before activating CrocoBlock products via JetThemeWizard, you must set it up as a plugin. It will take you through the whole installation process in a few minutes. When installed, CrocoBlock will appear in your WP dashboard and give you access to the following:

  • license key;
  • the entire set of Jet plugins and skins;
  • Kava theme. It can be backuped and upgraded right from the dashboard;
  • location relations settings;
  • documentation etc.

CrocoBlock dashboard functionality allows changing the present skin, enabling, turning off. Or upgrading plugins, syncing the templates library, and much more.

If you want to implement the skins or premade sections with one plugin, feel free to get the JetThemeCore plugin. It will apply CrocoBlock to the admin panel, add skins, premade pages, sections, headers and footers, etc.

Top Elementor Add-Ons step-by-step guide to CrocoBlock
Top Elementor Add-Ons step-by-step guide to CrocoBlock

Step 2. Use Headers, Footers, and Pre-Styled Sections

As you might have understood, JetThemeCore lets you work with headers and footers. When one of the CrocoBlock skins is up. The matching header and footer are automatically applied to a particular topic’s pages. Yet, you can still attach various header and footer layouts to some of the pages or create new ones if needed.

To get to the header and footer layouts, go to CrocoBlock > My Library, choose Header or Footer block, and hit ‘Add New’ button. As an alternative, choose the existing header or footer and start editing it by pressing ‘Edit with Elementor.’

Using the JetThemeCore plugin, except for the default Add New Section and Add Template buttons, you will also see Magic Button. You may click it if you want to get header and footer designs. A pre-styled sections library or a collection of elegant pages on various topics.

Choose the necessary template, then insert it. Now you can change the style, add or remove columns, and put content widgets into specific layouts. Ditto you are doing with the other Elementor templates.

Once the template is ready, push the ‘Save’ or ‘Update’ button and open up Settings > Conditions block, where you can choose the preferred condition for your newborn template.

Step 3. How to Create a Mega Menu: Elementor Add-Ons & CrocoBlock Guide

Thanks to a Mega Menu, your website becomes more beautiful. Meanwhile, you can easily add more content to the menu elements when you do not need the whole page to present the information.

Rather than creating a separate Contact page, you may put contact information and form to the Mega Menu so that the data is presented under the Contacts menu.

You may wonder what you need for a Mega Menu. CrocoBlock subscription service features a specific plugin for this purpose. It is called JetMenu. If you need a Mega Menu on the Elementor-built header, use a Mega Menu widget. It is divided into Vertical and Horizontal widgets depending on what kind of menu you want to create. Put the necessary widget in the column where you want the menu to be located, choose one of the menus that need to be shown off and apply changes to the style settings.

If you want to implement a Mega Menu for a separate item, go to Appearance > Menus and pick the item you wish to attach a Mega Menu to. Find the JetMenu option and click on it to access the item parameters. Turn on the Menu Submenu option and push the ‘Edit Mega Menu Item Content’ button to access the Mega Menu editor.

Using the editor, you can apply any content and set it into any structure you prefer, using the columns, sections, and a pack of Elementor widgets. Once done, save the changes to see the content hovering over the menu item.

Step 4. How to Work with Custom Post Types

There are specific eCommerce projects that demand different types of posts, pages, and products. You may need to launch a portfolio with numerous items and sophisticated categories to filter them. If so, try the JetEngine plugin included in the CrocoBlock package. As with the rest of the plugins, you need to download and activate them before it appears on the WP Dashboard.

If you want to apply a brand new post type, go to JetEngine > Post types and insert the requested information:

  • custom post title and slug;
  • labels you wish to use for it;
  • an icon indicating it on the Dashboard;
  • hierarchy and other settings;
  • Editor, Title field, Thumbnails, Revisions compatibility, etc.

Besides, you can also add more custom fields for metadata, create repeaters, and apply media.

Once the new post type is added, it will be displayed on the WordPress dashboard. Moreover, you can apply for recent posts of this type.

JetEngine plugin Lets you work with custom classifications and create templates for new posts and layouts via the Elementor page builder. All you have to do is navigate to JetEngine > Listings, apply for a new listing, and choose the source the data will be pulled from by the dynamic widgets.

Next, you can create a customized post template with any layout and widgets. This JetEngine template can be applied to every customized post with layout or content.

Step 5. How to Create Archive Pages: Elementor Add-Ons & CrocoBlock Guide

Working with flexible post-type templates, you want to present posts or terms on the Archive page.

When creating and adjusting Archive page themes with Elementor, you should use both JetEngine and Elementor add-ons. You may also need the JetBlog plugin featuring a set of dynamic content widgets that display posts or flexible post types in listing and tiles layouts. If you’ve decided to set up a custom Archive page, go to CrocoBlock > My Library > Archive block and hit the ‘Add New’ button.

In Elementor Editor, you can also apply widgets that let you show off and filter dynamic content: Smart Post Tiles, Smart Post Listing or Listing Grid. Besides, you’ll find Navigation and Pagination Arrows widgets allowing you to add appropriate elements to Archive page themes.

Once you are complete, determine the conditions for the Archive page template and put the place it should be shown.

Step 6. How to Edit Existing Content

If you are the one who creates the site from scratch, you might need to add even more content to the existing pages or new pages with more specific content. CrocoBlock subscription and their Elementor add-ons offer everything required to complete this task. Let’s look at what you’ll get using the service.

Tools Elementor Add-Ons & CrocoBlock Guide

  • JetElements add-on contains 30 steep widgets to add to your Elementor editor. With the help of this plugin, you can apply an advanced carousel, posts slider, image layout, portfolio, timeline, SVG image, and other types of content. After adding them, you can jazz them up to match your company’s identity and add important information even without any web development skills.
  • JetBlog plugins let you add dynamic content to the Elementor-built pages. Being easy to use it deals with flexible post types and adaptable fields. Using JetBlog, you will find Smart Post Tiles, Smart Post List, Text Ticker, and Video Playlist widgets.
  • JetTabs add-on helps you arrange content into tabs and accordion blocks or apply section switchers making your page content ultra-compact and striking simultaneously.
  • JetBlocks plugin comes with the widgets required for building and applying login forms, search boxes, WooCommerce cart, registration forms, and hamburger panels to headers and footers built with Elementor add-ons. With the widgets, you may change the style and add extended functionality.  
  • JetTricks plugin allows you to apply more visuals and animations to the page making it more striking. This add-on gives you an opportunity to utilize the Parallax effect for the widgets, apply tooltips for the web elements, section particles effect, and make the content more compact using Unfold or View More features.
  • JetReviews Elementor add-ons allow adding testimonials to the pages built with Elementor. The review widget added to the list of existing devices gives you a chance to apply for your reviews and show them in an appealing visual form.

Step 7. How to Add WooCommerce Functionality

If you want to set up an online store based on WooCommerce, the JetWooBuilder plugin included in CrocoBlock will help. It allows displaying the products and creating Single pages.

Before creating a Single Product page template, ensure you’ve already launched a new product. Next, go to WooCommerce > JetWoo Templates and choose where to take content from, hit ‘Create from Premade Template’ to apply one of the instant templates, or select ‘Add New Template’ to design a brand new Single page skin.

After you activate the Elementor add-ons editor, drag and drop content and modules with dynamic content widgets specially developed for WooCommerce and tweak various elements. All the necessary widgets are available under the JetWooBuilder block. Once done, push the ‘Save’ button.

You will need to apply the newly designed template for all the products in your product gallery. To do that, go to WooCommerce > Settings block, click “JetWooBuilder,” and available Single Product template condition settings.

You will also be glad to know that JetWooBuilder applies 4 WooCommerce layout widgets, including Categories and Products Grid, Products List, and Taxonomy Tiles. Each of them can be used on any page created with Elementor. Moreover, every widget features to order and query settings, and let’s use various style settings to adjust the look of the tiles or grid elements.

CrocoBlock Guide Conclusion

Do not consider the CrocoBlock subscription service only a set of products that help you deal with Elementor and add more functionality. CrocoBlock is a comprehensive service providing everything you need to launch a site.

Using a CrocoBlock subscription is easy and does not require additional skills. The products included in the pack cover all possible purposes. Furthermore, different products will come in the nearest future.

By giving the green light to the CrocoBlock subscription, you get a user-friendly and effective way to build a website from anew following this CrocoBlock Guide.

Claudio Pires

Claudio Pires is the co-founder of Visualmodo, a renowned company in web development and design. With over 15 years of experience, Claudio has honed his skills in content creation, web development support, and senior web designer. A trilingual expert fluent in English, Portuguese, and Spanish, he brings a global perspective to his work. Beyond his professional endeavors, Claudio is an active YouTuber, sharing his insights and expertise with a broader audience. Based in Brazil, Claudio continues to push the boundaries of web design and digital content, making him a pivotal figure in the industry.