default h3 - muli extra light

Welcome to DIY Kickstart

Subheadline Muli extra bold

This headline is set with a 2 pixel letter spacing, Text transform uppercase is default.

The width of the column in which this paragraph (and the headlines plus button) is placed, is set to 70%. The column on the right, which has no content in it, therefore has a 30% width. The subheadline is set in the Muli Extra Boldfont. The default for an h3 headline is set to Extra Light, but we've overridden that in this particular headline module. The big headline in gold is an h2 headline with default styling, a part from the 2px letter spacing which is set in this module. The text transform is set to uppercase - meaning that it will always display capital letters - by default in the customizer.

diy-kickstart-content-macbook-cut

The section above, has its bottom padding set to 0, to make sure the macbook is 'cut off'

Headline h3

The button you see below, has no background color, just a 'gold' outline. Since we'll use buttons more often, it's always a good idea to save them as a 'saved module' in Beaver Builder, so that you can easlily use it again by dragging it into your layout.

Extra Bold

The button you see below, has no background color, just a 'gold' outline. Since we'll use buttons more often, it's always a good idea to save them as a 'saved module' in Beaver Builder, so that you can easlily use it again by dragging it into your layout.

Font size 30px

The button you see below, has no background color, just a 'gold' outline. Since we'll use buttons more often, it's always a good idea to save them as a 'saved module' in Beaver Builder, so that you can easlily use it again by dragging it into your layout.

helmet DIY

Headline for the Tab Module below

Colors

You can see that on this page we've been pretty consistent with the colors. Throughout the site we've used a color palette of only 4 to 5 colors, which contains colors that fit well together. Of course it might very well be that it's absolutely not yourtaste...but that's a different story...

In each module, regardless if you want to change the text color, background color, border color or whatever, you can choose one by using the 'color picker'. In doing so, you can always, in any module, save a color so that you can easily use it over and over again. Once you've entered your color code, just click on the 'plus' icon and your color is stored for further use.

Images
Fonts
diy-kickstart-logo-white

Subheadline Muli extra bold

Building your own website

This column has a 70% width, as opposed to the left column with the DIY Kickstart logo, which has a 30% width. Once the site displays under a certain breakpoint (in this case the width of the browser), both columns will have 100% width and will be displayed 'stacked'. In your columns settings you can choose if they're stacked alernatively - in reverse order. In that case the text comes first, then the logo.

Subheadline Muli extra bold

Take a look at our Blog articles

Here you can see a slider with displays your latest posts. In the slider module you can change lots of settings, like layout, background color, font size and so on. You can also set a filter, controlling which and how many posts are shown.

A post about images

September 29, 2019

Another example of a post

September 29, 2019 |

Sample post about layouts

September 29, 2019 |

Sample post about content

September 1, 2019 |
contact hans

Get in touch now!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa repellendus adipisci laborum placeat delectus labore cupiditate.

Please enter your name.
Please enter a message.