HomeDesigning › Full width pages (pages with sections)

Full width pages (pages with sections)

Sometimes – typically on the Home page – you may want to create a layout with full width sections using different colours. In the example below, the three side by side callouts are inside a grey section:

Page width sections

To do that:

 

1. Edit the Page Properties

  • In the Special tab, under Page Layout / Page Template select Full width content backgrounds and save.

2. Add the Embed Code block to open the section

  • Add an Embed Code content block with [ywd-section] as the code. That’s a command that YWD uses to open/close sections.
  • The opening Embed Code is a content block itself. So if you assign an autoformat or a CSS class to it, it will be inherited by the content blocks inside it. So if for instance you’ve defined Style 1 in the Design settings as having a grey 

3. If you have side by blocks, insert a Word Processor block first

  • For instance, if you have callout boxes side by side inside the section, you need a regular/stacked Wod Processor block above them, typically something like ‘Our Services’. If you don’t have anything, simply add an empty Word Processor block. Otherwise, the side by side blocks will float/be flushed all the way to the left of the browser window, which normally you don’t want.

4. Add the section content

  • Add the content block(s) inside the section. It can be a single block or multiple, stacked or side by side.

5. Add the Embed Code block to close the section

  • Add an Embed Code content block with [ywd-section] as the code. That’s a command that YWD uses to open/close sections.

 

Front end:

Front-end

 

Back-end:

Back-end

Top of page