My first header block for the Mobirise Website builder.

Project Download:

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="6" condition="fullScreen == false">
        <input type="range" inline title="Bottom" name="paddingBottom" min="0" max="9" step="1" value="6" 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="64" condition="showText == true">
        <input type="checkbox" title="Show Buttons" name="showButtons" checked>
<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=""></fieldset>
<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 align-center">
<div class="row justify-content-md-center">
<div class="mbr-white col-md-10">
<h1 class="mbr-section-title mbr-bold pb-3 mbr-fonts-style" mbr-theme-style="display-1" mbr-if="showTitle">
               We Provide Smart Financial Planning</h1>
<p class="mbr-text pb-3 mbr-fonts-style mx-auto wrapper" mbr-theme-style="display-5" mbr-if="showText" data-app-selector=".mbr-text, .mbr-section-btn">
                    Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
<div mbr-buttons mbr-theme-style="display-4" class="mbr-section-btn hero-btn" mbr-if="showButtons" data-toolbar="-mbrBtnMove"><a class="btn btn-md btn-secondary" href="" data-app-placeholder="Type Text">CONSULTATION</a></div>
<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;
.wrapper {
  width: (@text_width * 1%);
  @media (max-width: 992px) {
    width: 100% !important;
.mbr-arrow {
  background-color: transparent !important;
.hero-btn a {
  font-weight: 700;
  font-size: 0.75rem;
.fa {
  position: absolute;
  left: 23px !important;
  top: 8px !important;
  font-size: 18px;
.mbr-fonts-style {
  font-weight: 400;

Image used:

Business image created by –