Nowadays it is hard to find a person who doesn’t know about page builders and the way to use them. And, while you can think that they are convenient enough to work only with the page’s content, this is only the half of the truth.

Actually, you can build the whole site while using a page builder as a basis and its addons to get even more functionality.

This is the exact case with Elementor page builder and CrocoBlock subscription service. When combined, these two products allow creating page templates, mega menus, theme parts, work with WooCommerce Single page templates, while using front-end editor. You’ll never have to add a single line of code while creating a website, or get stuck with the limits of your theme’s functionality.

With CrocoBlock you’ll get practically everything for creating a website from scratch, from powerful skins on different topics to the set of Jet plugins for Elementor, that cover any purpose imaginable.

CrocoBlock subscription service includes:

• 10 powerful Jet plugins for Elementor;
• 1000 pre-designed sections, pre-made page templates;
• 30 skins on different topics;
• clean Kava theme (available for free);
• weekly updates for the included products;
• professional support.

These are only the general features, but there is no way they can provide an impression on how smoothly CrocoBlock service works. Actually, it is better to explain how the service can be helpful when referring to the real cases. And, as the work on creating a website can be divided into several steps, I’d thought it appropriate to demonstrate the functionality provided by CrocoBlock products using the step-by-step guide, that will take us through the whole process of creating a new website.

Step 1. Installation

Once you’ve installed WordPress on your site, you can navigate to admin panel, that allows you install the theme, plugins and skins in an easy way without using FTP connection or cPanel.

CrocoBlock products are accessible from your client’s account in the Downloads sections, and here you can select the package for quick installation or download the products to install them separately.

While separate installation for the plugins can be recommended for those people who have some experience with WordPress CMS, it is still better to use Super Easy Installation Pack if you’re not sure what plugins are needed for your project.

This package includes JetThemeWizard plugin that installs Kava theme, Jet plugins and the skin of your choosing to your site.

To install CrocoBlock products using JetThemeWizard you’ll need to install it as a plugin, and it will take you through all the installation process in about a few minutes.

After the installation is complete, you’ll see CrocoBlock in your WordPress Dashboard. CrocoBlock Dashboard gives you access to:

• your license key;
• the full set of Jet plugins and skins;
• Kava theme, that can be backuped and updated right from there;
• location relations settings;
• documentation block.

You can always change the skin you’re using to another one, activate, deactivate or update the plugins, synchronize the templates library, using CrocoBlock Dashboard functionality.

In the case you’d like to install only the skin or access the pre-designed sections, and you don’t want to use the theme or any other extra Jet plugins, you can install JetThemeCore plugin. It will also add CrocoBlock to admin panel. With it you’ll be able to apply the skins and access pre-designed pages and sections along with header and footer templates.

Step 2. Working with Headers and Footers. Pre-Styled Sections

JetThemeCore plugin allows working with header and footer templates. Usually, when you install one of the CrocoBlock skins, the header and footer that match it are automatically added, along with the pages related to the chosen topic. However, you can assign different header and footer templates to some of the pages, or add new pages if there is a need.

To access the header and footer templates you’ll have to navigate to CrocoBlock > My Library, here select the Header (Footer) block and click Add New button, or select the existing header (footer) template and click Edit with Elementor option to start editing it.

In Elementor editor you’ll see the default Add New Section and Add Template buttons, but in the case you’re using JetThemeCore you’ll also see Magic Button. Click it to access header and footer templates, pre-styled sections library and the set of stylish pages on different topics.

Just select the needed template and click Insert option to add it to the page. From this moment you can edit it the same way you’re working with other Elementor templates, by changing the style settings,  adding or removing columns and placing content widgets into the needed layout.

When the template is ready to be used click Save (Update) button and open Settings > Conditions block. Here you can select the preferable condition for the template you’ve created (e.g., set the header for the entire site or for the single page you’d define, etc).

Working with theme part templates, header and footers is this simple.

Step 3. Creating a Mega Menu

A mega menu always makes the site more recognizable and allows adding more content to menu items when there is no need to dedicate the whole page to showcase the information.

For one, you’d prefer to place the contacts and the contact form into the mega menu to show up under Contacts menu item instead of creating a separate page dedicated to my contacts.

To create a mega menu with Elementor you’ll need JetMenu plugin that is already included in the CrocoBlock subscription.

To add it to the header  built with Elementor you can use Mega Menu widget, or, in the case you want to create a vertical mega menu, you’ll have to use Vertical Mega Menu widget.

Just drop the needed widget to the column where you want the menu to be placed and then select one of the menus to be displayed and change the style settings to the ones more suitable.

To add a mega menu for one of the items you have to navigate to Appearance > Menus tab and here hover the menu item to which you want to add a mega menu. You’ll see JetMenu option, which you need to click to access the mega menu item settings.

Just enable Mega Submenu option and click the button called Edit Mega Menu Item Content to get access to the mega menu editor.

Here you can add any content and place it into any structure you want using the columns, sections and the set of Elementor widgets.

After everything is done just save the changes, and you’ll be able to see the mega menu content when you hover on the menu item.

Step 4. Working with Custom Post Types

Some of the projects require more post types than just the default Posts, Pages, and sometimes Products (if we’re talking about WooCommerce). For one, you might need to create a portfolio with multiple items and complex categories to filter them.

