Envira Gallery and Soliloquy Plugins<\/h3>\n
As mentioned, slideshows are not allowed, including those created with the Envira Gallery or Soliloquy plugins.<\/p>\n
- \n
- Envira Gallery<\/strong> may continue to be used for static image galleries, but it should not be used to create slideshow-style banners.<\/li>\n
- Soliloquy<\/strong> is being phased out. Sites currently using Soliloquy should redesign their slideshow content without it.<\/li>\n<\/ul>\n
\nAllowed Banner Options<\/h2>\n
Cells Plugin Banner Options (Recommended)<\/h3>\n
The Cells plugin includes several pre-designed banner and full-width layout options that are accessible and responsive.<\/p>\n
Using Cells is the preferred method for adding banners because:<\/p>\n
- \n
- Layout and styling are already built to match the SOM theme<\/li>\n
- Responsive behavior is handled automatically<\/li>\n
- No HTML or CSS knowledge needed<\/li>\n<\/ul>\n
The Image Blocks<\/a><\/strong> and Banner Blocks<\/a><\/strong> within Cells are the closest “banner” options.<\/p>\n
If you are new to Cells, review the Getting Started with Cells<\/strong><\/a> documentation before you begin.<\/p>\n
Add an Image to the Featured Content Area<\/h3>\n
The Featured Content area<\/strong><\/a> displays directly below the top navigation. If styled correctly, an image placed here can span the full width of the browser window and function as a banner.<\/p>\n
The Featured Content area only accepts HTML and shortcode<\/strong>. If you’re unfamiliar with HTML, the steps below will show you how to use the editor to generate the HTML you need.<\/p>\n
- \n
- Add the Image to the main content area of the page.<\/li>\n
- Ensure you add meaningful alt text<\/a><\/strong> (required).<\/li>\n
- Click on the image to select it. This will highlight the code so it is easy to find in the next step.<\/li>\n
- Click on the Code<\/strong> tab in the editor to view the html of the page.
\n![\"Screenshot](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/visual-text-tab.png\")
<\/span><\/li>\n- The HTML for the image should already be highlighted (if you followed step #3 above). If not, locate and highlight the whole <img><\/strong> tag.<\/li>\n
- Copy the complete <img><\/strong> HTML code.<\/li>\n
- Paste the HTML into the Featured Content area<\/strong>.<\/li>\n
- Modify the html\n
- \n
- change the width<\/strong> attribute to 100%<\/li>\n
- Remove the height<\/strong> attribute completely. This ensures the banner spans the full width and remains responsive.<\/li>\n<\/ol>\n<\/li>\n
- The final results will look something like this:
\n![\"Screenshot](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/02\/image-in-featured-content.png\")
<\/a><\/span><\/li>\n- Delete the image in the main body content area as it is no longer needed.<\/li>\n
- Save<\/strong> or Update the page.<\/li>\n<\/ol>\n
Examples<\/h4>\n
Below are some examples of banners placed in the Featured Content area.<\/p>\n
\n\n![\"Screenshot](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/02\/teacch-banner-1.png\")
<\/a><\/span><\/p>\n<\/div>\n\n![\"Screenshot](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/03\/flow-cytometry-banner-example.png\")
<\/a><\/p>\n<\/div>\n<\/div>\nAdd an Image to the Main Content Area<\/h3>\n
A wide banner image can also be placed in the main body content area of a page. These images will not span the full width of the browser window and will instead be constrained by the main content area.<\/p>\n
![\"Example](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/03\/banner-example-cardiology.png\")
<\/a><\/span><\/p>\nUsing the Featured Image Field<\/h3>\n
The Featured Image<\/strong> field can also be used to display a banner image below the top navigation. However, this option provides less layout control compared to Cells or images placed in the Featured Content area.<\/p>\n
- \n
- The Featured Image area has a predetermined height. Images may be clipped depending on their dimensions.<\/li>\n
- The amount of clipping varies based on screen size.<\/li>\n
- The image is not fixed which means it will scroll with the page.<\/li>\n<\/ul>\n
To use this option, simply add an image to the Featured Image panel<\/strong>.<\/p>\n
![\"Screenshot](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/02\/featured-image-panel.png\")
<\/span><\/p>\n
\nRecommended Image Size for Banners<\/h2>\n
Choosing the right image size is important for visual quality and performance.<\/p>\n
Note that banner images should not be overly tall. Tall images push the page\u2019s main content down the screen, forcing visitors to scroll before seeing important information.<\/p>\n
A good banner supports the content \u2014 it shouldn’t overwhelm it.<\/p>\n
For Full-Width Banners (Featured Content Area)<\/h3>\n
Because this area spans the full width of the browser window, banner images should be:<\/p>\n
- \n
- 2,000\u20133,000 pixels wide<\/li>\n
- Optimized for web use<\/li>\n
- Ideally under 800 KB<\/li>\n<\/ul>\n
Large enough images ensure clarity on wide desktop monitors, while proper compression prevents slow page load times.<\/p>\n
For Banners in the Main Body Content Area<\/h3>\n
Images placed in the body content do not need to be as wide. Recommended size:<\/p>\n
- \n
- 1,200\u20131,800 pixels wide<\/li>\n
- Optimized for web use<\/li>\n
- Compressed for performance<\/li>\n<\/ul>\n
Uploading overly large images does not improve quality but can slow down page load time.<\/p>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Banners can help highlight important information, promote initiatives, or create strong visual impact at the top of a page. However, banners must be implemented in ways that support accessibility, performance, and long-term maintainability. This page outlines what is allowed and not allowed in the School of Medicine web system. Not Allowed Image Carousels, Sliders, and … Read more<\/a><\/p>\n","protected":false},"author":3206,"featured_media":0,"parent":2212,"menu_order":6,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-15429","page","type-page","status-publish","hentry","odd"],"acf":[],"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/15429","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/users\/3206"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/comments?post=15429"}],"version-history":[{"count":19,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/15429\/revisions"}],"predecessor-version":[{"id":15469,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/15429\/revisions\/15469"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/2212"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/media?parent=15429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Remove the height<\/strong> attribute completely. This ensures the banner spans the full width and remains responsive.<\/li>\n<\/ol>\n<\/li>\n
- Soliloquy<\/strong> is being phased out. Sites currently using Soliloquy should redesign their slideshow content without it.<\/li>\n<\/ul>\n