Sauter la navigation
Acheter
Accueil » Cours » WordPress Design » Styling Different Parts of a Site » Styling Single-post Templates dans WordPress

Styling Single-post Templates dans WordPress

Toolset allows you to design custom templates for displaying single posts. Learn how to use styling to make them look great.

You design a template only once, and it applies to all posts of that type. This is important because:

  • It saves time from needing to arrange content in the block editor.
  • It keeps content consistent in appearance and layout.
  • Reduces chances of design errors from needing to recreate it over and over again.

Toolset allows you to create custom templates without programming. Of course, there are other ways to create single-post templates in WordPress.

If the process below seems too difficult, we recommend starting by using a site from our demo site library. Simply install the demo site and check out the relevant pages in the block editor to see its structure. 

Designing the template layout

To explain the most important part of designing a template we recreate how we made our Real Estate site’s Agent templates with Toolset. 

To begin, we open up the block editor for the new single-post template. Here we need to add Toolset blocks to create the layout of the template we want. We need to put the appropriate blocks to recreate the image in the example beneath:

Example of a finished single-post template

This template is very professional and appears simple. However, it takes some time to set up the appropriate blocks to build it. 

In the block editor, the very same template appears a bit more complex:

Editing the template in the block editor

Here we can tell that the same layout looks slightly different from what we see on the front-end. However, this is completely normal. 

We can always check what the designs look like on the front-end. Click the View on front-end link on the top of the editing page to see the front-end result.

Setting up the layout

To begin, we insert a Toolset Grid block. 

The Grid block allows us to organize content well and create a layout with plenty of customizability. For example, we can create multiple columns or control the colors and spacing of content we want to display.

Toolset Grid block in the block editor

Grid’s settings in the sidebar

Any changes we make to the grid block apply immediately. 

Now that we have added the Grid block, we need to adjust the columns. Our example uses two columns, so we select this option. By default, the columns are all the same width, so we need to adjust this using the Grid Settings. 

Resizing the grid columns

Since this is a profile page, the narrower first column contains the image and title, while the wider column holds the body text. This makes sure there is enough space for all the information. 

We do this because it is neater, and so our content stays readable. 

The final result looks like this:

Grid columns sizes after resizing

In general, we recommend using 2 to 3 columns if there is more information that needs to display on the template. This is enough to show the post title, image, custom fields, and post content. 

If it helps, we recommend sketching what the final template must look like on paper and estimating how many columns to use. 

Adding block content to the layout

Now that the Grid block is ready, we need to add other blocks to display the content. To recreate our template, we need to add the following blocks:

  1. Image
  2. Heading
  3. Custom field “Languages”
  4. Custom field “Phone number”
  5. Post Content

Of course, we use Toolset’s Dynamic Sources option to select where the content for these blocks comes from (standard and custom fields).

Block contents rated by importance inside the single-post template

The final design in the editor looks like this:

Changing the heading level

However, the display on the front-end is quite different from what we see in the block editor:

Template displaying the content without spacing configured

On the front-end, the display doesn’t look professional. There are no design elements or styling visible, and the main image rests right on the borders of the Grid box. 

To remedy this problem, we simply apply styling to the content blocks and layout.

Styling the content blocks and layout

To style the template, we follow these steps:

  1. Apply padding and margins for spacing 
  2. Aligning textual content
  3. Apply text hierarchy
  4. Apply finishing design elements

Applying padding and margins

In design, padding and margins help create what is known as white space or “negative space.” This is the spacing between elements, such as paragraphs, images, buttons, icons, and more. Taking time to apply padding and margins can change the entire appearance of content, so it’s essential to understand it. 

The photo and text are on the container edge in the screenshot below and don’t look good. Additionally, the distance between the image and text on the right is too small.

Areas on the template without any spacing configured

To remedy this, we must add padding to our Toolset Grid block and increase the column gap. 

We select the Grid block from Block Navigation, then expand Grid Settings. In Column Gap,  we adjust the amount of space we require. 

Adjusting the Column Gap for the Grid

