Basic Explore Academics Page
Use this page for an Explore Academics landing page when your unit has a small number of program options. This page includes:
- A floating title marquee
- A program section (Use four columns or add an additional row if you have a few more programs. If you have more than two rows of programs, use the Advanced Explore Academic Page with 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.
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>
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.