Overview

The Layers section houses all different available layers to build your pages with. Layers are the building blocks for every page on your website - any combination of these layers can be added to a page in order to build a complete page. There are many different available layers to use as follows:

• Header banners
• Text + Image
• Text + Subnavigation
• Key Contacts
• Downloads & Links
• Videos
• Accordions
• Announcements
• Galleries
• Testimonials
• Custom Modules

Header Banners

Header banners are often used on pages of a website to show a large banner image with a headline and some text. Most websites would likely use a header banner for each page as their starting layer for a page.

In the header banner subsection within LayerSync, you can see a list view of all the header banners that have been added to your website. This list view displays the ID generated by the CMS, Title, View and Creation Date. You can also edit/delete header banners from this list.

Header banners views will be unique to your website and will be predetermined at the design stage. A common example of views that may be added for header banners would be Homepage and Subpage - for instance you may want a larger header banner for the homepage as that is your website landing page and something more subtle for all subpages.

Editing Header Banners

When editing a header banner you are taken to the editor page. Here you can add a title, select your view, add a headline, add text content and add your image. All of these once added can be updated/edited from the list view. Once added, this layer will then become available to add from the list of layers in a page within Pages - it can also be edited from within the page once it has been added.

Text + Image

Text + Image layers are a widely used and versatile layer to add to your pages. Most websites would likely use a Text + Image layer somewhere within a page.

In the Text + Image subsection within LayerSync, you can see a list view of all the Text + Image layers that have been added to your website. This list view displays the ID generated by the CMS, Title, View and Creation Date. You can also edit/delete Text + Image layers from this list.

Text + Image views will be unique to your website and will be predetermined at the design stage. A common example of views that may be added for Text + Image would be Default and Reverse or Left and Right - this would be if you would allow you to choose what side you want the image and what side you would like the text.

Editing Text + Image

When editing a Text + Image you are taken to the editor page. Here you can add a title, select your view, add a headline, add text content and add your image. All of these once added can be updated/edited from the list view. Once added, this layer will then become available to add from the list of layers in a page within Pages - it can also be edited from within the page once it has been added.

Text + Subnavigation

Text + Subnavigation layers work very similarly to Text + Image layers, however they allow you to have a subnavigation to the side of the content. In order for these sections to work, you must have the navigation you want to use added in Navigation. This Navigation is assigned to a given Text + Subnavigation layer when you create/edit it.

In the Text + Subnavigation subsection within LayerSync, you can see a list view of all the Text + Subnavigation layers that have been added to your website. This list view displays the ID generated by the CMS, Title, View and Creation Date. You can also edit/delete Text + Subnavigation layers from this list.

Text + Subnavigation views will be unique to your website and will be predetermined at the design stage. These predetermined views can be selected in the editor.

Editing Text + Subnavigaton

When editing a Text + Subnavigation you are taken to the editor page. Here you can add a title, select your view, select the navigation you wish to use, add a headline, add text content and add your image. All of these once added can be updated/edited from the list view. Once added, this layer will then become available to add from the list of layers in a page within Pages - it can also be edited from within the page once it has been added.

Key Contacts

Many websites have pages where their team is displayed and this is where the Key Contacts layer comes in. If you are displaying your team on your website, using key contacts allows for much more versatility and consistency if you wish to display these contacts on multiple pages, in different formats or even if you want to add certain contacts to articles. It is one overarching section where you can add staff members in one place and then these details can then be used in many formats.

In the Key Contacts subsection within LayerSync, you can see a list view of all the Key Contacts that have been added to your website. Here you can edit and remove them from the list. In certain cases, you may wish to display a full list of contacts on a page, in this instance you should use the Drag and Drop tool to determine the order in which they will appear in that list. The way contacts appear in this list will be the order in which they display on your site.

Downloads & Links

Downloads and Links are an extremely useful layer, they can be used to display a multitude of downloads and links in one place. An example of this might be, perhaps you have a lot of PDF documents you want to use on your site and it’s important they are available to be seen by your site visitors - a Downloads and Links layer would be perfect to concisely display all of them in one accessible layer.

