{"id":33746,"date":"2023-01-27T16:03:14","date_gmt":"2023-01-27T16:03:14","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=features&p=33746"},"modified":"2023-04-21T10:02:42","modified_gmt":"2023-04-21T10:02:42","slug":"posts-navigation-widget-overview","status":"publish","type":"features","link":"https:\/\/crocoblock.com\/knowledge-base\/features\/posts-navigation-widget-overview\/","title":{"rendered":"Posts Navigation Widget"},"content":{"rendered":"\n
\n

The Posts Navigation <\/strong>widget <\/strong>adds navigation arrows to the previously arranged posts by the JetBlog<\/em><\/a> widgets (i.e., the Smart Posts Tiles<\/a> and Smart Posts List<\/a> widgets). It works with dynamic content (with the JetEngine<\/em><\/a> plugin) and archive templates (with the JetThemeCore<\/em><\/a> plugin).<\/p>\n\n\n\n

This tutorial explains the Posts Navigation <\/strong>widget usage and explains its settings.<\/p>\n<\/div><\/div>\n\n\n\n

Activation of the Posts Navigation Widget<\/h2>\n\n\n\n
\n

Activate the Posts Navigation widget to use it<\/h3>\n\n\n\n

To activate the Posts Navigation<\/strong> widget, log into your WordPress dashboard, navigate to the Crocoblock plugins, and find the JetBlog<\/em> plugin. Toggle on the Posts Navigation<\/strong> widget to activate it.<\/p>\n\n\n\n\"post\n\n\n\n

Adding the Posts Navigation widget<\/h3>\n\n\n\n

Open the previously created page\/post with posts or pages arranged by the Smart Posts Tiles<\/a> or Smart Posts List<\/a> widgets.<\/p>\n\n\n\n

This tutorial explains How to add a paging control to the Smart Posts List widget from JetBlog<\/a>.<\/p>\n\n\n\n

For correct work of the Posts Navigation<\/strong> widget, you should have enough published pages to display and slide. <\/p>\n\n\n\n

Find the Posts Navigation<\/strong> widget and place it where you want on the page\/post with the Smart Posts Tiles<\/a> or Smart Posts List<\/a> widgets.<\/p>\n\n\n\n\"post\n<\/div><\/div>\n\n\n\n

Customization of the Posts Navigation Widget\u2019s Settings<\/h2>\n\n\n\n

Customization of the Items settings<\/h3>\n\n\n\n

The Item<\/strong> settings block has the following settings:<\/p>\n\n\n\n

    \n
  • Show Post Title<\/strong> toggle to show the title of the next and previous post;<\/li>\n\n\n\n
  • The older link text <\/strong>and The newer link text<\/strong> fields to type the text to be displayed instead of the Older post<\/em> and the Newer<\/em> post<\/em> texts by default;<\/li>\n\n\n\n
  • The older posts link icon<\/strong> and The newer posts link icon <\/strong>drop-down menus to choose the view of the arrows, for example, Angle, Chevron, Caret, etc.<\/li>\n<\/ul>\n\n\n\n\"post\n\n\n\n

    If the Show Post Title<\/strong> toggle is enabled, the following settings are turned on:<\/p>\n\n\n\n

      \n
    • Post Title Max Length (Words<\/strong>) field to specify the number of words shown on the arrow buttons instead of the Older post<\/em> and the Newer<\/em> post<\/em> texts. Setting zero shows the full title.<\/li>\n\n\n\n
    • Excerpt Trimmed Ending<\/strong> field to type the signs to show the excerpt ending instead of the \u201c \u2026 \u201c (ellipsis) by default.<\/li>\n<\/ul>\n\n\n\n\"post\n\n\n\n

      Styling the arrows buttons<\/h3>\n\n\n\n

      To style the arrows button, navigate to the Style<\/strong> tab, unroll it, and customize the following settings:<\/p>\n\n\n\n

        \n
      • Alignment<\/strong> settings to choose the position of the arrow buttons: Left, Center, Right, and Justify.<\/li>\n\n\n\n
      • Background Color<\/strong> and Text Color<\/strong> to choose a custom or standard color for the appropriate settings.<\/li>\n\n\n\n
      • Typography<\/strong> to customize the settings referring to the text, in particular Fonts Family, Size (responsive), Weight, Transform (drop-down menu), Style (drop-down menu), Decoration (drop-down menu), Line-Height (toggle and field) to type the appropriate option in pixels or percentage (responsive), Letter Spacing toggle and field (responsive setting), and Words Spacing toggle and field (responsive setting).<\/li>\n\n\n\n
      • Item Min Width<\/strong> toggle and field to type the item’s minimal width in pixels or percentages (responsive).<\/li>\n\n\n\n
      • Older Link Padding<\/strong> and Newer Link Padding<\/strong> fields to type the padding options for the order and newer links in pixels or percentages (responsive).<\/li>\n\n\n\n
      • Gap Between Items<\/strong> toggle to choose the gap distance in pixels between the buttons (responsive).<\/li>\n\n\n\n
      • Border Type<\/strong> drop-down menu to choose the buttons border type from the None, Solid, Double, Dotted, Dashed, and Groove options.<\/li>\n\n\n\n
      • Width<\/strong> fields specify the buttons’ width in pixels or percentages (responsive).<\/li>\n\n\n\n
      • Color<\/strong> to choose a custom or standard color for the border.<\/li>\n\n\n\n
      • Border Radius<\/strong> fields specify the padding buttons\u2019 borders radii in pixels or percentages.<\/li>\n<\/ul>\n\n\n\n\"arrows\n\n\n\n

        Styling the icons<\/h3>\n\n\n\n

        To style the icons, navigate to the second group of the Style <\/strong>settings \u4e00 Prev\/Next Icons <\/strong>settings. Unroll it and customize the following settings:<\/p>\n\n\n\n

          \n
        • Background Color<\/strong> and Icon Color<\/strong> to choose the appropriate colors or take the standard one.<\/li>\n\n\n\n
        • Icon Size<\/strong> and Icon Box Size<\/strong> toggles and fields to specify the appropriate sizes in pixels or percentages (both are responsive).<\/li>\n\n\n\n
        • The Border Type drop-down<\/strong> menu chooses the icon border type from the options: None, Solid, Double, Dotted, Dashed, and Groove.<\/li>\n\n\n\n
        • Width<\/strong> fields to specify the four options (left, right, top, and bottom) for the icon width (responsive).<\/li>\n\n\n\n
        • Color<\/strong> to choose the icon border color or take the standard one.<\/li>\n\n\n\n
        • Border Radius<\/strong> fields specify the icon’s four radii borders in pixels or percentages (responsive).<\/li>\n\n\n\n
        • Gap Between Text and Icon<\/strong> toggle to specify the distance in pixels or percentage between the text and icon (responsive).<\/li>\n<\/ul>\n\n\n\n\"arrow\n\n\n\n

          That’s all about the Posts Navigation<\/strong> widget\u2019s settings.<\/p>\n","protected":false},"excerpt":{"rendered":"

          Read about the Posts Navigation widget usage, its settings, and its interaction with other JetBlog widgets.<\/p>\n","protected":false},"author":12,"template":"","format":"standard","builder-category":[],"feature-category":[547],"article-category":[437],"yoast_head":"\nPosts Navigation Widget<\/title>\n<meta name=\"description\" content=\"Read about the Posts Navigation widget usage, its settings, and its interaction with other JetBlog widgets.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/posts-navigation-widget-overview\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Posts Navigation Widget\" \/>\n<meta property=\"og:description\" content=\"Read about the Posts Navigation widget usage, its settings, and its interaction with other JetBlog widgets.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/features\/posts-navigation-widget-overview\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-21T10:02:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/post-navigation-widget-activation.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/posts-navigation-widget-overview\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/posts-navigation-widget-overview\/\",\"name\":\"Posts Navigation Widget\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2023-01-27T16:03:14+00:00\",\"dateModified\":\"2023-04-21T10:02:42+00:00\",\"description\":\"Read about the Posts Navigation widget usage, its settings, and its interaction with other JetBlog widgets.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/posts-navigation-widget-overview\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/features\/posts-navigation-widget-overview\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/posts-navigation-widget-overview\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Features\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Posts Navigation Widget\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Posts Navigation Widget","description":"Read about the Posts Navigation widget usage, its settings, and its interaction with other JetBlog widgets.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/features\/posts-navigation-widget-overview\/","og_locale":"en_US","og_type":"article","og_title":"Posts Navigation Widget","og_description":"Read about the Posts Navigation widget usage, its settings, and its interaction with other JetBlog widgets.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/features\/posts-navigation-widget-overview\/","og_site_name":"Help Center","article_modified_time":"2023-04-21T10:02:42+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/post-navigation-widget-activation.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/features\/posts-navigation-widget-overview\/","url":"https:\/\/crocoblock.com\/knowledge-base\/features\/posts-navigation-widget-overview\/","name":"Posts Navigation Widget","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2023-01-27T16:03:14+00:00","dateModified":"2023-04-21T10:02:42+00:00","description":"Read about the Posts Navigation widget usage, its settings, and its interaction with other JetBlog widgets.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/features\/posts-navigation-widget-overview\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/features\/posts-navigation-widget-overview\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/features\/posts-navigation-widget-overview\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Features","item":"https:\/\/crocoblock.com\/knowledge-base\/features\/"},{"@type":"ListItem","position":3,"name":"Posts Navigation Widget"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/features\/33746"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/features"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/features"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/12"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=33746"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=33746"},{"taxonomy":"feature-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/feature-category?post=33746"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=33746"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}