How to create Responsive Text?
In WYSIWYG Web Builder, there are 2 ways to make the text object responsive:
• Enable Responsive Fonts in the Text object
• Use responsive styles in the Style Manager
If you are not familiar with breakpoints then please read these tutorials first:
Introduction to Responsive Web Design - The Basics
Responsive Web Design in WYSIWYG Web Builder
Enable Responsive Fonts
The option 'Enable Responsive Fonts' can be found in the properties of the text object. When this option is enabled, then the text object can have different font sizes in breakpoints. This can be useful if you need a larger font for smaller screens. Each breakpoint can have a different text size or even a completely different font!
Responsive Styles in the Style Manager
Another way to to use a different font, text size or color in breakpoints in by using styles. Using this method makes it possible to have different fonts in the same text object and make the text responsive at the same time.
First make sure 'Enable Responsive Fonts' is OFF, otherwise you cannot use styles on text.
To add a breakpoint to Styles, select 'Add breakpoint' in the Breakpoints drop down menu. You can use 'Manage Breakpoints' to add, edit or remove breakpoints. To switch to another breakpoint to edit the properties, select the value in the drop down menu or select 'Default' to go to the default properties.
- When this option is enabled, you can only use one font-family and font-size for the entire text object!
- The use of styles in combination with this option is not supported because the responsive fonts will be applied to the text directly and that will overwrite the style. However the Style Manager also supports breakpoints, so if you wish to use styles then do not enable responsive fonts, but use responsive styles instead.
- Make sure the 'Output Format' is either set to 'Default' mode or 'Include line-height in text styles' otherwise the text will not float.
Enable Responsive Fonts in the text properties
Switch to the default view and set the default font.
Switch to another breakpoint and select a different fonts size.
Because styles are global (they apply to the entire project, instead of just one page) they have their own breakpoints.
However if you use responsive styles then make sure have the same breakpoint values (e.g., 768, 480, 320) as your pages, otherwise you may not get the expected results.
After you have added the breakpoints to the style, you can apply it to the text.