To design custom sites using Toolset you use the default WordPress editor. This page explains the basics of using Toolset with the WordPress Block Editor.

This page explains the following:

Adding, editing, moving and deleting blocks

Watch this short video to learn how to edit with the Block Editor:

When you need to display content side-by-side, you should use the columns block.

Here’s a short video about using columns in your designs.

As you build your site, some of your designs and templates can feature many blocks. You can also have blocks within Container blocks, you can use columns, and more.

To easily navigate through your blocks, use the Block Navigation button at the top of the editor.

Use the “Block Navigation” button to edit settings for the View or the Loop Item
Use the “Block Navigation” button to edit settings for the View or the Loop Item

Displaying Fields in your Block Editor Designs

You need to use Toolset blocks to display information coming from post fields (title, body, etc.) and Toolset custom fields (the ones you create).

With Toolset blocks, you can display fields in three ways:

  • Set block content to come from field values
  • Display fields as individual blocks
  • Combine fields with text in one block

Set block content to come from field values

Every block in the Toolset Blocks library allows setting its content to come from fields. For example, in the Toolset Heading block, you can enable the heading text to come from any post field or Toolset custom field.

Here is a quick video that shows how to create a dynamic heading, a button to “contact the tour operator” and add a “featured image”:

Display fields as individual blocks

You can display any post field or Toolset custom field as a block. For example, to display a post’s main content, add the Single Field block and select the Post Content (Body) field.

Combine fields with text in one block

Some parts of your designs require a mix of fields and texts. For example, you may want to add labels next to the output of your custom fields. The easiest way to create this is by using the Fields and Text block.

You can use this block to insert Fields, Views or Forms. You can also use Conditional output for custom fields. All of this can be done using the block’s Visual or HTML editor.

You can easily allow adding multiple images to your posts using a repeating image field. To then display this repeating image field as an image gallery, simply insert the Repeating Field / Gallery block into your template.

Adding Repeating Field / Gallery
Adding Repeating Field / Gallery

Styling Toolset blocks in the editor

Often, you will need to tweak the design of individual Toolset blocks. For example, you might want to change the output colors for fonts, backgrounds, and more. Or, you might want to change the margin or padding for specific fields output by Toolset.

Toolset allows you to easily do this in two ways:

  • Using the styling controls in the sidebar
  • Grouping blocks into a block container and applying styling to it

Styling items using the interface

Toolset blocks provide you with an interface to adjust the most useful styling options. For example, you can adjust margins, paddings, colors, and more.

Simply select the Toolset block and expand the Styling section in the Block Editor sidebar.

Please note that different types of Toolset blocks can have different styling options available.

Using Container blocks

You can use the Container block to group and style multiple blocks. For example, you can set a background for the container. For the background, you can use a solid color, color gradient, or an image. You can also use Container blocks within other Container blocks.

Styling options for the Container block
Styling options for the Container block

Applying custom CSS to blocks

To add a custom CSS class, select the block and in the right sidebar look for the CSS Classes field. Depending on the block, you can find this field under the ID & Classes or Advanced section.

You must press the Comma, Space, or the Enter key after you enter the class name.

Applying custom CSS to blocks
Applying custom CSS to blocks

Typography controls

Toolset blocks offer a Typography section in the sidebar settings allowing you to style and format text.

You can adjust the following typography-related options:

  • Font type – choose from a huge selection of fonts
  • Font size, line height, and letter spacing
  • Font style
  • Text transform – capitalize, uppercase, lowercase
  • Text color
  • Text shadow

Typography options in Toolset blocks
Typography options in Toolset blocks

Need help?

If you run into any problems or need our advice, create a new support ticket and our team will be happy to assist you.