Totally Responsive Website Design

BACKGROUND

BACKGROUND refers to the layer of display which sits behind the CONTAINER when your website is viewed in a browser window.

BACKGROUND Style Set

Change the following features with just a few simple clicks.

Choose to display either a BACKGROUND COLOUR, a BACKGROUND IMAGE or both at the same time.

Background Colour

Change the BACKGROUND COLOUR of your website.

It is white by default but you can display any colour you choose.

Background Image

Choose instead to display a BACKGROUND IMAGE.

When you do you can control when the IMAGE is visible.

For example:

• only on PCs,
• only on Tablets (landscape view) & PCs,
• only on Tablets & PCs, or
• across ALL devices, including Phones.

Choose what kind of BACKGROUND is displayed:

• colour,
• gradient,
• repeating pattern, or
• large image.

Background Padding

Increase padding:

• at top, and
• to the left and right

of the browser screen on PCs and Tablets (landscape).

CONTAINER

The CONTAINER is the LAYER of display which sits in front of the BACKGROUND in a WYNCHCO website design.

CONTAINER Style Set

Change the following features with just a few simple clicks.

Body Font

BODY FONT refers to the default font used by most text displayed in your website.

We include a small range of Google Fonts in every WYNCHCO website design.

We make it easy for you to add more.

Heading Font

HEADING FONT refers to the default font used by headings in your website.

You can also separately change the font used by your website's SITE TITLE and STRAPLINE.

Text Size & Letter Spacing

Change the size of text displayed in your website.

Increase or decrease the space between letters.

Being able to change text size and letter spacing is useful when you change FONTS.

Top Padding

Change the amount of space above the CONTAINER.

Corners

Choose to display either SQUARE or ROUND corners.

FOREGROUND

The FOREGROUND is the LAYER of display which sits in front of the CONTAINER in a WYNCHCO website design.

FOREGROUND Style Set

Change the following features with just a few simple clicks.

Header

HEADER refers to the layer of display which sits in front of the FOREGROUND above the MAIN BODY.

You can change the HEADER:

• background colour, and its
• width.

You can also increase the width of the NAVBAR.

Sidebars

You can choose the width of SIDEBAR to be displayed:

• NARROW,
• WIDE or
• VERY WIDE.

MAIN BODY

The MAIN BODY is the LAYER of display which sits in front of the FOREGROUND in a WYNCHCO website design.

It is where all ARTICLES are displayed, as well as BOXES when published in the ABOVE and the BELOW positions.

On PCs & Tablets (landscape) it sits between the LEFT and the RIGHT positions.

On Phones & tablets (portrait) it sits between the PORTRAIT-TOP and the PORTRAIT-BOTTOM  positions.

MAIN BODY Style Set

Change the following feature with just one click.

PADDING

Separately control MAIN BODY PADDING on:

• PCs & Tablets (landscape) and
• Phones & Tablets (portrait).

Increase padding to create a more open feel.

Useful when you choose to display a dark screen BACKGROUND.

BOXES

BOX refers to a MODULE which has been assigned a BOX STYLE SET.

BOXES can be displayed in any position.

BOX STYLE SETS include:

• BOX,
• OPENBOX,
• WIDEBOX and
• TABMENUBOX.

The image below illustrates each BOX Style Set before you change its Look & Feel - see below.

Change the Look & Feel

Change the look & feel of BOXES with just a few simple clicks.

It is easy to globally apply style changes to each and every Module to which you have assigned a BOXES Style Set.

And if you would like more power at your fingertips we can create more BOXES Style Sets for you.

Settings you can change with a few simple clicks:

• Text colour,
• Link colour,
• Background colour,
• Border colour,
• Border width,
• Corner rounding, and
• Module padding.

Each BOX Style Set is configured to work with the Custom Module Background Image option included with the Joomla! CMS.

In other words, every single BOX can have a unique background image or colour if you so wish.

BRANDING

Your website should reflect your brand identity.

Change your website's SITE BANNER (image) or SITE TITLE (text) and its COPYRIGHT statement to reflect your brand.

Choose to display either:

• a SITE BANNER or SITE TITLE,
• with or without a STRAPLINE.

