Advanced Explore Academics Page
Use this template for an Explore Academics landing page when your unit has a large number of program options. This page includes:
- A floating title marquee
- A program explorer (Contact us for assistance loading the program tool)
- An informational section on your academic experience
- An academic partners section (optional)
- An action row
- A contact row
Note: If you are using Slate RMI form links in your action row, follow the instructions on the Default Form Page and Thank You Page to create your form and thank you pages and load your slate code.
Turn off the Top and Bottom Page Padding when using this template.
If you are using the optional action row or a contact section at the bottom, you will need custom CSS.
These styles are loaded in CSS Javascript Toolbox Blocks and can be applied to your entire site, pages and posts as needed. If you don't already have these blocks in your site, follow the instructions below to load them.
General Styles
Apply the Block to your entire site under the AUX tab on the right. 
<style>
/* Fix line height in ordered and unordered lists. */
li {
line-height: 23px;
}
/* Adjust line heigt of menu items that wrap */
.nav-primary .genesis-nav-menu>li, .nav-primary .genesis-nav-menu {
min-height: 40px;
}
.vc_basic_grid.news-latest .vc_gitem-zone-c {
width: 100% !important;
}
/* Remove vertical lines on mobile
Requires styles to be added to WPBakery Elments accoridngly */
@media (max-width: 768px) {
#action-row .action-col .vc_column-inner,
{
border-left: none !important;
border-top: 2px dotted #0034a9;
padding-left: 15px !important;
}
#action-row .action-col .vc_column-inner {
padding-top: 20px !important;
}
#action-row .inside-action-col .vc_column-inner {
border-top: none !important;
}
#dotted-col-divider .right-col-contact .vc_column-inner {
border-top: none !important;
border-left: none !important;
padding-left: 15px !important;
}
}
/* Reorder columns on mobile */
@media all and (max-width: 980px) {
/*** wrap row in a flex box ***/
.reverse_row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
flex-wrap: wrap;
}
/*** custom classes that will designate the order of columns in the flex box row ***/
.first-on-mobile {
-webkit-order: 1;
order: 1;
}
.second-on-mobile {
-webkit-order: 2;
order: 2;
}
.third-on-mobile {
-webkit-order: 3;
order: 3;
}
.fourth-on-mobile {
-webkit-order: 4;
order: 4;
}
.fourth-on-mobile {
-webkit-order: 5;
order: 5;
}
.fourth-on-mobile {
-webkit-order: 6;
order: 6;
}
}
</style>
Floating Marquee Styles
tags before and after the styles. Save your block.
Apply the Block to all pages in your entire site under the AUX tab on the right. 
<style>
.floating-headline h1, .floating-cta h4, .floating-cta .aio-icon-title ult-responsive {
text-transform: uppercase;
}
@media (max-width:980px) {
#outer-floating, #outer-floating .upb_row_bg.vcpb-default {
background-image: none !important;
}
#outer-floating {
padding-left:0 !important;
padding-right:0 !important;
padding-top: 0 !important;
margin-top: -1px !important;
}
.floating-headline {
background-color: #fff !important;
}
.floating-cta {
background-color: #0034a9 !important;
}
}
</style>
Download Manager Styles
tags before and after the styles. Save your block.
Apply the Block to specific pages in your site as needed under the Page tab on the right. 
<style>
/* Add over button state and add Georgia State styles to left category menu */
color: white !important;
background-color: #0034a9 !important;
}
.w3eden .btn-primary.active {
color: white !important;
background-color: #009FDF !important;
border-color: #009FDF !important;
}
a.wpdm-cat-link.text-left.btn.btn-primary:hover, a.wpdm-download-link.btn.btn-primary.btn-lg:hover {
color: #0034a6 !important;
}
.w3eden .btn-primary:hover {
background-color: #fff !important;
border-color: #0034a9 !important;
}
.w3eden .btn-group-lg > .btn, .w3eden .btn-lg {
padding: 10px 16px !important;
font-size: 14px !important;
line-height: 1.3333333 !important;
}
.w3eden .btn-sm, .w3eden .btn-xs, .w3eden .btn {
font-size: 14px !important;
font-family: Lato !important;
background-image: none !important;*/
font-weight: 400 !important;
border: 1px solid #0034a9 !important;
-webkit-box-shadow: none;
box-shadow: none !important;
text-shadow: unset !important;
}
.w3eden .input-group-append.input-group-btn {
border-left: 3px solid #0034a9;
}
</style>
Vibrant Vertical Tabs
tags before and after the styles. Save your block.
Apply the Block to specific pages in your site as needed under the Page tab on the right.
<style>
.wpb-js-composer .vc_tta-color-white.vc_tta-style-modern.vertical-tabs-left-highlight .vc_tta-tab.vc_active >a {
border-color: #00AEEF;
background-color: #00AEEF;
color: #FFF;
FONT-WEIGHT: BOLD;
background-image: none;
}
</style>
This Template has already been optimized for Mobile. Should you need to add to or modify the template, here are some considerations for how to best ensure the mobile experience. For the most part, WPBakery sections, rows and elements are responsive. However, there are times when you may want to adjust the layout to simplify or change behavior on mobile.
- Use text blocks not heading elements for paragraph text without headings included. Use of the heading element for paragraphs adds code causing the application to do more work and makes front end editing more difficult as how to edit the text is not immediately apparent.
- Use the capability to set different font sizes for different breakpoints in the Ultimate Heading element if you need to change the size of a heading or subheading on tablet or mobile.
- Use the built in ultimate spacer element or percentage padding to set different spacing at desktop, tablet and mobile rather than hard coding pixels into a row or column.
- Use the built in capabilities to hide/show elements at different breakpoints to position part of a section in a different location on mobile vs. desktop rather than duplicating the whole section.
- Use the capabilities to change the size of columns between desktop and mobile rather than duplicating.
- Use custom css when there is a very minor difference in spacing. For example, to turn on/off or change borders or hide a background image between desktop and mobile.
- Be careful of using different techniques to load the same image on a page - this can cause very low page speed scores.
- Always test your pages on laptop and mobile screens. Most users don't work on large design monitors.
If you intend to use the Action Row several times in different places on your site with the same links, create a WpBakery Template and paste the Action Row code into the text tab in Classic mode and load the template into your pages using the Templatera element. This will allow you to edit the Action row content in one place and ensure consistency of implementation.
If you intend to use the Action Row layout in different places on your site but with different links, you can do one of the following:
- Create a WpBakery Template for each instance of the Action Row you intend to use and paste the Action Row code into the text tab in Classic mode and load the template into your pages using the Templatera element. This will allow you to edit each instance under templates instead of within each page.
- Create a WpBakery Template and paste the Action Row code into the text tab in Classic mode and load the template into your pages using Add Template. You will need to edit the row in each page where it is used.
Contact Us
Ready to start a Web project?
Fill out our intake form and tell us about your project. Questions? Contact Rashan Beacham, 404-413-1367 or rbeachem@gsu.edu.