top of page

Hi There!

 

Thank you for purchasing the Anderson Website Templates! Congratulations on your new portfolio. We're excited to help you make the most of your template, customizing it to perfectly fit your branding, services, and client base. This page will provide a comprehensive walkthrough, highlighting key features and essential information.

 

If you have any questions or need further assistance, please feel free to reach out to us at hello@studiomiyabi.com with the subject line "Anderson Tutorial."

The Basics: Website Settings, Business Information, Domains

We like to start our customization process with the website settings and updating the key business information. We find that these details can be forgotten if done at a later stage so completing this task first means that your clients, customer or team can find the crucial information you need. It's also good practice to make sure legal business information is consistent across all of your digital assets. 

  • In your Wix Studio Dashboard (manage.wix.com/dashboard):

    • Locate Settings in the menu to the left of the dashboard

    • Click Website Settings
       

    Here you can update your site name, connect your custom domain (more on this later), update your favicon and social sharing images. 

  • In your Wix Studio Dashboard (manage.wix.com/dashboard):

    • Locate Settings in the menu to the left of the dashboard

    • Click Business Information
       

    Here you can add your business name, select a category that best matches your business and upload your logo. Within this section, we also recommend adding your location and contact information.

  • To maintain a professional look, we highly recommend connecting a custom domain to your website. Keep in mind, you will need to purchase the domain before attempting to connect it to your website. Follow the steps below to connect a domain:

    ​

    In your Wix Studio Dashboard (manage.wix.com/dashboard):

    • Locate Settings in the menu to the left of the dashboard

    • Click Domains

    ​

    On this page, enter the domain you wish to use and Wix Studio will walk you through the connection and purchase process. There are also some helpful support articles here: support.wix.com/en/connecting-a-domain

    ​

  • In your Wix Studio Dashboard (manage.wix.com/dashboard):

    • Locate Settings in the menu to the left of the dashboard

    • Click Website Settings
       

    At the bottom of the website settings section that there is a site history option. This allows you to restore any previous versions of the site should you make a mistake. We always recommending saving your edits frequently to ensure that all site versions are accurately stored. 

  • The site styles tab allows you to easily customise the website's font and color site wide. You can also add page transitions if required.

     

    In your Wix Studio Editor (editor.wix.com/studio):

    • Locate Editor Menu to the left of the editor

    • Click Site Styles

     

    Under Typography, select header and body fonts using the drop down menus. You will also see pre-programmed scaling for both the header and body fonts. We recommend sticking to this, but you can also edit the scaling and style by clicking the Pencil Icon next to the typography style you would like to edit. Note: you can also customise text on an individual basis within the editor (more on that later).

     

    Under Color click the pencil icons to edit the color range, simply add a color from your palette and the range will update automatically. Hover over each color and click the pencil icon to edit the each color within the range individually. 

  • The header and footer are set as global sections site wide and are responsive across different view points. Follow the steps below to edit your logo and the banner text and color:

    ​

    In your Wix Studio Editor (editor.wix.com/studio):

    • Double click the header section within the editor or locate the header layer within the layers panel. 

    • Double click the logo in the middle cell

    • Click change image and follow the pop up to upload your logo or select and image you have already uploaded.

    To edit the menu:

    • Double click the menu within the header section

    • Click manage menu

    ​

    Here you can see the pages displayed in the menu or adjust the order by dragging the menu item. Click the ... icon next to each menu item to rename the item, delete the item or duplicate it.

    ​

    There are also some options to design the menu within the editor. Locate options to edit text style, borders and hover/click states in the right side menu of the editor:

    We recommend playing around with these settings to get the look and feel that you want but you can use the pre-designed settings and simply adjust the color for a simpler editing experience. 

Updating Your Portfolio

