Page Blocks Dropin Demo Template

Create a simple landing page with a hero, features listing, longform content, and call to action.

Preview HTML

Design options: blue background color, white text

Click to copy 
<div class="inner">
	<div class="format block-triple-tb block-single-lr">
		<img src="HTTPS://YOUR_IMAGE_DOMAIN.COM/IMAGE.PNG" height="325" width="425" class="alignright shadow" />
		<p class="caps">Free Download for all MD Customers</p>
		<h1 class="mb-single">Create Flexible Pages With Custom HTML and Shortcodes with the <strong>Page Blocks</strong> Dropin</h1>
		<p class="small-title">The Page Blocks Dropin for Marketers Delight brings a simple HTML page builder right into your post editor meta box screen. Create unlimited rows, customize the design, and write HTML blocks fast and easy.</p>
		<p><a href="#" class="button button-arrow button-large">Download now</a></p>
	</div>
</div>

Design options: light gray background color and MD font icons

Click to copy 
<div class="inner block-double-tb format text-center">
	<div class="block-quad-lr mb-single">
		<p class="caps">Why Page Blocks?</p>
		<h2>Create Custom HTML Page Templates Fast With Basic Organization From the Post Editor</h2>
		<p>Page Blocks give you a quick interface right from your post editor to write custom HTML and MD helper classes to create custom pages.</p>
		<p><i class="md-icon-angle-down bounce large-title"></i></p>
	</div>
	<div class="columns-3 columns-single columns-flex block-single-lr">
		<div class="col col1 mb-single">
			<div class="box shadow block-single">
				<p><i class="md-icon-menu large-title"></i></p>
				<h3>Create Unlimited Rows</h3>
				<p>Create as many rows of content as you want and easily reorder with drag and drop.</p>
				<p><a href="#link" class="button button-arrow width-full">Learn more</a></p>
			</div>
		</div>
		<div class="col col2 mb-single">
			<div class="box shadow block-single">
				<p><i class="md-icon-pencil large-title"></i></p>
				<h3>Simple Design Options</h3>
				<p>Set background, text, and link colors for each row and even choose spacing between rows.</p>
				<p><a href="#link" class="button button-arrow width-full">Learn more</a></p>
			</div>
		</div>
		<div class="col col3 mb-single">
			<div class="box shadow block-single">
				<p><i class="md-icon-code large-title"></i></p>
				<h3>Write HTML and Shortcodes</h3>
				<p>Use MD Helper Classes and Shortcodes to create responsive elements without CSS.</p>
				<p><a href="#link" class="button button-arrow width-full">Learn more</a></p>
			</div>
		</div>
	</div>
</div>

Design options: white background color

Click to copy 
<div class="inner format block-double-tb">
	<div class="block-double-lr mb-mid">
		<h2 class="text-center">Page Building is a Hard Problem to Solve - The Page Blocks Dropin is an Early Experiment to a Future Solution</h2>
	</div>
	<p class="mb-double"><img src="HTTPS://YOUR_IMAGE_DOMAIN.COM/IMAGE.PNG" height="850" width="850" alt="Marketers Delight" class="shadow aligncenter" /></p>
	<div class="block-full-lr">
		<p class="text-intro">Before I start creating the Marketers Delight official page builder, which I believe will be truly revolutionary when compared to the tools on the market today, I performed dozens of experiments within the WordPress interface to see what the best approach to solving the page building problem could be.</p>
		
		The Page Blocks Dropin was a fun side project that came together in a few short days thanks to the powerful MDAPI, and the result is just good enough to share for those who see its potential.
		
		While Page Blocks do not address visual page building, it is for those who see web pages in HTML and want a slightly polished interface that can give them basic design options, reordering, and a place within the WordPress admin panel.
		
		Combined with MD's extremely useful <a href="https://marketersdelight.net/styles/">helper classes</a>, Page Blocks makes creating full HTML pages like this possible without writing any custom CSS and all of your responsive elements come out great across all devices.
		
		That's because the same helper classes you use in Page Blocks are what MD uses to build its core layout, which is fully responsive, meaning you can reuse that existing library without creating more resources for your page to load.
		
		To those who will use Page Blocks, enjoy the simplicity and the potential a simple HTML page builder can offer you. To those of you waiting for the official MD Builder, just know the rough experiments are over and the solution is finally being worked on within Marketers Delight.
	</div>
</div>

Design options: Dark gray background color, white text color

Click to copy 
<div class="inner block-triple-tb block-quad-lr format text-center">
	<p><i class="md-icon-download large-title"></i></p>
	<h2 class="mb-single">Ready to Get Started? Page Blocks is a Free Download for All MD Customers</h2>
	<p><a href="#" class="button button-arrow">Download now</a></p>
</div>

Page Blocks preview

by Last updated: June 15, 2020

Page Blocks Demo HTML Template

Create HTML content pages from the post editor

Create the following block sections with the included HTML templates. Copy and paste sections into Page Blocks with fast design options and useful helper classes.

Start Building Websites That Delight

You can use the Marketers Delight WordPress Theme on unlimited sites. New features & updates are delivered to sites with your active license key.

Add to Cart

Previous Post:

Next Post: