Toolset Views and WordPress Archives both display lists of posts. In this lesson, we explain how to style and design both of them using Toolset.
- Loop Item 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.
- The View Loop or WordPress Archive Loop 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.
The Loop Style is the way a View or an archive displays the list of posts.
The options are:
- List (Ordered or Unordered)
Wizards for creating Views and archives make you choose the Loop Style. You can also change this option later for both Views and archives.
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.
To switch between Loop Styles in an existing View or archive:
- Select View Loop, or WordPress Archive Loop, from block navigation.
- Expand the Loop Style panel from the right sidebar and select the Loop Styles you want to use.
Both archives and Views have the same Loop. In archives, it’s the WordPress Archive Loop, and in Views, it’s the View Loop.
The WordPress Archive Loop displaying content in the block editor for “Speakers”
The View Loop displaying content in the block editor for “Dog Walkers”
You can create general space between Loop Items by accessing the Grid Settings section on the right sidebar. Here, you can adjust the Column Gap and Row Gap to make the Loop Items appear more separate from one another.
If you want more fine-tuned control, or if you’re using a List or Unformatted Loop Style, you can adjust the spacing between Loop Items by changing the item’s margins or padding.
- Select the View Loop or WordPress Archive Loop from block navigation and expand the Style Settings tab.
- Enable Margins / Padding and adjust the settings until there is good spacing between posts.
Try the different options and preview them on the front-end to get an understanding of how to control the spacing between Loop Items.
In the example below, you can see why using space appropriately helps content appear more readable and attractive.
A View displaying content with no spacing between Loop Items
A View displaying content with spacing between Loop Items
Let’s now take a look at styling the individual Loop Items, i.e. posts themselves.
To make sure content inside a Loop Item is readable, we need to add spacing between the blocks inside.
We apply this spacing by:
- Selecting the block from block navigation.
- Expanding the Style Settings panel.
- Enabling the Margin / Padding option and setting the margins to.
In the example below, we adjust the Heading block’s bottom margin to have 25px of space.
When styling your Loop Item, make sure to adjust the spacing appropriately for all content blocks to create a uniform appearance.
Displaying an Archive with bad spacing on the front-end
Displaying an Archive with good spacing on the front-end
To make content look professional, you should adjust the Typography of your Views and WordPress Archives to suit your website design and logo.
Make sure to set the:
- Text Alignment (Left, Center, Right)
- Font Size
- Font Style (bold, italic, etc.)
- Text Color
- Level (if adjusting a Heading block)
To access these options, simply select your text and access the Typography section on the right sidebar of the block editor.
If you are using the built-in WordPress Paragraph block, then the options that appear on the right sidebar are limited. We recommend switching your Paragraph block to a Toolset Fields and Text block for full Typography customization.
The example below illustrates the huge difference good Typography makes to content:
A View displaying dynamic content with no Typography settings
A View displaying dynamic content with appropriate Typography settings
The colors that you use in your View or WordPress Archive should match the site palette. Read about how you can create and use yours in our lesson about colors.
You can adjust colors for individual text by adjusting Text Color in the Typography panel. You can also select the content you wish to edit and adjust the colors available in the Style Settings panel.
Adjusting images is simple with Toolset. Select your Toolset Image block and expand the Style Settings panel in the right sidebar to access all image designing options.
You can adjust the following settings:
- Margin / Padding (spacing)
- Border Radius
- Rotate (Rotation of your image)
- Box Shadow
In the example below, we create circular images out of square ones to make the page content appear more friendly and fun:
For a site with a more serious look, using a Border with a color that matches the site palette helps add sharpness and style. We show this in the example below.
As a final example, the Box Shadow option in the image below helps make this Gym’s archive listing appear more professional and colorful against a dark site background.
For more information on image options, check out the lesson about displaying images with Toolset.
When designing the Loop item of a View or WordPress Archive, you might want to have an image fill out a whole part of the container, like this:
Steps to follow to achieve this:
- Insert a Container block into the left column.
- Select the Container from block navigation. On the right sidebar, expand the Background panel.
- Under the Type dropdown, select Image.
- Enable the option Dynamic Source, then set up the Post Source and Source correctly.
- Expand the Inner Content panel and set the Min-Height. Our example uses 340 px.
- Expand the Container as Link panel and enable the Make the entire container a link option.
Now our image is dynamic and also takes up the entire space of the left column.
- Displaying Images with Toolset
- Styling Custom Searches
- Styling a Site Header and Footer
- Styling Single-post Templates
- How to Design and Choose Images and Illustrations
- Show all related topics...
- Choosing and Applying Colors in Your Site
- Using Typography for Better Website Readability
- WordPress Site Identity
- Where a WordPress Sites Design Comes From
- Adding Custom CSS to Templates, Archives and Views
- Passing Arguments to Views
- Display Dynamic Sources Inside all Text Blocks
- YouTube Videos with Advanced Options
- Displaying Form Data
- Styling Front-End Forms
- Displaying a List of Posts on A Map
- Creating a Hero Section
- Creating Sliders with Dynamic Post Content
- Adding Dynamic Content to Your Homepage
- Creating a View
- Creating a Custom Archive Page
- Creating Responsive Columns and Grids
- Creating Responsive Designs
- Advanced Styling with Container Blocks
- Display Content Conditionally
- Using Third-Party Hidden Fields