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
- Navigating through your blocks
- Displaying Fields in your Block Editor Designs
- Displaying an image gallery
- Styling Toolset blocks in the editor
- Typography controls
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.
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
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”:
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.
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.
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
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.
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.
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.
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
If you run into any problems or need our advice, create a new support ticket and our team will be happy to assist you.