Cinematic Slider

FX – Button Line Hover

FX – Confetti

FX – Frost

Flex: Troubleshooting

Flex: Grid, Containers and Flexboxes

FX – Button Hover

Flex: Overview

FX – Bokeh

FX – Gradients

 

Cinematic Slider is a full-featured “Ken Burns” style slideshow widget that applies a slow & gentle zoom to images. This effect was introduced in film documentaries from Ken Burns and has become a very popular effect for web designers, becoming known as the “Ken Burns effect”.

If you’re familiar with the FX – Ken Burns widget, think of Cinematic slider as the much more powerful “pro” version; offering extensive customization of speed, 25 animation styles, and even an added “Hero” mode. Standard mode behaves like a standard slideshow, while Hero mode automatically displays the slider at full viewport height, just as our SuperHero widget does. Use this widget for dramatic, cinematic slideshows or any time you’re looking for a unique alternative to the other slideshow widgets.

Demo: https://demo.wocode.com/cinematic-slider

Tutorial Video

Setup

  • Place the Cinematic Slider on your page where you would like it to appear.
  • The widget size and shape is determined by the “Widget Mode” setting in the Design panel, as well as the blue grab handle on the widget container. See “Widget Mode” below for additional information.

Widget Options (Content)

  • Open the widget options.
  • Unique ID: Enter a unique name here if you intend to use multiple Cinematic Sliders on the same page.
  • Slides: Use these List Items to load your slideshow images.
  • Duration Per Slide: This sets the amount of time per slide.
  • Autoplay: this begins the slideshow automatically when enabled.
  • Loop: This loops the slideshow when enabled.
  • Shuffle Slides: This shuffles the order of the slides when enabled.
  • Navigation: This adds slideshow animation when enabled (previous and next arrows are visible)
  • Preload images: This loads the images when the page is loaded, instead of loading them as they’re triggered during the slideshow

Widget Options (Design)

There are an extensive number of design and styling options. These options allow you to customize all styling aspects of the widget. These settings are self explanatory and labeled with their exact function, so the majority of these settings will not be explained in detail within this documentation. However, there are a few key settings in the Design section that we will discuss here:

  • Widget Mode: This sets the display mode of the widget. The options are Standard and SuperHero.

    Standard mode displays the widget in a standard way, where the size of the widget can be adjusted using the blue grab handle on the widget container.

    SuperHero mode displays the slideshow full height, regardless of the screen size of the viewer. This technology is borrowed from our SuperHero Slider widget, which functions the same.

  • Height Offset: This setting can be used to account for the height of your header. By offsetting the height, your slideshow images will not be cut off by the header.
  • Animation Duration Mode: This setting is found in the Animation Settings menu. There are 2 choices: Auto and Manual.

    Auto matches the Duration Per Slide value (found in the Content tab) to the Animation Duration. In most cases, this results in a rather fast Ken Burns effect. For a slower effect, consider using the Manual mode.

    Manual mode allows you to set the Animation Duration. Animation Duration sets the amount of time it takes to complete the Ken Burns zooming effect. Longer times result in a slower effect.

The FX – Button Line Hover widget adds line-based animations to buttons. This effect adds a classy element of motion and interest while remaining subtle. Since this widget does not use solid color backgrounds or borders, consider this widget when your site design calls for something unique or elegant.

Note: this widget is intended for text-based buttons only. If you’re looking for animated buttons with the more traditional solid background or border, check out the FX – Button Hover widget.

Preview: https://demo.wocode.com/fx-button-line-hover

Tutorial Video

 

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it where you would like the button to be seen.
  • You may align the widget left, center or right in the Design settings in the widget options. Alternatively, you may reduce the size of the widget container (using the blue grab handle) and then use the alignment setting in the context menu by right-clicking on the widget.

WIDGET OPTIONS

  • Open the widget option panel.
  • Unique ID: If you’re using multiple FX – Button Line Hover widgets on the same page, it is important to use Unique ID’s for each widget.
  • Button Style: This allows you to select from 15 different button styles.
  • Button Label: this is the text that appears on the button.

