A Beginner's Guide to Installing and Using ​CROCOBLOCK-​​​ ​​​JetTricks, Plugin

Introduction to ​JetTricks Plugin

WordPress has opened a myriad of opportunities for everyone in the world of web development. Among the numerous plugins and tools available, the Crocoblock suite stands out for its versatility and user-friendliness. Inside the suite, you will find JetTricks, a fantastic tool designed to enhance the visual appeal of your website.

Whether you are a beginner or an experienced developer, this step-by-step guide will help you understand JetTricks, from installation to usage. Let's get started!

Installation

Firstly, JetTricks isn't a standalone plugin; it's part of the Crocoblock suite. To use JetTricks, you'll need to install Crocoblock. Here's how:

Step 1: Purchase and Download Crocoblock
Navigate to the Crocoblock website (https://crocoblock.com) and choose a suitable plan for you. After making the purchase, you'll be directed to a page where you can download the plugin files.

Step 2: Upload the Plugin to Your WordPress Site
Log in to your WordPress dashboard. You can usually do this by typing your website’s URL into your browser, followed by "/wp-admin". For example: "www.yourwebsite.com/wp-admin".
Go to "Plugins > Add New" in the left-hand menu.
Click on "Upload Plugin" at the top of the page.
Click on "Choose File" and locate the Crocoblock ZIP file on your computer. Click "Install Now" once you have selected the file.

Step 3: Activate the Plugin
After the installation is complete, you'll see an "Activate Plugin" button. Click it to activate the plugin.

Step 4: Install JetTricks
Once Crocoblock is active:Navigate to Crocoblock in the WordPress dashboard menu.
Click on "JetPlugins" in the dropdown.
Find JetTricks in the list of available plugins.
Click on "Install" next to JetTricks.

Features and Using

Sticky Elements

Sticky elements remain visible and in the same position as users scroll down the page.

From your WordPress dashboard, navigate to the page you want to edit and open it with Elementor.
Select the widget you want to make sticky.

In the Elementor panel, go to the "Advanced" tab and find the "JetTricks" section.

Enable "Sticky Column". You can adjust the sticky settings according to your needs.

Hotspots

Hotspots let you add interactive points to an image.

In your Elementor editor, search for "Hotspots" in the widgets panel and drag it to your page.

In the left-hand panel, click on the "Content" section and upload the image you want to use.

Below, you can add as many hotspots as you want, each with its content and position on the image.

Unfolding Columns

Unfolding columns let you hide content behind a button. When the button is clicked, the content "unfolds".

In your Elementor editor, search for "Unfold" in the widgets panel and drag it to your page.

Add your content to the "Content" field.

Set the "Open" and "Close" button texts.

Remember, to always preview and save your changes to ensure your website displays exactly as intended.

View More Button

The "View More" button is another great feature that allows you to hide part of your content, which can be shown by pressing the button.

Open the page you wish to edit in the Elementor editor.

Drag and drop a section that you want to contain a "View More" button.

Choose the widget you want to add (like a text editor or an image) and add your content.

Go to the 'Advanced' tab and find the 'JetTricks' section.

Enable 'View More'. You can customize the button text and adjust the content height in the closed state.

Parallax Effect

Parallax effect allows you to create an illusion of depth by making the background move at a slower speed than the foreground when scrolling.

Select the section to which you want to apply the parallax effect.

Go to the 'Advanced' tab and find the 'JetTricks' section.

Enable 'Parallax Effect'.

Choose your parallax effect type (Mouse Move or Scroll) and adjust the speed and direction as per your preference.

Tooltip

Tooltips provide extra information about something when the mouse hovers over it.

Select the widget you want to add a tooltip to.

Go to the 'Advanced' tab and find the 'JetTricks' section.

Enable 'Tooltip'. You can then write the content of the tooltip and adjust its position, animation, and appearance.

Satellite Elements

Satellite elements add additional widgets to another widget, which appear when hovering over it.

Select the widget you want to add a satellite element to.

Go to the 'Advanced' tab and find the 'JetTricks' section.

Enable 'Satellite'. Then, set the content, position, and animation for the satellite element.

As a beginner, you might want to keep the default settings for these features and experiment as you get more comfortable with the plugin.

Section Particles

Section Particles enables you to add interactive particle effects to the backgrounds of your website sections.

To use this feature, select a section on your Elementor editor that you want to enhance.

Navigate to the 'Advanced' tab and find the 'JetTricks' section.

Enable the 'Section Particles' option.

You will now see a range of customization options. For instance, you can adjust the number of particles, their color, shape, size, speed, and direction. You can also tweak the interaction behavior, like whether they'll respond to mouse movement.

Remember to click 'Update' to save your changes.

Magic Section

Magic Section allows you to hide a section of content that slides in and out from any direction on the screen, triggered by clicking on a button or link.

In your Elementor editor, search for 'Magic Section' in the widgets panel and drag it to your page.

Choose the type of trigger (button or link) and set your preferred trigger text in the 'Content' section.

Go to the 'Settings' section to customize the direction from which your Magic Section appears and whether it covers or pushes the existing content.

Then, design your Magic Section just like any other Elementor section, adding whichever widgets you need. This content will be hidden until the trigger is clicked.

Make sure to test your Magic Section thoroughly to ensure it functions correctly on all devices.

Animated Text Feature

The Animated Text feature in JetTricks lets you create animated headings, offering a wide range of animations to choose from. Here's how to use it:

From your WordPress dashboard, navigate to the page you want to edit and open it with Elementor.

Look for the 'Animated Text' widget in the widgets panel and drag it to your page.

Click on the widget to open the editing panel on the left side.

You'll see two boxes, one for 'Before Text' and one for 'After Text'. This is the static text that will not animate. The animated text goes between these two.

Click on 'Animated Text > Add Item'. Here you can enter the text you want to be animated. If you want multiple words or phrases to animate in the same spot (one after the other), just click 'Add Item' again and enter the new text.

Once you've added your text, go to the 'Style' tab to customize the appearance of your text and the animation. You can choose the animation type, duration, delay, colors, typography, and more.

Remember to hit 'Update' to save your changes. The Animated Text feature can add a dynamic element to your website, capturing the visitor's attention and making your site more engaging.

Conclusion

JetTricks is an incredibly powerful tool for enhancing the visual experience of your WordPress website. While this guide should have given you a good understanding of the primary features, don't be afraid to play around with the settings and create something truly unique to your site.

Remember, the best way to learn is by doing. So go ahead and start exploring the wonderful world of JetTricks and Crocoblock. With patience and practice, you'll be a JetTricks pro in no time!