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.
Global Settings
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.
Image : This is where you will upload or select the image that you want to use.
Heading Title : A title text that gives a global insight about the image or the targeted subject.
Sub-heading : An optional small more detailed text about your the image or subject.
Link : Specify a go to link on click.You can click on the link options button(The cog wheel on the right) to enable the 'open in new window' and the 'no follow' options.
Custom Classes : This is where you will define this specific image filters.If you want to use more than one filter you can separate them by a single comma.Example : nature,sport,world-tour.
Note that the global filters list can be defined in the filter global settings available in the style tab.
Modern Image Settings
The modern image settings section is going to be used to align your content and to alternate the various effects used in this widget.
Alignement : Horizontally and vertically align the images content text.
Hover Style : Change the overlay hover style.Select one of the multiple unique hover effects available.
Show Content Effect : Change the effect that used for displaying the content text.Choose from more than 10 effects available in the list.
Show Overlay Effect : Alternate the effect that is used for displaying the overlay.A great number of choices are accessible.
Enable Frame : Enable this if you want a frame sized overlay.Disable this option if you want to use a full image sized overlay.
Styling
The styling tab is going to be used to style everything about the filter images elements.Alternate the settings,colors, typography, borders and more.
Tilt Hover
-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.
Modern Image Typography
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.
Modern Image Styling
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.
Masonry & Filter Styling
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.
Masonry Global Settings
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.
Filter Global Settings
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.
Filter Link Styling
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.
Filter Container Styling
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.
Get Help From Professionals
Can't find what you are looking for?
If you can't find what you are looking for any our documentation website, please feel free to open a support ticket & get help from our support team.
Open a Ticket
Open a Ticket
WHO ARE WE ?
We are a group of talented WordPress developers & designers from Earth our main goal is to create great products & provide the best services to our customers.
