Page Styling Examples
The 3 column page will be used primarily for interior pages that require a right hand aside section with additional links or information relevant to that pages content. The 2 column page will not have a right hand aside.
The above header by default has an HTML tag of <h2> when using the default 2 and 3 column pages. The <h1> title of the page by default is positioned over the banner image. If you are building a page that has no banner image you can use the “Page Title” widget and drag it to the beginning of your text section. This defaults to the <h1> header styling.
(Line height adjusted for each header)
H2 Heading Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
H3 Heading Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
H4 Heading Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
H5 Heading Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
H6 Heading Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
(Line height set to default)
H2 Heading Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
H3 Heading Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
H4 Heading Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
H5 Heading Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
H6 Heading Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Accordion & Toggle Styling
Use accordions or toggles when you want to compartmentalize data or text that you want to make more interactive for users. A good example would be an FAQ section. The questions would serve as the title of an accordion item and the answer would be the accordion item’s description. The toggle widget stays closed by default, whereas the accordion stays open.
You will have three color selections to choose from when using an accordion. This accordion choice will likely depend on the pages content. If you need make the accordion visually stand out or be a primary point of focus, use the heavier “Accordion – Navy” or “Accordion – Medium Grey” widgets. When in doubt use “Accordion – Light Grey”. Remember to unlink the widget when you begin editing the information. If you do not unlink, the global widget will be altered.
Tables can be embedded in accordions by copying the table’s shortcode and placing in the accordion item’s description.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Tab Styling
Tabs are ideal for compartmentalizing data and text that might cause users to scroll further down the page. Tabbed segments allow users to jump from one subject to the next more efficiently. Elementor has a default tab widget but you will use the “Tab-Styled” widget from Global Widgets.
Remember to unlink the widget when you begin editing the information. If you do not unlink the global widget will be altered.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisis leo vel fringilla est ullamcorper. Ullamcorper sit amet risus nullam eget felis eget. Ipsum consequat nisl vel pretium lectus quam id. Quis ipsum suspendisse ultrices gravida dictum. Ac tortor dignissim convallis aenean et tortor at. Varius duis at consectetur lorem donec massa. Tristique nulla aliquet enim tortor at auctor urna nunc id. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Eleifend mi in nulla posuere. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Netus et malesuada fames ac. Blandit turpis cursus in hac habitasse platea dictumst. Turpis massa tincidunt dui ut. Ac turpis egestas maecenas pharetra convallis posuere morbi. Adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus. Vestibulum sed arcu non odio. Augue neque gravida in fermentum. Sagittis id consectetur purus ut faucibus pulvinar elementum. Blandit libero volutpat sed cras ornare arcu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisis leo vel fringilla est ullamcorper. Ullamcorper sit amet risus nullam eget felis eget. Ipsum consequat nisl vel pretium lectus quam id. Quis ipsum suspendisse ultrices gravida dictum. Ac tortor dignissim convallis aenean et tortor at.
Image box with caption styling
Use the “Styled Image Box & Caption” global widget when you need to use an image that requires a caption. As always, remember to add descriptive alt text to your image so that people with screen readers can understand what is on the page.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Standard and Emergency Alert Styling
Alerts can be added to any section of the website including the main navigation and footer. The “Standard Alert – Light Blue” and “Standard Alert – Grey” widgets can primarily be used in the body of pages if you need to contrast information with an important note.
In addition to the standard alerts there is the “Emergency Alert” widget. This is used above the main navigation and is displayed globally. Use the “Emergency Alert” widget for campus emergencies, weather closures or natural disasters.
The standard alerts can also be used above the main navigation for special events like graduation, but should be used sparingly.
Program Information
Courses Offered:
In Person
Online
Program Length:
4 Semesters
Award/Program Credits:
60
Knowledge & Skills
- Agricultural sciences
- Business management
- Economic theory
- Critical thinking
- Problem-solving skills
- Communication
Contact Box Styling
The contact box has a one column or 2 column version depending on how many contacts are needed for the page. You can add the contact box section by going into “My Templates” and selecting either “Contact Box 1 Column – Default” or “Contact Box 2 Column – Default”. Do not apply the section settings to the page.
Teacher McTeacher
Physics Instructor
(719) 384-0000
otero-test@otero.edu
McBride Hall Room #
Teacher McTeacher
Physics Instructor
(719) 384-0000
otero-test@otero.edu
McBride Hall Room #
Teacher McTeacher
Physics Instructor
(719) 384-0000
otero-test@otero.edu
McBride Hall Room #