3. Images/videos can be displayed next to the content with a split of either 25/75 (3 column, 9 column), 33/67 (4 column, 8 column), 42/58 (5 column, 7 column) and 50/50 (6 column, 6 column). Until Marketo forms become completely responsive (coming in 2022) they should always be set to the 50/50 split.

4. You can position the image/form/video to the left or to the right of the content.

5. You can change the image aspect ratio to landscape (16:9) or portrait (3:4). It cannot be changed for videos/forms.

6. The title, image and CTA button are clickable with the URL added to the URL field. *The image also has the option to open in a light box instead of linking to the CTA URL.

7. You have two options for the CTA button style: Primary or Secondary.

See Mixed Media Examples

Component elements

Please note all elements with an asterisk next to the element title are required.

Example:

Enter the title. Please note the title is limited to 70 characters maximum. The brand style for the title is the first word should be capitalized and all other words, unless proper names, should be lower case.

Select the title color. Options are Green (default) or Black.

Enter the body copy. When adding body copy please note:

If copying and pasting from another source, use the paste as plain text button (first icon highlighted below) to ensure you do not insert any styling that will interfere with any existing/brand styling.
If you forget step one, click the select all button (second icon highlighted below) and then the remove format button (third icon highlighted below).

Choose the content display split. This determines the size of the image/video/form next to the content. Options are 25% (default), 33%, 42% and 50%. Left or right placement is determined in another selection a few steps further below.

To add the image, click the select button. The library selection box will pop up. *Please note if you want to use a video or form instead of an image, you don't need to remove the placeholder image. The options to add the video/form are further down in the authoring template.

Find your image in the library, select it and click OK.

You will see the image is now loaded into the component. To change the image, click select again and follow the same steps.

Click the expand arrow next to Image Attributes and add the Image Alternate Text.

Select the image ratio size. 16:9 (landscape) or 3:4 (portrait). *The default setting is 16:9.

Select the placement of the image/video/form next to the content. The options are Right (default) and Left.

Enter the image caption.

Select the caption style. The options are Dark (default) and Light. See examples here.

Select if you want to open the image in a lightbox. The options are Yes and No (default). *Please note, if you choose Yes the lightbox option will override the image linking to the CTA URL if one is provided. See example of image lightbox here.

If you want to feature a video next to the content instead of an image, add the Brightcove video embed code in the field. When copying from Brightcove, please ensure to select the advanced embed code set to responsive sizing (screenshot below). See example of video option here.

If you want to have a Marketo form next to the content instead of an image, add the form ID. See example of Marketo form here.

Enter the CTA button text. Please note the CTA text is limited to 18 characters maximum.

Enter the CTA URL. Please use the following URL formats:

1. To link to an external page: Always begin with http(s):// + URL. Example. To add a link to element14 it would be https://www.element14.com/community/welcome

2. To link to an internal page: Use the following format: /wps/portal/ + page url. Example. To add a link to this page https://www.avnet.com/wps/portal/us/solutions/iot/ you would use /wps/portal/us/solutions/iot/

*Make sure to remove the word “my” that is in front of the word “portal" if you are copying the URL from pre-prod

3. To link to a commerce page: Begin the URL from the /shop all the way to the end of the URL. Example. To link to this page https://www.avnet.com/shop/us/c/amplifiers/ you would use /shop/us/c/amplifiers/

Select the CTA target. The options are self (default): opens the link in the same tab, new: opens the link in a new tab or lightbox: opens in a lightbox. The best practice is to use self if linking to a page within your site and new when linking to an external site. Lightbox is best used for displaying videos/diagrams.

Click the drop down to select the CTA button style. The options are Primary (default) or Secondary.

CTA button style examples:

Save and Close your changes.

Complementary Content

${loading}