How to choose and personalize your website design

A few definitions

To get off to a good start with personalizing your website design, here are< >To get off to a good start with personalizing your website design, here are a few terms that you'll encounter in your emyspot site manager:

A website design theme is a preconfigured site layout that defines the structure of a website, and it’s appearance: the number of possible menus and their position, the size and layout of the site header and footer, etc.
Each theme is divided into variants, and each theme variation has its own preset colors, fonts, images and other elements that differentiate it from other variants of the same theme. They all share a similar structure, but each one has its own unique “look and feel”.
The design personalization form is shared by all the variants of a given theme, and is used to adjust the preset colors, images, fonts and other elements of a design theme variant, to enable the site design to be truly personalized.
All design theme variants use CSS: CSS is the web design “language” that tells a web browser which color to use for a website design element, defines its width and height, and other settings. The design personalization form is used to adjust the CSS of the theme variant applied to a site without needing to understand CSS, though you can use CSS to adjust any website design theme variant if you’d prefer.

a few terms that you'll encounter in your emyspot site manager:

A website design theme is a preconfigured site layout that defines the structure of a website, and it’s appearance: the number of possible menus and their position, the size and layout of the site header and footer, etc.
Each theme is divided into variants, and each theme variation has its own preset colors, fonts, images and other elements that differentiate it from other variants of the same theme. They all share a similar structure, but each one has its own unique “look and feel”.
The design personalization form is shared by all the variants of a given theme, and is used to adjust the preset colors, images, fonts and other elements of a design theme variant, to enable the site design to be truly personalized.
All design theme variants use CSS: CSS is the web design “language” that tells a web browser which color to use for a website design element, defines its width and height, and other settings. The design personalization form is used to adjust the CSS of the theme variant applied to a site without needing to understand CSS, though you can use CSS to adjust any website design theme variant if you’d prefer.

Choosing and applying a website design theme

When you first create a website on emyspot.com, you’ll choose a design theme for your website. You can apply a different design theme to your website at any time, from the Settings > Design > Personalize menu of the site manager.

Good to know< >When you first create a website on emyspot.com, you’ll choose a design theme for your website. You can apply a different design theme to your website at any time, from the Settings > Design > Personalize menu of the site manager.
- Good to know - Changing the design of your website won’t affect your site content, only the appearance of your website.
Each of the design themes (and all of that themes variants) comes with its own unique design personalization form. The web designer who created the theme also conceived the design personalization form for that theme and the number and type of site elements that can be personalized using the form.

Some design themes are conceived to be as easy to change as possible, by limiting the number of elements available in the design personalization form. Others are designed to enable webmasters to adjust the finest details of a website and have a large number of settings that can be personalized.
- As an example, the Light design theme has 15 different settings that can be adjusted in the design personalization form, whilst the Unlimited theme has 236 settings.
When browsing the list of available design themes, the number of adjustable settings in the design personalization form is displayed in the pop-up summary window that opens when clicking any of the variants of that theme.
- To choose and apply a site design theme, head to the Settings > Design > Themes menu.
- Changing the design of your website won’t affect your site content, only the appearance of your website.

Each of the design themes (and all of that themes variants) comes with its own unique design personalization form. The web designer who created the theme also conceived the design personalization form for that theme and the number and type of site elements that can be personalized using the form.

Some design themes are conceived to be as easy to change as possible, by limiting the number of elements available in the design personalization form. Others are designed to enable webmasters to adjust the finest details of a website and have a large number of settings that can be personalized.

As an example, the Light design theme has 15 different settings that can be adjusted in the design personalization form, whilst the Unlimited theme has 236 settings.

When browsing the list of available design themes, the number of adjustable settings in the design personalization form is displayed in the pop-up summary window that opens when clicking any of the variants of that theme.

To choose and apply a site design theme, head to the Settings > Design > Themes menu.

Personalizing your site design theme

Once you’ve chosen and applied a theme variant to your website, you’ll probably want to adjust the settings of that theme, to change fonts, colors or other settings. Adjusting site design settings means your site design will be truly unique.

To access the design personalization settings, head to the Settings > Design > Personalize menu. The form is divided into sections corresponding to the main sections of your website, like the site header, content zone, and menus.

When personalizing your website design, it can be tempting to change as many different settings as possible – just make sure that as you apply and adjust website design settings, that you maintain a coherent overlook look to the site. Mixing colors that clash, applying text and background colors that don’t contrast, or other design “faux pas” risks rendering your website unattractive to site visitors, and limiting its appeal and accessibility.

To quickly save and preview your site design changes as you go, use the Preview button at the side of the design personalization page. When clicking the preview button, your design changes will be instantly saved, and the homepage of your website opened in a new browser tab.

Saving your website design

Whenever you personalize your chosen website design theme variant, you create your very own, unique theme variant. As you save your design changes, the design variant applied to your website is altered, and a copy is created.
If you apply a different design theme variant, later on, it will replace the current design instantly, and any previous changes made to your site design will be replaced by the new design theme variant and its personalized settings.

Making a backup copy of your website design theme variant and any adjustments you’ve made to it means you can apply a different theme variant, then reapply the original backup copy of a different theme at any time.

Good to know - Free emyspot sites allow you to create up to 2 website design backups in the site manager. VersionPLUS websites can have up to 15 design backups saved.

To create a backup copy of the website design theme variant, and its personalized settings, head to the Settings > Design > Themes menu, and select My themes.

The Current theme section, at the top, displays the name of the theme variant you’re currently using on your website. To save a backup copy to reuse later on, click Save to My themes.

Once you’ve saved a backup copy, it will appear in the Saved themes section, from where you can apply it to your website at any time, by clicking the Use this theme button.

Fine-tuning your website design using CSS

If you’re comfortable using CSS, you can use it to adjust your website design instead of, or in association with, the design personalization form.

Advanced webmasters will probably prefer to use CSS to manage all aspects of their site design.

To replace the design personalization form with the site CSS, and edit the site design using only CSS, enable the Expert mode from the Settings > Design > Personalize menu of the site manager.

Webmasters who are just getting started with CSS, or who only need to adjust a setting here or there that isn’t directly available in the site design form, can add the necessary CSS styles to the site manager, whilst still using the website design personalization form.

To add CSS styles to a website, whilst maintaining access to the website design personalization form, you can add the CSS styles to the Add or edit theme CSS section at the bottom of the design personalization form.

Where to place site CSS?

In the site manager, in addition to the website design personalization section, you’ll also find a CSS section in the Settings > Global settings > Editable zones menu.

Site CSS is loaded sequentially: first comes the CSS for the theme you’re using, then the CSS for the variant and the adjustments made in the design personalization page, then lastly the site CSS editable zone.

If you’re adding CSS that’s specific to the design theme variant, add it to the CSS section at the bottom of the design personalization page.

That way, when you save a backup copy of your theme, the CSS for it will be saved as well. When applying a different theme variant to your site, the CSS added to the previous theme variant won’t be applied to the new theme.

If you’re adding CSS that you’d like to apply to the site independently of the theme variant applied, add it to the CSS editable zone under the Settings menu.

When changing or applying a new design theme variant, the CSS in the editable zone will still be applied to the site.

Choosing and personalizing website design themes