Quick Navigation

Typography Colors Buttons Sections Columns Forms Modals Images Videos Mega Menu Side Scrolling Slideshow Marquee

Typography

Set the “Font Family” inside the Customizer > Typography > Font Manager. Use the HTML for the body font, and the All Headings for the headings font.

Open the child theme CSS file and match up the heading and body font names, then change the font sizes as needed.

Headline XL

Headline H1

Looks H1

Headline H2

Looks H2

Headline H3

Looks H3

Headline H4

Looks H4

Headline H5

Looks H5

Headline H6

Looks H6

Headline Pre

Body XL

Body L

Body Default (Gutenberg)

Body Default (GenerateBlocks)

Body S

Body XS

Paragraph Looks Headline

This is a list
This is a list

This is a list
This is a list

This is a block quote
This is the citation

Colors

Colors are fickle. Here’s a starting point that uses a primary brand color, a contrast color, plus surface colors.

In general, surface colors should be used on 60% of the area, primary colors should be used on 30% of the area, and contrast colors should be used on 10% of the area.

Primary

var(--primary)

Primary Alt

var(--primary-alt)

Contrast

var(--contrast)

Contrast Alt

var(--contrast-alt)

Surface-0

var(--surface-0)

Surface-10

var(--surface-10)

Surface-20

var(--surface-20)

Surface-30

var(--surface-30)

Surface-70

var(--surface-70)

Surface-80

var(--surface-80)

Surface-90

var(--surface-90)

Surface-100

var(--surface-100)

Buttons

These are set up using Global Styles, though you might want to make a copy in CSS in case you need to match up the theme’s buttons or add a button to the header.

Primary Contrast Primary Alt Primary Outline Primary Ghost

Primary on Dark Primary Alt on Dark Primary Outline on Dark Primary Ghost on Dark

Sections & Containers

The Global Styles for sections should be applied to the outer container, with the inner container controlling the max-width.

These Global Styles control the padding in the section and are available in XXL, XL, L, D, M, S, XS.

Section XS (1rem / 1.5rem)

Section S (1.5rem / 1.5rem)

Section M (2.5rem / 1.5rem)

Section D (5rem / 1.5rem)

Section L (7.5rem / 1.5rem)

Section XL (10rem / 1.5rem)

Default Container Width (1280px)

var(–width-m)

var(–width-s)

var(–width-xs)

Columns

The extra power of grid is now available to the site with the extra classes we have created. You can add these classes to the parent container and add as many inner containers you want

grid- classes are available as 2, 3, 4, 5, 6

gap- classes are available as xs, s, m, l, xl

grid-2 gap-xs

grid-3 gap-m

grid-4 gap-l

Forms

Forms are always ugly and hard to style. Let’s give them some default styles in order to be nice always.

Add to each submit button the class gb-button and the color combination that you want. e.g gb-button-primary

Contact Form

Newsletter Form

Modals

Modals are done with some custom CSS and JS. It uses a specific GB Element. The master copy is saved in Local Patterns.

The custom code is located inside the folder /assets/js/modal.js and /assets/css/modal.css

Modal 1

Images

We have added some nice effect to the images as well. Just hover your mouse to the image to see the result

Scrolling Image Effect

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn’t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.

Scrolling Image Effect With CSS Class

It is the same concept but we do not touch anything on the admin panel just add a the image-scroll class to the container.

Videos

Our helper classes with aspect-ratio gives you the power to style the video exactly as you want.

You can use: ar-16-9, ar-9-16, ar-4-3, ar-1-1

Also you can get a ready example of background video with text in front of it.

ar-16-9

ar-9-16

ar-4-3

Background Video

THIS IS JUST A TITLE

Here we have a nice description of our video
in order to see some nice content

Our Mission

Mega Menu

Create a nice GenerateBlocks Mega Menu

Add a Top Level Menu item and give it 2 x CSS Class of: gp_mega_item menu-item-has-children

This will add a sub-menu item containing a dynamically named hook: gp_mega_item_{slug}

Give my menu item a label of My Menu . This will return a slug of my-menu . And the function will generate a hook named: gp_mega_item_my-menu

If you change the label after saving the slug does not change.

You can override this by adding a custom hook name in the field and use this instead. With this option you are safe to rename Menus and Pages in the future.

Side Scrolling

Dont forget to edit the grid containers and set the flex child to Grow: 1 and set Shrink: 0

Guitar Courses

Bass Courses

Drum Courses

Piano Courses

Slideshow

Create a container and give it the class .bmwp-slider-container and inside this container add a grid with class .bmwp-slider and add how many rows you want to have as slides.

Slideshow Options

Check this link to read the full options list. To adjust them please edit the file functions.js

Guitar Courses

Lorem ipsum dolor get inside of this text

Button

Bass Courses

Lorem ipsum dolor get inside of this text

Button

Drum Courses

Lorem ipsum dolor get inside of this text

Button

Piano Courses

Lorem ipsum dolor get inside of this text

Button

Marquee

To create this nice marquee effect please add to the parent container the class of .infinite-scroll. You can also add some controls like .is-faded, .is-reserved, .is-rotated, .is-slower, .is-faster, .on-hover-paused

The controls are used like this .infinite-scroll .is-faded

You have to have 2 nested identical rows which they are including the same set of images et voila! Magic Happens