top of page

WEBSITE STYLE GUIDE

Top-of-Page

TYPOGRAPHY

Typography

Heading 1

Font: Montserrat Bold, Font Size: 40px, Color: #00000

Heading 2

Font: Montserrat Bold, Font Size: 35px, Color: #00000

Heading 3

Font: Montserrat Bold, Font Size: 25px, Color: #00000

Paragraph Text

Font: DM Sans Regular, Font Size: 17px, Color: #00000

Link Text

Font: DM Sans Regular Underlined, Font Size: 17px, Color: #E02321

COLOUR PALETTE

Colour Palette

Maximum Red

#E02321

Jet

#2E2E2E

Davys Grey

#605F5E

Cultured

#F4F3F3

BUTTONS

Buttons
Button Example

Font: Montserrat Bold, Font Size: 17px, Background Color: #E02321, Hover Colour: #EB7270

How to add a button to a page:

  1. Within the side menu click on the "+" (add) button.
     

     

  2. Locate and select "Button" within the "Add to site" menu.




     

  3. Click on the first themed button and the button should appear on your page.

  4. To change the style of the button, click on the button and select the paint brush tool (design tool).





     

  5. Select the first button design under "My Buttons". The button will then change and match the style of the button above. 




     

  6. Drag and drop the button to where you want it to appear on the page.

  7. To add a link to the button, select the button and click on the link icon. Choose where you want the button to lead to. 




     

  8. To change the text, select the button and click on the "Change Text" option and adjust the text to whatever you want it to say.


     

  9. Don't forget to save and publish your changes.

Screen Shot 2021-12-07 at 12.15.36 PM.png
Screen Shot 2021-12-07 at 12.17.34 PM.png
Screen Shot 2021-12-07 at 12.19.31 PM.png
Screen Shot 2021-12-07 at 12.22.39 PM.png
Screen Shot 2021-12-07 at 12.24.31 PM.png
Screen Shot 2021-12-07 at 12.25.34 PM.png
Screen Shot 2021-12-07 at 12.26.33 PM.png

NAVIGATION MENU

Navigation Menu
Screen Shot 2021-12-07 at 12.35.21 PM.png

How to edit your Navigation Menu:

  1. Within the side menu, click on the Menu icon (Menu and Page Settings). 


     

  2. The "Site Pages" Menu will then appear. Within here is where you will manage all the pages on your website.







     

  3. To add a new page, click on the "Add Page" button.



     

  4. You can then select one of the pre-made pages, but I always opt for a blank page. That way it's easier to customize the page to your needs.






     

  5. A new page will then be added to your menu. You will then need to double click on the name to change it to what the page will be about.


     

  6. Drag and drop that page to where you want it to live on your website.

  7. Don't forget to save and publish your changes.

     

Screen Shot 2021-12-08 at 4.21.58 PM.png
Screen Shot 2021-12-08 at 4.23.26 PM.png
Screen Shot 2021-12-08 at 4.24.40 PM.png
Screen Shot 2021-12-08 at 4.28.31 PM.png
Screen Shot 2021-12-08 at 4.31.10 PM.png
Screen Shot 2021-12-07 at 12.26.33 PM.png

PHOTOS

Photos

How to add images to your page:

  1. Within the side menu click on the "+" (add) button.


     

  2. Locate and select "Images" within the "Add to site" menu.





     

    Select the "My Image Upload" or you can choose stock photos available through Wix. 









     

  3. Once you have selected a photo click the "Add to Page" button. The image will then appear on your page. 


     

  4. Drag and drop the image to where you want it on the page. 

  5. Don't forget to save and publish your changes.

Screen Shot 2021-12-07 at 12.15.36 PM.png
Screen Shot 2021-12-09 at 10.34.59 AM.png
Screen Shot 2021-12-09 at 10.36.01 AM.png
Screen Shot 2021-12-09 at 10.37.45 AM.png
Screen Shot 2021-12-07 at 12.26.33 PM.png

WELLNESSLIVING WIDGETS

WellnessLivng Widgets

How to edit the WellnessLiving Widgets:

  1. Log into your WellnessLiving account and click on the setup icon.




     

  2. Within the setup menu locate and select "Website Widgets".





     

  3. Click on "Custom Schedule" and all the custom widgets needed for your website will appear. 

    • The ones I have created for you are: Private Training/Yoga, Boxing, Fitness Classes. ​​




       

  4. Select the widget you would like to edit. ​

  5. Within "Structure" is where you will be able to select all the items you want displayed to the viewer.

  6. If you need more classes to be displayed within the widget, scroll down to the filter options and click on the "Classes/Events" drop down. You will then need to scroll through the list and select all the classes that need to be displayed through the widget.












     

  7. Within "Design" you can click on elements within the widget and change the colour, font, and padding. 

  8. Once you are done making your changes, go into "Embed Code". All you will have to do here is click on "Save".


     

  9. When you reload your website, the widget will automatically reflect the changes you've made within WellnessLiving. 

