Content · Elementor
Timeline Post/Story widget for Elementor
A vertical or horizontal timeline for events, history, or a changelog.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
A vertical or horizontal timeline for events, history, or a changelog.
render() writes HTML data attributes: data-animation-duration, data-animation-offset, data-aos, data-aos-left, data-aos-right, data-arrow-bgcolor, data-autoplay, data-counter.
Content is loaded with WP_Query in PHP (not a hardcoded list in the editor).
get_script_depends() enqueues: swiper.
Some inspector controls are marked Pro in PHP (eicon-pro-icon / king-addons-pro-control). Those need King Addons Pro, not Elementor Pro.
The widget script reads data attributes: data-animation-duration, data-animation-offset, data-aos, data-aos-left, data-aos-right, data-pagination, data-swiper-delay, data-swiper-speed.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Timeline Post/Story”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Timeline Content”, “Layout”, “Media Position”, “Image Size”. Style and Content tabs are listed on this page.
- Preview the published page. render() writes HTML data attributes: data-animation-duration, data-animation-offset, data-aos, data-aos-left, data-aos-right, data-arrow-bgcolor, data-autoplay, data-counter.
When to use it
- A company history.
- A project roadmap.
- A course syllabus.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including Timeline Post/Story.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Layout — Timeline Content | Selects the value used for Swiper autoplay. Options: Custom; Dynamic. |
| Layout | The chosen value is read in render() and applied on the front end. Options: Zig-Zag; Line Left; Line Right; Line Top - Carousel; Line Bottom - Carousel. |
| Layout — Media Position | WordPress image size name passed into the thumbnail URL. Options: Top; Bottom. |
| Layout — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| Layout — Date Format | The chosen value is read in render() and applied on the front end. |
| Layout — Main Line Fill | Switcher inspector control (`timeline_fill`). |
| Layout — Main Line Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Layout — Show Extra Label | When this switch is on, render() outputs the wrapped markup. |
| Layout — Slides To Show | Numeric value used in this widget’s render/JS (default 3). |
| Layout — Gutter | Numeric value used in this widget’s render/JS (default 5). |
| Layout — Equal Height Slides | Make all slides the same height. |
| Layout — Loop (Pro) | Switcher inspector control (`swiper_loop`). |
| Layout — Autoplay (Pro) | Passed through to Swiper autoplay. |
| Layout — Carousel Speed | Numeric value used in this widget’s render/JS (default 500, min 0, max 5000). |
| Layout — Carousel Icon | Selects the value used for prev/next carousel arrows. Options: Angle; Angle Double; Arrow; Arrow Circle; Arrow Circle Alt; Long Arrow; Chevron. |
| Layout — Entrance Animation | The chosen value is read in render() and applied on the front end. |
| Layout — Animation Offset | Numeric value used in this widget’s render/JS (default 150, min 0, max 500). |
| Layout — Animation Duration | Numeric value used in this widget’s render/JS (default 600, min 0, max 2000). |
| Layout — Show Pagination (Pro) | Switcher inspector control (`show_pagination`). |
| Content (Content) — Show Label | Switcher inspector control (`repeater_show_year_label`). |
| Content (Content) — Label Text | Text inspector control (`repeater_year`). |
| Content (Content) — Select Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Content (Content) — Show Extra Label | Switcher inspector control (`repeater_show_extra_label`). |
| Content (Content) — Primary Label | Text inspector control (`repeater_date_label`). |
| Content (Content) — Secondary Label | Text inspector control (`repeater_extra_label`). |
| Content (Content) — Display Media | Options: Image; Icon; Video. |
| Content (Content) — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| Content (Content) — Youtube Video Link | Text inspector control (`repeater_youtube_video_url`). |
| Content (Content) — Choose Image | Image Size will not work with default image. |
| Content (Content) — Media Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Content (Content) — Item Title | Text inspector control (`repeater_story_title`). |
| Content (Content) — Item Title URL | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Content (Content) — Description | Wysiwyg inspector control (`repeater_description`). |
| Content (Style) — Custom Colors | Switcher inspector control (`show_custom_styles`). |
| Content (Style) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Content (Style) — Border Color | Writes CSS (border-color, king-addons-story-info, border-bottom-color, border-top-color, king-addons-story-info-vertical, border-left-color) onto the widget’s front-end markup. |
| Content (Style) — Color | Writes CSS (king-addons-data-wrap, border-right-color, border-left-color, king-addons-story-info, border-top-color, border-bottom-color) onto the widget’s front-end markup. |
| Content (Style) — Overlay Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Content (Style) — Border Color (Repeater Media Item Border Color) | Writes CSS `border-color` onto the widget’s front-end markup. |
| Content (Style) — Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| Content (Style) — Description Color | Writes CSS `color` onto the widget’s front-end markup. |
| Content (Style) — Border Color (Item Content Border Color) | Writes CSS `border-color` onto the widget’s front-end markup. |
| Content (Style) — Icon Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Content (Style) — Icon Fill Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Content (Style) — Icon Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Content (Style) — Icon Background Fill Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Content (Style) — Icon Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Content (Style) — Color (Repeater Timeline Item Icon Color) | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Content (Style) — Background Color (Repeater Timeline Item Icon Bgcolor) | Writes CSS `background-color` onto the widget’s front-end markup. |
| Content (Style) — Size | Writes CSS (font-size, width) onto the widget’s front-end markup. (min 0, max 600). |
| Content (Style) — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Content (Style) — Align | Writes CSS (display, text-align) onto the widget’s front-end markup. Options: Start; Center; End. |
| Timeline Items — Content | Repeater rows; render() loops each item to build the list or slides. |
| Query — Post Type | Selects the value used for Swiper pagination. |
| Query — Selection | Selects the value used for WP_Query posts_per_page. Options: Dynamic; Manual. |
| Query — Selection Taxonomy | The chosen value is read in render() and applied on the front end. |
| Query — Authors | Ajax Select2: options load from a King Addons admin-ajax endpoint. |
| Query — Posts Per Page | WP_Query `posts_per_page` — how many posts are fetched (default 3, min 0, max 4). |
| Query — Order By | The chosen value is read in render() and applied on the front end. Options: Title; Date. |
| Query — Order | The chosen value is read in render() and applied on the front end. Options: Ascending; Descending. |
| Query — Not Found Text | Printed in the widget HTML from render(). |
| Query — Exclude Items without Thumbnail | When this switch is on, render() outputs the wrapped markup. |
| Content — Content Align | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Content — Content Align (Right) | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Content — Show Image Overlay | Passed through to the post title. |
| Content — Show Items on Hover | Switcher inspector control (`show_on_hover`). |
| Content — Show Title | Passed through to the post title. |
| Content — Title Over Image | Passed through to the post title. |
| Content — Show Date | Switcher inspector control (`show_date`). |
| Content — Date Over Image | Switcher inspector control (`date_overlay`). |
| Content — Show Description | Passed through to the excerpt produced by wp_trim_words(). |
| Content — Description Over Image | Passed through to the excerpt produced by wp_trim_words(). |
| Content — Excerpt Count | Word count passed to WordPress excerpt trimming for each card (default 10, min 0, max 200). |
| Content — Show Read More | Switcher inspector control (`show_readmore`). |
| Content — Read More Over Image | Passed through to the post permalink. |
| Content — Align | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Content — Align (Right) | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Content — Read More | Printed in the widget HTML from render(). |
| Overlay — Width | Writes CSS (width, top, left) onto the widget’s front-end markup. (min 0, max 100). |
| Overlay — Height | Writes CSS (height, top, left) onto the widget’s front-end markup. (min 0, max 100). |
| Overlay — Content Vertical Align | Writes CSS `justify-content` onto the widget’s front-end markup. Options: Start; Center; End. |
| Overlay — Content Horizontal Align | Writes CSS (display, justify-content) onto the widget’s front-end markup. Options: Start; Center; End. |
| Overlay — Select Animation | Animation picker; the chosen effect is applied on the front end. |
| Overlay — Animation Duration | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.3, min 0, max 5). |
| Overlay — Animation Delay | Writes CSS (king-addons-animation-wrap, transition-delay) onto the widget’s front-end markup. (default 0, min 0, max 5). |
| Overlay — Animation Size | The chosen value is read in render() and applied on the front end. Options: Small; Medium; Large. |
| Overlay — Animation Timing | The chosen value is read in render() and applied on the front end. |
| Overlay — Animation Transparency | Switcher inspector control (`overlay_animation_tr`). |
| Pagination — Pagination Type | Swiper `pagination.type` on the front end. Options: Load More; Infinite Scroll. |
| Pagination — Load More Text | Text inspector control (`pagination_load_more_text`). |
| Pagination — Finish Text | Text inspector control (`pagination_finish_text`). |
| Pagination — Select Animation | Options: None; Loader 1; Loader 2; Loader 3; Loader 4; Loader 5; Loader 6. |
| Pagination — Align | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Timeline Items — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Timeline Items — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Timeline Items — Border Color (Left Aligned) | Writes CSS `border-color` onto the widget’s front-end markup. |
| Timeline Items — Border Color (Right Aligned) | Writes CSS `border-color` onto the widget’s front-end markup. |
| Timeline Items — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-story-info`. |
| Timeline Items — Box Shadow (Timeline Item Shadow Vertical) | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-story-info-vertical`. |
| Timeline Items — Distance From Line | Writes CSS (margin-right, margin-left) onto the widget’s front-end markup. (min 0, max 100). |
| Timeline Items — Vertical Distance | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 200). |
| Timeline Items — Item Bottom Distance | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 150). |
| Timeline Items — Item Bottom Distance (Timeline Item Position Equal Heights) | Writes CSS (margin-bottom, max-height, height) onto the widget’s front-end markup. (min 0, max 150). |
| Timeline Items — Item Top Distance | Writes CSS (margin-top, max-height, height) onto the widget’s front-end markup. (min 0, max 150). |
| Timeline Items — Item Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Timeline Items — Container Padding | Apply this option to fix Box Shadow issue. |
| Timeline Items — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Timeline Items — Border Width | Writes CSS (border-width, king-addons-story-info, top, bottom, king-addons-data-wrap, right) onto the widget’s front-end markup. |
| Timeline Items — Border Width (Left Aligned) | Writes CSS (border-width, king-addons-data-wrap, left, right) onto the widget’s front-end markup. |
| Timeline Items — Border Width (Right Aligned) | Writes CSS (border-width, king-addons-data-wrap, right) onto the widget’s front-end markup. |
| Timeline Items — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Media — Image Width | Writes CSS `width` onto the widget’s front-end markup. (min 10, max 100). |
| Media — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Media — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Media — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Media — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Media — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Content — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Content — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Content — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Content — Border Radius | Writes CSS (border-radius, overflow) onto the widget’s front-end markup. |
| Content — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Overlay — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Overlay — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-timeline-story-overlay`. |
| Overlay — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Overlay — Overlay Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Title — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Title — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Title — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-wrapper .king-addons-title`. |
| Title — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Title — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Date — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Date — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Date — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-inner-date-label`. |
| Date — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Date — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Date — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Description — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Description — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-wrapper .king-addons-description`. |
| Description — List Style | Apply this option for WYSIWYG lists. |
| Description — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Read More (Normal) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Read More (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Read More (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Read More (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-read-more-button`. |
| Read More (Normal) — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-wrapper .king-addons-read-more-button`. |
| Read More (Normal) — Transition Duration (seconds) | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.1, min 0, max 5). |
| Read More (Normal) — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Read More (Normal) — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Read More (Normal) — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Read More (Normal) — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Read More (Normal) — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Read More (Hover) — Color | Writes CSS (king-addons-read-more-button, color) onto the widget’s front-end markup. |
| Read More (Hover) — Background Color | Writes CSS (king-addons-read-more-button, background-color) onto the widget’s front-end markup. |
| Main Line — Line Color | Writes CSS (king-addons-line, background-color, border-color, king-addons-wrapper, color) onto the widget’s front-end markup. |
| Main Line — Progress(Fill) Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Main Line — Line Fill Color | Writes CSS (background-color, border-color, king-addons-vertical) onto the widget’s front-end markup. |
| Main Line — Line Width | Writes CSS (width, transform) onto the widget’s front-end markup. (min 1, max 50). |
| Main Line — Height | Writes CSS `transform` onto the widget’s front-end markup. (default 0.7). |
| Main Line — Bottom Distance | Writes CSS (top, bottom) onto the widget’s front-end markup. (min 0, max 100). |
| Main Line — Top Distance | Writes CSS (bottom, top, position, left, transform) onto the widget’s front-end markup. (min 0, max 100). |
| Main Line — Side Distance | This option for Zig-Zag layout only works on mobile devices. |
| Main Line Label — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Main Line Label — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Main Line Label — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Main Line Label — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-wrapper .king-addons-year`. |
| Main Line Label — Width | Writes CSS `width` onto the widget’s front-end markup. (min 0, max 100). |
| Main Line Label — Height | Writes CSS `height` onto the widget’s front-end markup. (min 0, max 100). |
| Main Line Label — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Main Line Label — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. (min 0, max 10). |
| Main Line Label — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Main Line Icon — Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Main Line Icon — Fill Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Main Line Icon — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Main Line Icon — Background Fill Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Main Line Icon — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Main Line Icon — Transition Duration (seconds) | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.1, min 0, max 5). |
| Main Line Icon — Icon Size | Writes CSS (font-size, width, height) onto the widget’s front-end markup. (min 10, max 100). |
| Main Line Icon — Background Size | Writes CSS (display, height, width, justify-content, align-items) onto the widget’s front-end markup. (min 0, max 100). |
| Main Line Icon — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Main Line Icon — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Main Line Icon — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Extra Label — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Extra Label — Background Size | Writes CSS (width, height) onto the widget’s front-end markup. (min 0, max 300). |
| Extra Label — Label Distance | Writes CSS (left, right) onto the widget’s front-end markup. (min 0, max 50). |
| Extra Label — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Extra Label — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Extra Label — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Extra Label — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-extra-label span.king-addons-label`. |
| Extra Label — Color (Secondary Label Color) | Writes CSS `color` onto the widget’s front-end markup. |
| Extra Label — Typography (Secondary Label Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-wrapper span.king-addons-sub-label`. |
| Triangle — Color | Writes CSS (king-addons-data-wrap, border-right-color, border-left-color, king-addons-story-info, border-top-color, border-bottom-color) onto the widget’s front-end markup. |
| Triangle — Size | Writes CSS (king-addons-story-info, border-width, top, left, transform, bottom) onto the widget’s front-end markup. (min 0, max 25). |
| Triangle — Position Top | Writes CSS (king-addons-data-wrap, top, transform, position) onto the widget’s front-end markup. (min 0, max 100). |
| Triangle — Position Top (Arrow Bothsided Position Top) | Writes CSS (king-addons-data-wrap, top, transform, position) onto the widget’s front-end markup. (min 0, max 100). |
| Navigation (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Navigation (Normal) — Color | Writes CSS (color, fill, cursor, z-index) onto the widget’s front-end markup. |
| Navigation (Normal) — Transition Duration (seconds) | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.1, min 0, max 5). |
| Navigation (Normal) — Icon Size | Writes CSS (font-size, width) onto the widget’s front-end markup. (min 10, max 100). |
| Navigation (Normal) — Box Size | Writes CSS (width, text-align, height, line-height, margin-left, margin-right) onto the widget’s front-end markup. (min 20, max 100). |
| Navigation (Hover) — Background Color | Writes CSS (king-addons-button-prev, background-color, cursor, king-addons-button-next) onto the widget’s front-end markup. |
| Navigation (Hover) — Color | Writes CSS (king-addons-button-prev, color, cursor, z-index, king-addons-button-next, fill) onto the widget’s front-end markup. |
| Pagination (Normal) — Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Pagination (Normal) — Background Color | Writes CSS (background-color, color) onto the widget’s front-end markup. |
| Pagination (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Pagination (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-grid-pagination a, {{WRAPPER}} .king-addons-grid-pagination > …`. |
| Pagination (Normal) — Loader Color | Writes CSS (background-color, king-addons-circle) onto the widget’s front-end markup. |
| Pagination (Hover) — Color | Writes CSS (a, color, fill, span) onto the widget’s front-end markup. |
| Pagination (Hover) — Background Color | Writes CSS (a, background-color, span) onto the widget’s front-end markup. |
| Pagination (Hover) — Border Color | Writes CSS (a, border-color, span) onto the widget’s front-end markup. |
| Pagination (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-grid-pagination a:hover, {{WRAPPER}} .king-addons-grid-paginat…`. |
| Pagination — Transition Duration (seconds) | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.1, min 0, max 5). |
| Pagination — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-load-more-btn`. |
| Pagination — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Pagination — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Pagination — Distance From Timeline | Writes CSS `margin-top` onto the widget’s front-end markup. (min 0, max 100). |
| Pagination — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Pagination — Wrapper Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Pagination — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
Which Timeline Post/Story options need King Addons Pro?
Controls marked with the Pro icon in this widget’s PHP. King Addons Pro is a separate license from Elementor Pro.
How do I add Timeline Post/Story in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Timeline Post/Story”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related content widgets
Content Ticker
A scrolling ticker of posts or custom items for headlines and announcements.
Dynamic Posts Grid
A filterable grid of posts with AJAX search and Load More — for blogs and resource libraries.
Magazine Grid & Slider
A magazine layout: mixed tile sizes for featured and secondary posts, as a grid or slider.
Posts Grid & Slider
Posts in a grid, slider, or carousel with query and layout controls (the Posts Grid widget).
Quick Post Grid
A lightweight WordPress post grid with sane spacing defaults. Fewer layout modes than Posts Grid.
Reading Progress Bar
A thin bar that fills as the visitor reads the page. Put it on long articles, not on a homepage grid.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Timeline Post/Story after you activate it.