Embedding
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