Screen Shot 2021-12-09 at 12.19.38 PM.png
Screen Shot 2021-12-09 at 12.20.35 PM.png
Screen Shot 2021-12-09 at 12.21.31 PM.png
Screen Shot 2021-12-09 at 12.22.37 PM.png
Screen Shot 2021-12-09 at 12.23.55 PM.png

EDITING/ADDING CONTENT

Editng/Adding Content

How to edit/add text to a page: 

  1. Go to the page you would like to edit and click on the Add icon.




     

  2. Locate "Text" and select on the "Themed Text" options. 




     

  3. Within "Themed Text" the following are saved heading and text options for you to use for any of your pages. 

    • Heading 1​

    • Heading 2

    • Heading 3

    • Paragraph 1








       

  4. Select one of the text options stated above and drag and drop it to where you want it to be displayed on your page. ​

  5. In order to change the text, double click on the default text. Once it is highlighted, you will be able to add in your own text.

  6. Don't forget to save and publish your changes.

Screen Shot 2021-12-09 at 1.12.33 PM.png
Screen Shot 2021-12-09 at 1.14.28 PM.png
Screen Shot 2021-12-09 at 1.15.54 PM.png
Edit Text
Screen Shot 2021-12-07 at 12.26.33 PM.png

How to add a container box to your page:

  1. Go to the page you would like to edit and click on the Add icon.




     

  2. Locate and Select "Box". 












     

  3. Within "My Boxes" is the grey container box I have used throughout the site. Click on the box and it will be added to your page. 






     

  4. Drag and drop the container box to where you would like it to be.

  5. To attach text or images to the box, drag the items over the box until it prompts "Attach to Box". When that appears you can drop the item. This means that whenever you move the container box, the items within will also move with it.

  6. Don't forget to save and publish your changes.

Screen Shot 2021-12-09 at 1.12.33 PM.png
Screen Shot 2021-12-09 at 1.20.55 PM.png
Screen Shot 2021-12-09 at 1.21.34 PM.png
Contaner Box
Screen Shot 2021-12-07 at 12.26.33 PM.png

How to add strips to your page:

  1. Go to the page you would like to edit and click on the Add icon.




     

  2. Locate and select "Strip".



     

  3. Select the white classic strip option. Once select the strip will be added to the bottom of your page.

  4. To change the background of the strip click on the strip and select "Change strip background".



     

  5. You can then go and change the colour of the strip using one of the colours from the ones listed about. Copy and paste in the hex code within the colour picker.











     

  6. To attach text, images, boxes, etc to the strip, hover the item over the strip until the strip prompts "Attach to Strip".

  7. Once the item(s) are attached whenever you move the strip the items attached to it will also move with it.

  8. Don't forget to save and publish your changes.

Screen Shot 2021-12-09 at 1.12.33 PM.png
Screen Shot 2021-12-09 at 1.32.15 PM.png
Screen Shot 2021-12-09 at 1.33.49 PM.png
Screen Shot 2021-12-09 at 1.35.05 PM.png
Strips
Screen Shot 2021-12-07 at 12.26.33 PM.png

ANCHORS

Anchors

How to add anchors to your pages:

  1. Go to the page you would like to edit and click on the Add icon.


     

  2. Locate and select "Menu and Anchor".





     

  3. Click on "Anchor" and an anchor will be placed on your page. 






     

  4. Click on the anchor and select "Rename".




     

  5. Add in a proper name for the anchor, eg. if you're adding a new team member, the anchor should be the team members name. 



     

  6. To link to the anchor, add a link to your page or add in a new button.

  7. Whether you're using a text link or a button, make sure that when you add in the link you select Anchors and then your anchor name. 









     

  8. Don't forget to save and publish your changes.

Screen Shot 2021-12-07 at 12.15.36 PM.png
Screen Shot 2021-12-14 at 10.54.46 AM.png
Screen Shot 2021-12-14 at 10.56.09 AM.png
Screen Shot 2021-12-14 at 10.57.10 AM.png
Screen Shot 2021-12-14 at 10.58.00 AM.png
Screen Shot 2021-12-14 at 10.59.08 AM.png
Screen Shot 2021-12-07 at 12.26.33 PM.png
bottom of page