Edit

Customize webpages with design studio page editor

  • Article

After adding the webpages you need and managing their hierarchy in the site map, you can add various components. The WYSIWYG design studio page editor is part of the Pages workspace. Use the editor to add and edit the components you need within the canvas.

Using the editor

To use the editor:

  1. Open the design studio to edit the content and components of the portal.

  2. Go to the Pages workspace.

  3. Select the page where you'd like to add the component or section.

  4. To add a section, hover over any editable section area, and then select the plus sign (+). You can then choose between six section layout options.

    The six section layout options.

  5. To add a component, hover over the section where you'd like to place the component, and then select +. You can then choose between the available components.

    The add component menu options.

    Note

    You can also create and use web templates as components in web pages.
    More information: How to: Create a web template component

    You can drag and drop sections, columns, and components to rearrange them on a page.

    To drag an object, left-click and hold down the mouse button, or press the space bar while it's focused. Next, drag the object to the target area using the mouse or keyboard arrows. Drop zones appear to indicate where the object can be placed. Once you reach the drop zone, release the left mouse button or press the space bar to drop the object.

    Note

    • Some components are not draggable, including the header, footer, and some nested components (links within a text component, for example).
    • Drag and drop functionality is not supported for sections that have the flex-direction CSS property set to row-reverse.

  6. To delete a component, choose the component on the canvas and then select Delete.

For a more immersive editing experience, you can use the full-screen editing mode by selecting the double arrow icon in the upper-right corner of the editor. You can also switch to Visual Studio Code, zoom in (+), zoom out (-), or Reset the page design canvas view back to 100%.

Controls for immersive editing options, including zoom in, zoom out, and reset.

Edit components

All sections and components allow for in-context editing. You can edit any section or component directly from the canvas.

Select the paintbrush icon to adjust the styles of a section or component. Available styles are based on the component's type. Currently, sections, text, images, and video are supported.

Undo/redo

In the Pages workspace, undo/redo buttons display in the top left of the canvas. The undo button is enabled when you make a change. The redo button is enabled when you undo an action.

The Pages workspace with the undo and redo buttons displayed.

To reverse an action, select the Undo button.

To reverse an undo, select the Redo button.

Undo and redo only support changes that you make in the Pages workspace. Your action history clears when you refresh the browser page or navigate to another workspace inside the design studio.

Limitations

Syncing, saving, previewing, zooming, expanding/reducing the workspace, navigating between workspaces and pages, and uploading media and CSS files aren't supported.

Note

Edit code components

Code component properties are editable inside of the Pages workspace.

To edit a code component:

  1. Select the component and choose Edit code component from the toolbar.

  2. Set properties for your code component.

  3. Select Done.

For more information on adding code components to forms and pages, see Use code components in Power Pages.

See also