Design and Layout​

  • Updated: 2020-06-21
  • First posted: 2020-05-30

In Amibe you have complete control over your design and layout using layout templates for pages and content. This Amibe Doc looks at the different ways this can be done, starting from the easiest.

One-pager or Landing Pages

For a single page website, or a new landing page independent of the main website, no design or layout template is required.

When editing your page, select Elementor Canvas as the Page Layout. No layout template will be applied and the page can be created exactly as required.

One Style to Rule them All

For a professional looking website, and one where it’s easier to maintain and update the design styling, it is best practice to design and style all the key elements in one place and have them applied throughout.

It’s a starting point and any styling can be further customised and adapted where required.

Workflow:

  1. Select or create a color palette to be used throughout the editing of the website.
  2. Specify the default color, spacing and typography styling of page elements such as paragraphs, headings, links, buttons and form fields.

One Layout to Rule them All

Beyond a single page website it becomes necessary to consider using layouts as the requirements for a website grow. The simplest variation is a website that has exactly the same layout for every page, perhaps with a header and a footer.

A page layout is a page template used as the layout and design to display an entire web page.

Workflow:

  1. Add a new page template.
  2. Layout and design the template as it should appear for all pages.
  3. Add the Content Placeholder widget where page content should appear within the layout.
  4. Assign the page template as the global page default.

All pages of the website will now be displayed using the layout of this template.

Contextual Styles

It is possible to have pages of a website that are styled (and laid-out – see next below) independently of the main website.

Workflow:

  1. Create and define a new style kit.
  2. Apply this new style kit to any page(s) that should use it as an alternative to the global style kit.

Usage example:

  • Landing/marketing pages.

Multiple Layouts

A different page layout may be needed in certain circumstances. For example:

  • the home page may have a header section that is distinct from all other pages, or
  • the layout for a blog post page will contain different elements to that of an event page.

Workflow:

  1. Add a new page template.
  2. Layout and design the template as it should appear for the applicable page(s).
  3. Add the Content Placeholder widget where page content should appear within the layout.
  4. Assign the page template to where it should be used.

Reusable Templates

When a different layout is required for a part of the website it is possible to reuse section templates where a part of the layout remains the same, such as the footer.

Workflow 1: existing section

To reuse a section that’s already been created:

  1. Save the section as a template.
  2. Insert the saved template.
  3. Remove the original elements being replaced by the inserted template.
  4. Insert the saved template wherever else it is required.

Workflow 2: new section

To create a template for reuse:

  1. Add a new section template.
  2. Insert this template wherever it is required.

Any change made to the template will reflect wherever it is used.

Usage examples:

Section templates can be reused:

  • in other templates, such as a footer template being inserted at the bottom of many page layout templates,
  • in posts and pages, such as a contact details inserted into both a contact and landing page, and
  • as content templates…

Content Templates

Content layout templates are section templates assigned to display content in different circumstances within a page, such as a list of the latest blog post on the home page.

Workflow 1: default content layout

The global default is how content should display, regardless of what type of content it is, wherever it appears in the site, unless otherwise indicated.

  1. Add a new section template.
  2. Layout and design the template as content should appear by default.
  3. If required, add the Content Placeholder widget where the post’s excerpt or description should appear.
  4. Assign the content template as the global content default.

Workflow 2: layouts for custom post types

Sometimes a type of content will display differently to the the global default wherever it appears in the site, unless otherwise indicated.

  1. Add a new section template.
  2. Layout and design the template as the content it is for should appear.
  3. If required, add the Content Placeholder widget where the post’s excerpt or description should appear.
  4. Assign the content template to the content type it should be used for by default.

Usage examples:

  • Page: display the page title and content.
  • Post: display the post title, featured image, meta information (such as published date, author, comment count and tags used), content, comments and a comment form.
  • Event (custom post type): display the event title, date, venue and description.

Workflow 3: multiple layouts for a post type

Sometimes a type of content will display differently depending on where it appears in a website.

  1. Add a new section template.
  2. Layout and design the template as the content it is for should appear.
  3. Assign the content template using the Posts widget.

Usage examples:

  • List of three most recent blog posts on the home page.
  • Display of blog posts in category or archive pages.

Leave a Reply

Your email address will not be published. Required fields are marked *

Stay in touch

Receive the latest news and articles from Amibe…