*Tip Before inserting code into the DDC page editor, you must compress it. You can do that by using this tool

PAGE LAYOUT COLUMNS

Two Column Section Layout

The following examples are quick ways to create multi-column sections on your page. Each <div> within the main container acts as a column and you can insert any element you want. When inserting images into the column layouts, they will automatically adjust to the width of your column.

Marshmallow pudding halvah. Caramels gummies caramels tootsie roll cotton candy. Soufflé sweet roll pudding sugar plum lemon drops. Lollipop cookie lemon drops I love chocolate bar chocolate carrot cake. Chocolate cheesecake cake liquorice tiramisu dragée jelly tiramisu chupa chups. Macaroon carrot cake cotton candy icing I love. Croissant dessert chupa chups marshmallow. Jelly cookie oat cake I love liquorice chocolate bar I love liquorice. Icing biscuit gingerbread brownie jelly-o cheesecake toffee jelly-o jelly beans.

Dragée cake cake tiramisu gummies oat cake sweet. Carrot cake I love dessert tart biscuit. Jujubes ice cream I love I love donut danish marshmallow jelly beans. Marzipan gummies gummies. Lollipop gummies chocolate I love caramels jujubes. Chocolate pudding I love candy canes soufflé.

Section Heading

Sweet roll macaroon I love I love. Dessert sesame snaps candy canes cake. I love brownie macaroon wafer I love tootsie roll powder jujubes chocolate cake. Sugar plum cotton candy fruitcake toffee ice cream pastry oat cake gummi bears cheesecake. Lemon drops liquorice soufflé cake fruitcake croissant pudding. I love sesame snaps I love.

Section Heading

Biscuit muffin candy jelly-o jelly I love I love liquorice cake. Candy jujubes chocolate cake tart chocolate cake chupa chups chocolate bar sweet. Jelly-o halvah cupcake. Sweet biscuit pie pastry halvah. Cheesecake cotton candy I love donut gingerbread cake. Candy macaroon gummies. Sweet sesame snaps sugar plum cheesecake ice cream candy gummi bears gingerbread.

Click Here

<div class="twoColumns">
	<div>

	</div>
	<div>

	</div>
</div>

Vertically Centering Text in a Column

Putting together a page layout and you'd like to place a vertically centered column of text alongside a column containing an image? I gotchu, playa. Simply apply the class of vertical-middle to the <div> containing the text you'd like centered. Boom. Cash money. It even works with images. Incredible stuff!

Text Example

Heading Example

<div class="twoColumns">
	<div class="vertical-middle">

	</div>
	<div>

	</div>
</div>

Image Example

Heading Example

Apple pie powder chocolate bar ice cream chocolate bar sesame snaps pudding. Pudding macaroon soufflé wafer. Sweet marshmallow chupa chups chocolate cake pie sweet roll chocolate bar ice cream. Cotton candy ice cream gingerbread jelly-o lemon drops fruitcake apple pie jujubes bonbon. Liquorice gummi bears sweet roll tootsie roll gummi bears cake cotton candy jelly beans. Cookie ice cream chocolate bar wafer. Dessert bear claw cotton candy liquorice lollipop. Jelly-o wafer cake fruitcake cookie marzipan pastry cake. Icing cookie cookie chupa chups dragée soufflé.

Tootsie roll sweet roll lemon drops. Ice cream wafer bonbon sweet cotton candy gummi bears. Chocolate caramels cookie. Oat cake sesame snaps dessert pudding croissant. Biscuit halvah jelly beans. Donut pudding chocolate cake.

<div class="twoColumns">
	<div class="vertical-middle">

	</div>
	<div>

	</div>
</div>

Two-Thirds Left Column Section Layout

Section Heading

Click Here Click Here

<div class="twoColumns thirdsLeft">
	<div>

	</div>
	<div>

	</div>
</div>

Two-Thirds Right Column Section Layout

Section Heading

Click Here Click Here

<div class="twoColumns thirdsRight">
	<div>

	</div>
	<div>

	</div>
</div>

Three Column Section Layout

Chupa chups soufflé marshmallow icing marzipan pastry pastry liquorice gummi bears. I love I love brownie. Tootsie roll chocolate tiramisu I love. I love pie danish gingerbread I love bonbon apple pie. Cake jelly cookie chupa chups brownie gummies. Jujubes chocolate chocolate bar chocolate bar lollipop pastry. Sugar plum jelly-o cotton candy jelly candy carrot cake.

Click Here

Section Heading

<div class="threeColumns">
	<div>

	</div>
	<div>

	</div>
	<div>

	</div>
</div>

Four Column Section Layout

Click Here

Section Heading

<div class="fourColumns">
	<div>

	</div>
	<div>

	</div>
	<div>

	</div>
	<div>

	</div>
</div>

Five Column Section Layout

Click Here

Section Heading

<div class="fiveColumns">
	<div>

	</div>
	<div>

	</div>
	<div>

	</div>
	<div>

	</div>
	<div>

	</div>
</div>

Six Column Section Layout

Click Here

Section Heading

<div class="sixColumns">
	<div>

	</div>
	<div>

	</div>
	<div>

	</div>
	<div>

	</div>
	<div>

	</div>
	<div>

	</div>
</div>

Image Tile Section Layout

Create an image tile layout section using the following structure and classes. Most images styles should be applied automatically if you're making sure to use the class of tiles on your container div. Keep in mind that for containers you intend to display headings and text in, you must apply the class of content to add necessary padding.

1-2-1 Tile Example

Section Heading

<div class="tiles">
	<img width="#" height="#" src="#" />
	<div class="twoColumns">
		<div class="content">
			<h2>Section Heading</h2>
			<p>Text goes here</p>
		</div>
		<div>
			<img width="#" height="#" src="#" />
		</div>
	</div>
	<img width="#" height="#" src="#" />
</div>

1-2-2 Tile Example

Section Heading

<div class="tiles">
	<img width="#" height="#" src="#" />
	<div class="twoColumns">
		<div class="content">
			<h2>Section Heading</h2>
			<p>Text goes here</p>
		</div>
		<div>
			<img width="#" height="#" src="#" />
		</div>
	</div>
	<div class="twoColumns">
		<div>
			<img width="#" height="#" src="#" />
		</div>
		<div>
			<img width="#" height="#" src="#" />
		</div>
	</div>
</div>

1-2-3 Tile Example

Section Heading

<div class="tiles">
	<img width="#" height="#" src="#" />
	<div class="twoColumns">
		<div>
			<img width="#" height="#" src="#" />
		</div>
		<div class="content">
			<h2>Section Heading</h2>
			<p>Text goes here</p>
		</div>
	</div>
	<div class="threeColumns">
		<div>
			<img width="#" height="#" src="#" />
		</div>
		<div>
			<img width="#" height="#" src="#" />
		</div>
		<div>
			<img width="#" height="#" src="#" />
		</div>
	</div>
</div>