Page Layout using HTML

Overview


The layout of a page can be specified by coding native HTML. (see HTML Layout for info about designing HTML layouts) When this is done, various div's in the HTML can function as containers for other davinci components. These div's are marked by having an assigned id and the class "insertable".

For information about using HTML in a davinci page, please see HTML corner.

Tools


HTML can be embedded into a blog using the HTML component in the HTML toolbox.

Alternatively, HTML can be created using the HTML app and then copied and pasted into a blog.

Example HTML Layout


The following example demonstrates using a flex layout. The second column has an id assigned and has the class "insertable". This marks this container as a container that is able to contain davinci components. When inserted into a blog, that column will be selectable and will be able to have components inserted into it.


<div style="display:flex;flex-direction:row;height:300px;">
  <div style="flex:1;border:solid;border-width:1px;border-color:lightgrey;height:100%;"></div>
  <div style="flex:1;border:solid;border-width:1px;border-color:lightgrey;height:100%;" id="insert-container" class="insertable"></div>
</div>
					


The result is two columns. However, when this embedded into a blog, the second column is selectable and can have other davinci components inserted into it.

HTML Tools