{"id":2037847,"date":"2021-04-30T13:04:05","date_gmt":"2021-04-30T13:04:05","guid":{"rendered":"https:\/\/toolset.com\/course-lesson\/styling-views-and-archives\/"},"modified":"2021-05-31T08:04:05","modified_gmt":"2021-05-31T08:04:05","slug":"styling-views-and-archives","status":"publish","type":"course-lesson","link":"https:\/\/toolset.com\/es\/course-lesson\/styling-views-and-archives\/","title":{"rendered":"Styling Views and Archives"},"content":{"rendered":"\n

How lists of posts work<\/h2>\n\n\n\n

A View<\/a> or archive<\/a> displays lists of posts. There are two parts to such lists:<\/p>\n\n\n\n

  1. Loop Item<\/strong> is an individual post in the list. You design it by inserting and styling different blocks that display post information like the featured image, title, etc.<\/li>
  2. The View Loop<\/strong> or WordPress Archive Loop<\/strong> is the whole list of posts. You can also style the whole list by changing how the posts are listed, the spacing between them, etc.<\/li><\/ol>\n\n\n
    \n
    \"\"<\/a>
    A View on the front-end displaying posts, or Loop Items, using the same layout<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n

    Choosing the Loop Style<\/h3>\n\n\n\n

    The Loop Style is the way a View or an archive displays the list of posts.<\/p>\n\n\n\n

    The options are:<\/p>\n\n\n\n

    1. Grid<\/li>
    2. Masonry<\/li>
    3. Collage<\/li>
    4. List (Ordered or Unordered)<\/li>
    5. Unformatted<\/li><\/ol>\n\n\n\n

      Wizards for creating Views and archives make you choose the Loop Style. You can also change this option later for both Views and archives.<\/p>\n\n\n\n

      Before selecting one, consider how you want to arrange your entire page content. Each of them suits different purposes, so you can try them out and see what works best. <\/p>\n\n\n\n

      To switch between Loop Styles in an existing View or archive:<\/p>\n\n\n\n

      1. Select View Loop<\/strong>, or WordPress Archive Loop,<\/strong> from block navigation.<\/li>
      2. Expand the Loop Style<\/strong> panel from the right sidebar and select the Loop Styles you want to use.<\/li><\/ol>\n\n\n\n

        Styling The Loop<\/h2>\n\n\n\n

        Both archives and Views have the same Loop. In archives, it\u2019s the WordPress Archive Loop<\/strong>, and in Views, it\u2019s the View Loop<\/strong>.<\/p>\n\n\n\n

        \n
        \n

        The WordPress Archive Loop displaying content in the block editor for \u201cSpeakers\u201d<\/strong><\/p>\n\n\n

        \n
        \"\"<\/a><\/figure>\n<\/div><\/div>\n\n\n\n
        \n

        The View Loop displaying content in the block editor for \u201cDog Walkers\u201d<\/strong><\/p>\n\n\n

        \n
        \"\"<\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n

        How to Create Space between Loop Items<\/h3>\n\n\n\n

        You can create general space between Loop Items by accessing the Grid Settings<\/strong> section on the right sidebar. Here, you can adjust the Column Gap<\/strong> and Row Gap<\/strong> to make the Loop Items appear more separate from one another. <\/p>\n\n\n

        \n
        \"\"
        Adjusting the Grid Settings for a WordPress Archive Loop in the right sidebar<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n

        If you want more fine-tuned control, or if you\u2019re using a List<\/strong> or Unformatted<\/strong> Loop Style, you can adjust the spacing between Loop Items by changing the item\u2019s margins or padding. <\/p>\n\n\n\n

        1. Select the View Loop <\/strong>or WordPress Archive Loop<\/strong> from block navigation and expand the Style Settings<\/strong> tab. <\/li>
        2. Enable Margins \/ Padding <\/strong>and adjust the settings until there is good spacing between posts.<\/li><\/ol>\n\n\n
          \n
          \"\"
          Setting the padding inside the Margins \/ Padding panel in the block editor<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n

          Try the different options and preview them on the front-end to get an understanding of how to control the spacing between Loop Items. <\/p>\n\n\n\n

          In the example below, you can see why using space appropriately helps content appear more readable and attractive.<\/p>\n\n\n\n

          \n
          \n

          A View displaying content with no spacing between Loop Items<\/strong><\/p>\n\n\n

          \n
          \"\"<\/a><\/figure>\n<\/div><\/div>\n\n\n\n
          \n

          A View displaying content with spacing between Loop Items<\/strong><\/p>\n\n\n

          \n
          \"\"<\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n

          Styling the Loop Item<\/h2>\n\n\n\n

          Let’s now take a look at styling the individual Loop Items, i.e. posts themselves.<\/p>\n\n\n\n

          Spacing blocks inside a Loop Item<\/h3>\n\n\n\n

          To make sure content inside a Loop Item is readable, we need to add spacing between the blocks inside.<\/p>\n\n\n\n

          We apply this spacing by:<\/p>\n\n\n\n

          1. Selecting the block from block navigation.<\/li>
          2. Expanding the Style Settings<\/strong> panel.<\/li>
          3. Enabling the Margin \/ Padding <\/strong>option and setting the margins to.<\/li><\/ol>\n\n\n\n

            In the example below, we adjust the Heading<\/strong> block\u2019s bottom margin to have 25px<\/strong> of space. <\/p>\n\n\n

            \n
            \"\"
            Adjusting an individual block’s margins in the block editor<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n

            When styling your Loop Item, make sure to adjust the spacing appropriately for all content blocks to create a uniform appearance. <\/p>\n\n\n\n

            \n
            \n

            Displaying an Archive with bad spacing on the front-end<\/strong><\/p>\n\n\n

            \n
            \"\"<\/a><\/figure>\n<\/div><\/div>\n\n\n\n
            \n

            Displaying an Archive with good spacing on the front-end<\/strong><\/p>\n\n\n

            \n
            \"\"<\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n

            Adjusting Typography<\/h3>\n\n\n\n

            To make content look professional, you should adjust the Typography of your Views and WordPress Archives to suit your website design and logo. <\/p>\n\n\n\n

            Make sure to set the:<\/p>\n\n\n\n