Mobirise Templates - Header - Logo

Mobirise Template - Header - Logo is the Mobirise version of my "Bootstrap Template - Header - Logo" design which you can find here.

This Mobirise Template is fully functional and everything in the design can be customized inside the Mobirise editor itself.

For a live preview of this template click here

If you wish to see more features added to this block then please contact me and describe your desired feature.

Requirements

Mobirise 4
Mobirise Code Editor

If you don't know how to implement this template into your Mobirise project please read my guide here.

HTML Code:

	<section class="logo-header">
	<mbr-parameters>
	<input type="checkbox" title="Show Title" name="showTitle" checked>
	<input type="checkbox" title="Show Text" name="showText" checked>
	<input type="checkbox" title="Show Buttons" name="showButtons" checked>
	<input type="checkbox" title="Show Logo" name="showLogo" checked>
	<input type="checkbox" title="Show Arrow" name="showArrow" checked="">
	<input type="checkbox" title="Parallax" name="cpe" checked>
	<input type="range" title="Logo Margin" name="lm" min="0" step="1" max="100" value="18">
	<fieldset type="background" name="bg">
	<input type="image" title="Background Image" value="https://i.imgur.com/FVieG2F.png" selected>
	<input type="color" title="Background Color" value="#cccccc">
	</fieldset>
	<input type="checkbox" title="Overlay" name="overlay" condition="bg.type !== 'color'" checked>
	<input type="color" title="Overlay Color" name="overlayColor" value="#494949" condition="overlay && bg.type !== 'color'">
	<input type="range" inline title="Opacity" name="overlayOpacity" min="0" max="1" step="0.1" value="0.7" condition="overlay && bg.type !== 'color'">
	</mbr-parameters>
	<div class="mbr-overlay" mbr-if="overlay && bg.type !== 'color'" opacity="{{overlayOpacity}}" bg-color="{{overlayColor}}"></div>
	<div class="container h-100">
	<div class="row h-100 align-items-center">
	<div class="col-12 col-md-12 text-center header-content">
	<img mbr-if="showLogo" src="https://i.imgur.com/uhK2NNV.png" class="img-fluid logo" alt="logo" title>
	<h1 class="mbr-section-title mbr-bold pb-3 mbr-fonts-style" mbr-theme-style="display-1" mbr-if="showTitle"><span style="font-weight: normal;">
	Let's make design fast and easy.</span>
	</h1>
	<p class="mbr-text pb-3 mbr-fonts-style mx-auto" mbr-theme-style="display-7" mbr-if="showText" data-app-selector=".mbr-text, .mbr-section-btn">
	We offer a huge collection of simple, beautiful and ready to use blocks. All blocks can be downloaded free of charge from learnwd.com
	</p>
	<div mbr-buttons mbr-theme-style="display-4" class="mbr-section-btn" mbr-if="showButtons" data-toolbar="-mbrBtnMove"><a class="btn btn-md btn-black" href="https://www.learnwd.com/2018/05/mobirise-header-block-1.html">Download Now<br></a></div>
	</div>
	</div>
	</div>
	<div mbr-if="showArrow" class="mbr-arrow hidden-sm-down" aria-hidden="true">
	<a href="#next">
	<i class="mbri-down mbr-iconfont"></i>
	</a>
	</div>
	</section>

view raw Mobirise Template - Header - Logo.html hosted with ❤ by GitHub

CSS Code:

	& when (@bg-type = 'image') {
	background-image: url(@bg-value);
	}
	& when (@bg-type = 'color') {
	background-color: @bg-value;
	}
	& when (@cpe) {
	background-attachment: fixed;
	}
	background-size: cover;
	background-position: center bottom;
	color: #fff;
	font-family: 'Nunito', sans-serif;
	padding-top: 150px;
	padding-bottom: 100px;
	.logo {
	margin-bottom: (@lm * 1px);
	}
	@media (min-width: 992px) {
	height: 100vh;
	padding-top: 0;
	padding-bottom: 0;
	.mbr-text {
	width: 75%;
	}
	}