In this documentation, we will discuss the customization of the Evolve widget, brought to you by the Pixel Gallery.
Enable the Evolve Widget
To use the Evolve widget from Pixel Gallery, first, you have to enable the widget.
- Go to WordPress > Pixel Gallery Plugin dashboard.
- Then Click the Core Widgets Tab.
- Search the Evolve Widget Name.
- Enable the Evolve Widget.
- Hit the Save Settings Button.
Inserting The Evolve widget
- Go to the Elementor Editor Page and Hit the “+” icon Button.
- Search the Evolve widget.
- Drag the widget and Drop it on the editor page.
Content Tab Customizations
Layout Section Customization
Go to Content > Layout
1. Height: You can set the slider height from here.
2. Item Gap: This option lets you set the slider items gap.
3. Show Title: Enable/disable the Show Title switcher button to show/hide the title.
4. Show Sub Title: Enable/disable the Show Sub Title switcher button to show/hide the subtitle.
5. Show Text: Enable/disable the Show Text switcher button to show/hide the Text.
6. Link: Come to the Link section, you will get three options. These are, None, Media File(Lightbox), and Custom Url.
- None: If you set the link type- none then no link will work.
- Media File: If you select the link type – Media File then you will get the lightbox option Yes or No. If you select the Lightbox type- Yes then the slide image will apear as lightbox.
- Custom Url: If you select the link type – Custom Url then your whole slide item will work as a link.
Items Section Customization
Go to Content > Items
1. Add Item: You can add slide item by clicking the “+” Add Item button.
2. Copy Item: This option lets you to copy the same item.
3. Close Item: You can delete the Item by clicking the Close Icon button.
1. Select Image: You can select the Gallery image from here.
2. Title: This option lets you change the Title.
3. Sub Title: This option lets you change the Sub Title.
4. Text: This option lets you change the gallery text.
5. Link: You can set a link under the whole item. Actually, the link work when you select the source type – custom url.
Style Tab Customization
Reveal Section
Go to Style > Reveal
Reveal Color: If you want then you can set slide reveal color from here.
Item Section
Go to Style > Item
1. Background Type: You can change the color of any object background to classic or gradient. Here we choose the Background type Classic.
2. Background Color: This lets you change the Background color. If you want, you also can change an image to the Background.
3. Border Type: You can set the Border Type to Default, None, Solid, Double, Dotted, Dashed, or Groove. We choose here the Border Type Solid.
4. Border Width: The border width property allows you to control how thick or thin the border is.
5. Border Color: This lets you change the Border color.
6. Border Radius: Customizes the border corners for roundness.
7. Box Shadow: The Box Shadow property is used to create the shadow around the Category Button. It takes Four values: Horizontal offset, Vertical offset, blur, and Spread to customize the Box shadow.
Position: you can set the Box Shadow position Outline and Inset. Here we set the Box Shadow position Outline.
Box Shadow Color: This lets you change the Box Shadow color.
Title Section
Go to Style > Title
1. Color: This option lets you change the Title color.
2. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
3. Margin: Adjusts the position of an object over the canvas.
4. Typography: Change the font family, size, weight, style, transform, decoration, line height, letter spacing, and word spacing from here.
5. Text Shadow: The Text Shadow property is used to create the shadow around the text. It takes three values: horizontal offset, vertical offset, and blur radius. Here you also can change the Text Shadow Color.
6. Text Stroke: With the Text Stroke option you can add an outline around the text to enhance visibility and design aesthetics. Also, you can change the stroke colour and set the stroke level.
Sub Title Section
Go to Style > Sub Title
1. Color: This option lets you change the Sub Title color.
2. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
3. Margin: Adjusts the position of an object over the canvas.
4. Typography: Change the font family, size, weight, style, transform, decoration, line height, letter spacing, and word spacing from here.
Text Section
Go to Style > Text
1. Color: This option lets you change the Text color.
2. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
3. Margin: Adjusts the position of an object over the canvas.
4. Typography: Change the font family, size, weight, style, transform, decoration, line height, letter spacing, and word spacing from here.
Navigation Section
Go to Style > Navigation
Come to the Navigation section, you will get two sub sections; Normal and Hover.
In the Normal sub section, you will get the below customization options-
1. Color: This option lets you set the naviagtion normal color.
2. Background Type: You can change the color of any object background to classic or gradient. Here we choose the Background type Classic.
3. Background Color: This lets you change the Background color. If you want, you also can change an image to the Background.
4. Border Type: You can set the Border Type to Default, None, Solid, Double, Dotted, Dashed, or Groove. We choose here the Border Type Solid.
5. Border Width: The border width property allows you to control how thick or thin the border is.
6. Border Color: This lets you change the Border color.
7. Border Radius: Customizes the border corners for roundness.
8. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
9. Typography: Change the font family, size, weight, style, transform, decoration, line height, letter spacing, and word spacing from here.
10. Box Shadow: The Box Shadow property is used to create the shadow around the Category Button. It takes Four values: Horizontal offset, Vertical offset, blur, and Spread to customize the Box shadow.
Position: you can set the Box Shadow position Outline and Inset. Here we set the Box Shadow position Outline.
Box Shadow Color: This lets you change the Box Shadow color.
In the Hover subsection, you will get the below customization options-
11. Color: This option lets you set the naviagtion hover color.
12. Background Type: You can change the color of any object background to classic or gradient. Here we choose the Background type Classic.
13. Background Color: This lets you change the Background hover color. If you want, you also can change an image to the Background.
14. Border Color: This option lets you set the navigation hover border color.
All done! You have successfully customized the Evolve widget on your website.
Video Assist
You can also watch the video tutorial Learn more about the Evolve Widget. Please visit the demo page for examples.
Thanks for being with us.
