HotDoodle Logo
Customize Website Layout

The layout of the website sets the areas of the website in which content can be inserted. These areas include headers, footers, sidebars, and main content areas of the website. The widths and images of these sections are controlled by the theme, but the layout is what determines if the section will be included and what blocks will appear in that section.

Layouts can be modified in the following ways: 

  1. Create Columns -- The Container Block can be used to create columns within sections that already exist. See: Create Columns
  2. Select a Different Layout -- Layouts can be changed in a website much like switching the faceplate on a cell phone, it does not affect the content (but some content might not be displayed if it is in an area such as a sidebar that is not in the new layout), and it can be reversed at any time. See: Select a Different Layout
  3. Set a Per-Page Layout -- The layout can be changed for just one page of the website. See: Set a Per-Page Layout
  4. Adjust the Layout -- The areas in the website in which content can be inserted within headers, footers, and sidebars can be adjusted via overrides from the Appearance / Layout Content screen. No technical skills are required for this operation. See: Adjust the Layout
  5. Create a Custom Layout -- More advanced changes may be made by creating a custom layout. Doing this, however, requires knowledge of HTML. See: Create a Custom Layout

Adjust the Layout

There are multiple sections of the website that the layout can be adjusted including header, main area, sidebar, secondary sidebar, footer, and pre-main area.

Steps: How to Adjust the Layout

1. From the HotDoodle Toolbar, click on the "Appearance" tab.

2. Click on the "Layout Content" button.

The Site Configure Layout Details screen appears. Each area of the website is listed, along with several content choices including: text, images, menu, etc. The current selection is checked and listed at the top of each section.

3. Click on the "Show" link to reveal layout options for each section.

4. Click on a radio button to select the specific content layout within each individual section.

5. Click on the "Save" button at the bottom of the page to apply all changes.


Configure Site Layout Details

The Configure Site Layout Details page allows selection from pre-selected layout structures for each section of the website. When switching from one layout to another, blocks not specified by that layout will not appear. These blocks are not deleted and will be shown again if the previous layout is reselected. These pre-selected layouts determine two aspects of the particular section:

1. The required blocks for that section - If a selected layout specifies a type of block, that type of block is required to be present in that section. The block can be edited to contain anything allowed by that block, or the block can be empty, but it cannot be deleted. If a selected layout does not specify a certain type of block, it cannot be added as the layout restricts the addition of blocks not specified. The one exception is layouts that specify a Container Block because Container Blocks are special and can contain all other blocks. Only when a layout specifies a container, can any other blocks be added to that section.

2. The positioning of the required blocks for that section - The positioning of the required blocks is set by the selected layout and blocks cannot be moved. Blocks can only be moved when the layout specifies a Container Block and other blocks are added inside that container. Each of the following selections has a thumbnail to show how the required content will appear and a short description of the content elements that are included in that section layout. 

Shared Content
Shared content is content that appears on every page of the website. Shared content can be a header, footer, sidebar, or part of the main area that appears on every page.

Per-Page Content
Per-page content is different for every page.


Header Layout Options

The Portrait Text Menu V2: This Header Layout specifies the layout to have 1 Picture Block, 1 General Block, and 1 Menu Block in the header where the content of all three blocks is shared and appears on all pages of the website. The positioning of these blocks is shown in the thumbnail.

Portrait Text V2: This Header Layout specifies the layout to have 1 Picture Block, 1 General Block, and No Menu Block in the header where all content is shared and appears on all pages of the website. This layout allows for the Menu Block to be in a place other than the header. The positioning of these blocks is shown in the thumbnail.

Advanced: This Header Layout specifies 1 Container Block that shares all of its contents with all pages of the website, and 1 per page Container Block that has unique content for all the pages of the website. This layout allows for the Menu Block to be in a place other than the header. The positioning of these blocks is shown in the thumbnail with the shared Container Block above the per-page Container Block.

1 Text: This Header Layout specifies the layout to have 1 General Block in the header where all content is shared and appears on all pages of the website. This layout allows for the Menu Block to be in a place other than the header. The positioning of these blocks is shown in the thumbnail.

1 Container: This Header Layout is versatile as it specifies the layout to have 1 Container Block in the header, which can hold any number of blocks choosen to add to that container. The Container Block and any blocks inside the container are shared and appear on all pages of the website. Any of the blocks in this layout can Added, Copied, Deleted, Moved as well as edited in the header except the required Container Block. This layout does not come with a Menu Block specified, but one can be added inside the required Container Block. The position of blocks placed in the Container Block is not restricted.

Banner V2: This Header Layout requires and restricts the layout to contain only 1 Picture Block in the header, which is shared and appears on all pages of the website. The positioning of these blocks is shown in the thumbnail.

Textmenu: This Header Layout specifies 1 General Block and 1 Menu Block in the header. These blocks are shared and appear on every page of the website. The positioning of these blocks is shown in the thumbnail where the Menu Block appears below the General Block.

