{"id":1531,"date":"2024-03-26T06:39:32","date_gmt":"2024-03-26T06:39:32","guid":{"rendered":"https:\/\/docs.wpblockart.com\/blockart-blocks\/?post_type=docs&p=1531"},"modified":"2024-04-10T08:47:19","modified_gmt":"2024-04-10T08:47:19","slug":"timeline","status":"publish","type":"docs","link":"https:\/\/docs.wpblockart.com\/blockart-blocks\/timeline\/","title":{"rendered":"Timeline"},"content":{"rendered":"\n

The Timeline block allows you to build a timeline graph that features a chronological order of events. Using the block you can add the events and incidents on a straight line.<\/p>\n\n\n\n

\"Add
Add Timeline Block<\/figcaption><\/figure>\n\n\n\n

After you have chosen the timeline block, you’ll get a block editing panel on the right-hand side. It has three options, i.e., General<\/strong>, Style<\/strong>, and Advanced<\/strong>. These options customize the design and other elements of the timeline block. Let\u2019s explore one by one below:<\/p>\n\n\n\n

General<\/h3>\n\n\n\n

Layout <\/h3>\n\n\n\n
    \n
  • Alignment<\/strong> –  It sets the timeline content to be on the Left, Center, <\/strong>and Right<\/strong>. Moreover, you can set the position of the timeline content to be different on various devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
    \"Set
    Set Block Alignment<\/figcaption><\/figure>\n\n\n\n
      \n
    • Connector<\/strong> – Connectors are added between the timelines that represent the dates of each timeline. It comes with the following options:\n
        \n
      • Thickness<\/strong> – It represent the size of the connector. Moreover, you can set the size of the connector to be different on various devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
        \"Set
        Set Connector Width<\/figcaption><\/figure>\n\n\n\n
          \n
        • Type<\/strong> – Under the option, you can add the appropriate icon representing the connector.<\/li>\n<\/ul>\n\n\n\n
          \"Change
          Change Connector Icon<\/figcaption><\/figure>\n\n\n\n

          Style <\/h2>\n\n\n\n

          Under the style option, you\u2019ll find the following options available:<\/p>\n\n\n\n

          Layout <\/h3>\n\n\n\n
            \n
          • Padding <\/strong>– It manages the spacing between the timeline content. Moreover, you can set the padding value to be different on various devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
            \"Manage
            Manage Content Padding Space<\/figcaption><\/figure>\n\n\n\n
              \n
            • Item Gap<\/strong> – It manages the space between two timeline events. Moreover, you can set the gap value to be different on various devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
              \"Set
              Set Gap Between Two Timeline Events<\/figcaption><\/figure>\n\n\n\n

              Label<\/h3>\n\n\n\n

              It changes the styling of the label text of the timeline block and comes up with the following options:<\/p>\n\n\n\n

                \n
              • Text Color<\/strong> – It allows you to change the color of the Label.<\/li>\n\n\n\n
              • Typography<\/strong> – It controls the Label Font Family, Weight, and Font Size.<\/li>\n<\/ul>\n\n\n\n
                \"Change
                Change Label Text Color and Typography<\/figcaption><\/figure>\n\n\n\n

                Title<\/h3>\n\n\n\n

                It changes the styling of the title of the timeline block and comes up with the following options:<\/p>\n\n\n\n

                  \n
                • Text Color <\/strong>– It allows you to change the color of the Title.<\/li>\n\n\n\n
                • Typography<\/strong> – It controls the title font family, weight, and font size..<\/li>\n<\/ul>\n\n\n\n
                  \"Change
                  Change Title Color and Typography<\/figcaption><\/figure>\n\n\n\n

                  Description<\/h3>\n\n\n\n

                  It changes the styling of the description text of the timeline block and comes up with the following options:<\/p>\n\n\n\n

                    \n
                  • Text Color<\/strong> – It allows you to change the color of the description Text.<\/li>\n\n\n\n
                  • Typography<\/strong> – It controls the description text, including font family, weight, and font size.<\/li>\n<\/ul>\n\n\n\n
                    \"Change
                    Change Description Text Color and Typography<\/figcaption><\/figure>\n\n\n\n

                    Connector<\/h3>\n\n\n\n

                    It changes the styling of the connector of the timeline block and comes up with the following options:<\/p>\n\n\n\n

                      \n
                    • Text Color<\/strong> – It allows you to change the color of the icons added inside the connector.<\/li>\n\n\n\n
                    • Background<\/strong> – It sets the background color of the connector.<\/li>\n<\/ul>\n\n\n\n
                      \"Change
                      Change the Connector Icon Color and Background Color<\/figcaption><\/figure>\n\n\n\n

                      Item <\/h3>\n\n\n\n
                        \n
                      • Background <\/strong>– It sets the background color of the timeline events.<\/li>\n<\/ul>\n\n\n\n
                        \"Change
                        Change Background of Timeline Events<\/figcaption><\/figure>\n\n\n\n

                        Advanced<\/h2>\n\n\n\n

                        The Advanced section consists of four options for the TimeLine block.<\/p>\n\n\n\n

                        Spacing<\/h3>\n\n\n\n

                        Under the spacing section, you can find the following options available:<\/p>\n\n\n\n

                          \n
                        • Block Margin<\/strong>\u00a0\u2013 According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile).<\/li>\n\n\n\n
                        • Block Padding <\/strong>– According to the site requirement, you can assign a specific padding value to the block along with units like px, em, %, and rem. Moreover, you can set the different padding values for various devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
                          \"Manage
                          Manage Margin and Padding Space<\/figcaption><\/figure>\n\n\n\n

                          Z-Index<\/h3>\n\n\n\n

                          It allows you to set the block’s priority according to the site’s requirements.<\/p>\n\n\n\n

                          Responsive Condition<\/h3>\n\n\n\n

                          Using the option, you can enable\/disable displaying the Timeline block on various screen sizes:<\/p>\n\n\n\n

                            \n
                          • Hide on Desktop<\/strong> \u2013 It hides the Timeline block on the Desktop.<\/li>\n\n\n\n
                          • Hide on Tablet<\/strong> \u2013 It hides the Timeline block on the Tablet.<\/li>\n\n\n\n
                          • Hide on Mobile<\/strong> \u2013 It hides the Timeline block on the Mobile.<\/li>\n<\/ul>\n\n\n\n
                            \"Enable\/Disable
                            Enable\/Disable Block Responsive Condition<\/figcaption><\/figure>\n\n\n\n

                            Advanced<\/h3>\n\n\n\n

                            Under the option, you can set the CSS ID and Classes for this particular Timeline block. The available options are listed below:<\/p>\n\n\n\n

                              \n
                            • CSS ID<\/strong> \u2013 It allows you to set specific IDs to style this particular block. Once you have set the ID, you can write the CSS Code to style the block using that particular ID.<\/li>\n\n\n\n
                            • Additional CSS Class(es)<\/strong> \u2013 It allows you to add a CSS class to your block and write custom CSS to style this particular block.<\/li>\n<\/ul>\n\n\n\n
                              \"Add
                              Add CSS ID and Additional CSS Class<\/figcaption><\/figure>\n\n\n\n

                              After creating the separate ID and Classes, visit your CSS editor and write a style for the ID and class.<\/p>\n\n\n\n

                              Individual TimeLine Block Settings (TimeLine Child)<\/h1>\n\n\n\n

                              With the TimeLine block, you can customize the individual Timeline events. After you have chosen the individual timeline block, you’ll get a block editing panel on the right-hand side. <\/p>\n\n\n\n

                              It has three options, i.e., General<\/strong>, Style<\/strong>, and Advanced<\/strong>. These options customize the design and other elements of each timeline block. Let\u2019s explore one by one below:<\/p>\n\n\n\n

                              General<\/h2>\n\n\n\n

                              Icon <\/h3>\n\n\n\n

                              It allows you to choose the icon for each connector. You can add different icons representing individual timeline events to each connector.<\/p>\n\n\n\n

                              \"Change
                              Change Icon for Individual Connector<\/figcaption><\/figure>\n\n\n\n

                              Style<\/h3>\n\n\n\n

                              Under the style option, you\u2019ll find the following options available:<\/p>\n\n\n\n

                                \n
                              • Background <\/strong>– It sets the background color for individual timeline blocks.<\/li>\n<\/ul>\n\n\n\n
                                \"Set
                                Set Background Color for Individual Timeline Block<\/figcaption><\/figure>\n\n\n\n

                                Advanced<\/h2>\n\n\n\n

                                The Advanced section consists of four options for the Timeline Child i,e, Individual TimeLine Block.<\/p>\n\n\n\n

                                Spacing<\/h3>\n\n\n\n

                                Under the spacing section, you can find the following options available:<\/p>\n\n\n\n

                                  \n
                                • Block Margin<\/strong>\u00a0\u2013 According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile).<\/li>\n\n\n\n
                                • Block Padding<\/strong> – According to the site requirement, you can assign a specific padding value to the block along with units like px, em, %, and rem. Moreover, you can set the different padding values for various devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
                                  \"Manage
                                  Manage Padding and Margin Space<\/figcaption><\/figure>\n\n\n\n

                                  Z-Index<\/h3>\n\n\n\n

                                  It allows you to set the priority of the Timeline Child block according to the site requirement.<\/p>\n\n\n\n

                                  Responsive Condition<\/h3>\n\n\n\n

                                  Using the option, you can enable\/disable displaying the block on various screen sizes:<\/p>\n\n\n\n

                                    \n
                                  • Hide on Desktop<\/strong> \u2013 It hides the Timeline Child block on the Desktop.<\/li>\n\n\n\n
                                  • Hide on Tablet<\/strong> \u2013 It hides the Timeline Child block on the Tablet.<\/li>\n\n\n\n
                                  • Hide on Mobile<\/strong>\u00a0\u2013 It hides the Timeline Child block on the Mobile.<\/li>\n<\/ul>\n\n\n\n
                                    \"Enable\/Disable
                                    Enable\/Disable Block Responsive Condition<\/figcaption><\/figure>\n\n\n\n

                                    Advanced<\/h3>\n\n\n\n

                                    Under the option, you can set the CSS ID and Classes for the Timeline child block. The available options are listed below:<\/p>\n\n\n\n

                                      \n
                                    • CSS ID<\/strong> \u2013 It allows you to set specific IDs to style the timeline child block. Once you have set the ID, you can write the CSS Code to style the block using that particular ID.<\/li>\n\n\n\n
                                    • Additional CSS Class(es)<\/strong> \u2013 It allows you to add a CSS class to your block and write custom CSS to style this particular block.<\/li>\n<\/ul>\n\n\n\n
                                      \"Add
                                      Add CSS ID and Additional CSS Class<\/figcaption><\/figure>\n\n\n\n

                                      After creating the separate ID and Classes, visit your CSS editor and write a style for the ID and class.<\/p>\n","protected":false},"excerpt":{"rendered":"

                                      The Timeline block allows you to build a timeline graph that features a chronological order of events. Using the block you can add the events and incidents on a straight line. After you have chosen the timeline block, you’ll get a block editing panel on the right-hand side. It has three options, i.e., General, Style, and Advanced.[…]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":[],"doc_category":[7],"doc_tag":[],"_links":{"self":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1531"}],"collection":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/comments?post=1531"}],"version-history":[{"count":36,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1531\/revisions"}],"predecessor-version":[{"id":2769,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1531\/revisions\/2769"}],"wp:attachment":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/media?parent=1531"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_category?post=1531"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_tag?post=1531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}