Toolset allows you to design custom templates for displaying single posts. Learn how to use styling to make them look great.
- 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.
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:
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:
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.
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.
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:
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.
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:
- Custom field “Languages”
- Custom field “Phone number”
- 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).
The final design in the editor looks like this:
However, the display on the front-end is quite different from what we see in the block editor:
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.
To style the template, we follow these steps:
- Apply padding and margins for spacing
- Aligning textual content
- Apply text hierarchy
- Apply finishing design elements
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.
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.
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.
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.
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.
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.
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.
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.
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:
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.
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.
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:
- Select the block “About Agatha Smith” from block navigation.
- In the right sidebar, we expand the Style Settings panel and enable the Margin / Padding option.
- 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.
- 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.
Now everything is done, and the final result of the template is ready.
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.
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:
Since everything looks clean and automatically sized itself, we don’t need to apply any styling or adjustments.
- Displaying Images with Toolset
- Styling Custom Searches
- Styling a Site Header and Footer
- Styling Views and Archives
- 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
- Assigning Templates to Posts Conditionally
- Display Dynamic Sources Inside all Text Blocks
- YouTube Videos with Advanced Options
- Displaying Form Data
- Creating templates to display members-only content
- Creating and Displaying Repeatable Field Groups
- Styling Front-End Forms
- Displaying a Map on A Single Post Template
- Creating a Hero Section
- Adding Dynamic Content to Your Homepage
- Creating Templates to Display Custom Posts
- Creating Responsive Columns and Grids
- Creating Responsive Designs
- Advanced Styling with Container Blocks
- Display Content Conditionally