The Grove Timeline offers unique styles to show the posts horizontally with a timeline structure. The widget can be customized into various unique styles to entertain your visitors.
Let’s explore the widget customizations.
Inserting Grove Timeline widget
In the search bar of the Elementor editor page, search by the widget name and then drag the Grove Timeline widget and drop it on the page. You will require both Elementor and Ultimate Post Kit addons to be installed to use this widget.
The Default view of the Grove Timeline
Once you drop the widget inside your page, you will see a long timeline in the middle of the content with a title, text, and meta info paired with an image and seated at the two sides of the timeline. The content repeats the layout style for the rest with additional layout shifting.
Content Tab Exploration
Layout Customization
Go to Content > Layout
In this section, you can change the Skin of the widget to 3 different layout styles and choose the best one for your website. You can change the Columns lineup between 1 to 6. There are Item Gap, Item Height, and Image Size options below.
Query for Timeline
Go to Content > Query
For the Query, first set the Item Limit that determines how many items you want to show. Then select the Source of the items that could be Posts, Templates, etc. The Offset value hides one of the selected items.
You can rearrange the items by Date, Order By, and Order sortings. The Ignore Sticky Post switcher will prevent showing the sticky posts.
Additional Section Set
Go to Content > Additional
In this section, you will find a number of switchers to show/hide specific elements from the widget. They are Title, Show Text, Strip Shortcode, Author, Date, Human Different Time, Show Time, Reading Time, Item Match Height, and Item Wrapper Link.
Apart from the switchers, you will find Title HTML Tag, description Text Limit, and Separator fields.
Set Navigation Style
Go to Content > Navigation
Here, you will get access to over 20 unique Arrows Icon styles to choose from. The arrows work as the navigation part of the widget.
Set Carousel Settings
Go to Content > Carousel Settings
In this section, you will get the Auto Play, Autoplay Speed, Pause on Hover, Slide To Scroll, Center Slide, Loop, and Animation Speed (ms) options to apply the corresponding effects on your slider.
Autoplay switcher: Enable the switcher to make the carousel slide Automatically with a customizable Autoplay Speed control.
Pause on Hover: If turned on, when you Hover your mouse cursor on the carousel, then your slider will Hold, otherwise, your slider will Autoplay.
Slides to Scroll: Determines how many slide will scroll at once.
Loop: You can easily enable or disable the switcher button. When you activate the Loop switcher button, the timeline will loop at a certain interval. You can also set up the loop animation speed here.
Style Tab Explore
Timeline Customization
Go to Style > Timeline
In this section, first, configure the timeline Spacing. The options get divided into two subsections named Line & Number.
For the Line part, find the Line Style option that’s set to ‘Dashed’ by default (changeable), the Line Border Width, and the Color options.
From the Number subsection, you can customize the Color of the numbers over the timeline, the number’s Background Color, and Border Radius.
You will also find Color settings to create a hover effect.
Content Section Customization
Go to Style > Content
To style the content part, you can use Padding, Margin, Border, border Width, and Color.
Title Customization
Go to Style > Title
For the Title, you can change the text Style (Underline, Middle Underline, Overline, Middle Overline), text Color, text Hover color, Typography, Text Shadow, and Spacing.
Text Color set
Go to Style > Text
For the Text, you can customize the text Color and Typography.
Meta Customization
Go to Style > Meta
For the Meta tag, you can customize the meta text Color, Hover Color, Typography, Spacing, and Space Between options.
Navigation Customization
Go to Style > Navigation
For navigation, the options are divided into two subsections; Normal & Hover. Here, you can change the navigation Arrows icon Color, Background color, Border Type, Border Radius, Padding, Icon Size, and Arrows Horizontal Offset options.
For the Hover mode, there are Color, Background, Border Color, and Arrows Horizontal Offset.
This way, you can make the Grove Timeline more stylish and fit for your website.
Video Assist
This Video will help you with the Grove Timeline widget customizations. Please visit the demo page for examples.
Thank you for being with us.
