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, or both!

Background Colour

The BACKGROUND COLOUR is by default white in a WYNCHCO website design.

But you can change this.

Background Image

No BACKGROUND IMAGE is displayed by default in a WYNCHCO website design.

But you can change this.

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.

Text Size

Change the size of TEXT across your website.

Letter Spacing

Increase or decrease the space between letters.

This is a useful feature when you choose to change the FONT used in your website.

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 encompasses the Site Banner and the SITEBANNER-RIGHT and NAVBAR Positions.

Change the HEADER background colour.

And separately increase the width of the HEADER and NAVBAR.

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 BOTTOM  positions.

MAIN BODY Style Set

Change the following features with just a few simple clicks.

PADDING

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,
• Background colour,
• Border colour,
• Border width,
• Corner rounding, and
• Module padding.

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 may display a fast loading SIMPLIFIED version of your website on Phones & Tablets.

And the FULL version on PCs.

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.

FONT FAMILIES

FONT FAMILY Style Sets enable you to change the FONT FAMILY used by different elements of a WYNCHCO website design.

The default FONT FAMILY in a WYNCHCO website design is:

• Helmet,Freesans,Helvetica,Arial,sans-serif; 

but you can easily change this for any one of the following elements:

• paragraph text,
• heading text,
• menu links,
• NAVBAR menu links, and
• the Site Title.

Being able to change the SITE TITLE FONT is especially useful if you choose to display a SITE TITLE rather than a SITE BANNER.

IMAGES

In a WYNCHCO website design the corners of IMAGES 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.

LAYOUT

The LAYOUT Style Set enables you to change the following features with just a few simple clicks:

• DISPLAY FORMAT,
• DISPLAY WIDTH and
• SIDEBAR WIDTH.

Display Format

Choose between STATIC and FLUID display formats.

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

Display Width

Choose between two fixed width display formats:

• 940 PX, or
• 1140 PX (default)

when you choose STATIC display format.

Sidebar Width

Choose the width of SIDEBAR to be displayed:

• NARROW,
• WIDE or
• VERY WIDE.

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 and
• TAB MENUS.

LIST & TAB MENUS

WYNCHCO website designs enable you to display MENUS using two distinct 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.

Each MENU Style Set enables you to change:

• Menu Link Text Size, and
• Menu Link Font Weight.

NAVBAR

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)

A drop-down menu appears when the hamburger button (top right) is selected.

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.

SIX NAVBAR POSITIONS

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

On PCs and Tablets (Landscape)

NAVBAR

Choose to display the MAIN MENU below the Site Banner and above the Main Body.

NAVBAR-MAINBODY

Or within the Main Body.

NAVBAR-LANDSCAPE-TOP

Or at the top of your website. 

On Phones and Tablets (Portrait)

NAVBAR-PORTRAIT-TOP

Choose to display the MAIN MENU at the top of your website.

NAVBAR-ABOVE-SITEBANNER

Or above the Site Banner.

NAVBAR-BELOW-SITEBANNER

Or below the Site Banner.

NAVBAR BOXES

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

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:

• hide the SEARCHBOX,
• change the message or link, or
• display an image instead of a text message.

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

SITE BANNER & COPYRIGHT

The SITE BANNER (an image) or SITE TITLE (text) is prominently displayed at the top of every page of your website.

The COPYRIGHT statement is displayed at the bottom of every page.

Use this Style Set to change your website's corporate identity.

Change the following features with just a few simple clicks.

Choose to display either:

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

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.

If preferred you can instead choose to display one SITE BANNER across all devices and screen sizes.

Site Banner Link

Choose which landing page to link the SITE BANNER or SITE TITLE to.

Site Title

When no SITE BANNER image is selected for display on a particular device, a SITE TITLE may be displayed instead.

Strapline

A STRAPLINE may be displayed below either a SITE BANNER image or a SITE TITLE.

Copyright Statement

Display a custom COPYRIGHT statement at the bottom of every page of your website.

This statement will also be added as a footer whenever your web page is printed.

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: LAYOUT.

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: LAYOUT.

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.