AppDrag Support Center

Page Structure

Unlike other CMS / Website builder you know, AppDrag produce clean responsive code based on Bootstrap. This way everything you produce visually will generate clean source code automatically responsive. This is why you can't positionate an element anywhere on the screen but have to create your layout with Sections/Rows/Columns/Elements.

Here is how a page is cut (every types are customizable independantly)


SECTIONS ROWS >  COLUMNS ELEMENTS

SECTIONS
A page is a succession of blocks with a variable height and take the full screen width, they are called sections

A section we will deeply examinate

ROWS
A section contains one or multiple rows. They are used to create horizontal groups. It's a grid of 12 slots.

First row of the section

Second row of the section


COLUMNS
Columns share the space of the row. If we have two columns in the row if you want them to be equal size they will both take 6 slots of the grid. The important point is that the 12 slots are filled, it could be 3 slots and 9 slots, 4 slots and 8 slots, ...
Columns can be resized with your mouse from the right of the column you want to enlarge or make smaller.


Left columns inside the first row


Right column inside the first row


On mobile, due to small device width, every column will take the full available width and the columns will be appended vertically.

ELEMENTS
Columns are filled with any kind of elements (Text, images, buttons, menus, logos, ...) vertically arranged (below each others) and taking the full width of the column. 




A text in the first column of the first row


A button in the first and only column of the second row


An image in the second column of the first row
---------------------------
------------------------


EXAMPLE



Let's have a look at this Section :
  • Row 1
    • Column 1
      • Icon button
      • Text
    • Column 2
      • Image
  • Row 2
    • Column 1
      • Icon
      • Title
      • Text description
    • Column 2
      • Icon
      • Title
      • Text description
    • Column 3
      • Icon
      • Title
      • Text description

Other articles

Need More Help?

FAQ

If we've been asked before, it's in our Frequently Asked Questions!

Open FAQ

CHAT

Chat directly with the AppDrag team!

Open WebChat

Certified Partners

Not enough time to build your site? Find a Certified Partner to help you!

More Info