Responsive Text block: customize text style differently

Author: Categories: WP Tutorials
Updated: July 23, 2020
Responsive Text block: customize text style differently

Customise text style for desktop and mobile devices differently

We continually work on our latest multipurpose Citadela WordPress theme and its plugins. Lately, we added a great feature for WordPress Gutenberg users. 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.

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. So how to create some beautiful and fancy area with a trendy font? That is why we created a Responsive Text block. It is easy to operate.

Responsive Text block intro

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 on 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 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.

Responsive Text block admin settings

Responsive setting

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 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. Now all active Full and Lifetime members have full access to upgrades. This new feature is available since version 1.6.0 Please download the latest Citadela Blocks plugin.