Skip to content

Georgia State Flex Theme Elements in WPBakery (accordions, buttons, tabs, toggles, and links) - GSU Best Practices

Georgia State Flex Theme Elements have been pre-installed on all Flex2 sites and can be found under the "Add Elements" option on WPBakery, under the "My Elements" tab.


In order to edit previously created elements to match the GSU Flex Theme Elements, use the following settings:

GSU Standard Blue Button

Buttons are used for links to pages and documents that need more emphasis than a normal link, or for calls-to-action, compelling a user to act and choose to move forward during their site visit.

Choose "Advance Button" from Ultimate Add-ons Elements General Button Alignment: Center Button Size: Large Button Button Title Color: #ffffff Background Color: #0034a6

Background Button Hover Background Effect: No Effect Button Hover Animation Effect: No Effect Hover Background Color: #ffffff Hover Text Color: #0034a6

Styling Button Border Style: Solid Border Color: #0034a6 Border Color on Hover: #0034a6 Border Width: 1 Border Radius: 0

Typography Font Family: Lato Font Style: 300 Font Size: 16 Line Height: 23


GSU Standard White Button


Choose "Advance Button" from Ultimate Add-ons Elements General Button Alignment: Center Button Size: Large Button Button Title Color: #0034a6 Background Color: #ffffff

Background Button Hover Background Effect: No Effect Button Hover Animation Effect: No Effect Hover Background Color: #0034a6 Hover Text Color: #ffffff

Styling Button Border Style: Solid Border Color: #0034a6 Border Color on Hover: #0034a6 Border Width: 1 Border Radius: 0

Typography Font Family: Lato Font Style: 300 Font Size: 16 Line Height: 23


White Transparent Button

Choose "Advance Button" from Ultimate Add-ons Elements General Button Alignment: Center Button Size: Large Button Button Title Color: #0034a6 Background Color: rgba(255,255,255,0.8)

Background Button Hover Background Effect: No Effect Button Hover Animation Effect: No Effect Hover Background Color: #0034a6 Hover Text Color: #ffffff

Styling Button Border Style: Solid Border Color: #0034a9 Border Color on Hover: #0034a6 Border Width: 1 Border Radius: 0

Typography Font Family: Lato Font Style: 300 Font Size: 16 Line Height: 23


Blue Transparent Button

Choose "Advance Button" from Ultimate Add-ons Elements General Button Alignment: Center Button Size: Large Button Button Title Color: #ffffff Background Color: rgba(0,52,166,0.6)

Background Button Hover Background Effect: No Effect Button Hover Animation Effect: No Effect Hover Background Color: #ffffff Hover Text Color: #0034a6

Styling Button Border Style: Solid Border Color: #0034a6 Border Color on Hover: #0034a6 Border Width: 1 Border Radius: 0

Typography Font Family: Lato Font Style: 300 Font Size: 16 Line Height: 23


GEORGIA STATE Tabs

Use tabs to alternate between views within the same context, not to navigate to different areas. Use tabs only when users don't need to see content from multiple tabs simultaneously.

Choose the Tabs Element and set the following; Style: modern Shape: square Color: white Do not fill content area?: Checked Spacing: None Gap: None Position:  Top Alignment: Center Autoplay: none Active Section: 1 Extra class name: horizontal-tabs

In order to make Tabs for mobile, simply make sure that the CSS & JS Toolbox codeblock for "Close Tabs on Mobile" is active and set to the Footer.


Georgia State Vertical Tabs - Right

Use tabs to alternate between views within the same context, not to navigate to different areas. Use tabs only when users don't need to see content from multiple tabs simultaneously.

Choose the Tour Element and set the following; Style: modern Shape: square Color: white Do not fill content area?: Checked Spacing: None Gap: None Position: Right Alignment: Left Navigation Width: Medium Autoplay: none Active Section: 1 Extra class name: vertical-tabs-right

In order to make Tabs for mobile, simply make sure that the CSS & JS Toolbox codeblock for "Close Tabs on Mobile" is active and set to the Footer.

Georgia State Vertical Tabs - Left

Use tabs to alternate between views within the same context, not to navigate to different areas. Use tabs only when users don't need to see content from multiple tabs simultaneously.