In the Downloads & Links subsection within LayerSync, you can see a list view of different Groups of Downloads and Links that have been added to your site. Then subsequently you can add Items to these groups - this allows you to create multiple groups of downloads and links, each of these groups will be available to add to pages within the right side dropdown within a page. Items that have been added can be reordered using the Drag and Drop tool.

Videos

Video layers allow you to add videos to your site - adding videos can really bring a site alive and are commonly used in many sites.

In the Videos subsection within LayerSync, you can see a list view of all the Videos layers that have been added to your website. This list view displays the ID generated by the CMS, Title, View and Creation Date. You can also edit/delete video layers from this list.

Video views will be unique to your website and will be predetermined at the design stage. These predetermined views can be selected in the editor.

The editor itself is a familiar setup to other sections such as ‘Text + Image’ - the user can add the video title, select the view, add a headline, description, update the video URL and add a video cover image.

Accordions

Accordion layers are similar to any layer that uses a text section on your site, however it allows the content to be hidden and visible on click. For example FAQs would be a great way to use accordions, with the question visible and then on click revealing the answer in a dropdown below.

In the Accordions subsection within LayerSync, you can see a list view of all the Accordion layers that have been added to your website. This list view displays the ID generated by the CMS, Title, View and Creation Date. You can also edit/delete Accordion layers from this list.

Accordion views will be unique to your website and will be predetermined at the design stage. There could be different accordion views depending on the website design.

Editing Accordions

When editing an Accordion you are first taken to the item list page. Here you can add items to your accordion - the title you add for each item is for your reference and will not display as the headline. Each item can also be reordered, edited and removed from this item list page.

To edit the content of an item, on pressing the Pen tool within LayerSync, the user is taken to another edit page - here you can access and edit the title, headline, description and content. The headline you add for each item is what will display initially to the viewer before activating the click function, the content is what will dropdown as further content.

Once added, this layer will then become available to add from the list of layers in a page within Pages - it can also be edited from within the page once it has been added.

Announcements

Announcements are used to add a pop up to any page on your website - these can then be closed by the viewer. This would be commonly used to inform your site viewers of some important information, an example could be a closure due to a bank holiday and this could be displayed as an announcement layer.

Once added, announcements can be altered and removed - they will also become available in the layers available to add on a page.

Galleries

Galleries are often found on websites and this is exactly what the gallery layer in LayerSync would be used to create - galleries work very similarly to Downloads & Links, first a gallery is created and then you add gallery items to it, which would be the pictures you wish to display.

The design of a gallery would be determined at an earlier stage, so this layer allows the user to populate these fields with the images they would like in their galleries. There can be multiple galleries added to the site so this allows for different content to be displayed on different pages.

Testimonials

Testimonials are a very popular section that a lot of sites include. They usually consist of some sort of display of either one or a few testimonials, commonly testimonials have some sort of sliding visual effect that then shows more testimonials. This slide or non slide effect would be determined at the design stage.

In the Testimonials subsection within LayerSync, you can see a list view of all the Testimonials layers that have been added to your website. This list view displays the ID generated by the CMS, Title, View and Creation Date. You can also edit/delete Testimonials layers from this list.

Within the Testimonials group, you can see a list view of all the Testimonial items that have been added to your Testimonials group. Here you can edit and remove them from the list. You should use the Drag and Drop tool to determine the order of which they will appear in that list. The way Testimonial items appear in this list will be the order in which they display on your site.

Once Testimonial items have been added and populated you can then add the group to your pages through the right hand side layer dropdowns in pages under testimonials.

Custom Modules

Sometimes certain design features of a website do not fit into the parameters of the above editable layers - this is when we would use a custom module. Custom modules can still be edited in the CMS however it would require editing of raw source code to do so - LayerSync has a built in editor for source code should you need to edit these sections.

In the Custom modules subsection within LayerSync, you can see a list view of all the Custom module layers that have been added to your website. This list view displays the ID generated by the CMS, Title and Creation Date. You can also edit/delete Testimonials layers from this list.

Any custom modules that have been added to your site will already be populated with the correct code in order for them to work with your website, so when editing these modules they will already be populated - there will not be a time where you have to create any of these sections from scratch - this is available simply for you to edit/update the content of these sections.

As this is more complicated than using the simple editor, we recommend that you ask us if you have any queries in regards to this.