{"id":40291,"date":"2022-09-13T15:00:28","date_gmt":"2022-09-13T13:00:28","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=40291"},"modified":"2022-09-13T00:37:46","modified_gmt":"2022-09-12T22:37:46","slug":"how-to-create-vertical-timeline-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-vertical-timeline-in-wordpress\/","title":{"rendered":"How to Create a Vertical Timeline in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]There are many creative ways in which you can provide your visitors with some core information related to your brand\u2019s history \u2013 and timelines are definitely one of them. Showcasing a sequence of events of how your business came to be through an <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-event-timeline\/\">event timeline<\/a> can be engaging, informative, and visually appealing all at once. In short, <strong>timelines can be used to display some of the most significant steps of your journey<\/strong> or to share other important information with your visitors in a clean and user-friendly manner. And while both vertical and horizontal timelines can be just as effective for this task, this time around, we will focus on the vertical timeline in particular.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]There are many great <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-timeline-plugins\/\">timeline plugins<\/a> that can provide you with the ability to create a beautiful and functional vertical timeline in WordPress, but if you ask us, there\u2019s no better option than the Qi Addons Plugin. In this article, we will show you how to easily <strong>add, customize, and style a vertical timeline using the plugin\u2019s versatile Vertical Timeline widget.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here are all the steps you need to take to incorporate this visually immersive element into your WordPress site and help your visitors understand what you and your business are all about:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-vertical-timeline-with-qi-addons\">Adding a Vertical Timeline Widget With Qi Addons for Elementor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#editing-the-content\">Editing the Content<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#styling-vertical-timeline\">Styling the Vertical Timeline Widget<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-vertical-timeline-with-qi-addons\"><\/a>Adding a Vertical Timeline Widget With Qi Addons for Elementor<\/h2>\n<p>[\/vc_column_text][vc_column_text]With a collection of over a hundred fully customizable widgets, <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor<\/a> is a freemium plugin that has everything one needs to create just about any page element or section. This includes anything from business and typography addons to infographics to showcase-based elements. In its list of widgets, there\u2019s also the custom widget called <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/vertical-timeline\/\" target=\"_blank\" rel=\"noopener\">Vertical Timeline<\/a>. This widget in particular allows you to create all sorts of vertical timeline layouts for your site. You can add different images, set the spacing and paddings, adjust the colors and typography of your items, and plenty more.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"655\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Vertical-Timeline.jpg\" class=\"attachment-full size-full\" alt=\"Vertical Timeline\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Vertical-Timeline.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Vertical-Timeline-300x203.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Vertical-Timeline-768x519.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Vertical-Timeline-620x419.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]So, we will show you all you need to know to learn how to add and customize this practical widget to fit your particular needs. We also have a video that covers the same subject, so you can check that out as well:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" style=\"border: 1px solid #ebebeb;\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/wSvF1g_mLEc\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To begin, head to the backend of your Elementor page. We\u2019ve already prepared the section we will be using for the widget, and we\u2019ve made sure to divide this section into two columns. The first one will contain the picture, while the second one has an inner section element with two other columns which we will be using to add our vertical timeline widget.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"526\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Two-Columns.jpg\" class=\"attachment-full size-full\" alt=\"Two Columns\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Two-Columns.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Two-Columns-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Two-Columns-768x417.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Two-Columns-620x337.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To add an image, you need to <strong>click on the <em>Edit column<\/em> button in order to open the column options.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Hit the <em>Style<\/em> tab and then find the Image field. Here you can upload your background image.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"581\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Choose-Image.jpg\" class=\"attachment-full size-full\" alt=\"Choose Image\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Choose-Image.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Choose-Image-300x180.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Choose-Image-768x460.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Choose-Image-620x372.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"612\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Image-Added.jpg\" class=\"attachment-full size-full\" alt=\"Image Added\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Image-Added.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Image-Added-300x189.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Image-Added-768x485.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Image-Added-620x392.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then,<strong> open the Elements menu and find the Vertical Timeline widget. Drag it over to the page.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Drag-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Drag Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Drag-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Drag-Widget-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Drag-Widget-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Drag-Widget-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019ve dragged the widget over to the first column of our inner section as we planned to duplicate the element in the second one later. This will help you keep any style settings from the first timeline and save you time immensely as you will only have to edit the content of the timeline and won\u2019t have to bother with styling it again.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"482\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Default-Widget-Look.jpg\" class=\"attachment-full size-full\" alt=\"Default Widget Look\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Default-Widget-Look.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Default-Widget-Look-300x149.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Default-Widget-Look-768x382.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Default-Widget-Look-620x308.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"editing-the-content\"><\/a>Editing the Content<\/h2>\n<p>[\/vc_column_text][vc_column_text]Moving on to the widget\u2019s options, there\u2019s the <em>Content<\/em> tab with its <em>General<\/em> section. The first important option here is the <em>Date<\/em> \u2013 this is the text field where you can type in any date you like. We\u2019ve changed ours to read the year 2022.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"497\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Date.jpg\" class=\"attachment-full size-full\" alt=\"Add Date\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Date.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Date-300x154.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Date-768x394.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Date-620x318.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Below are two items that represent the points within the timeline itself. You can <strong>add more items by hitting the \u201cAdd Item\u201d button<\/strong> (we\u2019ve left two items for our timeline).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Next, it\u2019s time to customize your items. To do this, simply click on the item field in question.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first field available here is named <em>Hours<\/em>. Just like the Date field above, it\u2019s a text field, so you can enter anything you want here. We\u2019ve set the range of hours for our example.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"444\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Hours.jpg\" class=\"attachment-full size-full\" alt=\"Add Hours\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Hours.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Hours-300x137.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Hours-768x352.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Hours-620x284.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, there\u2019s the <em>Content<\/em> field \u2013 this is where you can change the paragraph text located below the Hours.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"498\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Content.jpg\" class=\"attachment-full size-full\" alt=\"Add Content\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Content.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Content-300x154.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Content-768x395.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Content-620x319.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]One last option here is Image, allowing you to add an image to your item.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"495\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Image.jpg\" class=\"attachment-full size-full\" alt=\"Add Image\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Image.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Image-300x153.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Image-768x392.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Image-620x317.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019ve chosen to add an image to our item as well.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"535\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Image-Added-to-Vertical-Timeline.jpg\" class=\"attachment-full size-full\" alt=\"Image Added to Vertical Timeline\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Image-Added-to-Vertical-Timeline.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Image-Added-to-Vertical-Timeline-300x166.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Image-Added-to-Vertical-Timeline-768x424.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Image-Added-to-Vertical-Timeline-620x342.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, you can go ahead and customize the second item. Of course, it contains the same options as the first one. You can feel free to add anything you like here as well.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This is what our timeline looks like after we\u2019re done with customizing the second item:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"406\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Images-and-Content-Added.jpg\" class=\"attachment-full size-full\" alt=\"Images and Content Added\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Images-and-Content-Added.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Images-and-Content-Added-300x126.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Images-and-Content-Added-768x322.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Images-and-Content-Added-620x260.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We should also note that we\u2019ve adjusted the paddings of the second column (where we\u2019ve placed the inner section and the timeline element). By doing so, we\u2019ve succeeded in making our timeline adjusted more evenly, and we\u2019ve also separated it a bit further from the image on the left.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ve done this by clicking on the second column settings, then we chose the <em>Advanced<\/em> tab and delinked the values for the padding. We\u2019ve switched the values to percentages, and then entered 10 pixels for the top, right, and bottom padding, while we set 22 pixels on the left.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Advanced-Padding.jpg\" class=\"attachment-full size-full\" alt=\"Advanced Padding\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Advanced-Padding.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Advanced-Padding-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Advanced-Padding-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Advanced-Padding-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"styling-vertical-timeline\"><\/a>Styling the Vertical Timeline Widget<\/h2>\n<p>[\/vc_column_text][vc_column_text]Now that we\u2019ve taken care of the general settings and adjusted the content for our items, it\u2019s time to style the vertical line widget. <strong>The first section in the Style tab is called <em>General Style<\/em>.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first option here will let you adjust the <em>Space Between Items<\/em>, which helps you change the gap between the items further.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Next is the Item <em>Padding<\/em> option, which changes the space to the left of the items. We\u2019ve set 50px for ours.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/General-Style-Spaces.jpg\" class=\"attachment-full size-full\" alt=\"General Style Spaces\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/General-Style-Spaces.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/General-Style-Spaces-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/General-Style-Spaces-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/General-Style-Spaces-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Date Style<\/h3>\n<p>[\/vc_column_text][vc_column_text]<strong>The <em>Date Style<\/em> section contains the option for the date in your timeline.<\/strong> The <em>Date Margin<\/em> is the first option available here, allowing you to add more space all around the date. If you don\u2019t want to have the same sides for each margin, you can delink the fields and enter (or not enter) a different value for each side.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ve delinked the fields here and set 19px at the bottom and 50px on the left while leaving the first two at 0px.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"441\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Data-Style.jpg\" class=\"attachment-full size-full\" alt=\"Data Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Data-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Data-Style-300x137.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Data-Style-768x350.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Data-Style-620x282.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next is the <strong><em>Date Padding<\/em> which allows you to add even more space around the date<\/strong>. We\u2019ve delinked the fields here as it sets all the values to zero.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"422\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Date-Padding.jpg\" class=\"attachment-full size-full\" alt=\"Date Padding\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Date-Padding.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Date-Padding-300x131.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Date-Padding-768x334.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Date-Padding-620x270.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There\u2019s another use for this option, and we will return to it shortly.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Then there\u2019s the <em>Date Width<\/em> which lets you limit how wide the date will be. For example, you can shorten it a bit and make the date title fall into two rows. We\u2019ve chosen not to use this setting for our example.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Next is the <strong><em>Date Color<\/em> which helps you set any color for the date title<\/strong>. We\u2019ve set ours to plain black (#000000).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"522\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Date-Width-and-Date-Color.jpg\" class=\"attachment-full size-full\" alt=\"Date Width and Date Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Date-Width-and-Date-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Date-Width-and-Date-Color-300x162.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Date-Width-and-Date-Color-768x414.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Date-Width-and-Date-Color-620x334.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There\u2019s also the <em>Date Typography<\/em>, which lets you set the typography for the date text in full detail. It includes the options such as font family, weight, style, decoration, and so on.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"630\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Date-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Date Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Date-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Date-Typography-300x195.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Date-Typography-768x499.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Date-Typography-620x403.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019ve changed the font family to Playfair Display and set the font size to 26px.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Right below, there\u2019s the option to change the<em> Date Background Color<\/em>. After setting any color you like here, you can go back to the previously mentioned Date Padding option. By increasing the padding, you will also increase the surface that is covered by the color you picked.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"439\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Date-Background-Colour.jpg\" class=\"attachment-full size-full\" alt=\"Date Background Colour\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Date-Background-Colour.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Date-Background-Colour-300x136.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Date-Background-Colour-768x348.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Date-Background-Colour-620x281.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]That being said, we don\u2019t plan to use the background color for our date, so we\u2019ve reset both of these options.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Content Style<\/h3>\n<p>[\/vc_column_text][vc_column_text]<strong>The <em>Content Style<\/em> section allows you to completely style your content.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first option, <em>Content Position<\/em>, allows you to decide whether your content will be placed below the hours or on the right. For our design, we\u2019ve used the default setting which places the content right under the hours.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Content-Position.jpg\" class=\"attachment-full size-full\" alt=\"Content Position\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Content-Position.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Content-Position-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Content-Position-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Content-Position-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Content Margin Top<\/em> and <em>Content Margin Bottom<\/em> options let you add more space above and below the content, respectively. We\u2019ve set 4px for the content margin top and 51px for the content margin bottom.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Content-Margin-Top-and-Bottom.jpg\" class=\"attachment-full size-full\" alt=\"Content Margin Top and Bottom\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Content-Margin-Top-and-Bottom.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Content-Margin-Top-and-Bottom-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Content-Margin-Top-and-Bottom-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Content-Margin-Top-and-Bottom-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, there\u2019s the <em>Content Color<\/em> option that allows you to set the color of your content text. We\u2019ve set the hex code #a1a1a1 for the content color in our example.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"537\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Content-Color.jpg\" class=\"attachment-full size-full\" alt=\"Content Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Content-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Content-Color-300x166.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Content-Color-768x426.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Content-Color-620x344.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Right after, you have the <em>Content Typography<\/em> option which contains all the same options as the Date Typography one. We\u2019ve set the font family to match the one we are already using for the date. Also, we\u2019ve changed the font size to 20 pixels. Finally, we\u2019ve changed the Line Height option to pixels and set it to 38. This makes the content more spaced out overall as the line height has pushed the text further apart.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"537\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Content-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Content Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Content-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Content-Typography-300x166.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Content-Typography-768x426.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Content-Typography-620x344.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Hours Style and Image Style<\/h3>\n<p>[\/vc_column_text][vc_column_text]We\u2019ve reached the options that allow you to style the look of your hours. First, you can change the <em>Hours Color<\/em> by using the color picker or setting the hex code (we\u2019ve chosen the color black with the hex code #000000). Then, you can also set the Hours Typography. We\u2019ve set the font family to Playfair Display once again so it can fit with the rest of the content, and we\u2019ve set the size to 20px.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"634\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Hours-Color-and-Hours-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Hours Color and Hours Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Hours-Color-and-Hours-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Hours-Color-and-Hours-Typography-300x196.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Hours-Color-and-Hours-Typography-768x502.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Hours-Color-and-Hours-Typography-620x406.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next are the <em>Image Style<\/em> options which you can use to adjust the style of your images (if you have them in your content).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first option here is<em> Image Proportions<\/em>. The default setting is Original, but there are many other settings you can use here, like Thumbnail, Medium, Large, Square, etc.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Image-Proportions.jpg\" class=\"attachment-full size-full\" alt=\"Image Proportions\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Image-Proportions.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Image-Proportions-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Image-Proportions-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Image-Proportions-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019ve uploaded the image that works best for the Original setting, so we will be keeping it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Right below, there\u2019s also the <em>Image Margin Bottom<\/em> which is used for adding more space below the image. We\u2019ve set 24px here.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Image-Margin-Bottom.jpg\" class=\"attachment-full size-full\" alt=\"Image Margin Bottom\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Image-Margin-Bottom.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Image-Margin-Bottom-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Image-Margin-Bottom-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Image-Margin-Bottom-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Line &amp; Point Style<\/h3>\n<p>[\/vc_column_text][vc_column_text]Last but not least, the <em>Line &amp; Point Style<\/em> section has a comprehensive set of options that let you <strong>change the look of the line connecting the items and the points that are marking each one.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first option serves to set the <em>Line Start Position<\/em>. The <em>Date Label<\/em> is the default position, which means that the line starts at the same height as the element content, or rather, at the top of the element. If you change this setting to <em>First Item<\/em>, the line will start at the point marking the first item (also at the same height as the image). This is the setting we\u2019ve decided to keep for our vertical timeline.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"558\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/First-Item.jpg\" class=\"attachment-full size-full\" alt=\"First Item\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/First-Item.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/First-Item-300x173.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/First-Item-768x442.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/First-Item-620x357.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"511\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/First-Item-Preview.jpg\" class=\"attachment-full size-full\" alt=\"First Item Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/First-Item-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/First-Item-Preview-300x158.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/First-Item-Preview-768x405.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/First-Item-Preview-620x327.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next is the <em>Line Color<\/em> option which contains the same color picker as the other color-related options. We\u2019ve added the hex code #eed0de for our line color.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"573\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Line-Color.jpg\" class=\"attachment-full size-full\" alt=\"Line Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Line-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Line-Color-300x177.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Line-Color-768x454.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Line-Color-620x367.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"540\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Line-Color-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Line Color Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Line-Color-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Line-Color-Preview-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Line-Color-Preview-768x428.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Line-Color-Preview-620x346.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Line Thickness<\/em> option increases or decreases the thickness of the line. We\u2019ve set ours at 1px.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"561\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Line-Thickness.jpg\" class=\"attachment-full size-full\" alt=\"Line Thickness\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Line-Thickness.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Line-Thickness-300x174.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Line-Thickness-768x445.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Line-Thickness-620x359.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, the <em>Point Type<\/em> option allows you to adjust the style of your points. The <em>Standard<\/em> point type has the default, bullet-styled look.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can also change the <em>Point Size<\/em> to make the points larger or smaller, <em>Point Vertical Position<\/em> (to adjust the point position to your liking according to the rest of the content), and <em>Point Color<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Point-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Point Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Point-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Point-Settings-300x117.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Point-Settings-768x300.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Point-Settings-620x242.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Alternate Point Types<\/h3>\n<p>[\/vc_column_text][vc_column_text]If you change the Point Type setting from Standard to something else, you also get the ability to set a few other options. For example, if you decide to use <em>Line<\/em> instead of the Standard point, you get to change the color, point width, height, and point horizontal (and vertical) position, among other things.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let\u2019s show you what this point type setting can look like once you start playing around with its options. To demonstrate, we\u2019ve used the hex code #DA6767 for the point color, changed the point width to 49px, and set the point height to 4px. Also, we\u2019ve changed the point&#8217;s horizontal and vertical position to -6 and 10px, just to show you what changing these options can do to the look of your point.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"540\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Post-Type.jpg\" class=\"attachment-full size-full\" alt=\"Post Type\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Post-Type.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Post-Type-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Post-Type-768x428.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Post-Type-620x346.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019ve reset all these settings to show you another point type \u2013 <em>Icon<\/em>. This setting lets you upload an icon of your choosing and use it as your timeline point. For our example, we\u2019ve used the SVG.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"499\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Choose-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Choose Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Choose-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Choose-Icon-300x154.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Choose-Icon-768x395.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Choose-Icon-620x319.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Hit the <em>Insert Media<\/em> button<\/strong> once you decide on the icon you want to use.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Then, you can change the <em>Icon Color<\/em> (we\u2019ve used the hex code #eed0de for our example).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"603\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Icon-Color.jpg\" class=\"attachment-full size-full\" alt=\"Icon Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Icon-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Icon-Color-300x187.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Icon-Color-768x478.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Icon-Color-620x386.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There\u2019s also the <em>Icon Size<\/em> option here, but since we\u2019ve uploaded an SVG, the size of our icon is already predefined, so there\u2019s no need to adjust it further.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"555\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Icon-Size.jpg\" class=\"attachment-full size-full\" alt=\"Icon Size\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Icon-Size.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Icon-Size-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Icon-Size-768x440.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Icon-Size-620x355.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And that\u2019s it for all of the options you can use to style your vertical timeline.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Duplicating the Timeline<\/h3>\n<p>[\/vc_column_text][vc_column_text]The only thing left to do is to copy the timeline from the first column to another column we\u2019ve prepared already to keep the same timeline style.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To do this, simply <strong>right-click on the existing element and hit <em>Duplicate<\/em>.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"508\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Duplicate.jpg\" class=\"attachment-full size-full\" alt=\"Duplicate\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Duplicate.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Duplicate-300x157.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Duplicate-768x403.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Duplicate-620x325.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, drag the copy of the timeline to the right column.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"506\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Widget-Duplicated.jpg\" class=\"attachment-full size-full\" alt=\"Widget Duplicated\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Widget-Duplicated.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Widget-Duplicated-300x157.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Widget-Duplicated-768x401.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Widget-Duplicated-620x324.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, all you need to do is edit the content.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This is the final look of our vertical timeline element after we changed the content in the right column:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"480\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Vertical-Timeline-Live-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Vertical Timeline Live Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Vertical-Timeline-Live-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Vertical-Timeline-Live-Preview-300x149.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Vertical-Timeline-Live-Preview-768x380.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Vertical-Timeline-Live-Preview-620x307.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Make sure to<strong> hit the <em>Publish\/Update<\/em> button<\/strong> once you\u2019re done with adjusting all the settings.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Update.jpg\" class=\"attachment-full size-full\" alt=\"Update\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Update.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Update-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Update-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Update-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Wrapping Things Up<\/h3>\n<p>[\/vc_column_text][vc_column_text]A vertical timeline is an incredibly useful website element that can provide your site visitors with some of the most important sequences related to your business in a neat, user-friendly, and attractive manner. As such, it can only enhance their overall engagement with your brand and make them interested to explore more.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As you could see, the Qi Addons for Elementor\u2019s Vertical Timeline widget is fully flexible and comes with tons of different options for editing and styling the timeline content. It allows you to easily change the style of your hours and images, adjust the look of lines and points, set different colors, typography, paddings, and plenty more. You can either use the same options we did in our example, or play around with the options we presented above to create a unique look for your own vertical timeline element.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Stick around as we explain how to easily create an informative and engaging vertical timeline in WordPress using the practical Qi Addons for Elementor plugin.<\/p>\n","protected":false},"author":2,"featured_media":40350,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[193,108,13],"class_list":["post-40291","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-elementor","tag-qi-addons","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/40291","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=40291"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/40291\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/40350"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=40291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=40291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=40291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}