Check out this detailed guideline on how to use CrocoBlock and create your own website from scratch!
Without a doubt, creating a website with the help of the page builders is super easy. You need neither deep coding skills nor much other knowledge related to web development or web design.
We have already talked about CrocoBlock – an amazing widget for Elementor that contains a cool set of plugins, a theme with various skins, add-ons for a simple but effective website creation. CrocoBlock has already gained its supporters because it combines two major advantages: incredible efficiency and reasonable prices.
Though the page builders are the commonplace for nowadays developers and amateurs, there are certain peculiarities that might slow down your work with a page builder.
Familiarize with them in this step-by-step guideline on how to use CrocoBlock and create your own website!
The Ultimate Guide on How to Use CrocoBlock
A Couple of Words About CrocoBlock
CrocoBlock comes in a form of subscription. The subscription includes:
- 10 Jet plugins for Elementor;
- 1,000 pre-designed sections and templates;
- 30 skins for different purposes;
- Kava theme;
- Regular updates on existing products;
- Lifetime support;
These are the main features that provide a smooth work of your own website. With the help of this powerful set of plugins and opportunities, you won’t deal with a single line of code. This way of the website creation will fit both amateurs and professionals!
Let’s make the first step toward creating a stylish and convenient website!
Step 1. Installation
After downloading the CrocoBlock package, you receive an access to your admin panel. There, you can install the theme, download skins and plugins. For this purpose, you don’t need a cPanel or FTP connection, by the way.
There are three installation packages that allow you to download and set up various sets of products. You can download all at once (Kava theme, skins, plugins, and other elements) or choose only those products that you need.
If you can’t decide on the installation package, it makes sense to choose Super Easy Installation Pack that contains JetThemeWizard. With its help, you will install 10 Jet plugins, Kava theme, and the skin. A couple of clicks and your website is almost ready. JetThemeWizard is a plugin and it is already included in the subscription.
After you install the package, you will see the CrocoBlock in the WordPress Dashboard. When you enter the CrocoBlock Dashboard, you will find information about:
- The license key;
- Kava theme (from here you can customize and update it);
- Plugins and skins;
- Location relations settings;
CrocoBlock Dashboard is the place where you can change and customize themes and skins, activate and deactivate plugins, update products, etc. It’s a workshop where you create and change the look and the functionality of the website.
If you don’t want to download plugins and need skins only, you can install the JetThemeCore plugin. With its help, you will download the required skins and get the access to the pre-designed pages.
Step 2. Pre-designed Sections. Headers and Footers
You can download the JetThemeCore plugin to get an access to the headers and footers templates. The skins usually go along with the suitable headers, footers, and related pages. Still, if you want to change them, add or remove pages, this plugin will assist you. Open the CrocoBlock Dashboard > My Library > Header/Footer > Add New (or choose from the existing ones) > Edit (with the help of the Elementor editing option).
If you go through the editing process with the JetThemeCore plugin, you will see the Magic Button. Click it to get an access to the library with headers, footers, pre-styled sections, and pages. After choosing the template, click the Insert button to add it to the page.
The templates are customizable and if you worked with Elementor, you won’t face any difficulties while editing. You can change colors, add or remove columns, activate or deactivate widgets.
After you end the editing process, you should Save (Update) the changes and open Settings > Conditions block. Here you can set the location of the headers/footers (for a single page or for the entire site), for instance.
Step 3. Mega Menu
Mega menu is a cool thing that saves the space on your site and contributes to its convenience. For instance, you can place the contacts and the contact form under the Contact menu button instead of dedicating the separate page to this information.
You will need JetMenu plugin if you work with Elementor. It is one of those ten plugins that are included in the CrocoBlock subscription.
You can add the menu to your header with a help of the Mega Menu widget. If you are trying to create a vertical mega menu, you should use a Vertical Mega Menu widget. Open the CrocoBlock Dashboard and drop the widget to the place where you want the menu to be situated. There, you can also change the style of the menu.
To add a certain section to the mega menu, you should open Appearance > Menus tab. Click JetMenu to access the mega menu item settings. To access the mega menu editor, click Mega Submenu > Edit Mega Menu Item Content. With the help of columns, sections that Elementor widgets offer, you can structure any type of content in the menu.
Step 4. Custom Post Types
JetEngine is an amazing plugin for more complicated projects.
When you want to launch something that requires more than default posts and pages (especially relates to the WooCommerce projects), you should create a custom post type with the help of the JetEngine that is already downloaded. After activation, it will appear in the WordPress Dashboard.
Click JetEngine > Post types and fill in the following information:
- The title and slug;
- The labels for your project;
- The icon that will appear on the Dashboard;
- The hierarchy;
You should also point out whether it supports Editor, Title field, Thumbnails, Revisions, etc. Plus, you can make up more fields for metadata, add media, create repeaters, etc.
The new custom post type will appear in the WordPress Dashboard.
You can also use JetEngine for creating taxonomies and templates for custom post types and custom terms with Elementor. Open JetEngine > Listings to create new a listing and mention the source of the data that will be processed by the dynamic widgets.
You can change the appearance of your custom post type with the help of the layouts and sets of widgets to display the dynamic content (Meta Image, Dynamic Field, Repeater, etc.).
Step 5. Archive Pages
If you need the posts and terms to be displayed on the Archive page, you will need JetEngine, JetThemeCore, and, probably, JetBlog plugins. The last one contains multiple dynamic content widgets for displaying posts and custom posts in a form of listings and title layouts.
So, open CrocoBlock Dashboard > My Library > Archive block and click Add New button.
Then, with the help of the Elementor editor, you can set up a widget to display and flier dynamic content (Smart Post Tiles, Smart Post Listing, and Listing Grid). You can also use Navigation Arrows and Pagination Arrows widgets that add the elements to the Archive page templates.
Go to the Conditions block to define where the template should be displayed.
Step 6. Content
You are the lucky one, who can use the Jet plugins that are already included in the CrocoBlock subscription to add, remove, edit the content on the site.
Here they are:
- JetElements. This plugin packs your Elementor editor with 30+ amazing widgets. With their help, you will manage different type of content, add animation, advanced carousel, post sliders, SVG images, and much more.
- JetBlog. Along with such widgets as Smart Post Tiles, Smart Post List, Text Ticker and Video Playlist, it’s easier to work with videos. Plus, there are many opportunities to play with the design of the Elementor-built pages, custom post types, and custom fields. By the way, with the plugin, it is super easy to add dynamic content.
- JetTabs plugin is handy when you need to structure content with the help of section switchers, tabs, and accordion blocks that stand for the convenience and attractive appearance.
- JetBlocks contains widgets that help to create search fields, registration, and login forms, WooCommerce Cart, and hamburger panels for Elementor headers and footers.
- JetTricks is a great solution when we speak about visual effects. With its help, you can create parallax and particles effect, tooltips, Unfold and View More buttons.
- JetReviews will help you to add reviews to the pages built with Elementor. It’s also possible to change the appearance of the reviews template to your taste and convenience.
A great thing about these plugins is that they go along with the entire CrocoBlock subscription for a super reasonable price. Alone, one plugin can cost up to $15 and that can hit a pocket when you need all of them.
Step 7. WooCommece Options
CrocoBlock gives an opportunity to create a WooCommerce website. As a rule, a special plugin, namely JetWooBuilder, can assure a functionality of the online store. With its help, you can present the products in the most appealing way and create a Single Product page template.
If you need to change or create a Single Product page template, you should go to WooCommerce > JetWoo Templates and choose a product you want to create a page for. Then press Create from the pre-designed template button to use the existing template or Add New Template button to create the new one.
With the help of Elementor editor and its simple drag and drop principle, you will create a unique and convenient design for the WooCommerce pages. In order to add widgets, visit JetWooBuilder block. Don’t forget to save changes.
Now, it’s time to set the new or existing template.
Go to WooCommerce > Setting block > JetWooBuilder > Single Product template condition settings. The magic happens here. Let your phantasy change the style and the functionality of the template.
By the way, JetWooBuilder is packed with 4 additional WooCommerce layout widgets that ensure different style and functionality options.
You will be pleased with the number of functions, the CrocoBlock subscription offers but these were the common steps to create a full-fledged website of different functionality.
CrocoBlock is a simple but very powerful widget for creating Elementor and WordPress based websites with no additional knowledge at coding. regardless of your experience, you will figure out how to use CrocoBlock and how to build your own customizable site.
Just make the first step! It is super easy if you use CrocoBlock!