_Style Guide 2 - Evangel University be_ixf;ym_202207 d_02; ct_50

You Are Here:

_Style Guide 2

Style Guide

Style Guide
– Heroes
– – Primary Hero
– – – Light
– – – Dark
– – Large Hero
– – – Light
– – – Dark
– – Colored Diagonal
– Elements
– – Columns / Image Header
– – Columns / Fifty Fifty (Text Only)
– – Columns Callout
– – Columns / Fifty Fifty
– – Columns / Slash Header
– – Columns / Link Box
– – Image Link with Caption
– – Image Overlay Caption
– – Link Strip
– – Link Box
– – Specific Programs
– – Image Viewer
– Core Styling
– – Headings
– – Content
– – Buttons
– – Quote

Heroes

Primary Hero

Gutenberg Blocks

This is the main hero section that should be used on the majority of pages that are created.

Light

Header 1

Header 2

A Paragraph Block. With some text.

Dark

Header 1

The Header 2

A Paragraph Block. With some text.

Large Hero

Light

Header 1

Header 2

Dark

Header 1

Header 2

Colored Diagonal

Gutenberg Blocks

If you want to add this block type /hero and pick Hero / Colored Diagonal. This is a Container that has a Header 1, Header 2 and Paragraph pre-styled. To change the color of the “slash and text” append a CSS class is-COLOR where color is one of the color names (not all-caps). Do not manually choose colors in Gutenberg other than for buttons.

Page Title Here

Subtitle Goes Here

Some random text that will be placed over here and in there. It will be something like this and will look along the lines of this particular section. You will want to upload a right-weighted photo for this Container.

Elements

Columns / Image Header

Gutenberg Blocks

If you want to add this block type /columns and pick Columns / Image Header. When you Convert to Blocks you will also need to Convert to Blocks the image section in each column too (as this is a Reusable Block too … Reusable Block Inception!)

Kids Clapping

Here is some awesome text that will go underneath the image. It’s pretty awesome and will do X, Y and Z when you type things under it. This should be used for the description of this particular section of text

Kids Clapping

Here is some awesome text that will go underneath the image. It’s pretty awesome and will do X, Y and Z when you type things under it. This should be used for the description of this particular section of text

Kids Clapping

Here is some awesome text that will go underneath the image. It’s pretty awesome and will do X, Y and Z when you type things under it. This should be used for the description of this particular section of text

Columns / Fifty Fifty (Text Only)

Gutenberg Blocks

If you want to add this block type /columns and pick Columns / Fifty Fifty (Text Only). You do not need to keep the colors the same. Background colors can be changed at the Column level, but you will need to change the text/button colors appropriately. Just make sure there is good color contrast if you use background colors.

It’s Your Call

At Evangel you will experience mentors, teachers, and guides who will help you discern your vocation, unleash your potential, and serve the world. With more than 70 flexible academic programs to choose from, you will be equipped with the training and skills you need to fulfill your career goals and the calling God has on your life. Whether it’s Biblical Studies or Biology, Finance or Forensic Science, we have the courses you need to succeed. Affordable prices and a variety of scholarships and grants ensure that every dollar spent at Evangel is a wise investment.

Here is the other Column

At Evangel you will experience mentors, teachers, and guides who will help you discern your vocation, unleash your potential, and serve the world. With more than 70 flexible academic programs to choose from, you will be equipped with the training and skills you need to fulfill your career goals.

Columns Callout

Gutenberg Blocks

If you want this block, type /columns and pick Columns Callout. This block automatically makes each column have a WHITE background color + slight dropshadow. If you an Image at the top, it will adjust the margins appropriately to give a thin border around the edges. It also has -3rem margin on the top and bottom, thus “connecting” the above and below sections. If you keep the image, but want to change the color of the triangle, select the Image element, go to Advanced and change the “is-X” CSS class to: is-primary, is-secondary, is-tertiary or is-quaternary.

Here is some dummy content to show the -3rem margin on the below reusable block. This dummy content is NOT apart of the reusable block and is only on this page to showcase the required “overlap” so you can plan accordingly.

View Programs

With more than 70 flexible academic programs to choose from, you will be equipped with the training and skills you need to fulfill your career goals and the calling God has on your life. Whether it’s Biblical Studies or Biology, Finance or Forensic Science, we have the courses you need to succeed.

About Evangel

We have been preparing Spirit-led, passionate leaders for success in both full-time ministry and the marketplace for more than 60 years. At Evangel, you will find dedicated and skilled faculty and staff that are committed to your growth, both academically and spiritually.

Student Life

Becoming the best version of the person God created you to be begins at Evangel. Living and learning together is the heart of the Evangel experience. Through student clubs, chapel, athletic events and residence halls we laugh, support one another, and develop relationships that will last a lifetime.

Here is some dummy content to show the -3rem margin on the below reusable block. This dummy content is NOT apart of the reusable block and is only on this page to showcase the required “overlap” so you can plan accordingly.

Columns / Fifty Fifty

Gutenberg Blocks