Choose the Tour Element and set the following; Style: modern Shape: square Color: white Do not fill content area?: Checked Spacing: None Gap: None Position:  Left Alignment: Left Navigation Width: Medium Autoplay: none Active Section: 1 Extra class name: vertical-tabs-left

In order to make Tabs for mobile, simply make sure that the CSS & JS Toolbox codeblock for "Close Tabs on Mobile" is active and set to the Footer.


Georgia State Accordion

Use Accordions for lists of content that have more information, or answers for each point of information. FAQs should use the GSU Accordion. 

Style: modern Shape: square Color: white Do not fill content area?: Checked Spacing: None Gap: None Alignment: Left Autoplay: none Allow collapse_all: Checked Icon: Plus Position: Left Active Section: 1 Extra class name: accordion

In order to make Accordions for mobile, simply make sure that the CSS & JS Toolbox codeblock for "Close Accordions on Mobile" is active and set to the Footer.


Georgia State FAQ Toggle

Use FAQ Toggles in place of Accordions ONLY WHEN the information being displayed is within a tabbed element. Tabbed elements cannot display Accordions, but they can show the much simpler GSU FAQ Toggles.

Choose FAQ Element Style: Simple Icon Color:  Blue Size: Large Default State: Closed Extra class name: faq-toggle


Creative Link Blue

Use Creative Link Blue on your page when you have a link that you need to stand apart from normal links, and you want more attention drawn to it due to its importance.

General Link Style: Style 3 Link Color: #0034a6 Link Hover Color: #0034a6 Border Style: Solid Link Border Color: #cc0000
Link Border Width: 2px
Link Assignment: Center


Creative Link White

Use Creative Link White on your page when you have a dark background and a link that you need to stand apart from normal links, and you want more attention drawn to it due to its importance.

General Link Style: Style 3 Link Color: #ffffff Link Hover Color: #ffffff Border Style: Solid Link Border Color: #cc0000
Link Border Width: 2px
Link Assignment: Center


THESTATEWAY (with underline) in Marquee Headlines

Use the official THESTATEWAY font and underline (complete with (R)) in the Marquee Headline on your page.  Add the following text block in your Marquee where the Headline usually goes:

<h2><span style="font-family: 'Oswald'; font-weight: 500; font-size: 7.0rem; color: #0033ad; line-height: 1em; margin: auto; padding-bottom: 10px;">THE<span class="underline_big">STATE</span>WAY<sup class="thestateway-regmark">®</sup></span></h2>

And then add the following in your CSS & JS Toolbox code block for Site-wide CSS:

/* THESTATEWAY Headline and regular text-block */
.thestateway {
    font-family: 'Oswald';
    font-weight: 500;
    color: #0039a6;
    margin: auto;
    display: inline-block !important;
}
.thestateway-regmark{
    bottom:0em;
    font-size:25%;
    top: 0em !important;
}
.underline_big {
border-bottom: 0.108em solid #cc0000 !important;
display: inline-block !important;
line-height: 1.2 !important;
-moz-appearance: underline_big;
-webkit-appearance: underline_big;
}


THESTATEWAY (with underline) in regular text fields

Use the official THESTATEWAY font and underline (complete with (R)) for use in regular text fields on your page. Add the following text block in your Marquee where you want THESTATEWAY to go:

<span class="thestateway">THE<span class="underline" style="border-bottom-style: solid; border-bottom-width: 5px; border-bottom-color: #cc0000;">STATE</span>WAY<sup class="thestateway-regmark">®</sup></span>

And if you don't already have the following code added to your CSS & JS Toolbox under the code block for Site-Wide CSS, add the following:

/* THESTATEWAY Headline and regular text-block */
.thestateway {
    font-family: 'Oswald';
    font-weight: 500;
    color: #0039a6;
    margin: auto;
    display: inline-block !important;
}
.thestateway-regmark{
    bottom:0em;
    font-size:25%;
    top: 0em !important;
}
.underline_big {
border-bottom: 0.108em solid #cc0000 !important;
display: inline-block !important;
line-height: 1.2 !important;
-moz-appearance: underline_big;
-webkit-appearance: underline_big;
}

Feedback and Knowledge Base