Pages

Design Visually Appealing Content

Creating a Page 

What is a Page 

The Page content type is used for static content that can be (but not required to be) linked into the main navigation bar. This is one of the most used content types and can be very flexible.
 

Example of a complex page

To create a Basic Page:

  1. Click Content on the second panel.
  2. Click Add content button.

  3. Select Page from the list of content types.

    Example of the add page menu selected

  4. Title [required] - The text entered in the title field will be included in the breadcrumbs and will become the page's URL unless otherwise configured.

    Example of the page title field outlined

  5. Subtitle [recommended] Add a subtitle. 

    Example of the page subtitle field outlined

  6. Select Who Will Review This submission? [required] For Sites with site access enabled Only

    Example of the page page who will review this submission section outlined
  7. Search Engine Optimization (SEO) 
    • Target Keyword: The search term or phrase people will Google to find this web page.

    • Meta Description:  [required] The short summary displayed underneath the URL in Google’s search results.

      Example of the page SEO fields outlined
  8. Select Search Listing Options [recommended] - Once you have made your selections, the categories will appear as part of the faceted search. This means that site visitors can easily filter to your content. 
    1. ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​Areas & Page Category: Used as a page search results.

    2. Page Tag: Adds topics to your page. 

      To have additional taxonomy terms added, please contact your Site Administrator or fill out a Support Form. 

      Example of the page search listing option field outlined
  9. Add the desired component and learn more about the available options.

  10. Click Save to publish the page.

    Example of the page save field outlined

     

 

  1. Go to your page. 
  2. Click the edit link at the top of the page.
  3. Example of selecting the edit button on a page

  4. Expand the Menu Settings in the Additional Options section.

    Example of expanding the menu settings

  5. Toggle the Provide a menu link.

    Example of the provide a menu link toggle outlined

  6. Select the Parent Link dropdown menu. If this is not selected, the page will appear on the top navigation. 

    Example of the parent link menu dropdown
  7. Select the appropriate Parent page in the correct page structure location.

  8. Scroll to the bottom of the page and click Save.

    Example of the page save field outlined

Content Layout

Within Pages (Layout Paragraphs) there are two types of containers to hold your content. You can think of this like tables in software such as Microsoft Word or Excel. First you need to define the number of columns in your row which Pages (Layout Paragraphs) refers to as Sections. You can have up to four columns in a row. Once you have defined the number columns you would like in a Section, you can add a component(s) to each of your columns. A component can hold various types of content, such as images or text. An easy way to think of a component is a unique container that holds a piece(s) of content. 

Section

A section is the primary way to layout your content in a visually appealing way. The section is the foundation on which all your components will be inserted. You can have as many components as you like on your page. Typically a one column section at the top of the page with breadcrumbs and the page title is used most commonly. The section below would then be two columns 30% and 70% and hold your main menu navigation in the left column.

Example of a Section in a Section

 

 

What is a section?

Using sections is an effective way to enhance the visual appeal of your content. When creating or editing content  in the web platform, a section refers to a group of fields that are logically grouped together. This grouping improves content editing usability by organizing related fields into manageable parts. Sections also help organize content visually; for example, a page might have a header section, a main content section, a sidebar section, and a footer section. These sections aid in structuring content and enhancing the user experience.

  1. Log in to your site.

  2. Click the edit link at the top of the page

    Example of selecting the edit button on a page

  3. Click the Add Section button. 

    Example of the add a section button

  4. Select the layout with the appropriate number of columns. 

    Example of a column select menu

Styles 

  1. Toggle to the Styles tab. 

    Example of the Styles option selected

  2. Select the desired background color to highlight components: None (default), Santa Barbara Sand, or Venice Canal.
    Note: Applies only to One Column Sections.  
    Note: This setting is only available for site administrators and should be used sparingly. It is recommended to apply it only once per page to emphasize key information.

    Example of background color selection options

  3. Select Columns to place your section horizontally. This should be used only with the Icon component.
    Note: Applies only to One Column Sections. 

    Example of a display columns check box
  4. Select the amount of additional space you would like above the component. 

  5. Select the amount of additional space you would like below the component. 
    Note: By default, there is no space below a component.
     

    Example of the padding select menu for top and bottom margin

Save

  1. Scroll to the top of the page and click Save.
    Note: You must click save after you add each section – this step is critical.


 

  1. Example of the page save field outlined

 

  1. Click Edit content at the top of the page.

    Example of selecting the edit button on a page
  2. Hover your mouse over the section you would like to move. 
  3. You will see the section menu appear on the right side, click on the 6 dots.
    1. Example of a 6 dots selected
  4. Drag the section to the new location.
  5. Scroll to the top of the page and click Save.
  6. Example of the page save field outlined


     

  • Click Edit content at the top of the page.

    Example of selecting the edit button on a page
  • Hover your mouse over the section.

  • You will see the section menu appear on the right side, click the Pencil icon.  

    Example of the pencil button elected

  • Select the desired Column layout.

    Example of a column select menu
  • Depending on your selection, you may be presented with Move Orphaned Items. You are able to select where you want to place the existing content.

  • Scroll to the bottom of the page and click Save.

    Example of the page save field outlined