If you want to add this block type /columns and pick Columns / Fifty Fifty.

It’s Your Call

At Evangel you will experience mentors, teachers, and guides who will help you discern your vocation, unleash your potential, and serve the world. With more than 70 flexible academic programs to choose from, you will be equipped with the training and skills you need to fulfill your career goals and the calling God has on your life. Whether it’s Biblical Studies or Biology, Finance or Forensic Science, we have the courses you need to succeed. Affordable prices and a variety of scholarships and grants ensure that every dollar spent at Evangel is a wise investment.

70+ Degrees and Programs

Columns / Slash Header

Gutenberg Blocks

If you want to add this block type /columns and pick Columns / Slash Header.

Preview Events

Join us for a Friday preview event and experience first-hand the unique opportunities you would have at Evangel. These events are open to all high school and transfer students.


Columns / Link Box

Gutenberg Blocks

If you want to add this block type /columns and pick Columns / Link Box.

Image Link with Caption

Gutenberg Blocks

Start typing /Image and select Image Link with Caption. The caption you type directly in Gutenberg will automatically overlay on top of the image on the frontend of the site. Make sure you edit the link the image goes to. The Learn More is hard-coded on the hover state. This reusable block is JUST the image, not the three column layout below.

Image Overlay Caption

Gutenberg Blocks

If you want to have a caption that is “called out,” use this block to make the image’s caption overlaid on the image

Kids Clapping
Kids Clapping
Kids Clapping

Link Strip

Gutenberg Blocks

If you want to add this block type /Link and pick Link Strip.

Link Box

Gutenberg Blocks

If you want to add this block type /Link and pick Link Box.

Specific Programs

Custom Block

Type /Specific and select Specific Programs. You can then choose a Department as well as an optional Area of Study to show a grid of Programs.

Image Viewer

Custom Block

Type /Image Viewer and select Image Viewer. You’ll then be able to select which Image Groups you would like to have on display. To add Image Groups, hover over Image Sets in the backend of WordPress and you’ll find Image Groups.

Genesis

Exodus

Core Styling

Headings

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Content


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a magna porttitor nunc lobortis placerat. Sed et faucibus tortor. Phasellus quis lorem nunc. Nulla ac posuere neque, nec facilisis ex. Proin condimentum ornare tellus nec interdum. Ut tristique malesuada orci, quis sollicitudin orci elementum id. Sed pharetra, velit eu mattis maximus, ligula nibh molestie eros, efficitur gravida velit sem quis odio. Proin eget eros et eros laoreet tincidunt. In scelerisque maximus egestas. Nulla facilisi. Etiam ut enim sit amet eros cursus porta non non turpis. Cras sollicitudin dui nec interdum dictum. Nam lobortis sapien urna, et finibus tortor tristique quis.

Nam vitae ultricies nisl, vel vehicula ante. Fusce quis tellus in magna mattis elementum in ut nisi. Sed condimentum lorem a tincidunt interdum. Fusce pulvinar, lectus id faucibus fermentum, augue libero venenatis nisl, nec maximus urna elit accumsan odio. Suspendisse mattis dui a dui tristique, quis varius lacus molestie. Praesent congue commodo mi, sit amet ultrices dui lacinia vel. Nam tincidunt velit pharetra, tincidunt lorem quis, bibendum nisi. Morbi dignissim sit amet turpis ut bibendum. Suspendisse vulputate nibh sed magna consectetur, ut posuere ante efficitur. Fusce sit amet vulputate ante, eu varius velit.

Mauris euismod vulputate rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer lacinia dictum volutpat. Nullam ac rhoncus felis. Ut feugiat augue leo, quis pellentesque risus feugiat in. Aenean scelerisque rutrum enim, ut egestas leo ornare sit amet. Sed vestibulum est mi, sed auctor nisi bibendum in. Etiam in mauris posuere, laoreet erat sed, volutpat enim. Nulla cursus lacinia pharetra. Phasellus ante nisi, porttitor eu nisi et, pretium vehicula ligula. Duis sagittis, lectus at sollicitudin accumsan, tellus risus vehicula nulla, iaculis fermentum magna orci sed sem.

  • List Number One
  • List Number Two
  • List Number Three

Maecenas lacinia quis mi vitae pretium. Cras augue metus, dictum vitae finibus id, maximus vitae diam. Ut at orci imperdiet, ultricies neque vel, semper nunc. Nam ac bibendum nulla, ac tincidunt metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum elementum nunc tellus, cursus venenatis elit tempus nec. Etiam pretium sed urna in condimentum. Donec pharetra, metus in elementum ultricies, turpis erat finibus elit, at gravida mi ligula ut neque. Mauris maximus ultrices mollis. Pellentesque sollicitudin vehicula ullamcorper. Sed quis nulla mauris. In congue, justo vitae lacinia laoreet, sapien magna consectetur felis, mollis molestie sem libero at elit. Praesent blandit facilisis urna, ac sagittis metus rutrum commodo.

Buttons

Quote

This is a Default Quote

The Citation goes here