Working With Page Layout

Once you’ve added modules to a page and added content to the modules, you’re ready to design your page layout. Layout on the page level is all about arranging your units of content—your page modules—with respect to one another. You can do this very easily using the content tabs and the page modules' options panels.

The content tabs—Top, Right, Center, Left, and Bottom—correspond to five different regions of your page layout: three columns and the spaces above and below them. Within any given content tab you will see a list of the modules that are assigned to that region of your page, and on each content tab you'll see a counter indicating the number of modules it contains. To move a unit of content to a different region of your page, drag the corresponding module card into a different tab (we strongly reccomend closing a card before you drag it). When you do this, you'll be taken to that tab, and the module will appear at the bottom of that tab's list of modules.

As you add content to the different regions of a page, AR will automatically generate layouts for break points as configured by the grid tool. By default, the center column will expand to occupy any unoccupied column on a page.

You can control the order in which units of content appear within a given page region by ordering the list of modules within the corresponding content tab as you would like them to appear on your page—just drag and drop to reorder. 

You can use the content selector and the break option, both found on a module's options panel, to arrange modules within a page region. 

The content selector allows you to specify the width of a module as a fraction of the total width of the column in which the module sits. A module's width is expressed as a multiple of 1/12 of the column's width. Bear in mind that the column itself may not take up the full width of the page and, moreover, that the width of the column may change as the page is viewed on different devices.

The break option allows you to specify whether to insert a page break after a unit of content. By removing page breaks and setting content widths appropriately, you can display units of content next to one another in the same region of a page.