Change the Look & Feel of the SITE TITLE and STRAPLINE.

Change the landing page to which the SITE BANNER & SITE TITLE are linked.

Change the COPYRIGHT text displayed at the bottom of your website.

Site Banner

Display any one of six different SITE BANNER images to reflect the screen size of the device used by website visitors:

• PC & Laptop,
• iPad (landscape),
• iPad (portrait),
• Tablet (landscape),
• Tablet (portrait), and
• Phone.

You may choose instead to display one SITE BANNER across all devices and screen sizes.

Site Title & Strapline

Choose to display a SITE TITLE instead of a Site Banner.

Add a STRAPLINE if you wish, and change the font of both.

We include an initial range of Google Fonts for you to use, and make it easy for you to add more.

Copyright Statement

Change the COPYRIGHT text displayed at the foot of your website.

Change its colour to make it more visible when you change your website's BACKGROUND.

Control what visitors see by DEVICE

WYNCHCO website designs incorporate STYLE SETS which enable you to control how content is displayed 'on the fly'.

STYLE SETS determine which MODULES and BOXES are displayed depending upon the DEVICE used to view your website.

Such STYLE SETS enable you to vary:

• LAYOUT, and
• CONTENT

in response to the DEVICE being used.

For example, you can display a fast loading SIMPLIFIED version of your website on SMALL SCREEN devices.

And display the FULL version on LARGE SCREEN devices.

Result

• Faster page load speeds on small screen devices.
• Improved performance in search engines.
• Improved visitor experience.

Control what visitors see by SCREEN SIZE

WYNCHCO website designs incorporate STYLE SETS which enable you to control how content is displayed 'on the fly'.

STYLE SETS determine which MODULES and BOXES are displayed depending upon the SCREEN SIZE used to view your website.

Such STYLE SETS enable you to vary:

• LAYOUT, and
• CONTENT

in response to the SCREEN SIZE being used.

For example, you may display a fast loading SIMPLIFIED version of your website on SMALL SCREENS.

And the FULL version on LARGE SCREENS.

Result

• Faster page load speeds on small screen devices.
• Improved performance in search engines.
• Improved visitor experience.

FONTS

FONT Style Sets enable you to change the FONT FAMILY used by different website elements.

We include a range of Google Fonts in every WYNCHCO website design (see the list below) but you can easily change these.

And you can add more when you browse the more than 800 Google Fonts listed in the Google Fonts Directory.

We show you how in this User Guide.

Google Fonts

The Google Fonts included by default in a WYNCHCO website design are 'self-hosted'.

In other words, the fonts are included with your website's template.

Reason: to avoid the need for web browsers to call Google fonts from a remote server every time a website page loads.

Result: page load speeds are faster than they would be if fonts were loaded from the Google server.

Body Font

'Roboto', sans serif.

Headings Font

'Roboto Condensed', sans serif.

Site Title & Strapline Font

'Open Sans', sans serif.

FORMAT

The FORMAT Style Set enables you to easily change:

• DISPLAY FORMAT, and
• STATIC DISPLAY WIDTH.

Display Format

Choose between STATIC and FLUID display formats.

• STATIC: fixed width display.
• FLUID: full width display on all screen sizes.

Static Display Width

Choose between a WIDE or VERY WIDE static display:

• WIDE = 940 PX, or
• VERY WIDE = 1140 PX (default).

IMAGE CORNERS

In a WYNCHCO website design IMAGE CORNERS are round by default.

But they don't have to be.

Choose between SQUARE and ROUNDED corners with just one click.

You can also choose the degree of rounding.

MENU LINKS

MENU LINK Style Sets enables you to change the Look & Feel of Menu Links with just a few simple clicks.

Change the Look & feel of:

• LIST Menus,
• TAB Menus, and the
• BOTTOM Menu.

LIST and TAB Menus

WYNCHCO website designs enable you to display MENUS using two discrete STYLE SETS.

LIST Menu

Here's what a LIST Menu looks like in a WYNCHCO Website Design before you change its Look & Feel.

TAB Menu

Here's what a TAB Menu looks like in a WYNCHCO Website Design before you change its Look & Feel.

