What are Basic Text blocks?
Basic Text blocks are possibly the most important tool in your tool box when making pages. Not only are they where you put the text for your page, but they can also hold images, video, tables, and more. Combined with a range of text formatting to help make your page more visually appealing and better structured, this block is most likely the one you will be using the most. Because they are capable of doing so many things, it is important we discuss all elements of their functionality.
Features of Basic Text Blocks
Basic Text blocks are versatile!
The primary purpose of a Basic Text block is to hold text. Because of this, there are many features included in the editor that you may have reason to utilize. Learning to format your text can lead to better engagement and messaging to your site's visitors.
These blocks are capable of doing a lot, depending on what you need of them.
- They adjust their content to the width to the column they are placed in.
- They are able to hold images, video, and some HTML/CSS formatting.
- They contain various automatic formatting options, such as headers and quote boxes.
There are different formats your Basic Text block can be set to. These are located below the text box of the block editor. These include:
- Plain Text
- Limited HTML Text
- Rich Text (Default)
- and Full HTML.
For the most part, you will not need to change this from the default Rich Text. However, some formatting requires using Full HTML. For more information on what each is capable of doing, there is a built in "about text formats" page available above the text format dropdown.
Headings
There are various tiers of headings, from 1 to 6, that help users navigate your page. All headings use pre-determined formatting to ensure they look uniform across the site.
Do not use headings for formatting!
Headings don't just serve an aesthetic purpose. They also tell people and software how a webpage's content is structured. Text-to-speech accessibility tools, for example, offer the option to read just the headers of a page aloud to a user so they know if a website matches their needs or not before listening to the entire page. As such, it's pivotal that you reserve headings for helping organize your content and its structure.
Use headings in order to create an outline!
Because of their structural purpose, it's good to think of headings as nested within each other. As such, do not jump around between heading sizes, or the structure of your page won't make sense. Nest smaller headings beneath larger ones. Put content of equal importance at the same heading size as each other. Good page organization makes it easier for visitors to quickly locate relevant information.
Styling Text
There are two built in text styles to use for accenting your text. Use them judiciously to emphasize the important parts of your content.
Quotes
Intro Text
Intro text is formatted to stand out on your page without using a heading. It often is used for content at the very start of a page or section to catch the reader's attention.
Images
While the Featured Image block is useful for many image related situations, there are certain other settings that make using an image in a Basic Text block more beneficial. These images are placed in line with your text, and the text will wrap around the image.
Once in your text block, click the "edit media" button by the image to edit your image's settings. Most importantly, you will need to set the alt text for your image on this panel. You can also set your image to align to the left, center, or right of the text block. The image can be scaled to one of several presets and the option to add a caption to the image is available.
There are some oddities to using an image in a Basic Text block that make it more complicated than using the Featured Image block. For one, some combinations of settings can make the image or its accompanying text format strangely. The image also does not automatically scale with a Basic Text block, so check how your page looks on a variety of screen sizes.
Video
Basic Text blocks are the way to add a video to your webpage. In order to add a video, you will first need to upload it to Vimeo or YouTube. SiteMasonry does not host video content natively. Once you have your video's URL, you can add the video to your site's media library.
Tables
Tables are a potential way to organize data. They will be automatically formatted by SiteMasonry to match the overall theme of the site. However, they are complicated to use as they do not adjust well for mobile. We recommend that, if you must use a table, you keep the information as streamlined as possible.
Tables are best used sparingly and only for small amounts of data to avoid formatting issues.
Tables contain the ability to have <th> table header and <td> table data cells, which are visible if you look at the source code of the editor. These help organize your data to make sure it is accessible and easy to understand. For more information on formatting table headers, please visit W3 Schools' tutorial for examples of how to format a table based on your data and needs.
| Do | Don't |
|---|---|
| Keep tables simple | Overload your tables |
| Use header rows | Be sloppy with data |
| Find alternatives when needed | Use a table for formatting elements |