custom code blocks & templates coming soon :: join the beta list

Full Width Headers & Parallax Scroll

There's a reason it's one of my most requested tutorials—Full width headers are one of the most quickest and effective ways to blur the lines between Dubsado form and website.

Pair this with Dubsado's Smart Fields, and you'll be standing out from your competitors in no time.

Headers not only make a visual impact, you can also use them to break long forms down into manageable, easily digestible sections. This makes them easier to follow, and gives your clients a better experience.


Why is it such a struggle with Dubsado?

Dubsado forms are built within containers—the content we create with their drag-and-drop builder gets locked in within this container.

The trick is getting outside of Dubsado's containers, which is only possible with a little CSS magic (okay technically it's possible with other types of code, but we'll just be looking at CSS here).


Below you'll find instructions on how to prepare your assets properly and a generator that'll customise the code to match your branding.

We'll also be covering some extra customisations in case you wanna get fancy:

  • Parallax
  • Animations
01

Before you get your code, make sure you have the following to hand:

  1. The URL for your high-resolution background image (min. 1920px wide)—see here if you're not sure how to get this.
02

Once you've got your background image URL, open up your Dubsado form and drag in a Code Block to the very top of your form.

Now open up the generator and customise your code!

03

Boom! How is your new full width header looking?!

Now you can use your header as is, or get a little fancy with these extra customisations:

For each additional section header, we just need the HTML part of the code (which is the top part of the code—everything up to <style>), which looks like:

<div class="full-width header" style="background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url(https://searchandgrow.com/image.jpg);">
    <h1>Title</h1>
    <h3>Subheading</h3>
</div>

So drag in a Code Block where-ever you want your next header and replace with the HTML for your header.

You can either generate the code again and delete everything below the above code snippet.

Or manually go in and edit the code—If so, you'll need to change the following:

1. Background image url

Replace my URL with the image URL for your section header background (be mindful of keeping the brackets).

2. Header copy

Replace the titles and subheading (be sure to keep the brackets on either side).

3. background overlay

We also have a background color overlaying the background image—this is to help the white text stand out.

Take a look at this line: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3))

You see the decimal number in two places (0.3 in the example above)? Change this number (both instances) to anything between 0 and 1.

0 for lighter

linear-gradient( rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1))

1 for darker

linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8))

Prefer to have a coloured background rather than image?

Open up the Code Block with the header you'd like to change.

See the first line? We'll be removing this section: background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url(https://searchandgrow.com/image.jpg);

And replacing it with background-color: #HEXCODE;

Like so:

<div class="full-width header" style="background-color: #HEXCODE;">
    <h1>Title</h1>
    <h3>Subheading</h3>
</div>

Now just update your color HEX code.


Stuck on colours?

Take a look at Muzli Colors, Coolors, my Pinterest board for inspiration.


Parallax headers are a cool scrolling effect that you can apply to your images.

Just keep in mind that parallax doesn't work well on tablets—and is completely disabled from mobile browsers—so we will need to change the headers to static for those devices.

Open up the Code Block we set up right at the start (in case you have additional).

Now we are going to add this extra CSS code right at the bottom, just before the closing </style> tag:

.parallax {
background-attachment: fixed !important;
}

@media only screen and (max-width: 767px) {
.parallax {
background-attachment: scroll !important;
}
}

By doing this, we have set the style for parallax. We now need to tell our HTML where we want to apply it by adding in a parallax class.

To do so, open up the Code Block with the header you'd like to make parallax.

In the first line, you'll see: <div class="full-width header">

We need to add parallax to end of the list of classes (before the closing ")—like this:

<div class="full-width header parallax" style="background-color: #HEXCODE;">
    <h1>%headertitle%</h1>
    <h3>%headersubheading%</h3>
</div>

And that's it!

We will be adding animations in the same way we added parallax to our headers—we'll add in some code to the CSS. Then apply the class to our HTML.

To create a fade in effect, add the following code to your CSS (just before the closing </style> tag)

.fade-in {
  animation: fadeIn ease 1s;
  -webkit-animation: fadeIn ease 1s;
  -moz-animation: fadeIn ease 1s;
  -o-animation: fadeIn ease 1s;
  -ms-animation: fadeIn ease 1s;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

Then apply the class fade-in to the section that you want to apply the animation to.

For example:

<div class="full-width header fade-in" style="background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url(https://searchandgrow.com/image.jpg);">
    <h1>Title</h1>
    <h3>Subheading</h3>
</div>

We can actually get even more granular and have only the title and subheading fade in; in which case you would add the animation like this:

<div class="full-width header parallax" style="background-color: #HEXCODE;">
    <h1 class="fade-in">Photography Proposal</h1>
    <h3 class="fade-in">{{client.firstName}} & {{client.altContact.firstName}}</h3>
</div>

Because there were no existing classes, we have to add an extra bit: class="fade-in"

Here is the CSS:

.s-grow {
  animation: grow ease 1s;
  -webkit-animation: grow ease 1s;
  -moz-animation: grow ease 1s;
  -o-animation: grow ease 1s;
  -ms-animation: grow ease 1s;
}

@keyframes grow {
        0% {
            transform: scale(0.9);
            -webkit-transform: scale(0.9);
        }
        100% {
            transform: scale(1);
            -webkit-transform: scale(1);
        }
}

@-webkit-keyframes grow {
        0% {
            transform: scale(0.9);
            -webkit-transform: scale(0.9);
        }
        100% {
            transform: scale(1);
            -webkit-transform: scale(1);
        }
}

And to apply the grow effect, add the class s-grow :

<div class="full-width header parallax" style="background-color: #HEXCODE;">
    <h1 class="s-grow">Photography Proposal</h1>
    <h3 class="s-grow">{{client.firstName}} & {{client.altContact.firstName}}</h3>
</div>

So there we have it— I'd love to see what you create, just email me or leave a comment below!

close generator

custom dubsado block

code generator

Full Width Headers & Parallax Scroll

show me the magic
how to use this code generator
1. Enter your branding elements into the fields. 
2. Press the button to preview your branded Custom Block. 
3. Once you're happy, click the copy code button.
4. Paste your code into your Dubsado form.

your live preview

I'm ready for my code!

STEP 01 :: ENTER YOUR branding elements here

clear fields

Background Image

0.2
300 px
200 px

Header Content

Typography :: Heading

40 px
1.6
0 px
300

Typography :: Subheading

14 px
2 px
1.6
300

Mobile Typography

30 px
1
12 px
1
© 2020 SEARCH & GROW  |  privacy policy  |  v2.0
© 2020 SEARCH & GROW
|
PRIVACY POLICY
|
DESIGNED BY ME ♦
cross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram