Table of Contents
Customise text style for desktop and mobile devices differently
We continually work on our latest multipurpose Citadela WordPress theme and its plugins. Lately, we have added a great feature for WordPress Gutenberg users. The new block helps create an eye-catching section. Get the update for free and create a perfect website.
Typography is a crucial component when building any website. Font type, size, and spacing determine readability. Well-looking and professional website does not distract visitors from reading. We would recommend going for some standard font.
Responsive Text block allows you to customize a text block in a different way for desktop and mobile devices. There are many settings that you have under control. They are separated for desktop and mobile device displays. You can set up mobile width breakpoint, text-align, font size, color, spacing, and others. Thanks to the full library of Google Fonts can be displayed fancy text.
Responsive Text block is available in Page, Post, or Citadela Special Pages. You can use this Responsive Text block as a page title. Hide predefined page title through Document setting in the Gutenberg Inspector area.
Responsive Text block has these options:
- Google Font for displayed text
- select HTML tag for text, available is paragraph tag and heading tags 1 – 6
- different text align for desktop and mobile screen
- different font size in different units for desktop and mobile screen
- different line height for desktop and mobile screen
- letter spacing for text
- disable default margins to make the custom spacing around text
- text and background-colour
- italic font style
- underline and line-through decoration for text
Set up website typography
Usually, one of the first steps after WordPress and theme installation is customization. You can choose from many Google Fonts. Typography settings in WordPress are under the Appearance → Customize → Appearance → Typography. Choose Titles and Body Text font. You can also select font thickness for Titles. Keep in mind that the whole website should be a pleasant environment to keep visitors as long as possible. Therefore some standards need to be followed.
You don’t want to go for some extravagant fonts for body text. WordPress theme font size is designed to be readable through the whole website, each section, and subpage.
Fancy text area
However, often you would like to create a special eye-catching section. How to create some beautiful and fancy areas with a trendy font? That is why we created a Responsive Text block. It is easy to operate.
Responsive Text block brings a perfect way how to play with typography. You can customize only one title or text with a specific font, size, and spacing. Even more, you can set up this block in a different way for desktop and mobile devices. Ensure that text looks perfect and optimize it on any device. In combination with other blocks like Cluster, it uncovers more design potential for your website.
Add this block to the selected subpage. Like standard blocks, it has its menu plus settings on the right side in the Gutenberg Inspector. You can use this block on standard Page, Post or even Special Pages along with Citadela Directory Plugin.
This block allows you to use an HTML tag so you can set up a title. You can decide for the font-size unit from px, em, vw and then set up the font size, line height, and spacing. Play around and select the perfect Goole Font. You can see right away how your text looks. Text alignment and colour settings are also available for this block.
Once you indicate Use responsive options, you can set important parameters for desktop and mobile separately. Text alignment, font size unit, font size, line height, and letter spacing. Plus you have under control mobile width breakpoint size.
All AitThemes blocks for Gutenberg editor are part of the Citadela Blocks plugin. This plugin is a crucial component to great looking website design. Altogether using a standard WordPress Gutenberg editor, you can build a lightweight & fast-running website. Please download the latest Citadela Blocks plugin.