Copying a Section

  1. When you copy a section, all the content is copied as well.

  2. Click Edit content at the top of the page.

    Example of selecting the edit button on a page
  3. Hover your mouse over the section.

  4. Click the duplicate button.

    Example of the duplicate button selected
  5. Your copied section will appear below the current section.

  6. Scroll to the top of the page and click Save.

    Example of the page save field outlined

 

Deleting a Section

  • Click Edit content at the top of the page.
  • Example of selecting the edit button on a page
  • Hover your mouse over the section.

  • Click on the trash can icon.

    Example of trash can icon selected
  • Confirm you want to delete the section.

  • Scroll to the top of the page and click Save.

    Example of the page save field outlined

Note: The ability to add background color can only be applied to a one column section. This feature is also restricted to those with Site Administrator access. 

To utilize this feature on your page:

  1. Log in to your site.

  2. Click the edit link at the top of the page

    Example of selecting the edit button on a page

  3. Click the Add Section button. 

    Example of the add a section button

  4. Select the layout with the appropriate number of columns. 

    Example of a column select menu

Styles 

  1. Toggle to the Styles tab. 

    Example of the Styles option selected

  2. Select the desired background color to highlight components: None (default), Santa Barbara Sand, or Venice Canal.
    Note: Applies only to One Column Sections.  
    Note: This setting is only available for site owners and should be used sparingly. It is recommended to apply it only once per page to emphasize key information.

    Example of background color selection options

Save

  1. Scroll to the top of the page and click Save.

    Example of the page save field outlined

 

 

 

  1. Select "Add Section"
  2. Select "One Column" under "Choose a Layout"
  3. Expand "Layout Options"
  4. Expand "Layout"
  5. Select the background color. (None, Santa Barbara Sand or Venice Canal) 
    Note: default background color of a One Column section is None. 
  6. Click Save

Now you will have a background color behind whatever component you place in this section. When using the Santa Barbara Sand background color text will appear white. When using the Venice Canal background color, the text will appear black. 

Components

You can use many types of components to customize your content. The instructions  on how to create a component provide an example of what each component looks like, followed by details about how to create and format a components. While UCLA Health has many different themes or looks to its sites, the instructions below are the same regardless of the theme used on your site. Branding and formatting will be updated based on the theme in which you create the content.

Once you have created your components, you can easily drag and move them to the new location. It is simple to copy and delete components in Pages  Learn more about how to use these features see bottom of the page. 

See the full list of Components 

 

Managing Components That Are Already Created 

  • Click Edit content at the top of the page.

    Example of selecting the edit button on a page
  • Hover your mouse over the component you would like to move. 

  • You will see the component menu appear on the right side, click on the 6 dots.

    Example of the 6 dot menu selected
  • Drag the component to the new location.

  • Scroll to the bottom of the page and click Save.

    Example of the page save field outlined

Copying a Component

  1. Click Edit content at the top of the page.

    Example of selecting the edit button on a page
  2. Hover your mouse over the component.

  3. Click the duplicate button.

    Example of the component duplicate option
  4. Your copied component will appear below the current component.

  5. Scroll to the top of the page and click Save

 

Deleting a Component

  1. Click Edit content at the top of the page.
  2. Example of selecting the edit button on a page
  3. Hover your mouse over the component.

  4. Click on the trash can icon.

    Example of the delete component selected
  5. Confirm you want to delete the component.
  6.  Scroll to the top of the page and click Save.

If you would like to reuse a component on multiple pages, the instructions below review the steps. For users who previously used Layout Builder, this was called a Custom Reusable Block.

Creating a Reusable Component

  1. Log in to your site.

  2. Hover your mouse over Content.

  3. Click Paragraphs.

  4. Click the + Add library item

  5. Add the Name of your reusable component. 
    Note: This is the name you will need each time you want to place the block.

  6. Select the component that you want to use from the dropdown menu.

  7. Complete the necessary fields for your component.

  8. Scroll to the bottom of the page and click Save.
     

Placing a Reusable Component 

  1. Go to the page where you want to place the component.

  2. Click Edit content.

  3.  Click the plus icon where you want to place the component.

  4. Select From Library, from the menu.

    Choosing a library component

  5. Start typing the name that you gave to the content you created and select the applicable Reusable component.

    Add library component

  6. Click Save.

  7. Scroll to the bottom of the page and click Save.