{"id":69598,"date":"2025-09-10T11:41:14","date_gmt":"2025-09-10T06:11:14","guid":{"rendered":"https:\/\/ultimateelementor.com\/docs\/blog-post\/"},"modified":"2025-09-10T12:03:32","modified_gmt":"2025-09-10T06:33:32","slug":"basic-posts","status":"publish","type":"docs","link":"https:\/\/ultimateelementor.com\/docs\/basic-posts\/","title":{"rendered":"Basic Posts Widget"},"content":{"rendered":"\n

The Posts widget from Ultimate Addons for Elementor (UAE)<\/strong> is a powerful way to display blog posts or custom post types in a flexible, responsive grid layout. You can choose exactly what shows up (like title, image, excerpt, meta info) and how it’s styled.

In this guide, we\u2019ll walk you through the setup process step by step, while showcasing the key settings you can configure along the way.<\/p>\n\n\n\n

Step 1: Add the Posts Widget to Your Page<\/strong><\/h2>\n\n\n\n

Let\u2019s start by dragging the widget onto your Elementor canvas.<\/p>\n\n\n\n

    \n
  1. Open the page you want to edit with Elementor<\/strong>.<\/li>\n\n\n\n
  2. Search for the Posts<\/strong> widget (from UAE).<\/li>\n\n\n\n
  3. Drag it into the section where you’d like the post grid to appear.<\/li>\n<\/ol>\n\n\n\n

    Now the widget is on your page and ready to configure.<\/em><\/p>\n\n\n\n

    \"Image<\/figure>\n\n\n\n

    Step 2: Set Your Layout in the General Section<\/strong><\/h2>\n\n\n\n

    Head to the General<\/strong> panel to control the layout basics.<\/p>\n\n\n\n

      \n
    • Posts Per Page<\/strong> \u2014 Choose how many posts to display. (e.g., 8)<\/li>\n\n\n\n
    • Columns<\/strong> \u2014 Set how many posts appear per row. (e.g., 4 for desktop)<\/li>\n<\/ul>\n\n\n\n

      Tip: Start with 3-4 columns on desktop and adjust for mobile later.<\/p>\n\n\n\n

      \"Image<\/figure>\n\n\n\n

      Step 3: Choose Which Posts to Show (Query Section)<\/strong><\/h2>\n\n\n\n

      The Query<\/strong> section lets you control which posts appear in the widget.<\/p>\n\n\n\n

        \n
      • Order By<\/strong> \u2014 Choose what field to sort by (e.g., Title, Date).<\/li>\n\n\n\n
      • Order<\/strong> \u2014 ASC (A-Z) or DESC (Z-A).<\/li>\n\n\n\n
      • Exclude Current Post<\/strong> \u2014 Useful for single post pages to avoid showing the same post twice.<\/li>\n<\/ul>\n\n\n\n
        \"Image<\/figure>\n\n\n\n


        Step 4: Show or Hide the Featured Image<\/strong><\/p>\n\n\n\n

        A strong image can make a post more eye-catching.<\/p>\n\n\n\n

          \n
        • Toggle Show Featured Image<\/strong> to YES.<\/li>\n\n\n\n
        • Choose Image Size<\/strong> \u2014 Thumbnail, Medium, Full, etc. (e.g., Medium)<\/li>\n<\/ul>\n\n\n\n

          This will pull in the post’s featured image automatically.<\/p>\n\n\n\n

          \"Image<\/figure>\n\n\n\n


          <\/strong>Step 5: Display Post Titles<\/strong><\/h2>\n\n\n\n

          Post titles help users quickly understand what each entry is about.<\/p>\n\n\n\n

            \n
          • Toggle Show Title<\/strong> to YES.<\/li>\n\n\n\n
          • Choose the HTML Tag<\/strong> (H2, H3, etc.). Use H3 or H4 for better structure inside grids.<\/li>\n<\/ul>\n\n\n\n
            \"Image<\/figure>\n\n\n\n


            <\/strong>Step 6: Add Meta Information<\/strong><\/h2>\n\n\n\n

            Show helpful details like date and author.<\/p>\n\n\n\n

              \n
            • Enable Show Meta Data<\/strong>.<\/li>\n\n\n\n
            • Toggle on Show Date<\/strong> and\/or Show Author<\/strong>.<\/li>\n\n\n\n
            • (Optional) Enable Show Comments Count<\/strong>.<\/li>\n\n\n\n
            • Use Meta Separator<\/strong> to style (e.g., |, \u2022, or \/).<\/li>\n<\/ul>\n\n\n\n
              \"Image<\/figure>\n\n\n\n


              <\/strong>Step 7: Control Excerpt Display<\/strong><\/h2>\n\n\n\n

              Want to show a short snippet of each post? Use the Excerpt<\/strong> settings.<\/p>\n\n\n\n

                \n
              • Enable Show Excerpt<\/strong>.<\/li>\n\n\n\n
              • Set Excerpt Length<\/strong> (in number of words). e.g., 20<\/li>\n<\/ul>\n\n\n\n

                Keep excerpts short and intriguing to increase click-throughs.<\/p>\n\n\n\n

                \"Image<\/figure>\n\n\n\n


                <\/strong>Step 8: Add a Call to Action (Read More)<\/strong><\/h2>\n\n\n\n

                Encourage visitors to explore your content with a “Read More” link.<\/p>\n\n\n\n

                  \n
                • Toggle Show Read More<\/strong> to YES.<\/li>\n\n\n\n
                • Customize the Read More Text<\/strong> (e.g., Read More \u2192, View Post, etc.)<\/li>\n<\/ul>\n\n\n\n

                  This creates a clickable link to the full post.<\/p>\n\n\n\n

                  \"Image<\/figure>\n\n\n\n

                  From here, feel free to switch to the Style<\/strong> tab to customize fonts, colors, spacing, and hover effects.<\/p>\n\n\n\n

                  \n\n\n\n

                  Step 9: Customize Design in the Style Tab<\/strong><\/h2>\n\n\n\n

                  Once your content settings are ready, head to the Style<\/strong> tab to adjust spacing, colors, fonts, and more.<\/p>\n\n\n\n

                  Layout<\/strong><\/h3>\n\n\n\n
                    \n
                  • Column Gap<\/strong> \u2014 Space between columns (e.g., 20px)<\/li>\n\n\n\n
                  • Row Gap<\/strong> \u2014 Space between rows (e.g., 30px)<\/li>\n<\/ul>\n\n\n\n

                    Card<\/strong><\/h3>\n\n\n\n
                      \n
                    • Background Type & Color<\/strong> \u2014 Set a background or image.<\/li>\n\n\n\n
                    • Border Type & Radius<\/strong> \u2014 Define edges and rounding.<\/li>\n\n\n\n
                    • Box Shadow<\/strong> \u2014 Add depth to each post card.<\/li>\n\n\n\n
                    • Padding<\/strong> \u2014 Control inner spacing of the card.<\/li>\n<\/ul>\n\n\n\n

                      Title<\/strong><\/h3>\n\n\n\n
                        \n
                      • Color \/ Hover Color<\/strong> \u2014 Define normal and hover styles.<\/li>\n\n\n\n
                      • Typography<\/strong> \u2014 Font settings.<\/li>\n\n\n\n
                      • Bottom Spacing<\/strong> \u2014 Space under the title.<\/li>\n<\/ul>\n\n\n\n

                        Meta<\/strong><\/h3>\n\n\n\n
                          \n
                        • Color<\/strong> and Typography<\/strong><\/li>\n\n\n\n
                        • Bottom Spacing<\/strong> for separation<\/li>\n<\/ul>\n\n\n\n

                          Excerpt<\/strong><\/h3>\n\n\n\n
                            \n
                          • Color<\/strong>, Typography<\/strong>, Bottom Spacing<\/strong>
                            <\/li>\n<\/ul>\n\n\n\n

                            Call to Action<\/strong><\/h3>\n\n\n\n
                              \n
                            • Color \/ Hover Color<\/strong><\/li>\n\n\n\n
                            • Typography<\/strong> for link or button<\/li>\n<\/ul>\n\n\n\n


                              Troubleshooting Tips<\/strong><\/p>\n\n\n\n

                                \n
                              • Posts not showing? Double-check your Query<\/strong> settings.<\/li>\n\n\n\n
                              • Excerpts too long? Lower the Excerpt Length<\/strong>.<\/li>\n\n\n\n
                              • Layout looks off? Adjust Columns<\/strong> or check responsive preview.<\/li>\n<\/ul>\n\n\n\n


                                Need Help?<\/strong><\/p>\n\n\n\n

                                Still stuck? Contact our support team or browse more tutorials in our Help Center.
                                Was this guide helpful? We\u2019d love your feedback!<\/p>\n\n\n\n

                                <\/p>\n","protected":false},"excerpt":{"rendered":"

                                The Posts widget from Ultimate Addons for Elementor (UAE) is a powerful way to display blog posts or custom post types in a flexible, responsive grid layout. You can choose exactly what shows up (like title, image, excerpt, meta info) and how it’s styled. In this guide, we\u2019ll walk you through the setup process step […]<\/p>\n","protected":false},"author":105,"featured_media":0,"template":"","meta":{"inline_featured_image":false,"_uag_custom_page_level_css":"","_srfm_pdf_meta":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"pfd_doc_title":"","spectra_gs_classes":"","footnotes":""},"docs_category":[761],"docs_tag":[],"class_list":["post-69598","docs","type-docs","status-publish","hentry","docs_category-blog-post"],"spectra_custom_meta":{"rank_math_internal_links_processed":["1"],"rank_math_analytic_object_id":["939"],"views":["7907"],"_edit_lock":["1757486795:104"],"rank_math_seo_score":["17"],"inline_featured_image":[""],"_uag_custom_page_level_css":[""],"_srfm_pdf_meta":[""],"theme-transparent-header-meta":[""],"adv-header-id-meta":[""],"stick-header-meta":[""],"astra-migrate-meta-layouts":["set"],"footnotes":[""],"_elementor_edit_mode":[""],"_elementor_template_type":[""],"_elementor_data":[""],"_elementor_conditions":["a:0:{}"],"rank_math_og_content_image":["a:2:{s:5:\"check\";s:32:\"09ce96bc17cce4cce33859d3d2179b73\";s:6:\"images\";a:1:{i:0;i:69599;}}"],"_edit_last":["104"],"tap_disable_autolinker":["no"],"tap_autolink_inside_heading":["global"],"tap_autolink_random_placement":["global"],"tap_post_autolinker_limit":["0"],"_wp_old_slug":["blog-post","blog-posts"],"_uag_page_assets":["a:9:{s:3:\"css\";s:263:\".uag-blocks-common-selector{z-index:var(--z-index-desktop) !important}@media (max-width: 976px){.uag-blocks-common-selector{z-index:var(--z-index-tablet) !important}}@media (max-width: 767px){.uag-blocks-common-selector{z-index:var(--z-index-mobile) !important}}\n\";s:2:\"js\";s:0:\"\";s:18:\"current_block_list\";a:6:{i:0;s:14:\"core\/paragraph\";i:1;s:12:\"core\/heading\";i:2;s:9:\"core\/list\";i:3;s:14:\"core\/list-item\";i:4;s:10:\"core\/image\";i:5;s:14:\"core\/separator\";}s:8:\"uag_flag\";b:0;s:11:\"uag_version\";s:10:\"1776901772\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"],"helpful":["3"],"unhelpful":["1"],"redirects":["0"],"surerank_settings_general":["a:8:{s:9:\"separator\";s:1:\"-\";s:10:\"page_title\";s:7:\"%title%\";s:25:\"auto_generate_description\";b:1;s:16:\"page_description\";s:9:\"%excerpt%\";s:16:\"auto_description\";s:157:\"The Posts widget from Ultimate Addons for Elementor (UAE) is a powerful way to display blog posts or custom post types in a flexible, responsive grid layout.\";s:14:\"fallback_image\";s:0:\"\";s:13:\"canonical_url\";s:47:\"https:\/\/ultimateelementor.com\/docs\/basic-posts\/\";s:13:\"focus_keyword\";s:0:\"\";}"],"surerank_settings_post_no_index":["no"],"surerank_settings_post_no_follow":["no"],"surerank_settings_post_no_archive":["no"],"surerank_settings_social":["a:23:{s:15:\"open_graph_tags\";b:1;s:18:\"facebook_meta_tags\";b:1;s:17:\"twitter_meta_tags\";b:1;s:16:\"oembeded_scripts\";b:1;s:17:\"oembeded_og_title\";b:1;s:22:\"oembeded_social_images\";b:1;s:27:\"oembeded_remove_author_name\";b:1;s:17:\"facebook_page_url\";s:43:\"https:\/\/www.facebook.com\/UltimateElementor\/\";s:24:\"facebook_author_fallback\";s:0:\"\";s:17:\"twitter_card_type\";s:19:\"summary_large_image\";s:24:\"twitter_same_as_facebook\";b:1;s:24:\"twitter_profile_username\";s:25:\"https:\/\/x.com\/UAElementor\";s:24:\"twitter_profile_fallback\";s:0:\"\";s:14:\"facebook_title\";s:0:\"\";s:20:\"facebook_description\";s:0:\"\";s:18:\"facebook_image_url\";s:0:\"\";s:17:\"facebook_image_id\";i:0;s:20:\"facebook_image_width\";i:0;s:21:\"facebook_image_height\";i:0;s:13:\"twitter_title\";s:0:\"\";s:19:\"twitter_description\";s:0:\"\";s:17:\"twitter_image_url\";s:0:\"\";s:16:\"twitter_image_id\";i:0;}"],"surerank_migration":["1"],"_elementor_page_assets":["a:0:{}"],"_uag_css_file_name":["uag-css-69598.css"]},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"ishwarib","author_link":"https:\/\/ultimateelementor.com\/author\/ishwarib\/"},"uagb_comment_info":0,"uagb_excerpt":"The Posts widget from Ultimate Addons for Elementor (UAE) is a powerful way to display blog posts or custom post types in a flexible, responsive grid layout. You can choose exactly what shows up (like title, image, excerpt, meta info) and how it’s styled. In this guide, we\u2019ll walk you through the setup process step…","_links":{"self":[{"href":"https:\/\/ultimateelementor.com\/wp-json\/wp\/v2\/docs\/69598","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ultimateelementor.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/ultimateelementor.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/ultimateelementor.com\/wp-json\/wp\/v2\/users\/105"}],"version-history":[{"count":2,"href":"https:\/\/ultimateelementor.com\/wp-json\/wp\/v2\/docs\/69598\/revisions"}],"predecessor-version":[{"id":69610,"href":"https:\/\/ultimateelementor.com\/wp-json\/wp\/v2\/docs\/69598\/revisions\/69610"}],"wp:attachment":[{"href":"https:\/\/ultimateelementor.com\/wp-json\/wp\/v2\/media?parent=69598"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/ultimateelementor.com\/wp-json\/wp\/v2\/docs_category?post=69598"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/ultimateelementor.com\/wp-json\/wp\/v2\/docs_tag?post=69598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}