After increasing this gap, we apply padding.

Next to Grid Settings is the panel Style Settings. We expand this panel, then enable the Margins / Padding option. From there, we set 60px of padding on all sides.

Applying padding to the Grid block

Once we do this, we can take a look at the front-end and compare our results:

The text touching the borders

The spacing prevents text touching the borders

Now the content looks much better and is closer to our final design goal. 

Aligning textual content

Though the text looks acceptable, we can improve it further by aligning it more professionally. Text alignment is the act of arranging text to fit a layout appropriately. We recommend:

  • Left alignment for text longer than 3 lines (or right alignment for right-to-left languages)
  • Center alignment for headings, short phrases, quotes, or captions

In this example, we must apply:

  • Center alignment to the left column text, since the text is shorter
  • Left alignment to the right column text, because the text there is very long

Editing a Content Template using Toolset

Single-post page displayed using a template

After we do this, the content looks much nicer and easier to read.

Applying text hierarchy

Text hierarchy, or content hierarchy, is vital for establishing the importance of different parts of content. Our example looks good, but we can make it even better by ensuring that the most important information is larger and easier to discern.

In the example below, the numbers (smaller is more important) show us what information is primary and what is secondary, so we know how to style our content.

Hierarchy of different text elements in the template 

To match the text to their correct hierarchy, we need to apply the correct heading sizes. 

We do this by selecting the text blocks from block navigation and styling from the right sidebar under Level. The right sidebar content changes depending on the block we choose. Hence, it should appear automatically. 

Editing the Heading Level

After updating all the text content to the correct sizes, we can see that the text “Agatha Smith” is too big now. Because of SEO rules, we must keep the H1 as it is. 

To solve this problem, we just decrease the font size. We expand the Typography panel on the right sidebar and type in a smaller value. In this case, the size is 32. 

Setting the Font Size in the block editor

Since the phone number is still very small and hard to see, we need to make it more visible. We simply select the block, and on the right sidebar, increase the text size:

Setting up the custom field’s font type, weight, and letter Spacing

Now that the left column content is larger and easier to read, we can tell that we need to enlarge the body text a bit more to match. We simply select the body text in block navigation, then adjust the size on the right sidebar. 

When done, the body text looks much better and fits the rest of the content. The last thing we must do is adjust the size of the text that follows by using the same steps. 

Adjusting the font size for the custom field

After making these adjustments, the text appears more evenly spaced and easier to read, which is important for users. Now we are closer to finishing the template’s design.

Applying final design elements 

With Toolset, we can add small touches to the content layout, which creates a nice effect. The final design we need to make is to add a light horizontal line below the “About Agatha Smith” heading. 

To make this, we simply: 

  1. Select the block “About Agatha Smith” from block navigation.
  2. In the right sidebar, we expand the Style Settings panel and enable the Margin / Padding option.
  3. We click on the circle and change its color to grey for the bottom Border. After that, we type in 1 for its size. This creates a faint grey line underneath our block. 
  4. Lastly, we add some bottom padding to prevent the line from sticking to the text by typing in 30px in the lower section of the padding box. 
Adding a bottom border to the Heading block

Now everything is done, and the final result of the template is ready.

The final design of the template on the front-end

Checking a template’s responsiveness

With Toolset, a template design is automatically responsive. However, if you need to make extra adjustments, then Toolset provides the ability to fine-tune the appearance of different blocks depending on the screen size.

For example, Toolset allows us to control the heading font size for mobile devices regardless of a site’s global typography settings. That means we can make them larger or smaller depending on our preferences and needs.  

As an example, we can edit our new template to look different on phones or tablets. 

Adjusting the heading for mobile devices

We simply select the phone icon in the sidebar. If we want to see the sizing for tablets or desktops, we can choose one of the other icons. These options allow us to see what our content looks like on different devices. 

For example, this is how this template appears on phone screens:

The mobile version of the template showing the Agent’s dynamic content

Since everything looks clean and automatically sized itself, we don’t need to apply any styling or adjustments.

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