Design Styles

Full Width or Boxed Layouts

Vel­lum offers two pri­ma­ry lay­out styles, boxed and full width. The full width style stret­ches from edge to edge while the boxed style crea­tes a nice clean “page” look with a sub­t­le shadow. In the boxed style you may add cus­tom back­ground colors and images to the page body. Back­ground images can be set to full width, fil­ling the brow­ser and remai­ning sta­tic when scrolling.

screenshot-sample-boxed

Boxed Style

screenshot-sample-full-width

Full Width Style

Selec­ting a Lay­out Style

screenshot-sample-boxed-theme-options

The lay­out style can be set in the default the­me opti­ons for your ent­i­re site by choo­sing “Boxed” as the Lay­out Style under the Design Set­tings area.

Each lay­out crea­ted in the Lay­out Mana­ger pro­vi­des an opti­on to over­ri­de the default lay­out style with a cus­tom set­ting. This method will let you indi­vi­du­al­ly set ent­i­re sec­tions or just a sin­gle page to an alter­na­te lay­out style. A use­ful app­li­ca­ti­on for this would be having a boxed lay­out for your port­fo­lio or blog to spe­ci­fy cus­tom back­ground images as an added accent or for­cing only the home page to full width high­ligh­t­ing the sli­de show.

screenshot-sample-boxed-layout-managerTo app­ly a cus­tom lay­out style for an indi­vi­du­al page, post or area you can edit the lay­out spe­ci­fic to that loca­ti­on and set the “Lay­out Style” opti­on in the right set­tings column. You can crea­te a new lay­out spe­ci­fic to this style. You can assign lay­outs from the Lay­out Mana­ger or an indi­vi­du­al page/post.

A lot is pos­si­ble using cus­tom lay­outs bey­ond just set­ting a lay­out style. Once you start expe­ri­men­ting with the com­bi­na­ti­ons of dif­fe­rent styles and opti­ons you’ll see the power of the Lay­out Manager.

Docked Top Banner

screenshot-sample-docked-setting

Appearan­ce › The­me Opti­ons › Design Styles › Docked Top Banner

The top ban­ner with your logo and menu can optio­nal­ly be docked to scroll with the page. When the opti­on to dock the top ban­ner is enab­led it will auto­ma­ti­cal­ly appe­ar at the top of the screen once you scroll below the hea­der sec­tion of the page.

screenshot-sample-docked-banner

The top ban­ner will redu­ce the size of your logo auto­ma­ti­cal­ly. The menus you have sill still func­tion nor­mal­ly. Mega menu and stan­dard drop down menus will show exact­ly as they do in the stan­dard hea­der. The docked top ban­ner opti­on can be enab­led or dis­ab­led optio­nal­ly based on your preference.