My third header block for the Mobirise Website builder.

Live preview

Download Project File (Free users)

HTML Code Snippet:

<section group="Headers" data-bg-video="{{bg.type == 'video' && bg.value.url}}" mbr-class="{
         'mbr-fullscreen': fullScreen,
         'mbr-parallax-background': bg.parallax}">

        <!-- Block parameters controls (Blue "Gear" panel) -->
        <input type="checkbox" title="Full Screen" name="fullScreen" checked>
        <input type="range" inline title="Top" name="paddingTop" min="0" max="9" step="1" value="9" condition="fullScreen == false">
        <input type="range" inline title="Bottom" name="paddingBottom" min="0" max="9" step="1" value="9" condition="fullScreen == false">
        <input type="checkbox" title="Show Arrow" name="showArrow" checked>
        <input type="checkbox" title="Show Title" name="showTitle" checked>
        <input type="checkbox" title="Show Text" name="showText" checked>
        <input type="range" inline title="Text Width" name="text_width" min="0" max="100" step="1" value="90" condition="showText == true">
        <input type="checkbox" title="Show Buttons" name="showButtons" checked>
        <input type="checkbox" title="Media On Left/Right" name="reverseContent">

        <fieldset type="background" name="bg" parallax>
            <input type="image" title="Background Image" value="" parallax selected>
            <input type="color" title="Background Color" value="#073B4C">
            <input type="video" title="Background Video" value="">
        <input type="checkbox" title="Overlay" name="overlay" condition="bg.type !== 'color'">
        <input type="color" title="Overlay Color" name="overlayColor" value="#767676" condition="overlay && bg.type !== 'color'">
        <input type="range" inline title="Opacity" name="overlayOpacity" min="0" max="1" step="0.1" value="0.5" condition="overlay && bg.type !== 'color'">
        <!-- End block parameters -->

    <div class="mbr-overlay" mbr-if="overlay && bg.type !== 'color'" opacity="{{overlayOpacity}}" bg-color="{{overlayColor}}"></div>
    <div class="container">
        <div class="media-container-row d-flex align-items-center">
            <div class="mbr-white col-12 col-lg-6 text-center text-lg-left py-5">
                <h1 class="mbr-section-title pb-2 mbr-fonts-style" mbr-theme-style="display-1" mbr-if="showTitle">Beautiful Startup Framework for Website Landings</h1>
                <p class="mbr-text pb-4 mbr-fonts-style wrapper" mbr-theme-style="display-5" mbr-if="showText" data-app-selector=".mbr-text, .mbr-section-btn">
                    A high-quality solution for those who want a beautiful startup website quickly.
                <div mbr-buttons mbr-theme-style="display-4" class="mbr-section-btn" mbr-if="showButtons" data-toolbar="-mbrBtnMove"><a class="btn btn-md btn-secondary" href="" data-app-placeholder="Type Text">Buy on App Store</a>
                    <a class="btn btn-md btn-white-outline" href="" data-app-placeholder="Type Text">Learn More</a></div>
            <div class="col-8 col-lg-5 mx-auto py-5">
                <img src="" class="img-fluid" alt title>
    <div mbr-if="showArrow" class="mbr-arrow hidden-sm-down" aria-hidden="true">
        <a href="#next">
            <span mbr-icon class="fa-chevron-down fa"></span>

CSS Code Snippet:

& when not (@fullScreen) {
  padding-top: (@paddingTop * 15px);
  padding-bottom: (@paddingBottom * 15px);
& when (@bg-type = 'image') {
  background-image: url(@bg-value);
& when (@bg-type = 'color') {
  background-color: @bg-value;
& when (@reverseContent) {
  .media-container-row {
    flex-direction: row-reverse;
.wrapper {
  width: (@text_width * 1%);
  @media (max-width: 992px) {
    width: 100% !important;
@media (min-width: 992px) {
  .btn {
    margin-left: 0 !important;
.mbr-fonts-style {
  font-weight: 300;
.mbr-arrow {
  background-color: transparent !important;
.fa {
  position: absolute;
  left: 23px !important;
  top: 8px !important;
  font-size: 18px;
.btn {
  padding: 1rem 2rem;
  font-weight: 300;

Full credit for this design goes designmodo, I have simply turned the psd into a Mobirise Block