All Collections
Web Brain
Web Brain: Managing my website template
Web Brain: Managing my website template

This guide has been designed to help you manage your website.

A
Written by Allan B
Updated over a week ago

Please note that you can expand any of the screenshots by right-clicking them and selecting open in a new tab. The applicable screenshot follows each sentence.

In this guide:

How do I log in to make changes to my website?

Your website uses a content management system called Umbraco.

A website content management system is a software content management system specifically for web content. It provides website authoring, collaboration, and administration tools that help users manage their website.

This guide assumes that Mortgage Brain have finalised the website build with you, your site is now live, and you have requested login details to maintain your site for future changes.

The Web Brain team will set you up with your own login details to the content system and send your passwords to you directly.

Login to Umbraco:

Replace the words YOURDOMAIN with your own website address.

Managing your website content:

When you first login, you are defaulted to your main site Content.

Start by clicking on your website name to open your main settings.

Please note: We recommend that you Preview every change you make before publishing the site. This will allow you to visualise the update and view in different devices such as mobiles. What looks good on a PC may look different on a mobile phone. The Preview button is at the bottom-right of every page. Once you are happy, you just need to click Save and Publish – please refer to the 'Preview' section of the guide.

Your main Content page tabs relate to your Homepage set up. Below will give you the breakdown on each tab setting and how they relate to your website.

Company Details tab.

The Company Name is used throughout your website, so any changes will be reflected on the live website.

- Adding/Amending your company logo

Click on the logo box, which automatically opens the Media folder where you will access your media images/documents.

Please note: If there is a logo already in the Company Details tab section, you will need to remove this by clicking the cross and then clicking on the + sign, to access your Media folder.

This assumes Mortgage Brain has created a Media Folder for your site.

Open your chosen folder to access your image library, where you will be able to select an image to upload.

Green tick will appear on your chosen image. Click Submit in the bottom right-hand corner to upload to the site.

Please refer to the 'Media' section of the guide, to understand how to add new content to the folder.

You can add a smaller logo for mobile devices and a Favicon, which is displayed within the browser tabs.

- Company contact details:

The company address, telephone numbers and additional contact details will be displayed as the main contact details on your Contact Us page and the Footer section, which is visible throughout the whole site.

Banner Image tab

This tab drives the Homepage banners and banner Headline message.

Please note: This tab is on each additional content page and allows you to use different banners per page.

- Selecting an image for your Homepage banner

This guide assumes that Mortgage Brain have set the banners you have chosen as part of the initial set up. If you would like to make changes to your banners, please contact the team.

Please note, if you have your own range of banners that you would like to you use. Please refer to the Media Folder section of this guide to upload your own.

- Image Headline and Text

This is your leading banner headline text, which is only on your Homepage. It is the first thing your visitor will see. It is your stripe line message on who you are and what you do.

Please see example of the finish result:

Top of Page Text tab

This tab manages your main home page content.

You can choose the layout on how the text and calculators sit within this section of the page.

You can always use the Preview function to gain an idea on what works best for you and the page.

Plugin Tab

The Plugin tab, on your Home page and Mortgage page relates to your Mortgage Brain ‘Best Buy’ table and ‘Find me a Mortgage’ tools. The Web Brain team at Mortgage Brain would have set this section up for you.

You can choose to amend the headline and text sections. Remember to use the Preview function to view how this looks on a page.

If you wish to remove the tool from the page, you will just need to remove the Plugin URL and content on both plugin headline and text below plugin.

Example of the ‘Best Buy’ within your Home page:

Please note: To embed any plugin outside of Mortgage Brain, please refer to the 'Adding Third Party Plugins' section of the guide.

Page Links Tab

This allows you to configure the Our Services section of the website, which is only on your home page.

You can choose to switch this section off.

Each of your additional content pages will have a Page Link Details tab, which relates to this section.

Please refer to the 'Page Link Details tab' section of the guide to understand more.

Testimonial’s tab

