{"id":641,"date":"2013-04-18T20:59:04","date_gmt":"2013-04-18T20:59:04","guid":{"rendered":"http:\/\/para.llel.us\/themes\/vellum-wp\/?page_id=641"},"modified":"2013-04-18T20:59:04","modified_gmt":"2013-04-18T20:59:04","slug":"design-styles","status":"publish","type":"page","link":"https:\/\/theaddedelement.com\/sample-pages\/design-styles\/","title":{"rendered":"Design Styles"},"content":{"rendered":"

Full Width or Boxed Layouts<\/h2>\n

Vellum offers two primary layout styles, boxed and full width. The full width style stretches from edge to edge while the boxed style creates a nice clean “page” look with a subtle shadow. In the boxed style you may add custom background colors and images to the page body. Background images can be set to full width, filling the browser and remaining static when scrolling.<\/p>\n

\"screenshot-sample-boxed\"<\/a>
Boxed Style<\/figcaption><\/figure>\n
\"screenshot-sample-full-width\"<\/a>
Full Width Style<\/figcaption><\/figure>\n

Selecting a Layout Style<\/h3>\n

\"screenshot-sample-boxed-theme-options\"<\/a><\/h3>\n

The layout style can be set in the default theme options for your entire site by choosing “Boxed<\/strong>” as the Layout Style<\/strong>\u00a0under the Design Settings<\/strong> area.<\/p>\n

Each layout created in the Layout Manager provides an option to override the default layout style with a custom setting. This method will let you individually set entire sections or just a single page to an alternate layout style. A useful application for this would be having a boxed layout for your portfolio or blog to specify custom background images as an added accent or forcing only the home page to full width highlighting the slide show.<\/p>\n

\"screenshot-sample-boxed-layout-manager\"<\/a>To apply a custom layout style for an individual page, post or area you can edit the layout specific to that location and set the “Layout Style” option in the right settings column. You can create a new layout specific to this style. You can assign layouts from the Layout Manager or an individual page\/post.<\/p>\n

A lot is possible using custom layouts beyond just setting a layout style. Once you start experimenting with the combinations of different styles and options you’ll see the power of the Layout Manager.<\/p>\n

Docked Top Banner<\/h2>\n
\"screenshot-sample-docked-setting\"<\/a>
Appearance \u203a Theme Options \u203a Design Styles \u203a Docked Top Banner<\/figcaption><\/figure>\n

The top banner with your logo and menu can optionally be docked to scroll with the page. When the option to dock the top banner is enabled it will automatically appear at the top of the screen once you scroll below the header section of the page.<\/p>\n

\"screenshot-sample-docked-banner\"<\/a><\/p>\n

The top banner will reduce the size of your logo automatically. The menus you have sill still function normally. Mega menu and standard drop down menus will show exactly as they do in the standard header. The docked top banner option can be enabled or disabled optionally based on your preference.<\/p>\n","protected":false},"excerpt":{"rendered":"

Full Width or Boxed Layouts Vellum offers two primary layout styles, boxed and full width. The full width style stretches from edge to edge while the boxed style creates a nice clean “page” look with a subtle shadow. In the boxed style you may add custom background colors and images to the page body. Background […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3367,"menu_order":15,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/theaddedelement.com\/wp-json\/wp\/v2\/pages\/641"}],"collection":[{"href":"https:\/\/theaddedelement.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/theaddedelement.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/theaddedelement.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theaddedelement.com\/wp-json\/wp\/v2\/comments?post=641"}],"version-history":[{"count":0,"href":"https:\/\/theaddedelement.com\/wp-json\/wp\/v2\/pages\/641\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/theaddedelement.com\/wp-json\/wp\/v2\/pages\/3367"}],"wp:attachment":[{"href":"https:\/\/theaddedelement.com\/wp-json\/wp\/v2\/media?parent=641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}