DESIGN SETTINGS

The Design section allows you to customize the look of the button and hover effect.

  • Button Alignment: Sets the alignment of the button to the left, center or right.
  • Vertical Padding / Horizontal Padding: These settings add padding to the top or sides of the button, effectively changing the size of the button.
  • Line Color: This sets the color for the animated line.

The remainder of the Design settings allow you to style the button using colors, borders, font styling and more. These settings are self-explanatory and will not be covered here in detail.

The FX – Confetti widget displays falling confetti effect. This effect can be triggered by a button or set as a permanent background in a row, column and more. Consider this fun, celebratory effect for special pages, form submissions and buttons of all kinds!

The FX series of widgets are built with simplicity in mind, providing one dedicated effect that is used as a background for a row, column or other page element. Since these effects are applied as backgrounds, you can work freely with other elements within a row, column, etc. while the visual effect remains in the background.

Preview: https://demo.wocode.com/fx-confetti

Tutorial Video

 

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it where you would like the confetti effect to be seen.
  • You may place the widget in a row, column or inner row.

WIDGET OPTIONS

  • Open the widget option panel.
  • Apply to: This dropdown provides multiple options for how you choose to apply the effect. The available options are Current Row, Current Column, Entire Page, Custom CSS Selectors, Flex Section (Flex Layout Only) and Flex Grid (Flex Layout Only).

    Current Row: Applies the effect to the background of the row the widget is placed in.

    Current Column: Applies the effect to the background of the column the widget is placed in.

    Entire Page: Applies the effect to the background of the entire page. In this case, the widget may be placed anywhere on the page except the header or footer. Placement in the header or footer will result in the effect being applied to the entire site.

    Custom CSS Selectors: This advanced option allows you to target elements using their CSS class or ID. This is useful when trying to apply the effect to the backgrounds of things where a widget cannot be placed, such as a gallery or slideshow. See the Advanced: Using Custom CSS Selectors section below for more information.

    Flex Section (Flex Layout Only): Applies the effect to the background of a Flex column. This can only be used in Flex layouts.

    Flex Grid (Flex Layout Only): Applies the effect to the background of a Flex column. This can only be used in Flex layouts.

  • Confetti Trigger: The confetti effect may be applied as a permanent background or it may be triggered with a button. This setting allows you to choose. “Automatic” applies the effect permanently, and “Button” enables a button trigger.
  • Button Label: This is the text that is displayed on the button. This option is only seen when the Button trigger type is used. Button styling options are found in the Design section.

DESIGN SETTINGS

The Design section allows you to customize the look and feel of the confetti effect.

  • Confetti Amount: Sets the number of confetti elements are used.
  • Animate Confetti: This enables the falling movement of the confetti. When this option is disabled, the confetti will not move.
  • Animation Speed: Sets the speed that the confetti falls.
  • Confetti Size: Sets the size of the confetti elements.
  • Confetti Rotate: Enables a rotation of individual confetti elements as they fall.
  • Start From Edge: This groups the confetti elements at the moment they begin to fall, so that they all begin at the same place.
  • Confetti Type: This allows you to enable or disable individual confetti shapes: square, triangle, lines and circles.
  • Confetti Colors: These allow you to enable up to 4 colors, and select the colors.

ADVANCED: USING CUSTOM CSS SELECTORS

The Apply to setting gives the option for Custom CSS Selectors. This allows you to target most any element on the page, including things that cannot be targeted using the other Apply to options; such as slideshows, galleries, etc.

Using Custom CSS Selectors requires that you identify the class or ID of the element you’re targeting. The best way to do this is to use the Edit HTML/CSS option.

In this example, we will use the class of a gallery as a custom CSS selector.

  • Right-click the element you wish to target.
  • Select Edit HTML/CSS.
  • Find the div class and copy it.
  • Paste the class in the Custom CSS Selector field in the widget.
  • Note that a period has been added in front of the class name. Class names should begin with a period (.) and IDs should begin with a hashtag (#). This step is required, and is a rule of working with CSS classes and IDs.
  • The effect will now be applied to the gallery only.

 

The FX – Frost widget applies a blurred effect to the image or video background of a row or column, creating a frosted glass look. This effect can be extremely effective for making text and buttons that are placed on top really pop. Grayscale and sepia tint can be added for additional effect.

The FX series of widgets are built with simplicity in mind, providing one dedicated effect that is used as a background for a row, column or other page element. Since these effects are applied as backgrounds, you can work freely with other elements within a row, column, etc. while the visual effect remains in the background.

Preview: https://demo.wocode.com/fx-frost

Tutorial Video

 

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it where you would like the blur effect to be seen.
  • The widget is best used where an image is set as a background. You may place in a row, column or inner row.
  • The blur effect will be applied to the entirety of an image background – however, you may also use the widget in a column where the row behind has a background image set, creating a “frosted panel” look. See the Technique: Frosted Glass Panel section below.

WIDGET OPTIONS

  • Open the widget option panel.
  • Apply to: This dropdown provides multiple options for how you choose to apply the effect. The available options are Current Row, Current Column, Entire Page, Custom CSS Selectors, Flex Section (Flex Layout Only) and Flex Grid (Flex Layout Only).

    Current Row: Applies the effect to the background of the row the widget is placed in.

    Current Column: Applies the effect to the background of the column the widget is placed in.

    Entire Page: Applies the effect to the background of the entire page. In this case, the widget may be placed anywhere on the page except the header or footer. Placement in the header or footer will result in the effect being applied to the entire site.

    Custom CSS Selectors: This advanced option allows you to target elements using their CSS class or ID. This is useful when trying to apply the effect to the backgrounds of things where a widget cannot be placed, such as a gallery or slideshow. See the Advanced: Using Custom CSS Selectors section below for more information.

    Flex Section (Flex Layout Only): Applies the effect to the background of a Flex column. This can only be used in Flex layouts.

    Flex Grid (Flex Layout Only): Applies the effect to the background of a Flex column. This can only be used in Flex layouts.

DESIGN SETTINGS

The Design section allows you to customize the look and feel of the Frost effect.

  • Blur Size: This sets the strength of the blur.
  • Additional Effects: Grayscale and Sepia are available as additional effects. To add, enable the radio button for the effect. These effects are added in addition to the blur / frosted glass effect.
  • Effect Value: This sets the strength of the additional effect (Grayscale or Sepia). Note that this slider only affects the additional effect, and does not affect blur.
  • Hide Overflow on Target Element: When this toggle is enabled, the blur effect will be contained within the container it’s placed in. When this toggle is disabled, the blur will overflow out of the container. Larger Blur Size values will result in greater spill.

Technique: Frosted Glass Panel

In the widget demo, we use a technique that uses the widget to create a frosted glass panel effect. This technique is described below:

  • Apply an image background in a row.
  • Set the row background image to “Cover” and “Keep image position static”.
  • Add a column within the row.
  • Apply the same image as the column image background.
  • Set the column background image to “Cover” and “Keep image position static”.
  • Apply a Background Overlay color – white works best.
  • Add the FX – Frost widget to the column. Set “Apply to” as Current Column.
  • You will now see a frosted panel effect, where the frosted effect is seen on just a portion of the row image, and is contained within the column. Experiment with the Blur Size setting in the FX – Frost widget, as well as the Overlay Opacity in the column image background settings to fine tune the frosted glass effect.

ADVANCED: USING CUSTOM CSS SELECTORS

The Apply to setting gives the option for Custom CSS Selectors. This allows you to target most any element on the page, including things that cannot be targeted using the other Apply to options; such as slideshows, galleries, etc.

Using Custom CSS Selectors requires that you identify the class or ID of the element you’re targeting. The best way to do this is to use the Edit HTML/CSS option.

In this example, we will use the class of a gallery as a custom CSS selector.

  • Right-click the element you wish to target.
  • Select Edit HTML/CSS.
  • Find the div class and copy it.
  • Paste the class in the Custom CSS Selector field in the widget.
  • Note that a period has been added in front of the class name. Class names should begin with a period (.) and IDs should begin with a hashtag (#). This step is required, and is a rule of working with CSS classes and IDs.
  • The effect will now be applied to the gallery only.

 

Troubleshooting FAQ’s

My text is overlapping objects below when I switch to tablet/mobile breakpoints

This may occur when elements are placed directly on the grid or the container layout is 1×1.

In the top menu, click the Desktop breakpoint.

  • If the overlapping objects are in a container, go to the Design panel, then under Custom Layout, select “Additional rows” from the drop-down, and place each object in a row.
  • If the items are directly on the grid, add a container with rows, then drag the objects to it as described above.
  • Alternatively, you can align objects in a vertical Flexbox.

 

I can’t drag to resize my grid on the mobile layout

Grid height is set as a minimum value, which means it won’t get smaller than what you set. For example, if a grid minimum height is set to 400px minimum height with a container set to 1200 px minimum height, the grid can’t be less than 1200px.

To resize the content:

Design panel > Size > reconfigure the minimum height.

Alternatively, you may resize the content inline and then resize the grid inline or using the Design panel.

 

My row expanded and is very large on the mobile layout

Flex transforms grid columns to rows on mobile. If the minimum height of an element (for example, a container) is larger than the minimum height of the grid in the main breakpoint, the row may not display correctly in the mobile layout.

The grid is resized based on its content. So that means that most commonly there is an image or container that is set in px.

To resize the content:

Main breakpoint > Design panel > Size > reconfigure the minimum height.

Alternatively, you may resize the content inline and then resize the grid inline or use the Design panel.

 

My design looks unorganized when I switch breakpoints

The following may explain why your design looks messy or unorganized when you switch breakpoints:

  • Grid Objects are not snapped to grid lines. This happens more commonly when the cells are small.
  • Grid objects are not aligned.
  • The pin is in its default state. Each time you add a new object, by default the object is pinned to the top left. Pinning is changed when you align it. For example, “align bottom” will pin to bottom.

To snap objects to grid lines:

Drag an object and use the pink snap lines in order to place objects on the grid.

Alternatively, use the alignment controllers from the Design panel.

To manually pin, begin by selecting an object, then:

Design panel > scroll to Position > Next to Pin, click the arrow corresponding to where you want to pin the object.

 

I can’t change the font size on the tablet layout

Desktop and tablet share the same font size. We suggest that you select a font size that fits both desktop and tablet layouts.

 

I try to rearrange elements on mobile specifically but it affects all the breakpoints

When you change the structure, it affects all breakpoints. Take this scenario for example: On the main breakpoint, there are 2 adjacent containers spanning the entire grid but you want those elements to be stacked vertically on mobile. When you try to change the location of the containers, they are nested instead of stacked. By nesting the elements on mobile, you will nest the elements on all breakpoints. There is no space for the elements to be stacked vertically so they are nested instead.

To correct this, change the minimum height on the space you are working on.

Select the Grid, then in the Design panel under Size, increase the Min Height. This gives you more space to move elements around. After you rearrange the elements, you may resize it to the desired height.

There are three main areas to work within Flex: the Grid, Containers and Flexboxes. This article will discuss the differences between them, and when to use one instead of another.

As a general rule, if you want to create a freestyle composition with overlapping elements, use a Container. If you want to use an automatic layout that includes ordering items in a horizontal or vertical list, use a Flexbox.

Sometimes, there is no right or wrong answer, and there are several ways to achieve the same design goal. For example, whtn you have the same background (image/color/border) for a single object.

Grid

Place items directly on the grid when you want items to overlap relative to a card or composition. For example, overlapping a title on images.

Containers

Containers are best used for free-form compositions. Use containers when you want to include non-linear compositions or overlapping objects.

 

Flexbox

Flexboxes should be used when you want to create an automatic layout where items are ordered in a horizontal or vertical list. Additionally, you should use Flexboxes when you have elements that are intended to be placed one after the other, like multiple buttons, labels, logos, etc.

 

The FX – Button Hover widget reveals smooth, modern animations when users hover over buttons on your site. Button transitions create a lively and interactive feel to your site and draw users to your calls to action. With more than twenty animation styles and full button styling control, you can be sure your brand will be fully complimented.

Preview: https://demo.wocode.com/fx-button-hover

Tutorial Video

 

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it where you would like the button to be seen.
  • You may align the widget left, center or right in the Design settings in the widget options. Alternatively, you may reduce the size of the widget container (using the blue grab handle) and then use the alignment setting in the context menu by right-clicking on the widget.

WIDGET OPTIONS

  • Open the widget option panel.
  • Unique ID: If you’re using multiple FX – Button Hover widgets on the same page, it is important to use Unique ID’s for each widget.
  • Button Style: This allows you to select from 21 different button styles. As you browse different button styles, keep in mind that some styles may require styling adjustments in order for the style to look best. The default style settings will not work well for all styles.
  • Button Label: this is the text that appears on the button.

DESIGN SETTINGS

The Design section allows you to customize the look of the button and hover effect.

  • Button Alignment: Sets the alignment of the button to the left, center or right.
  • Background Width / Button Height: These set the width and height of the button. But keep in mind that these settings do not apply to all button styles. Only the Janus, Skoll, Helene and Rhea styles are affected by these settings. See the Vertical Padding / Horizontal Padding settings below to further control the size appearance of the button.
  • Vertical Padding / Horizontal Padding: These settings add padding to the top or sides of the button, effectively changing the size of the button.

The remainder of the Design settings allow you to style the button using colors, borders, font styling and more. These settings are self-explanatory and will not be covered here in detail.

Flex mode offers an exciting new way of designing responsive sections and pages. New inline editing technology allows pixel-perfect accuracy for any element, and offers control of breakpoints.

Flex is seamlessly integrated into the Without Code builder and can be used in individual sections of a site or used throughout an entire site build. This type of integration allows users to choose when elements are best arranged in a responsive layout and when it’s not needed; as Flex sections can be mixed and matched with standard rows at will.

Integrating Flex into the builder as an optional editing mode also allows longtime Without Code users the ability to learn to use Flex at whatever pace you prefer, rather than forcing an editor change all at once.

In this article, we will show you how to add a Flex section to a site, and provide an overview of the components of a Flex section.

Adding a Flex Section

  • Hover between rows, and click the Add Section Button. Select the Flex Sections category. Choose a Flex Section (choose from a pre-designed section or a blank section). Click Save in the top menu.
  • Alternatively, you may open the context menu of a row by clicking the Row button or by right-clicking within a row, then select “Add Flex Section”.

Flex Mode Overview

LAYERS PANEL

When working in Flex mode, a new menu option will appear in the sidebar menu: Layers.

The Layers panel shows the elements on the page: grids, widgets, flexboxes, etc. From here, you may select, rearrange and rename elements. The Layers panel always starts with the section, followed by the grids, and then widgets or containers.

 

You may also navigate between elements in the following ways:

  • Click on the button for the currently active element in the editor, then select an element in the menu that appears above.
  • Click a breadcrumb link above the Design panel.

DESIGN PANEL

The Design panel can be found on the right side of the editor and contains design controls for the selected element (container, flexbox, widget). Design options include layout, sizing, alignment, and more.

 

Design Panel Sizing Measurements

There are multiple sizing measurements in Flex.

  • Pixel (px): The size stays the same on every breakpoint.
  • Viewport Width (vw): Percentage of the width of an element when displayed on a given screen. 10vw is 10% of the viewport width. 100 vw takes up 100% of the screen width. By default, margins and widget sizes are set in percentage.
  • Viewport Height (vh): Percentage of the height of an element when displayed on a given screen. 10vh is 10% of the viewport height on every screen size.
  • A: The size is automatically determined by content.
  • Min & Max: These are the smallest/largest measurements of an element. This setting ensures that an element does not get smaller/bigger than the set min/max size when resizing.


Align Menu

Select how the entire flexbox will be aligned relative to the grid. You can only align under the contrary axis.

You may also select where an element within a flexbox (for example, a button) is aligned on the chosen auto layout axis.

 

Layout Menu

There are two different automatic alignment settings for Flexboxes in the Design panel.

  • Under Layout, select Vertical layout or Horizontal layout to set an axis for elements inside the Flexbox.
  • Under Align in Flexbox, select how elements will be placed in the selected axis.

Position Menu

You can pin elements to a specific position in a cell, so the location stays the same relative to the cell when the size of the cell changes.

To pin an element to a position in a cell:

  1. Select the element
  2. In the Design panel, scroll to Position.
  3. Next to Pin, click the arrow button corresponding to where you want to pin the element in the cell.

The element will stay pinned to this location in the cell when the grid size changes.

 

BREAKPOINTS

A breakpoint is the size (using pixel width) where the design adjusts for a specific screen width. Breakpoints allow designs to be responsive as they scale up and down. In Flex, the default breakpoints are:

  • Desktop (1025px-1399px)
  • Wide desktop (1400px and up)
  • Tablet (768px-1024px)
  • Mobile (767px and below)
  • Mobile landscape (468px-767px)

You can switch between breakpoints at the top of the page by clicking the different view buttons.

You can also hide certain elements on specific breakpoints. For more information about breakpoints and how to hide elements, see the Flex Breakpoints doc.

The FX – Bokeh widget displays a background effect of soft, out of focus circles moving gently. This effect is inspired by the dramatic and sought-after photography phenomenon of the same name.

The FX series of widgets are built with simplicity in mind, providing one dedicated effect that is used as a background for a row, column or other page element. Since these effects are applied as backgrounds, everything else in the row (such as text and images) appears on top of the effect – as it should.

Preview: https://demo.wocode.com/fx-bokeh

Tutorial Video

 

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it where you would like the bokeh effect to be seen. It may be placed in a row or column.
  • If you would like to add the effect to an existing hero image, simply drop the widget into the row with your hero image.

WIDGET OPTIONS

  • Open the widget option panel.
  • Apply to: This dropdown provides multiple options for how you choose to apply the effect. The available options are Current Row, Current Column, Entire Page, Custom CSS Selectors, Flex Section (Flex Layout Only) and Flex Grid (Flex Layout Only).

    Current Row: Applies the effect to the background of the row the widget is placed in.

    Current Column: Applies the effect to the background of the column the widget is placed in.

    Entire Page: Applies the effect to the background of the entire page. In this case, the widget may be placed anywhere on the page except the header or footer. Placement in the header or footer will result in the effect being applied to the entire site.

    Custom CSS Selectors: This advanced option allows you to target elements using their CSS class or ID. This is useful when trying to apply the effect to the backgrounds of things where a widget cannot be placed, such as a gallery or slideshow. See the Advanced: Using Custom CSS Selectors section below for more information.

    Flex Section (Flex Layout Only): Applies the effect to the background of a Flex column. This can only be used in Flex layouts.

    Flex Grid (Flex Layout Only): Applies the effect to the background of a Flex column. This can only be used in Flex layouts.

DESIGN SETTINGS

The Design section allows you to customize the look and feel of the bokeh effect.

  • Background Color: Sets the color of the background. This will apply to the row, column or wherever it’s applied.
  • Bokeh Particles: Sets the number of bokeh “circles” that will be visible.
  • Particle Size: Sets the size of the bokeh “circles”.
  • Animation Duration: This setting sets the amount of time that the entire animation will last. Smaller values will result in faster, more noticeable visuals.
  • Particle Color 1/2/3: The widget supports 3 separate colors for the bokeh “circles”. This sets the color of each.

ADVANCED: USING CUSTOM CSS SELECTORS

The Apply to setting gives the option for Custom CSS Selectors. This allows you to target most any element on the page, including things that cannot be targeted using the other Apply to options; such as slideshows, galleries, etc.

Using Custom CSS Selectors requires that you identify the class or ID of the element you’re targeting. The best way to do this is to use the Edit HTML/CSS option.

In this example, we will use the class of a gallery as a custom CSS selector.

  • Right-click the element you wish to target.
  • Select Edit HTML/CSS.
  • Find the div class and copy it.
  • Paste the class in the Custom CSS Selector field in the widget.
  • Note that a period has been added in front of the class name. Class names should begin with a period (.) and IDs should begin with a hashtag (#). This step is required, and is a rule of working with CSS classes and IDs.
  • The effect will now be applied to the gallery only.

 

The FX – Gradients widget applies an animated gradient background to a row, column or other page element. The subtle movement creates a calming visual point of interest to a page without being distracting. With support for 6 colors and several animation customization options, it’s effortless to align this visual with your brand and color palette.

The FX series of widgets are built with simplicity in mind, providing one dedicated effect that is used as a background for a row, column or other page element. Since these effects are applied as backgrounds, everything else in the row (such as text and images) appears on top of the effect – as it should.

Preview: https://demo.wocode.com/fx-gradients

Tutorial Video

 

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it where you would like the image and effect to be seen. It may be placed in a row or column.
  • If you would like to add the effect to an existing hero image, simply drop the widget into the row with your hero image.

WIDGET OPTIONS

  • Open the widget option panel.
  • Apply to: This dropdown provides multiple options for how you choose to apply the effect. The available options are Current Row, Current Column, Entire Page, Custom CSS Selectors, Flex Section (Flex Layout Only) and Flex Grid (Flex Layout Only).

    Current Row: Applies the effect to the background of the row the widget is placed in.

    Current Column: Applies the effect to the background of the column the widget is placed in.

    Entire Page: Applies the effect to the background of the entire page. In this case, the widget may be placed anywhere on the page except the header or footer. Placement in the header or footer will result in the effect being applied to the entire site.

    Custom CSS Selectors: This advanced option allows you to target elements using their CSS class or ID. This is useful when trying to apply the effect to the backgrounds of things where a widget cannot be placed, such as a gallery or slideshow. See the Advanced: Using Custom CSS Selectors section below for more information.

    Flex Section (Flex Layout Only): Applies the effect to the background of a Flex column. This can only be used in Flex layouts.

    Flex Grid (Flex Layout Only): Applies the effect to the background of a Flex column. This can only be used in Flex layouts.

DESIGN SETTINGS

The Design section allows you to customize the look and feel of the Gradient effect.

  • Animation Duration: This setting sets the amount of time that the entire animation will last. Smaller values will result in faster, more noticeable visuals.
  • Tilt Angle: This is the angle in which different gradient colors meet each other.
  • Tilt Angle Direction: The direction that the angle will rotate.

Each color used has its own set of options:

  • Gradient Color 1/2/3/4/5/6: This sets the color of the gradient.
  • Gradient Color 1/2/3/4/5/6 Position: This sets the position point in which the color is combined with the color before it. The value is percentage based, based on a maximum value of 100%.

ADVANCED: USING CUSTOM CSS SELECTORS

The Apply to setting gives the option for Custom CSS Selectors. This allows you to target most any element on the page, including things that cannot be targeted using the other Apply to options; such as slideshows, galleries, etc.

Using Custom CSS Selectors requires that you identify the class or ID of the element you’re targeting. The best way to do this is to use the Edit HTML/CSS option.

In this example, we will use the class of a gallery as a custom CSS selector.

  • Right-click the element you wish to target.
  • Select Edit HTML/CSS.
  • Find the div class and copy it.
  • Paste the class in the Custom CSS Selector field in the widget.
  • Note that a period has been added in front of the class name. Class names should begin with a period (.) and IDs should begin with a hashtag (#). This step is required, and is a rule of working with CSS classes and IDs.
  • The effect will now be applied to the gallery only.

 

Join Now