This tab is where you will set the main settings that will reflect on all the additional pages to follow.

You can choose to switch the testimonials section on or off, per page.

Enter Testimonials Tab

The top section of this tab assumes you are using the default testimonials, which you will need to manually maintain.

Adding a testimonial: You just need to click Add row to upload a new testimonial.

If you would like to move or delete a testimonial, simply click the dustbin icon or the sorting icon to the right.

Adding Third-Party review feeds: If you wish to use a third-party review feed, you will be required to enter the html coding provided to you by the third party. This will replace the template’s default layout, above.

Bottom of Page Text

This tab allows you to add additional content to bottom section of your Homepage.

You can choose to remove this section, change the content and/ or image.

Disclaimer tab

This tab allows you to set your disclaimer text required either by a compliance officer or the FCA. This is visible at the bottom of a template on every page throughout the website.

You can amend the background colour of this section.

Footer

This tab allows you amend colour settings for the Footer of the site.

Site Colours/Links tab

Each template design offers a different colour variation. Please refer to the full guide of your template choice for more detail.

Colours - To get the best colour options you can use the following site and upload your company logo https://color.adobe.com/create/color-wheel

The bottom section of this tab relates to action buttons/links.

Links - You can amend where an action button takes you. For example, the About Us button, you can redirect this to ‘Mortgages’ page.

Enter Company Features tab

This tab manages the Company Features section of all the pages, where you choose to display them.

There are four default features already set. These can be amended, and/or you can add an additional two.

Please note: The Home page will only display four features, whereas the additional pages can display upto six.

You can also choose from a range of icons using the Font Awesome integration. Please refer to the Font Awesome section of the guide.

Calculators tab

You can choose to switch the calculators off completely and amend the defaulted disclaimer text if a compliance department requires you to.

Social Media tab

This tab allows you to set your Social Media profile links.

It is defaulted to include some of the best-known social media platforms. If you would like to add or amend your profile URL, you simply edit what is currently there or add a new one. Please refer to the Font Awesome section for more information on adding the platform’s logos to the Caption field.

Third Party Content tab

This tab is on all content pages and allows you to enter any third-party platforms such as Trust Pilot, Check My File, VouchedFor, and Review platforms.

You will need to enter either the HTML code, or Javascript which the provider will give you upon set up. The platform will appear on the page underneath the main content text.

Live Chat tab

If you would like to add a live chat function, you can do so by entering the code that the provider has given you.

You can switch the live chat function on for all pages or choose which page the function pops up on. Each content page has a Live Chat tab giving you the option to switch on/off for that page.

Client Login tab

If you have an online Client Portal that allows your customers to log in and view their file, you simply add the URL of the portal link. This is an ideal way of pointing customers to your site and is a secure way for them to communicate with you rather than emails.

For example, if you use the CRM, powered by Mortgage Brain, you can add the URL to your unique portal, which is found in your Key settings section. Please visit the Mortgage Brain help section for more information on the Client Portal. www.mortgagebrain.co.uk

Meta Data tab

This tab is designed for you to add your website overview and summary of webpage content.

The official definition of ‘metadata’ is data that describes other data. However, in SEO, the type of metadata we are talking about gives an overview and summary of webpage content.

Metadata appears in Search Engine Results Pages (SERPs), using keywords relevant to the content on the page. It is made up of two parts: a page title – or meta title – and meta description.

Meta Name - The Home page content tab relates to your landing page. This title is what is displayed in the browser tab.

Meta description - A meta description (sometimes called a meta description attribute or tag) is an HTML element that describes and summarises the contents of your page for the benefit of users and search engines.

Meta Keywords - You can add Key words.

Third Party tracking codes - Enter your tracking code here. You can add more than one tracking code into this section. Each tracking code must be wrapped in it’s own opening <script> and closing </script> tag.

You have the ability of adding tracking scripts to the <head> and <body> sections of the site.

