How To Use Foxy Effex

Introduction

Foxy Effex is a premium plugin for WordPress. It works with and requires Elementor, which is another plugin for WordPress. Elementor is a page builder that allows you to create and design web pages in the WordPress system.

Although Elementor comes with its own set of graphics and special effects, its offerings are quite modest. By comparison, Foxy Effex offers richer, bolder, and more exciting graphics and special effects than Elementor.

The following is a basic tutorial on how to use Foxy Effex to build exciting web pages. This tutorial assumes that you have a fully functional WordPress system, and that you have installed the Elementor plugin and the Foxy Effex plugin into the WordPress system. It also assumes that you know how to use Elementor to create and design web pages. To learn how to use Elementor, please click here.

Run Elementor

The first step is to run the Elementor editor to edit an existing page. Here is what it looks like:

On the left side of the screen, there is a panel entitled “elementor” with a dark red title bar. This whole left panel is the Elementor Panel. It contains a set of widgets that can be inserted onto the page.

On the right side of the screen is a preview of the page being edited. Generally, it consists of sections, columns, and widgets.

Foxy Effex provides a set of widgets for Elementor. Most of Foxy Effex’s features and behaviors are delivered by these widgets.

On the Elementor Panel, scroll down the list of widgets until you see categories for Foxy Effex widgets. These categories have the words “FOXY EFFEX” in their names.

In the rest of this tutorial, we will be inserting some Foxy Effex widgets from the Elementor Panel (on the left side of the screen) to the preview page (on the right side of the screen).

Background Graphics

Some Foxy Effex widgets allow you to create graphics that can be used as rectangular background images for sections and columns. These background images can often animate continuously or on page scroll.

They also dynamically resize themselves to cover the exact dimensions of the section or column at all times. If the browser window or the page resizes, and the section’s or column’s width or height changes, their width and height will automatically change to match the width and height of the section or column.

Widgets that offer background graphics include:

Particle Pattern Widget
3D Background Widget
Wave Widget
Slides Widget
Image Filter Widget
3D Sphere Widget

As an example, let’s play with the Particle Pattern Widget. The Particle Pattern Widget can be used to create animated graphics used as backgrounds for sections and columns.

We start off with page content that looks like this:

This is a section with two columns. In the left column, there is a Heading Widget with the words, “Indoor Malls In America”, followed by a Text Editor Widget containing four “Lorem ipsum” paragraphs of text. In the right column, there is an Image Widget showing a JPEG image of an indoor mall.

Now let’s insert a Particle Pattern Widget from Foxy Effex. The goal is to create an animated background graphic for the entire section.

Go to the list of widgets in the Elementor Panel. Find and open the “FOXY EFFEX – GRAPHICS” category. In that category, find the Particle Pattern Widget. With your mouse, drag the Particle Pattern Widget and drop it into any of the two columns in the section on the preview page. It does not matter which column you drop it in, as long as it is dropped somewhere in the section. For this example, let’s drop it in the right column, just below the Image Widget.

The section now shows an animated background graphic with gray-colored circular particles moving in random directions:

Notice that a gray rectangular box now appears at the exact location where the new widget was inserted – just below the Image Widget. The reason why the gray box is there is because, if the gray box is not shown, the widget would otherwise take up zero space in the column, which would make it difficult or impossible for you to select the widget with your mouse to edit the widget’s properties, since the height of the widget rectangle would be zero.

The gray box is a placeholder that lets you know that an empty, zero-space widget is there, and the placeholder allows you to easily select the widget with your mouse. Placeholder boxes always appear for widgets that would otherwise take up zero space in the column. Placeholder boxes never appear outside of the Elementor editor screen. Nor do placeholder boxes appear when a page is publicly shown to web visitors, even if the widget consumes zero space in the column.

Thus, whenever we want to view or edit the properties of the Particle Pattern Widget that we just inserted into the right column, we can go to its placeholder box and click on the blue pencil icon square, even though all of the visual action of this widget is on the background of the enclosing section.

