Page Blocks Dropin Demo Template

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

Preview HTML
Click to copy

Design options: blue background color, white text

<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>
Click to copy

Design options: light gray background color and MD font icons

<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>
Click to copy

Design options: white background color

<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>
Click to copy

Design options: Dark gray background color, white text color

<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

Page Blocks Demo HTML Template

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 your website with MD now

Get started with MD today. Pay once for use on unlimited websites.
* Save 40% on license key renewals every 12 months. Get auto-updates sent to 5 websites.

Labs

Get the latest MD sent straight to your inbox

There's always something new in the works in the MD Labs! Join the email list to get the newest content and releases sent straight to your inbox.*

Join the MD Newsletter

* I only email you when there's something new, or to share an exciting MD sneak peak.