The filter images is a widget that allows you display your images in a gallery-like layout.The two main features of this widget is that you can setup a number of filters and group your images by these filters, but also enable the use an animated overlay with some text for each of the images.Choose from multiple layouts and apply a custom style to all the widget elements.Â
Lets go over the details of this astonishing widget.
This is where you will manage your images list.You can add an image to the list by clicking on the add item button at the bottom of this section.Each image has the following options.
Note that the global filters list can be defined in the filter global settings available in the style tab.
The modern image settings section is going to be used to align your content and to alternate the various effects used in this widget.
The styling tab is going to be used to style everything about the filter images elements.Alternate the settings,colors, typography, borders and more.
-Enable 3D Hover : Enable/disable the 3D hover effect.We strongly recommend enabling this option as its a great visual aspect of this widget, but we know that in some cases simplicity can be key.
-: Control the mouvement sensitivity in conjunction with the hover effect.Changing this value will affect the behavior and speed of the 3D effect.
-Enable Glare : Enabling this add extra brightness to create a glaring effect and give your images a different visual touch.This effect is better used with a background image as it doesn't make as much of a difference when used on a color painted background.
- : Control the value for the glare effect.The higher this value is, the more intense effect.
-Enable Reset : Disable this if you don't want the tilt effect to reset to its initial position after hovering over the the image.Essentially this means that the image will stay in the same position after the hover action is over.
Customize the text properties for the heading title & sub heading.Change the font size, letter spacing... choose from hundreds of Google font families.
-Colors : Customize the color of your text elements, with the possible use of both solid and gradient colors.
-Shadows : Apply text shadows and create stylish text for your elements.
Change the style for the images.Add borders, shadows, and alternate the colors for the overlay.
-Colors : Customize the color of the overlay.You can use both solid and gradient colors with the option of controlling the direction and position for the gradient.
-Borders & Shadows : Add a border for the image with the possibility to customize the width and color, and apply a box shadow to create unique effects.
-Padding : Control the overlay inner space by changing the padding values.
The masonry and filter sections are going to be used to change the masonry layout and effects as well as to setup the filters settings and styling.
Change the number of columns, enable the gutter, and change the show effect.
-Columns Number : Set the number of columns that you want to use for the masonry layout.
-Enable Gutter & Gutter Value : Enable this if you want the images to be separated by white space.You can also change the gutter value to control separating space.
-Show Effect : Change the images showing effect.Select one of the many animations available.
Setup your filters list, align the filters section, and change the filter links typography.
-Enable Filter : Enable the use of filters for your images.
-Filter Labels : Specify the filters that you want to use.The filters name have to be separated by a comma.
- : Control the horizontal alignement for the filters links section.
-: Change the font family, font size, and all the other text properties for the filters links.
-Enable All Button: Enable the use of an 'all images' button.When the user clicks on this button, all the images in the list will be displayed.
-: Choose if you want the all button to appear on the left or right side of the filters links.
Customize the links style.Change colors and add borders and box shadow.
-Link Padding & Margin : Control the links inner and outer space by changing the padding and margin values.
-Normal & Active: Select​ which link state you want to customize.Normal for the idle state of the links and active for when a link is currently selected and active.Note that all the remaining options of this section will only affect the selected state.
-Colors : Customize the color for both the links text and the background with the possible use of gradient colors for the background.
-Radius, Border & Box Shadow : Customize the links background radius to change their shape and add a border and a box shadow to add even more design.
You have the full control over the style of both the links outer and inner containers.
-Container & Inner : Select which container to style.The container option allows you to style the whole space around the links section while the inner option is only for the links text container.
-Background : Customize the selected container background & choose to apply either a solid background color or a gradient color.
-Radius, Borders & Shadows : Control the border for each container and apply custom box shadows.The option to change the shape of the container is also possible by changing the border radius value.
-Padding & Margin : Change the padding and margin values to control the inner and outer space for each container.