Let us now look at the properties of the Particle Pattern Widget. In the Elementor Panel, you will see the properties of the newly inserted Particle Pattern Widget.

Under the Content tab, there is a property named “Coverage”. It is set to “Section”. This means that the graphic content of the widget will be shown as a background of the section in which the widget resides. Other options are “Column”, “Page”, and “Widget”.

If the “Coverage” property is set to “Column”, the graphic content will be shown as a background of the column in which the widget resides.

If the “Coverage” property is set to “Page”, the graphic content will be shown as a fixed background of the entire page. Fixed background means that the background does not scroll with the rest of the page.

If the “Coverage” property is set to “Widget”, the graphic content will be shown as a background of the widget. In this example, the widget is currently consuming zero space in the right column. Therefore, the background of the widget will have zero size, and visitors will not be able to see the background. To give the widget some size greater than zero, the Particle Pattern Widget allows you to create and design a foreground element, such as a heading, icon, body of text, or image, that will become a space-consuming part of the widget.

Next, let’s take a look at the “Background Layers” property section.

This widget generates its graphics as a composite of three separate image layers. This is similar to the concept of layers used in many graphical desktop software applications such as Adobe Photoshop.

In this widget, the layers are:

Back Layer
Main Layer
Front Layer

The Back Layer is the bottom layer. The Main Layer is the middle layer. The Front Layer is the top layer.

The Main Layer is where most of the excitement is expected to occur. The Main Layer supports particle animations, which are arrays of multiple graphical objects that animate, such as the gray-colored circular particles that we saw earlier. It also supports something called patterns, which are graphic designs that are usually static and non-animating but can be used as background textures.

Both the Back Layer and Front Layer support solid colors and color gradients. This means that the whole layer’s rectangle is completely filled with a solid color or color gradient. The Back Layer also supports images, so you can specify your own image that you have uploaded to the WordPress Media Library. The image will completely cover the entire layer’s rectangle.

The “Opacity” and “Blend Mode” properties allow you to mix and blend pixels across all three layers to generate a final image that is rendered to the screen on each frame of animation.

Let’s give the Back Layer a blue color gradient. In the “Background Layers” section, set the “Back Layer” property to “Color Gradient”.

Then go to the Style tab. Open the section named “Back Layer = Gradient”.

Change the “Gradient Type” property to “Radial”. Change the “Radial Position” property to “Center Left”. Then click the pencil icon button next to “Color Stop #1” and set the following color:

Hue = 210
Saturation = 100
Brightness = 25

Click the pencil icon button next to “Color Stop #2” and set the following color:

Hue = 210
Saturation = 100
Brightness = 16

The whole section should now look like this:

Next, we want to change the color of the circular particles, so that they contrast better with the text and are less distracting.

Open the property section named “Main Layer = Particle”.

We won’t be changing anything here, but do notice that five particle appearances are listed in this property section, from “Appearance #1” to “Appearance #5”. This widget supports up to five different visual appearances for particles. If you specify one appearance, then all particles will have that one appearance. If you specify two appearances, then half the particles will have the first appearance, and half the particles will have the second appearance. And so on. Appearance includes things like color, size, shape, type of particle, and more.

For now, we will use only one appearance for the particles.

Open the section named “Particle Appearance #1”.

Change the property “Shape Type” to “Blob”.

Set the “Width” and “Height” properties to 50 each.

Set the “Color” property to #0060C0.

Set the “Elasticity” property to 75.

Set the “Bend Duration” property to 0.75.

Our section now looks like this:

Let’s increase the number of particles. We can do this by going to the section “Main Layer = Particle” and changing the “Particle Density” property from 50 to 100.

The text does not contrast very well with the background. So we will change the color of the Heading Widget to #ffd700 and the color of the text paragraphs to #e0e0e0. This means clicking on the blue pencil icon squares of the Heading Widget and Text Editor Widget and editing the relevant color properties of those widgets.

