Dynamic Divs

Solodev Dynamic Divs make laying out web pages easy and completely customizable while removing the need to duplicate HTML. Dynamic Divs allow you to use HTML markup to create drop zones where you can insert content onto a web page. The Dynamic Div system works extremely well with the Bootstrap grid system as it allows developers to insert Dynamic Divs into the Bootstrap grid allowing you to easily insert content once the layout of the page has been created.

Below is an HTML file with Bootstrap Grid Markup and Dynamic Divs that will ultimately dictate the layout of the web page. It includes a CDN to activate Bootstrap. 

<!-- This layout provides room for a left-nav and main content section -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="dynamicDiv"></div>
<div class="col-md-3">
<div class="dynamicDiv"></div>

When the file above is added to a Dynamic Div on a Page Template it creates room for a right nav and a main content section to the left as shown below. Notice the Dynamic Div where our right nav will go has been selected and is therefore blue. Now You can navigate to the left tree and select the file to insert in that specific drop-zone.

Each Dynamic Div is marked with dotted lines. Everytime you select a Dynamic Div, it will highlight in blue.

You can add unique content to each Dynamic Div container. Adding content to the right navigation and left content block produces a page similar to below:

Dynamic Divs are the connecting elements between your HTML content and STML pages. Generally speaking, your STML pages will contain several Dynamic Divs. These drop-zones allow you to easily drop HTML content into the page itself.


Please sign in to leave a comment.