Cookie Consent settings – You can amend the default cookie warning. This links automatically to the Privacy Policy page.

Info tab

This tab provides information on the selected page, last modified and last published time, document type and allows you to unpublish the page if required.

It also contains the URL link direct to the website page.

Additional Pages: Tab variation options

This section covers any different tab options available to you for the additional pages of your website. For example, Mortgages, Insurance, Protection and Conveyancing.

Page Link Details Tab

This allows you to set the page links, displayed in the Our Services section of the website page. You can choose what pages appear in the Our Services rolling section.

You can set icons and the description that appear in the rolling sections of the site.

Please refer to the Font Awesome section of the guide for more information on using the logo images.

Banner Image tab

You have several options for the banner relating to your working page. If no image uploaded, the page would use the default banner from your Homepage.

You can choose to use a banner image or use a block colour. You can set the default for all pages from the Main content tabs. Alternatively, you can have different colours per page.

Visibility tab

This tab allows you to hide the page from the website. This function is ideal for when you are working on a new page but are not ready to put the page live.

It is also useful for any hidden page links that you do not want in the main navigation of the site.

Additional Pages: Contact Us and About Us

This section explains the tab options you have within the Contact Us and About Us format pages.

Contact Us Page: Tab options

The Contact Us is a different format than the content pages. You have several tab options here.

Contact Details tab

This tab relates to the Page header and contains the ability to add text for the opening statement.

Contact Form tab

You can amend the title of the Enquiry section and set the email address for where the enquiry notifications are to be sent.

You can also amend the text above the contact form and the consent message.

You can choose to include two questions on the enquiry form - best time to call and preferred contact method.

You can amend the default wording that follows when a customer submits an enquiry to you via the above ‘Request a call back’ form.

Page Text tab

This tab is designed to allow for any free text or third-party HTML codes within the Contact Us page.

Google Maps tab

This tab allows you to either embed your Google Business embedded code or your address co-ordinates.

Tip: Google Business customers embedded map includes company details and Google reviews.

You should be able to access this via your Google Business account or alternatively visiting https://www.google.com/maps. You enter your company and once found click on the Share option, which will open a box within the map. Click into the Embed a map tab and copy the HTML link.

Please see below.

Alternatively, you can use the defaulted map option.

Please note: You will need to go to Google Maps to identify the co-ordinates https://www.google.com/maps (unless you already know these)

Having Google Maps, makes it easy for visitors to locate you, especially via mobile devices if they need to get directions to your office.

You can switch maps on/off.

About Us Page: Tab options

This section explains the tab options you have within the About Us format pages.

The About Us is a different format than the content pages. You have several tab options here; both are explained below.

Top of the page Text tab

This tab allows you to enter content for the About Us section, the setup of the layout of the page and to include Social Media feeds to the page.

Team Members tab

You can choose to enable/disable the team member section and the position of this section to either at the top of the page or below the main About Us content section.

You can edit the Header and introduction of the Team Members section.

You can set the alignment of the team members and their profile content.

Please see example of the horizontal display of Team Members

Use the Preview button to see what works best for the page.

Enter Team Members tab

This tab is where you add the images of the team, name, titles, and profile descriptions. Uploading an image works in the same way as uploading a logo, you click the + sign, which opens the Media folder etc.

You can move the team member’s position up and down, by clicking and dragging the position option.

To add a new team member, you just click Add.

Additional Pages: Privacy Policy

This section explains the Privacy Policy page format and tab options.

Privacy Policy tab

This tab allows you to enter your Privacy Policy content.

Footer Link Visibility tab

This tab allows you to remove the Privacy Policy link from the footer of the website.

Adding Additional pages

You have an option of several page formats, offering different page layout designs. You can choose from six options, all highlighted below and instructions on how to add to your website.

Adding a new page

You can choose to add new pages by clicking on the Actions button in the top right corner, then clicking on the Create option. This gives you a range of page formats, for example just a content page, a parent page for subpages or a free text page. Each page has different layout options, so depending on what is required on the page itself you will need to decide what works best.

