{"id":58549,"date":"2025-06-05T17:16:56","date_gmt":"2025-06-05T14:16:56","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=58549"},"modified":"2026-01-20T14:55:20","modified_gmt":"2026-01-20T12:55:20","slug":"add-a-blog-page-to-your-website","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/add-a-blog-page-to-your-website\/","title":{"rendered":"Add a blog page to your website"},"content":{"rendered":"\n

Blogs are an important part of many websites, even those that aren\u2019t blog focused. For example, an online clothing store may want to incorporate a fashion blog. This blog can be used to help market store products and, if your information is interesting enough to attract interest, it can help boost your SEO. <\/p>\n\n\n\n

The blog page of your site is generally one page with a collection of blog posts. For more information about creating the individual posts, see What are pages and posts?<\/a>, and Create a Single Post Template<\/a>, This article will assume you have several existing blog posts.<\/p>\n\n\n\n

    \n
  1. Create a new page.
    [callout type=”note”]You can design your blog page using all the design tools in the Elementor Editor but to keep things simple, the example below only details how to add an archive of blog posts to your page.[\/callout]<\/li>\n\n\n\n
  2. Add a Loop Grid widget to the canvas. For more information, see Build a loop grid<\/a>. 
    [callout type=”note”]You can use the     Archive Posts<\/a> widget or Posts widget<\/a> to create a blog page, but we\u2019ll use the Loop Grid widget as it offers more flexibility.[\/callout]
    \"\"<\/li>\n\n\n\n
  3. Click Create a template<\/strong>.
    \"\"<\/li>\n\n\n\n
  4. In the popup window, click Save<\/strong>.
    \"\"<\/li>\n\n\n\n
  5. On the canvas, click the + sign.
    \"\"<\/li>\n\n\n\n
  6. Choose Flexbox<\/strong>.
    \"\"<\/li>\n\n\n\n
  7. Select one container. 
    \"\"<\/li>\n\n\n\n
  8. In the panel, open the Additional Options<\/strong> field. 
    \"\"<\/li>\n\n\n\n
  9. Use the HTML Tag<\/strong> dropdown to select a (link)<\/strong>.
    \"\"<\/li>\n\n\n\n
  10. Click the dynamic tag icon.
    \"\"<\/li>\n\n\n\n
  11. Choose Post URL<\/strong> from the dynamic tag list.
    Adding this URL makes the container clickable – clicking the container will take visitors to the full blog post. Another option that let visitors access the full blog post would be to add a button. For example, a button that says Read More<\/strong> and links the post. However, you cannot make both the container and a button inside clickable. For details, see     Nested Links<\/a>. <\/li>\n<\/ol>\n\n\n\n

    For this example, our blog page will display the blog posts title, featured image and excerpt.<\/p>\n\n\n\n

      \n
    1. Drag a Post Title, Featured Image and Post Excerpt widget into the Loop Grid\u2019s container. Adjust any style settings to fit your design.
      \"\"
      [callout type=\u201cbest-practice\u201d]Since the widgets in the loop grid can vary in height, you may want to set the minimum height of the widgets to accommodate the height of the tallest items. This will give all the entries a more uniform look.[\/callout]
      <\/li>\n\n\n\n
    2. Click the page settings icon.
      \"\"<\/li>\n\n\n\n
    3. In the panel, name your loop grid.
      \"\"<\/li>\n\n\n\n
    4. Click Save & Back<\/strong>.
      \"\"<\/li>\n\n\n\n
    5. Click Publish<\/strong>.<\/li>\n<\/ol>\n\n\n\n

      \"\"<\/p>\n\n\n\n

      Your blog page now displays all your blog posts.<\/p>\n\n\n\n

      For details about all the layout and styling options you have for the loop grid, see Loop Grid widget<\/a>.<\/p>\n\n\n\n

      Divide your blog by category<\/h2>\n\n\n\n

      In the above example, we created a page to display all your blog items, but let\u2019s say you want visitors to be able to access your blogs by category. In the example below we\u2019ll create a blog page that contains tabs displaying different sets of posts.<\/p>\n\n\n\n

        \n
      1. Create a page in the Elementor Editor.
        and then Drag a Tabs widget to the canvas. For details see         Tabs widget<\/a>.
        In the panel, name the tabs. The first one should be called All blogs<\/strong> and the rest after category names.
        \"\" <\/li>\n\n\n\n
      2. Drag a Loop Grid widget into the first tab and In the panel, enter the template name of the template you created above.
        \"\"<\/li>\n\n\n\n
      3. Add the same loop grid to the second tab and In the panel, open the Query<\/strong> field.
        Queries allow you to filter the data displayed in a loop grid.
        \"\"
        <\/li>\n\n\n\n
      4. In the Include by<\/strong> field click the + sign.
        \"\"<\/li>\n\n\n\n
      5. Select Term<\/strong>.
        \"\"<\/li>\n\n\n\n
      6. In the Term<\/strong> field, enter a category name and do this for all the categories\"\"
        <\/li>\n\n\n\n
      7. Click Publish<\/strong>.<\/li>\n<\/ol>\n\n\n\n
        \"\"<\/figure>\n\n\n\n

        Each tab will display only the blog posts from the selected category. <\/p>\n\n\n\n

        Useful articles<\/h2>\n\n\n\n