User Guide Embedding

Overview

Use this tool to:

Insert or paste custom HTML code generated from external web service providers.

Related Tools:

Interface

The following panels will describe what can be accomplished in each section of this tool:

Content

The following controls are available in the Content section:

Embed Code: A code editor field to insert or paste custom HTML embed code into your page

Style

Use the tools in the Style section to:

1. Width (W): Set the width of the embedded content
2. Height (H): Set the height of the embedded content
3. Convert Unit Button: Swap units from pixels to percentages, or vice versa
4. Scale Proportionally: When checked, this option preserves the relative proportions of the original object while increasing or decreasing the size of the object
5. Fill Width: When checked, this option will allow the embedded object to fill the entire width of the page or container it is in
6. Alignment Buttons: Allow the embedded content to be justified to the left, center, or right within the current container, or reset to the default setting

Preview

The Preview section gives you an interactive view of the rendered panel group.

Instructions

Add an Embedded Object

To add a new embedded object:

Place your cursor in the editor where you want the embedded content to go.
Open the Add panel.
Select Embed.
In the Content panel, highlight the words "[Embed Code]" and replace them with the pasted embed HTML for the object you wish to insert.
Select Save Changes.

Adjust Height or Width of an Embedded Object

To adjust the height or width of an embedded object:

Once an Embedded Object has been added (see Add an Embedded Object above), click the Style panel.
To switch to percentages, click the Convert Unit button. You may also switch back to pixels with the same button. You should convert your units from pixels to percentages or vice versa before you adjust the values in the width and height fields.
**Note that the maximum value for percentage is 100.
If working with percentages, enter the height and/or width percentage out of 100 to adjust the embed area.
If working with pixels, enter the desired height and/or width in pixels.
Optional:
- Check the Scale Proportionally option to preserve the relative proportions of the original object (as compared to the content that surrounds it) while increasing or decreasing the size of the object.
- Or, check the Fill Width option to allow the embedded object to fill the entire width of the page or container it is in.

Resources

Examples

Video Embedded with "Scale Proportionally" enabled

Nulla facilisi. Integer ullamcorper urna vitae magna cursus rutrum. Curabitur at nisi sit amet arcu venenatis dictum sit amet ac leo. Cras non massa ut dui faucibus fringilla. Mauris euismod congue odio, quis vehicula risus pharetra quis. Proin at congue mi. Ut mollis interdum augue, vitae volutpat arcu placerat sagittis. Phasellus id sem vel ex tempus congue. Aenean gravida vulputate diam placerat commodo. Cras tincidunt turpis non neque rhoncus, et pretium diam condimentum. Mauris vulputate, tortor vel dapibus tincidunt, velit tortor hendrerit massa, volutpat mattis dui diam eu odio. Nam pulvinar nunc sed gravida rhoncus.

Mauris auctor fringilla sapien nec rutrum. Nam rhoncus dui vitae ultricies euismod. Curabitur tincidunt dictum lorem quis ultricies. Fusce interdum orci sed diam tincidunt blandit. Donec nunc felis, gravida a viverra at, blandit vel eros. Nulla et mi et felis aliquet dignissim. Fusce dictum ligula eu orci ultrices vulputate. Mauris malesuada dictum dictum. Duis malesuada erat id lacus cursus vehicula. Cras quis mauris sagittis, consectetur orci in, porttitor libero. Donec scelerisque at felis ut euismod. Curabitur volutpat eget dolor quis tincidunt.

Video Embedded with "Fill Width" enabled

Design Considerations/Best Practices

If you will be embedding multiple items, such as a series of videos, on a single page, you may wish to first add a panel group (Accordions, Expanders, or Tabs) to provide an easy method to navigate the multiple embedded items without significant scrolling.

Legacy Comparison

While the option to add embed code was available in the legacy version of the Design Tools sidebar, this version adds the following features:

Ability to convert unit from pixels to percentages and vice versa

Legacy Design Tools Sidebar

New Design Tools Sidebar

embed option in Legacy DesignPLUS Sidebar

embed option style options in New DesignPLUS Sidebar