  {"id":41,"date":"2021-12-21T19:03:48","date_gmt":"2021-12-22T00:03:48","guid":{"rendered":"https:\/\/www.worcester.edu\/marketing-communications\/?page_id=41"},"modified":"2022-05-26T12:43:43","modified_gmt":"2022-05-26T16:43:43","slug":"action-bar-callout","status":"publish","type":"page","link":"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/action-bar-callout\/","title":{"rendered":"Action Bar Callout"},"content":{"rendered":"<h4>What this component was designed for<\/h4>\n<p>This is called a \u201cCall to Action\u201d, it is designed to be the focus of the webpage. It is the main goal that a content manager wants the user to perform on the page. This is a key element of a webpage, if this message is not clear enough, then the user will not know what to do next.<\/p>\n<p>This component was designed to grab the user\u2019s attention, and get them to perform the desired action.<\/p>\n<h4>What this component can be used for<\/h4>\n<p>This component should be used if there is one desired action that the user should perform on the webpage. For example, this component can be used for an \u201cApply Now\u201d or \u201cPlan your Visit\u201d. In both of these examples, there is one desired action, either clicking the apply button or planning a visit.<\/p>\n<h4>How to add content to it<\/h4>\n<p>When the Action Bar Callout component is added, the content manager will see the same familiar tabs, beginning with the \u201cSection\u201d. This is where the content manager will name the component. Remember, this name will not be visible on the front end of the website. This is only for the managers who are responsible for this page\u2019s content. This name is designed to help the manager organize themselves and their content.<\/p>\n<p>The next tab that users will see is the \u201cGeneral\u201d tab. This is where they will assign the heading text that will appear within this component. Content managers will see where they can input their \u201cBeginning Text\u201d which is the text that appears before the highlighted text. They are then able to specify the \u201cHighlighted Text\u201d which will appear highlighted within the component. The final element they can specify in this section is the \u201cEnd Punctuation\u201d of the heading. None of these fields are required, meaning that the content manager could keep them blank if they desired. It is not recommended that content managers keep the \u201cBeginning Text\u201d blank, since this is the question that is supposed to ignite action.<\/p>\n<p>The next tab will read \u201cButton\u201d, and this is where the button icon and text will be decided. The first prompt a content manager will see is asking if the component should use the button icon. This is a dropdown field, and either \u201cyes\u201d or \u201cno\u201d can be selected. Selecting yes will show the button icon. If \u201cyes\u201d is selected, they will see a field where they will specify the button icon they\u2019d like to appear on the button. If \u201cno\u201d is selected from the dropdown, then the content manager will not see the field where they can select an icon for the button.<\/p>\n<p>The remaining fields within the button tab in this component are for the button\u2019s title and the link where the button is sending the user when clicked. The content manager will also be able to select whether or not they want the button to open in a new window. Clicking this checkbox will open the link in a new window.<\/p>\n<p>The next tab is labeled \u201cThemes\u201d, and this is where the content manager will select the color scheme for this particular component. The manager will notice that there are 6 schemes available to choose from. If the manager does not know which scheme to select they should consult the Web Governance Document. As a general rule, the brightly colored schemes (Blues &amp; Purple) should not be used unless they are highlighting important information on the page that the content manager wants to stand out to the user.<\/p>\n<p>The next tab is the \u201cStyles\u201d tab where content managers can edit the padding and borders of this particular component.<\/p>\n<h4>Best Practices\/Things to avoid<\/h4>\n<ol>\n<li>Content managers should always name their Action Bar Callout sections based on the content they contain so that they and others can easily identify the contents of the accordion from the backend.<\/li>\n<li>Content managers should always check what the component will look like on all devices using the \u201cPreview\u201d feature before publishing the update.<\/li>\n<li>This component is available on full width, &amp; Sidebar width content sections.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h4>InVision images<\/h4>\n<ol>\n<li><a href=\"https:\/\/projects.invisionapp.com\/d\/main#\/console\/21585314\/456668982\/preview\" target=\"_blank\" rel=\"noopener\">Action Bar Callout Desktop<\/a><\/li>\n<li><a href=\"https:\/\/projects.invisionapp.com\/d\/main#\/console\/21585314\/456668983\/preview\" target=\"_blank\" rel=\"noopener\">Action Bar Callout Tablet<\/a><\/li>\n<li><a href=\"https:\/\/projects.invisionapp.com\/d\/main#\/console\/21585314\/456668984\/preview\" target=\"_blank\" rel=\"noopener\">Action Bar Callout Mobile<\/a><\/li>\n<li><a href=\"https:\/\/projects.invisionapp.com\/d\/main#\/console\/21585314\/456668985\/preview\" target=\"_blank\" rel=\"noopener\">Action Bar Callout 2-3rds<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>What this component was designed for This is called a \u201cCall to Action\u201d, it is designed to be the focus of the webpage. It is the main goal that a content manager wants the user to perform on the page. This is a key element of a webpage, if this message is not clear enough, [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":15,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"templates\/SidebarWidth.php","meta":{"_acf_changed":false,"ngg_post_thumbnail":0,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-41","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Action Bar Callout | Office of Communications &amp; Marketing<\/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=\"Action Bar Callout | Office of Communications &amp; Marketing\" \/>\n<meta property=\"og:description\" content=\"What this component was designed for This is called a \u201cCall to Action\u201d, it is designed to be the focus of the webpage. It is the main goal that a content manager wants the user to perform on the page. This is a key element of a webpage, if this message is not clear enough, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/action-bar-callout\/\" \/>\n<meta property=\"og:site_name\" content=\"Office of Communications &amp; Marketing\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-26T16:43:43+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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.worcester.edu\\\/marketing-communications\\\/communications-toolkit\\\/component-overview\\\/action-bar-callout\\\/\",\"url\":\"https:\\\/\\\/www.worcester.edu\\\/marketing-communications\\\/communications-toolkit\\\/component-overview\\\/action-bar-callout\\\/\",\"name\":\"Action Bar Callout | Office of Communications &amp; Marketing\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.worcester.edu\\\/marketing-communications\\\/#website\"},\"datePublished\":\"2021-12-22T00:03:48+00:00\",\"dateModified\":\"2022-05-26T16:43:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.worcester.edu\\\/marketing-communications\\\/communications-toolkit\\\/component-overview\\\/action-bar-callout\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.worcester.edu\\\/marketing-communications\\\/communications-toolkit\\\/component-overview\\\/action-bar-callout\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.worcester.edu\\\/marketing-communications\\\/communications-toolkit\\\/component-overview\\\/action-bar-callout\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.worcester.edu\\\/marketing-communications\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Communications Toolkit\",\"item\":\"https:\\\/\\\/www.worcester.edu\\\/marketing-communications\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Component Overview\",\"item\":\"https:\\\/\\\/www.worcester.edu\\\/marketing-communications\\\/communications-toolkit\\\/component-overview\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Action Bar Callout\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.worcester.edu\\\/marketing-communications\\\/#website\",\"url\":\"https:\\\/\\\/www.worcester.edu\\\/marketing-communications\\\/\",\"name\":\"Office of Communications &amp; Marketing\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.worcester.edu\\\/marketing-communications\\\/?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":"Action Bar Callout | Office of Communications &amp; Marketing","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":"Action Bar Callout | Office of Communications &amp; Marketing","og_description":"What this component was designed for This is called a \u201cCall to Action\u201d, it is designed to be the focus of the webpage. It is the main goal that a content manager wants the user to perform on the page. This is a key element of a webpage, if this message is not clear enough, [&hellip;]","og_url":"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/action-bar-callout\/","og_site_name":"Office of Communications &amp; Marketing","article_modified_time":"2022-05-26T16:43:43+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/action-bar-callout\/","url":"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/action-bar-callout\/","name":"Action Bar Callout | Office of Communications &amp; Marketing","isPartOf":{"@id":"https:\/\/www.worcester.edu\/marketing-communications\/#website"},"datePublished":"2021-12-22T00:03:48+00:00","dateModified":"2022-05-26T16:43:43+00:00","breadcrumb":{"@id":"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/action-bar-callout\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/action-bar-callout\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/action-bar-callout\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.worcester.edu\/marketing-communications\/"},{"@type":"ListItem","position":2,"name":"Communications Toolkit","item":"https:\/\/www.worcester.edu\/marketing-communications\/"},{"@type":"ListItem","position":3,"name":"Component Overview","item":"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/"},{"@type":"ListItem","position":4,"name":"Action Bar Callout"}]},{"@type":"WebSite","@id":"https:\/\/www.worcester.edu\/marketing-communications\/#website","url":"https:\/\/www.worcester.edu\/marketing-communications\/","name":"Office of Communications &amp; Marketing","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.worcester.edu\/marketing-communications\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.worcester.edu\/marketing-communications\/wp-json\/wp\/v2\/pages\/41","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.worcester.edu\/marketing-communications\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.worcester.edu\/marketing-communications\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.worcester.edu\/marketing-communications\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.worcester.edu\/marketing-communications\/wp-json\/wp\/v2\/comments?post=41"}],"version-history":[{"count":4,"href":"https:\/\/www.worcester.edu\/marketing-communications\/wp-json\/wp\/v2\/pages\/41\/revisions"}],"predecessor-version":[{"id":1715,"href":"https:\/\/www.worcester.edu\/marketing-communications\/wp-json\/wp\/v2\/pages\/41\/revisions\/1715"}],"up":[{"embeddable":true,"href":"https:\/\/www.worcester.edu\/marketing-communications\/wp-json\/wp\/v2\/pages\/15"}],"wp:attachment":[{"href":"https:\/\/www.worcester.edu\/marketing-communications\/wp-json\/wp\/v2\/media?parent=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}