Canvas Docs

Page Titles

Page titles Settings:

Settings

SettingDescription
DefaultDefault Page Title style with Text aligned Left & Breadcrumbs Right.
Example: 
<section class="page-title">
	<div class="container">
		<div class="page-title-row">

			<div class="page-title-content">
				<h1>Page Title</h1>
				<span>A Short Page Title Tagline</span>
			</div>

			<nav aria-label="breadcrumb">
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="#">Home</li>
					<li class="breadcrumb-item"><a href="#">Templates</li>
					<li class="breadcrumb-item active" aria-current="page">Page Titles</li>
				</ol>
			</nav>

		</div>
	</div>
</section>
.page-title-rightPage Title style with Text aligned Right & Breadcrumbs Left.
Example: 
<section class="page-title page-title-right">
	<div class="container">
		<div class="page-title-row">

			<div class="page-title-content">
				<h1>Page Title</h1>
				<span>A Short Page Title Tagline</span>
			</div>

			<nav aria-label="breadcrumb">
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="#">Home</li>
					<li class="breadcrumb-item"><a href="#">Templates</li>
					<li class="breadcrumb-item active" aria-current="page">Page Titles</li>
				</ol>
			</nav>

		</div>
	</div>
</section>
.page-title-centerPage Title style with Text & Breadcrumbs aligned Center.
Example: 
<section class="page-title page-title-center">
	<div class="container">
		<div class="page-title-row">

			<div class="page-title-content">
				<h1>Page Title</h1>
				<span>A Short Page Title Tagline</span>
			</div>

			<nav aria-label="breadcrumb">
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="#">Home</li>
					<li class="breadcrumb-item"><a href="#">Templates</li>
					<li class="breadcrumb-item active" aria-current="page">Page Titles</li>
				</ol>
			</nav>

		</div>
	</div>
</section>
.page-title-miniPage Title style with Mini Title.
Example: 
<section class="page-title page-title-mini">
	<div class="container">
		<div class="page-title-row">

			<div class="page-title-content">
				<h1>Page Title</h1>
				<span>A Short Page Title Tagline</span>
			</div>

			<nav aria-label="breadcrumb">
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="#">Home</li>
					<li class="breadcrumb-item"><a href="#">Templates</li>
					<li class="breadcrumb-item active" aria-current="page">Page Titles</li>
				</ol>
			</nav>

		</div>
	</div>
</section>
.darkPage Title style with Background Color Dark.
Example: 
<section class="page-title dark">
	<div class="container">
		<div class="page-title-row">

			<div class="page-title-content">
				<h1>Page Title</h1>
				<span>A Short Page Title Tagline</span>
			</div>

			<nav aria-label="breadcrumb">
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="#">Home</li>
					<li class="breadcrumb-item"><a href="#">Templates</li>
					<li class="breadcrumb-item active" aria-current="page">Page Titles</li>
				</ol>
			</nav>

		</div>
	</div>
</section>
.bg-transparentPage Title style with Background Color Transparent.
Example: 
<section class="page-title bg-transparent">
	<div class="container">
		<div class="page-title-row">

			<div class="page-title-content">
				<h1>Page Title</h1>
				<span>A Short Page Title Tagline</span>
			</div>

			<nav aria-label="breadcrumb">
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="#">Home</li>
					<li class="breadcrumb-item"><a href="#">Templates</li>
					<li class="breadcrumb-item active" aria-current="page">Page Titles</li>
				</ol>
			</nav>

		</div>
	</div>
</section>
.page-title-patternPage Title style with a Background Pattern.
Example: 
<section class="page-title page-title-pattern">
	<div class="container">
		<div class="page-title-row">

			<div class="page-title-content">
				<h1>Page Title</h1>
				<span>A Short Page Title Tagline</span>
			</div>

			<nav aria-label="breadcrumb">
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="#">Home</li>
					<li class="breadcrumb-item"><a href="#">Templates</li>
					<li class="breadcrumb-item active" aria-current="page">Page Titles</li>
				</ol>
			</nav>

		</div>
	</div>
</section>
.page-title-parallaxPage Title style with a Parallax Image.
Example: 
<section class="page-title page-title-parallax parallax dark">
	<img src="images/parallax/8.jpg" class="parallax-bg">
	<div class="container">
		<div class="page-title-row">

			<div class="page-title-content">
				<h1 data-animate="fadeInUp">Page Title Parallax</h1>
				<span data-animate="fadeInUp" data-delay="300">A Short Page Title Tagline</span>
			</div>

			<nav aria-label="breadcrumb">
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="#">Home</li>
					<li class="breadcrumb-item"><a href="#">Templates</li>
					<li class="breadcrumb-item active" aria-current="page">Page Titles</li>
				</ol>
			</nav>

		</div>
	</div>
</section>
.page-title-videoPage Title style with a HTML5 Video.
Example: 
<section class="page-title parallax page-title-parallax dark page-title-video include-header">
	<div class="video-wrap no-placeholder">
		<video poster="images/videos/deskwork.jpg" preload="auto" loop autoplay muted playsinline class="parallax-bg">
			<source src='images/videos/deskwork.mp4' type='video/mp4'>
			<source src='images/videos/deskwork.webm' type='video/webm'>
		</video>
		<div class="video-overlay"></div>
	</div>

	<div class="container">
		<div class="page-title-row">

			<div class="page-title-content">
				<h1>Page Title Video</h1>
				<span>A Short Page Title Tagline</span>
			</div>

			<nav aria-label="breadcrumb">
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="#">Home</li>
					<li class="breadcrumb-item"><a href="#">Templates</li>
					<li class="breadcrumb-item active" aria-current="page">Page Titles</li>
				</ol>
			</nav>

		</div>
	</div>
</section>