Adjust styles for responsive authoring

When creating pages with responsive authoring for different form factors, learn how to change style options to increase the usability of the page at smaller sizes.

始める前に

Role required: ui_builder_admin

このタスクについて

A method of increasing page usability is to tailor components using different styles across breakpoints. There are numerous options for editing styles. In this procedure, edit the margin around the stylized text component and reduce the text size so it uses less space on smaller form factors.

手順

1. Navigate to All > Now Experience Framework > UI Builder.
2. Open an experience to work in or create an experience by selecting Create > Experience.
   See Configure how users interact with your applications in UI Builder for more information on creating experiences.
3. Create a page from scratch with responsive authoring.
   For more information about how to create a page, see Create a page in UI Builder.
4. At the top, check that the desktop responsive authoring icon is selected.
   
5. On the stage, select + Add content.
6. On the Layouts tab, select Single column.
7. Add the stylized text component.
   1. Select the + icon in the center of the column on the stage.
   2. On the Components tab, find and select the Stylized text component.
   3. In the configuration panel, select None - Configure the component manually.
   4. In the configuration panel, on the Configure tab, double-click (or use the keyboard shortcut) in the Text field to select the default text.
   5. Replace the default text by entering Critical Operations Workspace Admin Center.

      

   6. Select Save.
8. Add some space around the stylized text component and center it.
   1. In the content tree, select Stylized text 1.
   2. On the configuration panel, select the Styles tab.
   3. In Spacing, select Margin.
   4. Select Large in the list.

      

   5. In Alignment, select the center icon.

      

   6. Select Save.
   The stage updates automatically, showing the additional white space around the stylized text component and centering it.
9. Select the tablet form factor icon.

   

   The spacing and heading size of the stylized text component looks good at tablet size.

10. Select the mobile form factor icon.

    

    The stylized text component uses a great deal of vertical space at the smaller size.

11. Remove the extra margin space and make the heading smaller just for the mobile form factor.
    1. In the content tree, select Stylized text 1.
    2. On the configuration panel, select the Styles tab.
    3. In Spacing, select Margin.
    4. Select 0 in the list.
    5. Select the Configure tab.
    6. In HTML tab, select H3.
    7. Select Save.
    The stage updates automatically showing that the stylized text component uses less space.
12. Select the tablet and the desktop form factor icons at the top to confirm that no changes were made to the larger form factors.