Page Titles

Page titles Settings:

Settings

Setting Description
Default

Default Page Title style with Text aligned Left & Breadcrumbs Right.

Ex:

<section id="page-title">

	<div class="container clearfix">
		<h1>Page Title</h1>
		<span>A Short Page Title Tagline</span>
		<ol class="breadcrumb">
			<li><a href="#">Home</a></li>
			<li><a href="#">Shortcodes</a></li>
			<li class="active">Page Titles</li>
		</ol>
	</div>

</section>

.page-title-right

Page Title style with Text aligned Right & Breadcrumbs Left.

Ex:

<section id="page-title" class="page-title-right">

	<div class="container clearfix">
		<h1>Page Title Right</h1>
		<span>A Short Page Title Tagline</span>
		<ol class="breadcrumb">
			<li><a href="#">Home</a></li>
			<li><a href="#">Shortcodes</a></li>
			<li class="active">Page Titles</li>
		</ol>
	</div>

</section>

.page-title-center

Page Title style with Text & Breadcrumbs aligned Center.

Ex:

<section id="page-title" class="page-title-center">

	<div class="container clearfix">
		<h1>Page Title Center</h1>
		<span>A Short Page Title Tagline</span>
		<ol class="breadcrumb">
			<li><a href="#">Home</a></li>
			<li><a href="#">Shortcodes</a></li>
			<li class="active">Page Titles</li>
		</ol>
	</div>

</section>

.page-title-mini

Page Title style with Mini Title.

Ex:

<section id="page-title" class="page-title-mini">

	<div class="container clearfix">
		<h1>Page Title Mini</h1>
		<span>A Short Page Title Tagline</span>
		<ol class="breadcrumb">
			<li><a href="#">Home</a></li>
			<li><a href="#">Shortcodes</a></li>
			<li class="active">Page Titles</li>
		</ol>
	</div>

</section>

.page-title-dark

Page Title style with Background Color Dark.

Ex:

<section id="page-title" class="page-title-dark">

	<div class="container clearfix">
		<h1>Page Title Dark</h1>
		<span>A Short Page Title Tagline</span>
		<ol class="breadcrumb">
			<li><a href="#">Home</a></li>
			<li><a href="#">Shortcodes</a></li>
			<li class="active">Page Titles</li>
		</ol>
	</div>

</section>

.page-title-nobg

Page Title style with Background Color Transparent.

Ex:

<section id="page-title" class="page-title-nobg">

	<div class="container clearfix">
		<h1>Page Title No BG</h1>
		<span>A Short Page Title Tagline</span>
		<ol class="breadcrumb">
			<li><a href="#">Home</a></li>
			<li><a href="#">Shortcodes</a></li>
			<li class="active">Page Titles</li>
		</ol>
	</div>

</section>

.page-title-pattern

Page Title style with a Background Pattern.

Ex:

<section id="page-title" class="page-title-pattern">

	<div class="container clearfix">
		<h1>Page Title with Pattern</h1>
		<span>A Short Page Title Tagline</span>
		<ol class="breadcrumb">
			<li><a href="#">Home</a></li>
			<li><a href="#">Shortcodes</a></li>
			<li class="active">Page Titles</li>
		</ol>
	</div>

</section>

.page-title-parallax

Page Title style with a Parallax Image.

Ex:

<section id="page-title" class="page-title-parallax page-title-dark" style="background-image: url('');"
data-stellar-background-ratio="0.3">

	<div class="container clearfix">
		<h1>Page Title Parallax</h1>
		<span>A Short Page Title Tagline</span>
		<ol class="breadcrumb">
			<li><a href="#">Home</a></li>
			<li><a href="#">Shortcodes</a></li>
			<li class="active">Page Titles</li>
		</ol>
	</div>

</section>

.page-title-video

Page Title style with a HTML5 Video.

Ex:

<section id="page-title" class="page-title-parallax page-title-dark page-title-video">

	<div class="video-wrap">
		<video width="100%" src="images/videos/deskwork.mp4" preload="auto" loop autoplay muted></video>
		<div class="video-overlay"></div>
	</div>

	<div class="container clearfix">
		<h1>Page Title Video</h1>
		<span>A Short Page Title Tagline</span>
		<ol class="breadcrumb">
			<li><a href="#">Home</a></li>
			<li><a href="#">Shortcodes</a></li>
			<li class="active">Page Titles</li>
		</ol>
	</div>

</section>

Last Modified: June 2, 2020