The Custom Container block is used instead of the core cover block to offer more options when it comes to background color and image settings. Certain settings have been pre-defined, but can be adjusted as necessary. These settings include:
- background image selection – choose a file from the media library or upload a new one
- image blend mode – how the image will blend in with the background color, reference link
- ‘cover’ size – if the image is supposed to fill the full width of the container
- Image X & Y positioning – percentage based, where the image will sit within the container. X is left to right and Y is top to bottom. Example a 0% 0% image will be the top left, 50% 50% is centered and 0% 100% is bottom right.
- Position from Right Toggle – to be used if the image is positioned along the right edge of the container. Negative numbers will cut the image off on the right side (badge example).
- Position from Bottom Toggle – to be used if the image is positioned along the bottom edge of the container. Negative numbers will cut the image off on the right side (badge example).
- background color – these colors directly correspond to those within the design. This does not accept custom colors.
- White
- Navy
- Brand Gold
- Darker Gold (used in a few scenarios to help with the image blending)
- Gold Gradient
- background color opacity – should be used in conjunction with all other settings to as desired to blend both the image and color.
The custom container allows for the following blocks to be added inside. These reflect the variations of content found within designs, plus a few more ‘content’ blocks that were also applicable.
- Paragraph
- Heading
- Image
- Columns
- Group
- Media & Text
- Tabs (custom)
- Card Container (custom, not done)
- Salesforce Testimonial (custom, not done)
- Dynamic Media & Text (custom, not done)
- Image Grid (custom, not done)
All blocks inside nested within the Custom Container should have width settings applied by the user, but note that all content will max out at the alignwide size (xx-whatever this is) even if the Full-width size is selected.
Note the follow examples make use of the spacer block only for sample viewing purposes. WDG does not recommend the use of the spacer block.