Change the text size of LIST Menu Links.

Change the text size and weight of TAB Menu Links.

BOTTOM Menu

Change the size, colour and weight of BOTTOM Menu Link text.

Change the background colour of the BOTTOM Menu.

Example: Landscape View

BOTTOM Menu in a WYNCHCO Website Design before you change the colour of text and background.

Example: Portrait View

BOTTOM Menu wraps round on small screen devices like smartphones and tablets.

NAVBARS

NAVBAR Style Sets enable you to change the look & feel of MENUS published in NAVBAR positions.

Here's what a MENU published in a NAVBAR position looks like before you change its Look & Feel.

PCs & Tablets (landscape)

Phones and Tablets (portrait)

Menu wraps round on small screen devices like smartphones and tablets.

Menu links slide out when the visitor dabs the hamburger button on the right.

Change the Look & Feel

Change the following features with just a few simple clicks.

Change the colour of:

• NAVBAR Background,
• NAVBAR Corners,
• Menu Link Background,
• Menu Link Text, and
• Menu Link Border.

Change the size of MENU LINK text.

Change NAVBAR padding.

FIVE NAVBAR POSITIONS

Five unique positions are provided to support prominent display of MENUS on large and small screen devices.

On PCs and Tablets (Landscape)

NAVBAR-LANDSCAPE-TOP

At the top of your website.

NAVBAR-LANDSCAPE

Below the Site Banner and above the Main Body.

NAVBAR-MAINBODY

Within the Main Body.

On Phones and Tablets (Portrait)

NAVBAR-PORTRAIT-TOP

At the top of your website.

NAVBAR-PORTRAIT

Below the Site Banner.

NAVBAR BOXES

NAVBAR BOX refers to a module which has been assigned to a NAVBAR position.

NAVBAR BOX STYLE SETS enable you to:

• display or hide, and
• determine the Look & Feel

of NAVBAR BOXES.

WYNCHCO website designs include two NAVBAR BOXES.

SEARCHBOX

The NAVBAR SEARCHBOX is displayed by default in a WYNCHCO website design.

It can be seen at the top of the screen on large screen devices when a Menu is published in the NAVBAR-LANDSCAPE-TOP position.

Simply toggle the DISPLAY button if you want to hide the SEARCHBOX.

CALLBOX

The NAVBAR CALLBOX is displayed by default in a WYNCHCO website design.

It can be seen at the top of the screen on Phones & Tablets (portrait) next to the hamburger button when a Menu is published in one of the NAVBAR positions.

By default it displays a CONTACT US message which is linked to your website's Contact Us page.

Simply toggle the buttons to:

• change the message,
• display an image instead of a text message, and
• change the landing page to which the Call to Action is linked.

Example Text

Example Image

OFF CANVAS DISPLAY

The OFF CANVAS DISPLAY Style Set included with every WYNCHCO website design enables you to publish Modules in two OFF CANVAS POSITIONS:

• offcanvasleft, and
• offcanvasright

at the:

• top left, and
• top right

of your website when viewed on large screen devices (PCs & laptops with large screens).

Example

The image below shows  a Module (blue box on left) being displayed in the OFFCANVASLEFT Position.

Top Left

Select the WYNCHCO template

Select the WYNCHCO template being used by your website to change its STYLE settings.

Select a STYLE Tab

Select each STYLE tab in turn to review its individual STYLE SETTINGS.

Example: FORMAT.

Simply toggle the buttons to change STYLE Settings

The changes you make to STYLE SETTINGS will immediately change the Look & Feel of your website.

That's it!

Example: FORMAT.

Our commitment to you

Customer Consultation

We explore your design requirements at some length to ensure your WYNCHCO website design meets your needs.

Design & Review

We configure your WYNCHCO website's content and navigation, and create a template to project its unique look and feel.

GO LIVE

When you are ready, we publish your WYNCHCO website, and if required, provide ongoing WYNCHCO Joomla! CMS Support.

Take a look at some recent WYNCHCO website designs

Here are three examples of how our WYNCHCO website designs have helped businesses and community groups in Cheshire, Greater Manchester, Merseyside, North West England & the UK.