Module Spotlight - Full - Content

This uses the Content Width as the max-width for the background, instead of going super widescreen. Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sit voluptatum earum a amet, aut dignissimos architecto consequuntur odio minima ab eius provident rerum quo quaerat. Sunt dolorum esse vero.

Go Shop Long Link Maybe, Long Link 2

Module Spotlight - Full Height

Follow the checklist to reveal the Copy Module Button.

keyboard_arrow_down Show Instructions Checklist

Requires 3 Images
Download the Module Spotlight - Full open_in_new Template, and use it to create all three images. Export all images at once using the template instructions.
Select File > Export > Artboards to Files.

Browse... to Images Destination Folder.

Enter a unique name in File Name Prefix: field, ie. 'eaton-spotlight' All images will start with this name, have the dimensions added, and whether it is foreground, mobile, desktop, or background, ex. "eaton-spotlight-480x640-fgm.png"

Select Artboard Content Only

Un-check Export Selected Artboards

Un-check Include Background in Export.

File Type is PNG-24

Check Export Options

Only check Transparency, the rest remain un-checked.
- You'll end up with these three image sizes:
- Background Image: 2560px × 640px
- Foreground Image - Mobile: 480px × 640px
- Foreground Image - Desktop: 800px × 640px
Head to Squooshopen_in_new and convert those images to WEBP
- Compress: WebP
- Effort: 6
- Quality: 95
Upload the files to the DAMopen_in_new
- Search for your client/store folder on the left
Copy the Module Code
Paste the code in the Code Editor of your choice. Then, using the image URL's from the DAM overwrite the placeholder links in the code.
Swap out the headline, copy, and button link(s). By default, there are two, but you may only need one. Remove the second one if necessary.
Finished! Copy the edited code into a widget or static page, and publish to Preview.