Select your page format from the list to the right and title your page for it to be displayed in your website content. The new page will default to the bottom of your list of your website pages, where you will be able to reorder it to your chosen position within the navigation list.

Please see descriptions of each page format below.

Blog Pages

Please refer to the guide on ‘How to create a Blog and manage your posts’ in Umbraco.

About Us page

The template design is set up to assume you will only require one About Us page.

You can use the page format for alternative options, for example a different brand or location. This page format allows you to enter images, descriptions, and content either above or below your images.

Contact Us pages

The template design is set up to assume you will only require one Contact Us page.

You can have more than one Contact Us page, you can use the page format for alternative options such as a different office location. This page format allows a visitor to enter their details and submit enquiries to you and to find your office location via Google Maps. If you have different locations and prefer your enquiries going to separate areas, you could use this format page.

Please note that the default ‘Contact Us’ action button throughout the website can only go to one destination.

Content pages

This format page is the most common format for pages.

This page allows for main content messages, Calculators, Plugins, Our Services and Testimonials. The default Mortgages, Insurance and Protection pages use this format page.

Free Format pages

We have created a hardcode for you to use if you would like to include our default Glossary page. This contains a glossary of mortgage descriptions/meanings to help visitors. You will need to create a Free Format page, and enter #glossarypage# into the Free Format Content tab.

If you would like to amend the Glossary, you will need to contact the Web Brain team.

Parent Page

This format page can be used where you want to create Subpages to a main page.

You will need to start by creating the Main Page title, which will be the Parent Page. Once you have created the Parent page, you can then add your subpages. From your new Parent Page, click the Actions button on the right. You will only be given the option to create a Content page format.

Once the Content page is added to your Parent page list, you will get the same tab options as you would for all Content page formats.

Your pages will be added to your navigation drop down list.

Media Folder

This guide assumes that Mortgage Brain have already created the Media Folder during the initial build.

If you would like to add a new folder and/or add new images or documents to an existing folder, please follow steps below.

Adding a New Media Folder

Click the Media image option to the left of your website content, this will open your media options.

Click Create. Select Folder, title the folder at the top of the page and click save.

Adding images and documents to your folders

Select the Media Folder you wish to add the documents or images, click the prompt below which will open your options on where you can upload.

Choose the files and click open to upload to the Media Folder.

Adding Additional Third-Party plugins or tools

You can add additional plugins to your site. Once you have been provided with the code from the third-party provider, you can enter this into the Plugin tab or Third Party tab depending on where you wish to embed the tools within a page.

Adding Conveyancing Brain Plugin

To add the Conveyancing Brain tool on the Conveyancing Page, click on the Plugin Tab. You will need your BrokerID number, which you will find within your Conveyancing Brain account. Using the coding below, you will just need to replace the highlighted number with your Broker ID and enter into the Third-Party plugin section of the plugin tab.

<iframe id='idIframe' src='//plugin.wconveyltd.co.uk/?IntroducerId=BROKERID' style='border:0;width:100%;height:5000px;'>

You will need to add the following script to the Third Party Javascript section

<script type='text/javascript'>var eventMethod = window.addEventListener ? 'addEventListener' : 'attachEvent';var eventer = window[eventMethod];var messageEvent = eventMethod == 'attachEvent' ? 'onmessage' : 'message';eventer(messageEvent, function (event) {var iframe = document.getElementById('idIframe');if ((event.origin === 'http://plugin.wconveyltd.co.uk') || (event.origin === 'https://plugin.wconveyltd.co.uk')) {if (isNaN(event.data)) return;var height = parseInt(event.data);iframe.style.height = height + 'px';}}, false);</script>

You can set the Headline text and colour background.

Example of the ConveyancingBrain plugin below.

Font Awesome

Font Awesome is a widely used icon set platform. With over 1,600 icons in the free set, you should be able to find an icon to suit your needs.

