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!)
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
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
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.
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.
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.
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.
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
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.
Education Department
College of Online Learning
Doctor of Education in Educational Leadership, Curriculum & Instruction (Online)
Educators with a deep understanding of curriculum and technology provide leadership to shape the future of education. Our Doctor of Education Leadership in Curriculum and Instruction equips you to be an effective leader who leaves a lasting impact on the field of education.
Education Department
College of Online Learning
Master of Education in Curriculum & Instruction Leadership (Online)
Highly skilled educators shape today’s students while anticipating and preparing for the needs of tomorrow. Our Master of Education in Curriculum and Instruction equips you with the latest instruction and curriculum design techniques so you can become an innovative teacher-leader who effectively meets the learning challenges of an ever-changing world.
Education Department
College of Online Learning
Master of Education in Literacy (Online)
Teachers with a deep understanding of literacy can offer students a future filled with possibilities. Our Master of Education in Literacy prepares you to become a certified reading specialist equipped to work in classrooms, Title I schools, and in interventionist and administrative roles.
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
Genesis 1.1-3.13a
Genesis 3.13b-7.8a
Genesis 7.8b-11.11a
Genesis 11.11b-14.14a
Genesis 14.14b-18.25a
Genesis 18.25b-20.17a
Genesis 20.17b-24.13a
Genesis 24.13b-26.8a
Genesis 26.8b-28.20a
Genesis 28.20b-30.39a
Genesis 30.39b-33.2a
Genesis 33.2b-36.22a
Genesis 36.22b-39.10a
Genesis 39.10b-41.56a
Genesis 41.56b-44.18a
Genesis 44.18b-47.18a
Genesis 47.18b-50.1
Exodus
Genesis 50.2 – Exodus 3.17a
Exodus 3.17b-6.30
Exodus 7.1-9.29a
Exodus 9.29b-12.15
Exodus 12.16-14.28a
Exodus 14.28b-17.1
Exodus 17.2-20.21a
Exodus 20.121b-23.27
Exodus 23.28-26.31a
Exodus 26.31b-28.38
Exodus 28.39-31.3a
Exodus 31.3b-34.8
Exodus 34.9-36.24
Exodus 36.25-39.14
Exodus 39.15-Leviticus 1.4a
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