{"id":225,"date":"2024-01-03T20:06:02","date_gmt":"2024-01-03T20:06:02","guid":{"rendered":"https:\/\/www.med.unc.edu\/webguide\/cells\/?page_id=225"},"modified":"2025-04-29T12:50:19","modified_gmt":"2025-04-29T12:50:19","slug":"content-boxes","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/image-boxes\/content-boxes\/","title":{"rendered":"Content Boxes"},"content":{"rendered":"<h2>Creating A Content Box<\/h2>\n<p>Many fields are self explanatory and will not be addressed in this documentation. This documentation will focus on tips, best practices and explanation of fields that generally need some clarification.<\/p>\n<ol>\n<li><a href=\"https:\/\/www.med.unc.edu\/webguide\/cells\/general-usage\/pre-asses\/\">Determine where the Cell will be used<\/a>.<\/li>\n<li>In the Dashboard, select <strong>Cells<\/strong> in either the top or left-hand navigation.\n<ul>\n<li>If you do not see this option, then the <a href=\"https:\/\/www.med.unc.edu\/webguide\/cells\/general-usage#activate\"><strong>UNCSOM Cells<\/strong> plugin needs to be activated<\/a>.<\/li>\n<\/ul>\n<\/li>\n<li>Select the <strong>Add New<\/strong> button.<\/li>\n<li><strong>Cell Name:<\/strong> provide a descriptive name so that site editors understand the purpose or placement of the cell. This field does not display anywhere other than in the Dashboard where it lists all Cells for a website.<\/li>\n<li><strong>Layout:<\/strong> Repeatable Boxes<\/li>\n<li><strong>Box Category:<\/strong> Image Boxes<\/li>\n<li><strong>Box Style:<\/strong> Content Boxes<\/li>\n<li>Define the base settings\n<ol>\n<li><strong>Include Image Padding:\u00a0<\/strong> adds padding between the images and the edge of the box.<\/li>\n<li><strong>Include Link (Global):<\/strong> selecting <strong>Yes<\/strong> will provide you with the choice of adding an optional link per box.<\/li>\n<li><strong>Column Layout:<\/strong>\u00a0choose the number of columns in which the icon boxes will be arranged.\n<ul>\n<li>The\u00a0<strong>four column layout<\/strong>\u00a0only works on pages\u00a0<strong>without<\/strong>\u00a0left-hand navigation (e.g.: a web site\u2019s home page). This is to prevent the content from getting too squished. Look at the examples to see what it looks like on a page with and without left-hand navigation.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<li>For each box:\n<ol>\n<li>Select the <strong>Add New Box<\/strong> button.<\/li>\n<li><strong>Image:<\/strong> Upload an image. This option only appears if you chose to include images in the base settings. <strong>Note<\/strong>: parts of the image may appear cropped due to the <a href=\"https:\/\/www.med.unc.edu\/webguide\/cells\/general-usage\/responsive-design\/\">responsive design<\/a> of the cell.<\/li>\n<li><strong>Image Alt Text:<\/strong> this should be a short description about the appearance or function of an image. It is<strong>\u00a0required for all images that provide meaningful information<\/strong>. View our <a href=\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/alt-text\/\">accessibility documentation<\/a> for more information.<\/li>\n<li><strong>Include Link:<\/strong> include the url that you wish the box to link to. This option only appears if you chose to <strong>Include Link (Global)<\/strong> option in the base settings.\u00a0It is strongly recommended to either link all boxes or none at all, to ensure a consistent user experience. In cases where both linking and non-linking boxes are present, a link icon will appear in the upper right-hand corner, indicating which boxes have links. This practice promotes accessibility by clearly distinguishing between linked and non-linked content.<\/li>\n<li><strong>Use Rich Text Editor:<\/strong> enabling this option will provide a different editor that allows you to style text (bold, italic), create lists and add links.<\/li>\n<\/ol>\n<\/li>\n<li>Click the <strong>Create Cell<\/strong> button.<\/li>\n<li>If you&#8217;re ready, you can <a href=\"https:\/\/www.med.unc.edu\/webguide\/cells\/general-usage\/using-a-cell\/\">display the Cell<\/a> on your website.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h2>Using the &#8220;Original Size&#8221; Setting<\/h2>\n<p>The following video covers the different image aspect ratio options available in Content Boxes. It assumes you already have a general understanding of how Cell placement and responsive design impact a Cell\u2019s appearance, as well as why image clipping can occur. If you\u2019re not familiar with these concepts, we recommend watching our <a href=\"https:\/\/www.med.unc.edu\/webguide\/cells\/general-usage\/responsive-design\/\">Responsive Design<\/a> video first.<\/p>\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" src=\"https:\/\/uncch.hosted.panopto.com\/Panopto\/Pages\/Embed.aspx?id=1718fbce-800d-4bbf-8539-b2ce00ce728b&#038;autoplay=false&#038;offerviewer=true&#038;showtitle=false&#038;showbrand=false&#038;captions=true&#038;start=0&#038;interactivity=all\" height=\"506\" width=\"900\" style=\"border: 1px solid #464646;\" 0=\"allowfullscreen\" allow=\"autoplay\" aria-label=\"Panopto Embedded Video Player\" aria-description=\"Using the Original Size Setting in Cell&#x27;s Content Boxes\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating A Content Box Many fields are self explanatory and will not be addressed in this documentation. This documentation will focus on tips, best practices and explanation of fields that generally need some clarification. Determine where the Cell will be used. In the Dashboard, select Cells in either the top or left-hand navigation. If you &hellip; <a href=\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/image-boxes\/content-boxes\/\" aria-label=\"Read more about Content Boxes\">Read more<\/a><\/p>\n","protected":false},"author":1369,"featured_media":0,"parent":30,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-225","page","type-page","status-publish","hentry","odd"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Content Boxes - Cells Plugin Documentation<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Content Boxes - Cells Plugin Documentation\" \/>\n<meta property=\"og:description\" content=\"Creating A Content Box Many fields are self explanatory and will not be addressed in this documentation. This documentation will focus on tips, best practices and explanation of fields that generally need some clarification. Determine where the Cell will be used. In the Dashboard, select Cells in either the top or left-hand navigation. If you &hellip; Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/image-boxes\/content-boxes\/\" \/>\n<meta property=\"og:site_name\" content=\"Cells Plugin Documentation\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-29T12:50:19+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/image-boxes\/content-boxes\/\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/image-boxes\/content-boxes\/\",\"name\":\"Content Boxes - Cells Plugin Documentation\",\"isPartOf\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/#website\"},\"datePublished\":\"2024-01-03T20:06:02+00:00\",\"dateModified\":\"2025-04-29T12:50:19+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/image-boxes\/content-boxes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/image-boxes\/content-boxes\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/image-boxes\/content-boxes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Repeatable Boxes\",\"item\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Image Boxes\",\"item\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/image-boxes\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Content Boxes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/#website\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/\",\"name\":\"Cells Plugin Documentation\",\"description\":\"School of Medicine IT Web Guide\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Content Boxes - Cells Plugin Documentation","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Content Boxes - Cells Plugin Documentation","og_description":"Creating A Content Box Many fields are self explanatory and will not be addressed in this documentation. This documentation will focus on tips, best practices and explanation of fields that generally need some clarification. Determine where the Cell will be used. In the Dashboard, select Cells in either the top or left-hand navigation. If you &hellip; Read more","og_url":"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/image-boxes\/content-boxes\/","og_site_name":"Cells Plugin Documentation","article_modified_time":"2025-04-29T12:50:19+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/image-boxes\/content-boxes\/","url":"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/image-boxes\/content-boxes\/","name":"Content Boxes - Cells Plugin Documentation","isPartOf":{"@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/#website"},"datePublished":"2024-01-03T20:06:02+00:00","dateModified":"2025-04-29T12:50:19+00:00","breadcrumb":{"@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/image-boxes\/content-boxes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/image-boxes\/content-boxes\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/image-boxes\/content-boxes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.med.unc.edu\/webguide\/cells\/"},{"@type":"ListItem","position":2,"name":"Repeatable Boxes","item":"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/"},{"@type":"ListItem","position":3,"name":"Image Boxes","item":"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/image-boxes\/"},{"@type":"ListItem","position":4,"name":"Content Boxes"}]},{"@type":"WebSite","@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/#website","url":"https:\/\/www.med.unc.edu\/webguide\/cells\/","name":"Cells Plugin Documentation","description":"School of Medicine IT Web Guide","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.med.unc.edu\/webguide\/cells\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/pages\/225","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/users\/1369"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/comments?post=225"}],"version-history":[{"count":3,"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/pages\/225\/revisions"}],"predecessor-version":[{"id":1724,"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/pages\/225\/revisions\/1724"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/pages\/30"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/media?parent=225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}