The Color Block Section allows you to add a block section across the width of the page with a title, content, and up to two buttons with either a green or gray gradient background.
Note on Color Block Section
This shortcode is only available when using the Full Width page template. It will not display anything if you attempt to use it on the default template or the left sidebar template.
The title is assigned an Heading 2/H2 tag. You should not add a h2 tag before the Color Block Section for that section.
Also, this component should not be the first item on the page.
Your page should not be mostly Color Block Sections. Color Block Sections should be used with other components or basic text on your page. Multiple Color Block Sections are fine, but should be separated by other component sections.
Color Block Section Shortcode Parameters
The parameters for the Color Block Section shortcode:
- RequiredColor (color): The background color to use, green or gray are the current options.
- RequiredTitle (title): The title of the section.
- Primary Button Text (primary_button_text): This is the text that will display in the primary (green) button. Remember, buttons should be calls to action. This title should represent that action.
- Primary Button URL (primary_button_url): This is the link for the primary (green) button.
- Secondary Button Text (secondary_button_text): This is the text that will display in the secondary (white) button. Remember, buttons should be calls to action. This title should represent that action.
- Secondary Button URL (secondary_button_url): This is the link for the secondary (white) button.
- Arrow (arrow_top): You can make the Color Block Section have a white down arrow at the top of the section by setting the arrow parameter to “white.”
- Image (image): You can optionally add an image that will display on the left side of desktop (and top on mobile) with the text on the right (below on mobile).
Color Block Section Shortcode Examples
Green Color Block Section
[mu_color_block arrow="white" type="buttons" title="What Are The Online Learning Tuition and Fees?" primary_button_text="View Special Rates" primary_button_url="http://www.marshall.edu/online-learning/files/2022/02/learning-hero-crop.jpg"]Fully distance learning students pay a prorated distance education tuition based on their level, up to the appropriate hours cap (12 hours for undergraduate / 9 hours for graduate). A student must be enrolled in an online program and be designated as a distance education student to receive the rate.[/mu_color_block][mu_color_block arrow="white" type="buttons" title="What Are The Online Learning Tuition and Fees?" primary_button_text="View Special Rates" primary_button_url="http://www.marshall.edu/online-learning/files/2022/02/learning-hero-crop.jpg"]Fully distance learning students pay a prorated distance education tuition based on their level, up to the appropriate hours cap (12 hours for undergraduate / 9 hours for graduate). A student must be enrolled in an online program and be designated as a distance education student to receive the rate.[/mu_color_block]
Copy Code to ClipboardThe “What Are The Online Learning Tuition and Fees?” Color Block Section on Online Learning website is an example of a green Color Block Section.
Green Color Block Section with Image
[mu_color_block arrow="white" type="buttons" title="Your Next Steps to start learning online!" image="http://www.marshall.edu/online-learning/files/2022/02/learning-hero-crop.jpg"]If you are ready to be an online Marshall student, <a href="https://www.marshall.edu/admissions/apply/">complete our online application for admission</a>. Students are encouraged to apply early to ensure all required credentials are available in time.</p>
<p>If you still have questions and need more information, please contact us today at <a href="mailto:onlinelearning@marshall.edu">onlinelearning@marshall.edu</a>. We are ready to help you take your next steps to learn online at Marshall University. </p>
<p>304-696-3141</p>
<p>Dr. Monica Brooks<br />
304-696-6474</p>
<p>Students contact the <a href="https://www.marshall.edu/it/departments/it-service-desk/">IT Service Desk</a> online or call 304-696-3200. Faculty should call the Instructional Design Center at 304-696-7117.<br />
[/mu_color_block]
[mu_color_block arrow="white" type="buttons" title="Your Next Steps to start learning online!" image="http://www.marshall.edu/online-learning/files/2022/02/learning-hero-crop.jpg"]If you are ready to be an online Marshall student, <a href="https://www.marshall.edu/admissions/apply/">complete our online application for admission</a>. Students are encouraged to apply early to ensure all required credentials are available in time.</p>
<p>If you still have questions and need more information, please contact us today at <a href="mailto:onlinelearning@marshall.edu">onlinelearning@marshall.edu</a>. We are ready to help you take your next steps to learn online at Marshall University. </p>
<p>304-696-3141</p>
<p>Dr. Monica Brooks<br />
304-696-6474</p>
<p>Students contact the <a href="https://www.marshall.edu/it/departments/it-service-desk/">IT Service Desk</a> online or call 304-696-3200. Faculty should call the Instructional Design Center at 304-696-7117.<br />
[/mu_color_block]
Copy Code to ClipboardThe Your Next Steps to start learning online!” Color Block Section on Online Learning website is an example of a green Color Block Section.
Gray Color Block Section
[mu_color_block color="gray" type="buttons" title="Stay Up To Date" subtitle="Find out what's happening at Marshall throughout the year." image="https://www.marshall.edu/wp-content/uploads/up-to-date.jpg"]This is just our content.[/mu_color_block][mu_color_block color="gray" type="buttons" title="Stay Up To Date" subtitle="Find out what's happening at Marshall throughout the year." image="https://www.marshall.edu/wp-content/uploads/up-to-date.jpg"]This is just our content.[/mu_color_block]
Copy Code to ClipboardThe “Stay Up To Date” Color Block Section on Meet Marshall website is an example of Gray Color Block Section..