JetEngine plugin is just what you need to cope with this task.

When this plugin is installed and active you’ll be able to locate it in WordPress Dashboard.

To add a new custom post type just navigate to JetEngine > Post types and here fill in all the required information:

• The custom post title and slug;
• The labels to use for it;
• The icon to indicate it on Dashboard;
• The hierarchy and other settings;
• If it supports Editor, Title field, Thumbnails, Revisions, etc.

You’ll also be able to add more custom fields for meta data, create repeaters, adding media, etc.

After everything is done you’ll see the new custom post type in WordPress Dashboard. And you’ll be able to add new posts of this type.

JetEngine also allows working with custom taxonomies and creating templates for custom post types and custom terms with Elementor page builder.

To do it you’ll have to navigate to JetEngine > Listings and here add a new listing, select its source from which the data will be pulled by the dynamic widgets.

After that you’ll be able to create a custom post type template using any layout and the set of widgets for displaying dynamic content (Dynamic Field, Meta, Image, Repeater, etc). Such templates will be applied to every custom post, displaying the content, that is specific for the unique post, using the layout and style settings set in the template created with JetEngine.

Step 5. Creating Archive Pages

When you work with custom post type templates it is natural that you might also need to display the posts or terms on the Archive page.

To create and customize Archive page template with Elementor you’ll need both JetEngine and JetThemeCore plugins. You might also find helpful JetBlog plugin, that provides the set of dynamic content widgets that display posts or custom post types in listing and tiles layouts.

To create a custom Archive page just navigate to CrocoBlock > My Library > Archive block and here click Add New button.

When Elementor editor opens you can add the widgets that allow displaying and filtering dynamic content: Smart Post Tiles, Smart Post Listing or Listing Grid. There are also Navigation Arrows and Pagination Arrows widgets that help add such elements to the Archive page templates.

When everything is done you can specify the conditions for the Archive page template and define where it to be displayed.

Step 6. Editing Existing Content

While creating a website you might come across the need to add even more content to the existing pages, or you might want to add new pages with more unique content.

CrocoBlock subscription service provides you with lots of plugins that can help you with this task. Let’s explore them a bit closer.

JetElements. This plugin adds +30 powerful widgets to your Elementor editor. With JetElements you can add an advanced carousel, a posts slider, an image layout, a portfolio, a timeline, an SVG image, and many more types of content, style them up according to your vision and deliver any information needed without any coding knowledge.

JetBlog. This plugin allows adding dynamic content to pages built with Elementor. It works with custom post types and custom fields, and you’ll be astonished how easy it is in use. JetBlog features the following widgets: Smart Post Tiles, Smart Post List, Text Ticker and Video Playlist for displaying videos.

JetTabs. Use this plugin to organize content into neat tabs and accordion blocks, or add section switchers to make your page’s content even more compact and attractive at the same time.

JetBlocks. This plugin adds the set of widgets needed for creating login forms, search fields, WooCommerce Cart functionality, registration forms and hamburger panels to Elementor-built headers and footers. The widgets provide you with  robust stylization settings and help you in adding even more functionality.

JetTricks. With this plugin you can add more stunning visual effects to add more charm to the pages built with Elementor. This plugin allows using parallax effect for the widgets, add tooltips for the elements, can add section particles effect, make the content look more compact with Unfold and View More options.

JetReviews. Use this plugin to add reviews to the Elementor-built pages. The plugin adds Review widget to the list of available widgets, and it allows adding your own reviews and showcasing them in the attractive visual form.

Step 7. Adding WooCommerce Functionality

If you’re looking for a way to create a WooCommerce-based online store, you might need JetWooBuilder plugin to help you showcase the products and create WooCommerce Single Product page templates.

To add a new Single Product page template make sure you’ve created a new product the same way you’ve done it before. After that navigate to WooCommerce > JetWoo Templates and here select the product from which you want to pull content, and then click Create from pre-designed template button to use one of the ready-made templates or click Add New Template to create a totally new Single Product page template.

When Elementor editor opens just drag and drop with dynamic content widgets made specially for WooCommerce and style the content using the vast stylization settings.

All the needed widgets you can find under JetWooBuilder block.

After everything is done click Save button.

To set the newly created template for all the WooCommerce products existing on your site navigate to WooCommerce > Settings block. Here just click JetWooBuilder tab and open the Single Product template condition settings. From here you can manage the templates used for the WooCommerce products and set one of the created with JetWooBuilder or set the default one.

Another great thing about JetWooBuilder is that it adds 4 WooCommerce layout widgets that can be used on any page built with Elementor:

• Categories Grid;
• Products List;
• Products Grid;
• Taxonomy Tiles.

Each widget has order and query settings and allows using different style settings to change the appearance of the tiles or grid elements.

The CrocoBlock subscription service is not just the sum of products, that help you work with Elementor and add more functionality to this page builder. It is rather the fully-fledged service that includes everything for building a website in one place.

Working with the CrocoBlock subscription is very easy, no additional knowledge is needed. The products fit for practically any purpose, and there are even more to come out in the future.

Just give a chance to CrocoBlock service, and it will keep delighting you every time!

Article By Utsav Singh Rathour

Author Archives