Menutext: This Header Layout specifies 1 General Block and 1 Menu Block in the header. These blocks are shared and appear on every page of the website. The positioning of these blocks is shown in the thumbnail where the Menu Block appears above the General Block.

Containermenu: This Header Layout specifies 1 Container Block and 1 Menu Block in the header. These blocks are shared and appear on every page of the website. The Container Block can hold any number of blocks choosen to add to that container. Any of the blocks in the Container Block of this layout can be Added, Copied, Deleted, Moved as well as edited except the required Container Block and Menu Block. The positioning of these blocks is shown in the thumbnail where the Menu Block appears below the Container Block.

Advancedh: This Header Layout specifies 1 Container Block that is shared and appears on every page and 1 Container Block that contains per page content, or content that is different for every page. The positioning of these blocks is shown in the thumbnail with the shared Container Block on top of the per page Container Block.

Trisplit: This Header Layout specifies 3 General Blocks and a Menu Block. The first and last General Blocks are shared and their content appears on every page, while the General Block in the middle contains per page content. The positioning of these blocks is shown in the thumbnail with the 3 General Blocks above the Menu Block.


Main Area Layout Options

1 Container: This Main Area Layout specifies 1 Container Block. The Container Block can hold any number of blocks choosen to add to that container. Any of the blocks can Added, Copied, Deleted, Moved as well as edited in the Container Block of this layout except the required Container Block. This layout allows the addition of more containers and blocks as needed. There is no shared content specified so content can be different on every page.

You Are Here (yah): This Main Area Layout is the same as the 1 Container Layout above with the addition of a Menu Block with a You are Here view placed at the top of the Main Area. The You Are Here view shows the name of the page that the viewer is currently viewing. 

Breadcrumb: This Main Area Layout is the same as the 1 Container Layout above with the addition of a Menu Block with the Breadcrumb view placed at the top of the Main Area. A Breadcrumb is the trail of pages and sub-pages through the hierarchy of a website that a visitor has clicked on to get to the page that they are currently viewing. When this option is chosen for the Main Area Layout, the Breadcrumb trail appears at the top of the Main Content Area with each page/link in the Breadcrumb trail being a clickable link to return to any level in that hierarchy/trail.

Navigation: This Main Area Layout is the same as the 1 Container Layout above with the required addition of a container above, which has shared content on all pages and a Menu Block. This is a layout that can be used to place the same element at the top of all the Main Content Areas, like a picture or some common text.


Main Sidebar and Secondary Sidebar Layout Options

Before Navigation After Main: This Sidebar Layout specifies a per-page Container Block, which allows for unique content on every page on top of a shared Container Block containing a Menu Block that appears on all pages of the website, and finally another per-page Container Block on the bottom, which allows for unique content on every page. The positioning of these blocks is shown in the thumbnail.

Before and Common: This Sidebar Layout specifies a per page Container Block, which allows for unique content on every page above a shared Container Block that appears on all pages of the website. The positioning of these blocks is shown in the thumbnail.

1 Container: This Sidebar Layout specifies 1 Container Block in the sidebar that is shared and appears on all pages of the website.

Portrait Text Before Common After: This Sidebar Layout specifies 1 Picture Block, 1 General Block, and 1 Container Block, where all blocks are shared and appear on every page of the website. The positioning of these blocks is shown in the thumbnail. 


Footer Layout Options

1 Text: This Footer Layout specifies 1 General Block in the footer that is shared and appears on all pages of the website.

1 Container: This Footer Layout specifies 1 Container Block in the footer, where the Container Block is shared and anything added to it is shared and appears on all pages of the website.

Advanced: This Footer Layout specifies 1 Container Block that shares all of its contents with all pages of the website, and 1 per-page Container Block that has unique content for all the pages of the website. The positioning of these blocks is shown in the thumbnail with the shared Container Block above the per-page Container Block.

Menutext: This Footer Layout specifies 1 Menu Block and 1 General Block. These blocks are shared and appear on all pages of the website. The positioning of these blocks is shown in the thumbnail with the Menu Block above the General Block.

Menucontainer: This Footer Layout specifies 1 Menu Block and 1 Container Block. These blocks are shared and appear on all pages of the website. The positioning of these blocks is shown in the thumbnail with the Menu Block below the Container Block.


Pre-Main Area Layout Options

Advanced: This Pre-Main Area Layout specifies 1 Container Block that shares all of its contents with all pages of the website, and 1 per-page Container Block that has unique content for all the pages of the website. The positioning of these blocks is shown in the thumbnail with the shared Container Block above the per-page Container Block.


© 2006 - 2015 Metabyte, Inc., All Rights Reserved, Patents Pending

http://www.hotdoodle.com, HotDoodle™ Custom Web Design and Quality Affordable Website Designers for Small Businesses and Professionals
Powered by http://www.hotdoodle.com, HotDoodle™ Custom Web Design and Quality Affordable Website Designers for Small Businesses and Professionals
Website Designs for for Self-edit Sites Site Map