Please note this is a third-party platform and not managed by Mortgage Brain.

Our Page links, social media and Company Feature sections use images that we obtain from Font Awesome. There is a link to these in each tab option. For example;

Using Font Awesome:

1. Using the Font Awesome image links

Click the link, Click Here option from any of the above sections. This will open a new browser page taking you into the Font Awesome site. You will then have a search toolbar where you can search for your chosen logo or image. Type in what you are searching for and then click on the logo to obtain the coding.

Please note we only use the free logo’s and/or images. However, you have the ability of purchasing your own if you wish.

You will just need to click on the <i class= > code provided, and it will take a copy for you. You can now go back into your Umbraco browser tab.

2. Adding the code back into Umbraco

You can now just paste the copied code into the Caption box. You will need to remove the <i classs=” open and closing brackets as below. An example of removing the brackets, below.

General Styling

This section gives you more detail about the options available to you within your template and Umbraco.

Adding a new company Logo

If you ever need to update your company logo, please see our recommendations for sizes and formats.

  • Company logo – max width 300px

  • For mobile – max width 150px

  • Favicon 300px x 300px

  • Preferred file formats for all templates - .jpg or .png

Auto Company Name/Email/Telephone Number

You will not need to repeat the company name or main telephone number throughout the site as a rule has been added into these sections. For example, below

Call us on #companytelephone# or send us an email at #companyemail# if you would like to find out more.

If you make any changes to the Main Company Details tab of your site and this rule has been added to your site, you will not need to repeat throughout the site as it will automatically pick up the changes.

Action button

The Action button in the top right of the screen is used where you wish to add pages, reorder, copy or move, publish and delete pages. Alternatively, you can hover over a page and right mouse click on the 3 dots to gain access to the action options.

Click Save.

Preview Function

Always preview a page following changes to ensure the page works in all mobile devices correctly. What works on a desktop view may look different on a mobile phone.

Reordering of pages

If you wish to amend the order of how your pages are positioned within the navigation drop down.

You will need to click the Action button on the right of the screen, click on Sort. You will then need to click and drag the pages to your chosen position within the list.

Working pages

We recommend that any new pages you are working on, you ensure the visibility of the page is hidden from the live site, until you are happy for the page to go live.

Please refer to the Visibility tab section of the guide above.

Hidden pages

If you want to create pages that are not to form part of the site navigation options for example Landing pages, or pages that are only accessible via links within pages of the website.

You will need to firstly create the page, as instructed in the Additional Pages section of the guide and then ensure the visibility of the page is hidden.

Please refer to the Visibility tab section of the guide above.

Page Titles

Try to keep page names a reasonable number of characters and try to avoid long email addresses.

Copy Pages

You can take a copy of any page within your website. Click the Action button on the right of the screen, click Copy.

You now need to choose where you want to copy that page to within your website content. To add to the current list of pages, click the main content page (example above). You will see a green tick appear. Then click copy in order for that page to form part of your website content.

Publish

Any pages that you create, or copy will initially default to be set as unpublished. Once you have made your changes and you are ready for the new page to go live, you will need to publish it.

You must have the page(s) you wish to publish highlighted, click the Action button, then Publish. Tick the boxes to ensure all pages are set to be published.

Delete Pages

You can permanently delete a page, first select the page, click the Action button in the top right of the screen, click Delete.

Please note: If you just want to hide a page to work on it, or hide for a period, we recommend that you use the Visibility tab options.

Adding a website domain

If you need to add/amend a domain name to the website, you will firstly need to notify Mortgage Brain for them to obtain a certificate for the site and add to the server.

Firstly, select the page you wish to add the new address, click the Action button, click Culture and Hostnames. Add/Amend the domain address, ensuring you enter www.

Unpublished changes

You will be presented with a green warning icon on any pages that have not been published, this will remain until such time you click the Save and Publish button in the bottom right.

Did this answer your question?