Sauter la navigation
Acheter
Accueil » Cours » WordPress Design » Styling Different Parts of a Site » Styling Views and Archives dans WordPress

Styling Views and Archives dans WordPress

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.

How lists of posts work

A View or archive displays lists of posts. There are two parts to such lists:

  1. 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.
  2. 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.
A View on the front-end displaying posts, or Loop Items, using the same layout

Choosing the Loop Style

The Loop Style is the way a View or an archive displays the list of posts.

The options are:

  1. Grid
  2. Masonry
  3. Collage
  4. List (Ordered or Unordered)
  5. Unformatted

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:

  1. Select View Loop, or WordPress Archive Loop, from block navigation.
  2. Expand the Loop Style panel from the right sidebar and select the Loop Styles you want to use.

Styling The Loop

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”

How to Create Space between Loop Items

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. 

Adjusting the Grid Settings for a WordPress Archive Loop in the right sidebar

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. 

  1. Select the View Loop or WordPress Archive Loop from block navigation and expand the Style Settings tab. 
  2. Enable Margins / Padding and adjust the settings until there is good spacing between posts.
Setting the padding inside the Margins / Padding panel in the block editor

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

Styling the Loop Item

Let’s now take a look at styling the individual Loop Items, i.e. posts themselves.

Spacing blocks inside a Loop Item

To make sure content inside a Loop Item is readable, we need to add spacing between the blocks inside.

We apply this spacing by:

  1. Selecting the block from block navigation.
  2. Expanding the Style Settings panel.
  3. 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. 

Adjusting an individual block’s margins in the block editor

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

Adjusting Typography

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.

Adjusting the various Typography options in 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

Setting Colors

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 the Loop Item’s background color

Designing images in lists of posts

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
  • 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: 

Adjusting the Border Radius to create a circular image

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.

Adding a Border and slight Border Radius to the images in the block editor

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.

Adjusting the image Box Shadow to be green

For more information on image options, check out the lesson about displaying images with Toolset.

Making an image fill one side of a container

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:

An example of one Loop Item in the WordPress Archive Loop

Steps to follow to achieve this:

  1. Insert a Container block into the left column.
  2. Select the Container from block navigation. On the right sidebar, expand the Background panel.
  3. Under the Type dropdown, select Image.
  4. Enable the option Dynamic Source, then set up the Post Source and Source correctly.
  5. Expand the Inner Content panel and set the Min-Height. Our example uses 340 px. 
  6. 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.

Passer à l'étape suivante
Cloe
Updated
mai 31, 2021
Envoyez vos commentaires à notre équipe de documentation