Test Title

Test Subtitle

Quick Navigation

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

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
  1. This is a list
  2. 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 Outline
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-2 gap-xs

grid-2 gap-xs

grid-2 gap-xs

grid-3 gap-m

grid-3 gap-m

grid-3 gap-m

grid-4 gap-l

grid-4 gap-l

grid-4 gap-l

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.

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. 

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

Attention

This is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the let.

Grab a cookie!

This site is using cookies in order to provide you the best possible user experience. You can either totally accept or reject our cookies and of course you can anytime edit your preferences from the settings menu.

Accept all Reject all Settings

Strictly Necessary Cookies

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at feugiat dolor, et gravida urna. Curabitur facilisis purus vitae lacus fermentum, mattis interdum ipsum rutrum. Etiam neque turpis, condimentum vel tincidunt eget, pellentesque eu massa. Aliquam lacinia, nulla quis porttitor convallis, ex purus posuere velit, at venenatis erat sem ac lectus. Nulla vestibulum, ex consequat accumsan venenatis, arcu leo accumsan ipsum, quis viverra lorem augue quis leo. Phasellus vitae eros ut metus tincidunt euismod vitae a ante. Praesent tincidunt id quam sit amet tristique. Praesent dictum consequat ligula a lacinia. Praesent interdum pretium odio, non venenatis quam consectetur in.

Donec aliquam molestie gravida. Nullam mollis dolor a hendrerit cursus. Ut sed bibendum leo, eget pellentesque mi. Nulla facilisi. Suspendisse dapibus maximus felis ac sollicitudin. Etiam vel lobortis neque. Maecenas a sagittis purus. Aenean ullamcorper orci lorem, eget sodales sem accumsan ut. Etiam nisi urna, tincidunt a nibh eu, viverra rhoncus arcu. Praesent at vehicula metus, id semper ante. Nulla mattis tellus non lacus vulputate ornare. Ut maximus id mi eget luctus. In semper non lectus eget condimentum. Sed nec ullamcorper tortor. Mauris egestas auctor luctus. In scelerisque, velit at pulvinar iaculis, turpis elit tincidunt orci, ut elementum mauris est id purus.

Nunc non purus sed lorem consequat ornare at eu ex. Vivamus euismod consectetur ante, a aliquam ex. Ut a metus quis magna elementum dictum eu nec magna. Nunc placerat id massa et consequat. Nullam et libero non nisi tincidunt porttitor. Curabitur rhoncus iaculis cursus. Proin convallis pretium mattis. Cras ut risus at orci varius molestie. Etiam id auctor ante. Phasellus nec auctor nisl. In finibus eros pulvinar sagittis vehicula. Nunc sit amet eros ac nisl ultricies laoreet. Sed aliquet magna id tellus eleifend lobortis. Integer ultricies quam at laoreet porttitor. Nullam eu tellus sed ante pellentesque rhoncus. Suspendisse sem sapien, ornare ut diam at, blandit sagittis leo.

Ut eu lacinia elit. Donec nec ultricies mauris. Sed non velit id turpis luctus molestie. Vivamus gravida euismod nunc accumsan ultrices. Mauris euismod velit at accumsan scelerisque. Curabitur placerat at turpis malesuada feugiat. Fusce et suscipit tortor, a mollis ipsum. Donec porttitor erat quis posuere malesuada. Etiam quis tortor dapibus, pharetra dui vel, congue leo. Proin elementum sit amet neque a dictum. Duis egestas porta consectetur. Nunc vel metus malesuada, suscipit ante sit amet, imperdiet odio. Donec at congue massa. Donec fermentum justo eget eros faucibus, eget viverra tellus dignissim. Fusce ultrices tellus sed imperdiet finibus. Morbi id facilisis mi, nec hendrerit est.

Curabitur ut purus non purus placerat euismod. Duis eu pharetra ligula. Vivamus et tristique enim, nec dapibus velit. Curabitur molestie aliquam odio. Nunc diam lectus, gravida sed lorem id, faucibus mattis turpis. Etiam sit amet gravida magna. Sed lacinia, ligula ac auctor mollis, tortor nibh auctor nisi, in tincidunt velit urna eu arcu. Suspendisse dignissim volutpat libero sit amet condimentum. Vivamus sagittis ullamcorper suscipit. Sed commodo pellentesque nisl, vel finibus ex auctor ac. Ut dictum, urna ut rutrum vestibulum, tellus metus aliquam libero, ut sollicitudin nibh ligula ac dolor.

Donec viverra, leo quis faucibus consectetur, urna nibh elementum quam, vitae molestie orci dui vel sem. In volutpat euismod lacinia. Aenean bibendum libero nec consectetur volutpat. Curabitur sodales facilisis ligula non rhoncus. Pellentesque sit amet tincidunt dolor. In iaculis aliquet arcu in semper. Mauris ac mollis nibh, eu faucibus ante. Donec vel sem ultrices lorem rutrum iaculis in in odio. Cras ut urna ultricies, finibus massa quis, euismod magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc rhoncus, quam ornare rutrum semper, arcu massa dictum est, eget volutpat ex augue sed massa. Donec efficitur pulvinar luctus.

Donec sollicitudin ex consectetur suscipit tincidunt. Sed viverra eros eget metus auctor rhoncus. Aliquam erat volutpat. Quisque hendrerit felis et urna dignissim, quis feugiat neque bibendum. Etiam in faucibus turpis. Nulla dignissim risus a consectetur vehicula. Nam tincidunt lobortis luctus. Suspendisse elementum cursus aliquet.