Hello everyone! Welcome to another InMotion Hosing Video tutorial! My name is Arnel Custodio and today we will be showing you how to use Styles in the new WordPress Full Site Editor.
Styles can be used to change your site’s appearance without having to customize each individual page or post.
You can change typography, color, and layout (depending on the theme). You can also make changes to blocks so that their change is applied globally to your site.
This tutorial uses WordPress version 5.9.1 and the default Twenty Twenty-two theme.
To find Styles, you will need to first log in to your WordPress site. If you’re in the Dashboard, you can go to Appearance and then click on Editor to jump to the Full Site Editor. Or you can go to Themes, and click on Customize. The full site editor can also be accessed by clicking on Visit Site in the top left corner under the site name. Then you can click on Edit Site in the menu.
If you’re in the Dashboard, you can go to Appearance and then click on Editor to jump to the Full Site Editor.
Or you can go to Themes, and click on Customize.
The full site editor can also be accessed by clicking on Visit Site in the top left corner under the site name.
Then you can click on Edit Site in the menu.
Once you’re in the full site editor, go the top right corner and then click on the vertical 3-dot menu.
The drop-down menu will have option for Styles. Click on Styles.
Starting from the top you have the option for Typography, Colors, Layout, and Blocks.
Click on Typography.
Typography allows you to change 2 major elements within your site: Text and Links.
Click on Text. Each option gives you the ability to change the Font Family, Size of the font, Line height, and Appearance of the font.
You can see what’s affected by the change by simply clicking on the size options and observing the site. You can see the text from the post change.
The post is also is a good location to see how changing the line height will affect your text.
You can also change the Appearance of the font and observe how it changes the text.
These changes affect your site posts, pages, and other areas primarily set as text.
When you make changes to your text fonts, make sure that you’re not losing the readability for your text.
Using a font that’s not suited for reading can cause issues for your visitors.
So make sure to exercise caution when making changes to your text.
The other element that you can change in Typography is the Link text.
In our example site, you can see the effect of changing the font size on the menu and the Post title.
In many cases, you may want to make sure that your changes are applied only to certain portions of the site.
The next major element that Styles allows you to change is Colors.
When look at the Colors menu under Styles you see Palette and Elements.
You can change the colors as solids or gradients.
The Palette includes the colors that are assigned from the theme. Generally, these colors are assigned to certain areas.
You can see these areas when you’re editing the Palette colors. By clicking on the 3 dot menu you will see a list,
or you can hover each color to see what they are assigned to.
Each color can be precisely assigned using using RGB, HSL, or HEX values.
When you click on a color, you can see the color table and the option to copy or select the value type you want to use.
You can also change the colors for Background, Text, and Links. Remember that these changes would apply to your entire site, not just one page.
Layout is the next option in styles after Colors. Currently, the only thing you can change in Layout through Styles is the Padding.
You can elect to change a single side of padding, or the padding all around the site.
The final option that you can change with Styles is Blocks. Here you can customize the appearance of specific blocks. You will see a list of blocks.
To see what you can change, click on the Paragraph block.
You will see that you can change the Typography and the Colors specific to that block.
Keep in mind that your changes apply to existing as well new blocks added to the site.
If you make any changes to a Style, make sure that you click on the SAVE button in the top right corner.
Thanks for watching our video tutorial on changing Styles in the WordPress Full Site Editor.
If you liked the video, leave us a comment, then make sure to give us a thumbs up below and subscribe to our channel.
Thanks again for watching and have a great day!