Your new Wix website is fully customisable and with the ability to make changes at any time, as you please. A website page is commonly broken down into various areas referred to as ‘containers’ with a header located at the top of the page and a footer located at the bottom of the page.
When adding to, editing, or updating any areas of the website, you need to select the area (e.g. the header) and then select the specific element within the chosen area. A relevant popup will then appear for you to make appropriate changes.
This article will explain the processes involved in updating key elements of your Wix website. The elements include:
Table of Contents
While these are the basics and essentials of your website, you can find more information about designing your website with Editor X here, while information about Wix can be found here.
Overview
Before updating your website, there are a number of key areas which will assist you in customising the recommended website layout. Each of these areas are discussed below according to their corresponding numbers in the example image below.
1. Content Manager
The page content manager is located in the second navigation bar on the left hand side. This allows you to update and edit a range of content throughout your website, including Sponsors, events, and blog posts. You will also be able to create a range of new content elements which relate to your organisation.
2. Page Menu Drop Down and Device View
Also located in the second navigation bar is the page menu drop down. Here you will be able to jump to various pages of the website such as the Events, News, About and of course the Home page. You will be able to customise the layout and content as required for each page. By selecting Manage Pages, you will also be able to add pages.
Your website will also be mobile and tablet responsive, this means that when viewing the website on a device other than a computer, the size of the elements within the website will resize, according to the size of the device's screen.
By selecting either the computer, tablet or mobile phone icon on the device view next to the page menu down down, you will be able to view the layout. While most changes made to the website will be update across each device, there may be some instances where changes will need to be made across each of these.
3. Save, Preview and Publish
Located in the top right-hand corner, selecting Save will save any updates you have made to the website, these changes will not be made public. The preview option enables you to view any changes or updates you have made to the page without being displayed publicly. If you are not satisfied with the changes you have made, you can go back and make relevant amendments. Once you are satisfied with how the website looks, select publish to make the changes publicly visible.
4. Inspector
Located below the publish button, the Inspector will appear when you select an element such as the header or footer. This may vary depending on which element has been selected, however, in most cases you will be able to customise the appearance of items such as the layout, text, design and interactions.
Please note: If the Inspector does not appear, you will need to select the button below the publish option (refer to example image).
Restoring a Previous Design
If you make changes, you are not satisfied with, you first try to select the undo button located in the right-hand corner. This can also be done by pressing Ctrl + Z.
If undoing the changes does not work, you can revert to a previously saved version of your website. While Wix will auto save your website as changes are made, it will also periodically create a backup of your website.
To do this, navigate to Site in the main tool bar, and select Site History.
A new window will then open with previous backups of the website, as backups do not occur every day, if you do restore one of these, then you may be required to repopulate some data.
As per the pop-up below, some data such as those within the Wix Store, Wix Bookings and the Form Builder will not be affected by restoring to a different version.
Adding Containers and Elements
In order to add a container or element, a section must first be added. While the below example provides information about adding elements to a section on a black page, you can add as many sections as you wish to any page.
Sections
A section acts as the building block for each page, this is where you can add a range of elements and content. You can move the section around and adjust this by using the resize handles.
You can also add as many sections as you like by selecting the + icon at the top or bottom of the section. There are three options when adding a section:
- Blank – a blank rectangular area spanning the width of the page
- Grid – a 2-dimensional layout that allows you to arrange content in columns and rows
- Layouter – a selection of Columns, Rows, Mosaic, Slider or Slideshow
A section can be reordered by selecting the 3-dot menu from the floating action bar and selecting Move Up or Move Down. Sections can also be reordered using by selecting the Layers option from the secondary tool bar, then dragging the section to the desired position.
Padding
Using padding will maintain a set distance between the area of section and its edges. From the Inspector panel in the top right-hand corner, under Position, choose your desired value in pixels (px) or percent (%). These paddings act like a buffer between the sections within the page.
Adding Elements
You can add an element by selecting the + icon in the top left-hand corner. It is recommended to add a container which then holds additional elements such as text, media, and widgets. This allows you to control the design of the area in which the container sits.
Editor X has a smart docking system. When you drag an element into a container, it automatically docks to the closest edges. You can override this and manually set your docking from the Inspector menu.
Similar to padding, using the margins will maintain a set distance between an element and the edges of the container it’s docked to. From the Inspector panel, under Margins, choose your desired value in pixels (px) or percent (%). You can also add margins to the sides of an element that isn’t docked. These margins act like a buffer between the element and the container or gridlines around it.
The image below provides an example of some of the element options available when creating a page. The area at the top is a Grid with two columns, whereas the area below is a Section.
Note: Each group of elements sits within its own container within a section (2 sections and 4 containers). For information about Element hierarchy, click here.
While this article explains the basics of creating a new page, there are a range of Editor X tutorials available here.
Once you are satisfied with the newly created page, we highly recommend adding the page to a menu in the header. For information about managing menus, click here.
Updating Your Organisation name
There are three elements relating to the name which can be update separately - The first is within the header element. To enable editing, click anywhere within the header, then select the oranisation’s name and select Edit Text.
You will then be able to update your organisation’s name, as well as having a range of options to customise the text. Once you are satisfied with the updates, click anywhere outside of the element.
The second organisation name is in the container on below the header on the left-hand side. To change this, select the container and then the heading area, and then select Edit Text. Similar to the header, you will be able to modify the text as required, once you have completed this, click anywhere outside of the element to activate the changes. You will also be able to add text in the element below this by following a similar process.
The third is in the header element in the mobile phone header. To edit this, select the mobile phone icon from the top menu. Once here, similar to the previous organisation name updates, you will be able to update this by selecting the header element and then the Edit Text option.
Updating your logo
There are two logos which will need to be added – The first logo is within the header next to the organisation name. You can update this by selecting Change Image from the pop-up menu.
This will bring up the Wix Media library where you will need to upload club logo images by clicking on the blue + Upload Media button. Upload images by selecting a file from your local drive or by drag and dropping an image into the designated area. Once uploaded, the image(s) will be visible in the media library and can then be selected to replace the header logo by selecting the Update button.
The second logo is located in the footer. Scroll down to the bottom of the page and select the existing image and choose Change Image from the pop-up menu and following the same process as the header image.
Setting Primary Colours
Although you would have already provided your primary colours, these can be updated as required. The recommended layouts have 2 main colours. A darker colour should be used in the header, footer and organisation name element, whereas, the lighter colour should be used as the heading font colour.
If you wish to use a specific colour, a useful website is Imagecolorpicker.com. This will allow you to upload a logo and identify the HEX code for any specific colours you wish to use. In the example below, the middle circle within the has a HEX code of #f68b1e. This can be found by hovering your cursor over and clicking on the colour you wish to use. The HEX code will then appear along with the RGB numbers.
To update the header background colour, click on the header and select the paintbrush icon on the right-hand side menu and then select the background colour box to edit the background colour.
Here you will be able to select from a range of existing colours or you can select either the + icon or Add Colour.
Using the custom HEX value found in the Imagecolorpicker.com, enter this into the designated field and press enter to preview the change. If you are satisfied with this select Add or Cancel if you wish to edit the background still. The Footer background can also be updated by following this process.
To update the heading colour using the secondary colour, select the organisation name located in the header, and then select Edit Text. When you select the text colour icon, a colour picker pop-up will appear. Follow the same steps you took when updating the background to select the colour of the heading text.
These processes can be followed when updating headings for Latest News, Fixtures and Results, Upcoming Events, Instagram Sponsors and any other additional headings you add.
To update the menu colours, select the menu area and then choose the paintbrush icon from the menu on the right-hand side. Once this has been selected, follow the same steps you took to change the colours of previous two areas.
Please note: When updating the menu colours, there are three parts to consider, the Regular colour which is the menu’s main colour, then there is the Hover colour for when the cursor is dragged over the menu, and finally, the Clicked colour is when the menu item is selected.
Updating Social Media Links
Social media links are located in the header and the footer of the page. These can be updated by selecting the relevant social bar element and then choosing Select Social Links from the pop-up menu.
Header
Footer
The default Social Media links are Facebook, Instagram, Twitter and YouTube. If your organisation does not use one of these, the icon can then be selected and deleted. Selecting an icon will also allow the social media details to be updated in the menu on the right-hand side.
Once you have selected the relevant social media image, you can link the social media page by adding the text in the field on the right-hand side. If you have additional social media pages, you can link these by selecting + Add Icons and choosing from a range of social media platforms.
Organisation Map/Address
To update your organisation’s address, select the page menu drop down from the secondary navigation bar at the top of the window and select the About option. This will take you to a page where you can provide an informative overview of the club or association.
Scroll down and click the map image to activate the Manage Locations pop-up menu.
Enter the details of your location or locations (if there are more than one), then click any outside of the Manage Locations pop-up to activate the changes.
Menus
Select the menu area within the header, then select Manage Menu.
You can move the existing menu items by clicking on the four dots to the left of the menu name and dragging then dropping it to a different location. This will change the order of menu items on the website. You can also make amendments to menu items by clicking on the three dots to the right of the menu name.
To add a new menu, select + Add New at the bottom to add a new menu. You will be able to add existing and new site pages, a link to an external website or location, or a sub-menu within one of the existing menu options.
In order to add or remove a site page to the menu, select Site Pages option and select or deselect the page which you would like to add or remove, then choose Apply to confirm the amendments. If adding an item, this will then appear within the menus, whereas removed items will disappear from the menu section.
Upcoming Events
You can manage events by selecting the Upcoming Events container until the option for Manage Events appears. Select this to option to option to proceed to the dashboard.
Here, you will be able to edit existing events by choosing the Edit button or selecting + Add Event to create a new event.
Select RSVP or ticketed as event type, and then continue scrolling down to the update the event title, date/time, and location details.
Select Create Event, this will create a draft of the event and will not yet be published. Complete the event details (as well as adding a picture), date and time, location and further relevant details. Once you are satisfied with the event details, select Save and then Save and Publish to publish the organisation’s event.
Managing the Instagram Feed
If you have an Instagram account, you can link this so photos from the feed will appear on the home page.
To link this, select the Instagram area several times until the Settings option appears, you will need to select this to proceed.
You will need to ensure that you are logged in to the Instagram account before choosing to either connect your business or personal account (most instances will be a personal account). Your recent Instagram photos will then appear and will also be updated whenever a new post is created.
Latest News
To manage news posts, select the Latest News container until the option for Manage Posts appears. Select this to option to option to proceed to the dashboard.
Here, you will be able to edit existing posts within the Blog section by choosing the Edit button to the right of the relevant post or selecting + Create New Post to create add news post.
Once you select + Create New Post, create your news article by typing content or cut and pasting from other documents. The navigation menu on the left-hand side will allow you to add a range of content and elements including images, galleries, videos, and buttons. To add these, select the + Add option to bring up the media library.
If you want this news article to be the main feature on the organisation’s homepage, click Settings menu in the left-hand navigation bar, and activate the toggle for “Set at featured post”.
Additional tools are available for Search Engine Optimisation (SEO), enabling the content to appear in search engines when related searches are performed. You can add as many Categories as you like, these are a useful way of organising articles within the website. Tags describe what the article is about and can be used to find other posts with similar content. Whereas the Monetize option allows you to offer subscriptions to the blog, while the Translate option provides a way for the content to be offered in different languages.
Once the new article is complete, click Publish in the top right corner to publish the new article. It should now appear in the organisation’s Latest News section, or as the lead article on the organisation homepage if you selected this option.
Updating Sponsors
To update sponsors, select the content manager at the top of the window in the secondary navigation bar. Then scroll down and select Sponsors.
The content manager window will then appear. Here you will be able to edit the sponsor details and add new sponsors by selecting the + New Item button in the top right corner. You can also remove any elements that are not required.
Please note: Using tags for Major Sponsors will enable them to appear on your organisation’s homepage, while other sponsors below this will only appear on the Our Sponsors page
Further Information
While the information within this article provides an overview of the basics required to create and update your website, you will be able to customize this further as you wish. The website can always be updated and edited wherever and whenever it is suitable to do so. You can find more information about designing your website with Editor X here, while information about Wix can be found here.