Before we dive into editing each page, we like to walkthrough the portfolio section of the website. The portfolio is set up using a CMS (Content Management System) so that you can easily add new work and generate multiple dynamic pages based off of one design. It's also a great tool for organising and managing project information. 

  • The CMS is a great tool for managing your content and our favourite feature is the ability to generate hundreds of new pages based off of a single design. You can easily update the content or add pages right from your CMS collections from the Wix Studio Dashboard here: manage.wix.com/dashboard

    For a more detailed look at the CMS feature, head over to the Wix Studio support site here.

    You can also access your CMS collections directly in the editor here:

  • To add a new project to your portfolio, start by heading to the CMS area from your Wix Studio Dashboard or Site editor. Follow the steps below to add a new project:

    ​

    • CMS

    • Your Collections

    • Portfolio

    • Add Item

    On the next page, enter the relevant project information such as project name, client, a description and relevant images. Use the project main image to upload a featured image for the project (this will be displayed on the homepage and portfolio page.

    ​

    If you are unsure, we have also added some sample projects into the portfolio CMS so you can see and example of how these look.

  • Using the CMS allows you to easily connect and display content throughout the site, making the site and portfolio easy to manage and update. All galleries within the template are connected to the portfolio CMS so you can simply replace the content with your own and these will automatically pull through. 

     

    With that being said, we'll use the homepage as an example to show you how to pull project information into a gallery should this get disconnected or you wish to update this later. Follow the steps below:

    ​

    • Open the editor and navigate to the homepage.

    • Head to the layers panel and select the Our Work section.

    • Click into the section and locate the Pro Gallery

    • In the editor window, click the gallery and you will see the small pop up shown in the screenshot below. ​

    • You will notice a highlighted icon that looks like a connector - This means that the element is connected to a CMS. Click this icon to open the CMS panel.

    • Within the CMS panel, you can select the dataset and manage the connections such as image source, title, and description.

    To maintain the aesthetic of the template, we recommend the following connections:

    ​

    • Image sources connect to: Project Main Image (Image)

    • Titles connect to: Title (Text)

    • Descriptions connect to: Short Description (Text)

    ​

  • Within the template, the main navigation menu features a mega menu highlighting key portfolio protects. These do not connect to the portfolio CMS so need to be update manually. These can be updated whenever you would like to feature new work. Edit the mega menu using the following steps:

    ​

    • On any page, double click the menu within the header until you see the 'Manage Menu' pop up. 

    • Click Manage Menu

    • Click Edit next to the portfolio container.

    Within the mega menu editor, follow these steps to update the images, links and text:

    ​

    • Double click the images until you see the pop up.

    • Select change image to select a new image from your gallery, add a stock image or upload a new image.

    • Click the link icon to link the image to the corresponding portfolio page.

    • Follow these steps by double clicking the text to edit the portfolio item name and re-link to the corresponding portfolio page.

Editing Individual Pages

Now we have the basics and portfolio covered, we will walk through the editing process for each page. You can make customisations outside of the ones listed below, but we do recommend following these steps as a base to ensure that the template is unique to your brand.

  • Begin editing pages in your Wix Studio Editor (editor.wix.com/studio):

    ​

    Studio Name 

    • Locate Studio Name layer in the layers menu

    • Select the text layer and click Edit Text

    • Type in the text you would like to display here (We recommend your business name)

    You also have some additional editing capabilities in the inspector panel in the right of the editor. Play around with the following settings:

    ​

    • Theme (H1, H2, Body ect)

    • Font

    • Color

    • Font Size (We set the current font size according to the sample brand name so you may need to adjust the font size after adding your business name to make sure that the text matches the edges of the below images.

    ​

    Hero Images

    • In the editor, click each image until you see the Change Image popup.

    • Follow the prompts within the pop up to upload a new image or select an already uploaded image. 

    • Repeat for second image.

     

    About

    • Locate the About section within the layers panel.

    • Click on the text and then select Edit Text

    • Type the required text

    • To edit the style, size and color of the text, refer to the screenshot above that shows the inspector panel (located in the right of the editor)

    • Double click the button to edit the button label (this is currently set as Learn More and can be left as is, if needed)

    • Navigate to the inspector panel to edit button styles (Color, border, text and hover states)

    The design choices are completely personal and depend on your business and branding. For a simple editing experience, you can simply adjust the color and leave the main styling as is. 

    ​

    Portfolio Gallery

    As mentioned earlier in the walkthrough, the images and titles for this section are connected to the portfolio CMS so will be updated automatically when you edit the information in the CMS section of your Wix Studio account. There are some additional editing capabilities if you want to adjust the text styling or gallery layout.

    ​

    • Locate the Portfolio layer in the layers panel

    • Click the gallery and then click Settings

    • Once the pop-up opens, navigate through the tabs to see all of the editing options.

    ​

    The edits you make here are 100% dependent on the style you are going for and we always recommend updating the color/font as a minimum. The template has been designed with a specific gallery layout so keep in mind that if you decide to edit this, it could change the overall look and flow of the template.

    Services Section

    • Locate the Services layer in the layers panel

    • Follow the same steps used to edit the About section to edit the text, button and color/style.

  • Begin editing pages in your Wix Studio Editor (editor.wix.com/studio):

    ​

    Team Members

    • Locate Team Members layer in the layers menu.

    • Select left image until you see the Change Image pop up. 

    • Upload the required image using the prompts within the pop up window.

    • Repeat for right image.

    • Double click caption text to edit team member information.

    • Add team member name, role or other identifying information.

    • Use the inspector panel on the right (shown in previous tutorials) to edit the text style (color, size, font etc)

    Studio Information

    • Locate the Studio Information section in layers menu.

    • Double click the text on the right to add a description about your business.

    • Double click the text on the left to add a section header. (eg, Our Studio)

    • Use the inspector panel on the right (shown in previous tutorials) to edit the text style (color, size, font etc)

     

    Services

    This section allows you to add service information. The section is designed using a repeater meaning that you can have the same design and layout, but different content in each. More on repeater sections here. 

    ​

    • Locate the Services section within the layers panel.

    • Click to open the section and you will see Item Layers (These are the layers for each item within the repeater)

    • Click the toggle to open each item layer.

    • Working one item at a time, click the image layer and then click Change Image to upload an image. (We suggest an image related to the service you are displaying).

    ​

    Along with the image, you will also see a layer named Stack. This layer houses the text that appears when hovering over the image. You will notice in the editor that the text is visible but has a transparant background - this indicates that the layer has an animation applied to it. More on animations here.

    ​

    • Select the (P) text box and click Edit Text. 

    • Enter a description of your services or offering.

    • Select the (H3) text box and click Edit Text.

    • Enter your service name

    ​

    You will notice when previewing the page that the services have a color overlay when editing. To change the color to suit your brand, follow these steps:

    ​

    • Locate the Repeater layer in the layers panel.

    • Select the first item layer (you can make this change on any of the items and it will automatically update them all).

    • With the item selected, head over to the Inspector panel on the right of the editor and change the background color as shown in the screenshot below. 

    Studio Information 02

    • Locate the Studio Information section in layers menu.

    • Double click the text on the right to add a description about your business.

    • Double click the text on the left to add a section header. (eg, Our Studio)

    • Use the inspector panel on the right (shown in previous tutorials) to edit the text style (color, size, font etc)

  • The ​Enquiry page is built with an integrated form so you can easily gather information from perspective clients. You can learn more about Wix Studio Forms here.

     

    Accessing All forms

    • Navigate to your Wix Studio dashboard (https://manage.wix.com/dashboard)

    • Using the menu to the left, scroll down to Customers & Leads

    • In the pop-up menu, select Forms & Submissions.

    ​

    Editing Form On Enquiry Page

    • Within the editor and on the Enquiry page locate the Form layer within the layers panel.

    • Select the form and click Edit Form

    • Now you are in the form editor where you can add or remove elements, update the questions, preview the form and adjust the settings. You can also manage submissions for that specific form.

    ​

    Note: The template is set up with an enquiry form to gather leads for branding clients specifically. You will want to play around with the form editor to make sure that the questions are tailored to your business and service offering.

    ​

    Form Settings

    Within the form settings, you can select a different form to display as well as edit the layout and design of the form. To access these settings follow these steps:

     

    • Within the editor and on the Enquiry page locate the Form layer within the layers panel.

    • Select the form and click Settings

    • Now you are in the editor and can click through the various tabs to change the settings. We recommend adjusting the color and font to suit your brand as a minimum.

We hope that the above walkthroughs give you some baseline information for making the template your own. We will also work to update the tutorials should we receive feedback on any specific pages or features. 

​

You can also find some helpful resources, tutorials and videos on the Wix Studio help center here. 

The Anderson Template Walkthrough

Design Service Add-On

Updating your website can be a long process. We aim to make this process as streamlined as possible by providing detailed walk-throughs and helpful links but understand that sometimes or clients need a little extra help.

​

Our team can help implement your content site wide to make sure the template effectively communicates your brand style, color palette and portfolio. 

Contact our team if you are interested in this service and we will provide a personalised quote and next steps.

Need Help?

We're always happy to help wherever we can and offer 1 week of support from our team with any template purchase. If you need help or have questions, please reach out to us directly for help.

bottom of page