We will also set a padding of 80 pixels at the top and 80 pixels at the bottom of the section. This means clicking the middle icon at the top of the section’s blue rectangle and editing the relevant properties of the section.

Here is our final design:

Indoor Malls In America

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Headings

Some Foxy Effex widgets allow you to create text headings with special effects. These widgets include:

Particle Pattern Widget (foreground settings)
3D Object Widget
Gradient Heading Widget
Curved Heading Widget
Animated Outline Widget

As an example, let’s play with the Gradient Heading Widget. The Gradient Heading Widget can be used to create text headings with special lighting effects. To create the lighting effect, you specify a single color hue while also specifying two different brightness levels for that hue. These different brightness levels give the illusion that the text heading is being illuminated by a light source in the environment.

Starting with the same page content as before, let’s insert a Gradient Heading Widget from Foxy Effex into the left column of the section. It will be inserted right before the older heading, “Indoor Malls In America”.

The newly inserted Gradient Heading Widget is hard to see because its current dark color does not contrast very well with the dark blue background. We will be changing its color shortly.

Go to the Elementor Panel to edit the widget’s properties. Go to the Content tab. Change the “Title” property to “Mega Malls”.

Then go to the Style tab. In the “Title” section, enable “Text Effects”. Change the “Typography” settings by specifying a font family named “Angkor” and by setting a font size of 70.

In the “Title Text Effects” section, change the “Text Effects Type” property to “Gradient Vertical Sharp”.

Open the dropdown of the “Text Effects Settings” property. Set “Color Hue” to 51, “Color Saturation” to 100, “1st Brightness Level” to 50, and “2nd Brightness Level” to 100.

Explanation: A brightness level of zero is always black. A brightness level of 50 is the full natural color given by the hue and saturation. A brightness level of 100 is always white. Anything between 50 and 100 simulates a white light source in the environment.

Finally, delete the old Heading Widget from the column and section. Here is the result:

Mega Malls

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Instead of RGB values, the combination of hue, saturation, and brightness is often used by many of the gradient settings in Foxy Effex. This allows you to easily and accurately create lighting effects by, for example, keeping the hue and saturation constant while varying only the brightness level throughout a gradient.

3D Object Example

Another widget from Foxy Effex is the 3D Object Widget. Use this widget to create 3D text, geometric shapes, or objects from imported SVG files and imported model files.

Let’s run through an example. Insert a 3D Object Widget into the same section as before, just above the JPEG image:

So far, we do not see any 3D object. This is because the 3D object is located behind the dark blue animated background layer that was created earlier by the Particle Pattern Widget.

To move the 3D object in front of the background layer, so that users can actually see it, go to the Style tab in the 3D Object Widget’s properties and open the “Parallax” section. Click to disable “Parallax Mode”. The 3D object should then be visible.

Next, let’s configure the 3D object to be a rotating, geometric torus shape.

Go to the Content tab.
In the “Content” section, set the “Type” property to “Shape”.
In the “Type = Shape” section, set the “Subtype” property to “Torus”, and disable “Flat Shading”.
Go to the Style tab.
In the “General” section, set “Alignment” to “Center”, “Camera Angle” to 40, and “Width” to 400 pixels.
In the “Surface Properties” section, add a new item. Set the item’s “Color” property to #FF8000.
In the “Rotation” section, under the “Speed” subsection, set the “Y Axis” property to 1.

Finally, delete the Image Widget from the column. This is what you should see:

Mega Malls

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Publishing Your Page

To save your changes to the page, click the green “UPDATE” button at the bottom of the Elementor Panel.

If you have purchased the fully functional Foxy Effex plugin along with a domain license key, then your Foxy Effex widgets will be live and viewable by web visitors. Otherwise, you can purchase Foxy Effex here.