Scoop Hosted Websites. USER MANUAL PART 4: Advanced Features. Phone: scoop@scoopdigital.com.au Website: scoopdigital.com.

Transcription

1 Scoop Hosted Websites USER MANUAL PART 4: Advanced Features Phone: scoop@scoopdigital.com.au Website: scoopdigital.com.au

2 Index Advanced Features Integrating Third Party Content Integrating the Scoop Guides Macros Theme Options Changing Fonts Changing Font Weight and Size Changing Colours Changing the appearance of the Navigation Menu Header and Footer Integration Password Protecting Pages Using CSS Newsletter Integration Changing Navigation Bar Colour Social Media News Posts (Blogs) Search Engine Optimisation Text Page SEO Search Engine Optimisation Admin Settings \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 2 of 37

3 Advanced Features The aim of this section is to assist you in incorporating advanced features. These are: 1. Integrating Third Party Content This allows you to build on material provided on or by other sites/service providers. It requires you to enter into an agreement with the provider (eg: BookEasy) to obtain a license key. 2. Integrating the Scoop Guides Specifically addresses Scoop Guide Integration as third party content. This is just Third Party Content with the License Key provided and administered by us on your behalf. It allows you to integrate part or all of the Scoop Guides into your site. 3. Theme Options Allows you to set defaults for themes including changing fonts (specifically for text, links, when you hover over text with your mouse), font weights, colouring of headers, footers, etc. You don t have to do this as you can simply adopt the generic theme but it does give you the flexibility to individualise your site. 4. Managing Content: Macros (Software routines that do specific tasks on your site also called widgets) Adding widgets to your site allows you to do things like adding Keyword Search functionality to your site, inserting an image gallery, a payment widget, a third party item etc 5. Header and Footer Integration Shows you how to customise the headers and footers on your site. This is a powerful feature which makes your site stand out. 6. Password Protecting Page Allows you to password protect specific pages to manage access for updating your site 7. Using Cascading Style Sheets CSS is explained in detail here allows you to implement advanced features. Items such as Newsletter Integration and Changing Navigation Bar Colour are explained here. 8. Social Media Shows you how to integrate links for various social media into your site. 9. News Posts (Blogs) Shows you how to incorporate a blog function into your site. 10. SEO (Search Engine Optimisation) This allows you to define meta data (search phrases) which will make it more effective for people to hit your site when entering these words into their browser. 11. Admin Settings These allow you to specify some important integration details for your website, including newsletter signup, database licensing, webpage analytics and advertising. Most websites will require some or many of these options. \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 3 of 37

4 1 Integrating Third Party Content Scoop Hosted Websites give you the option to integrate content and functionality using Third Party Services. It is important to understand that you will have to approach these third parties and contract with them to gain a license key or password allowing you to use their service. A payment system or news stream are good examples of this. Scoop Digital is constantly reviewing new services that may be added to our Hosted Websites in the future. Third Party Services currently available for integrating into your site include Bookeasy, Dimmi, Levart and Shopify. Integrations that require you to create an account with a Third Party Service have three steps involved. Step 1: You need to create an account with the third party directly. It is your responsibility to do this. You can generally create an account directly through their websites. Step 2: You need to add the integration to your site. This is a bit like telling your site what the login details are for the third party service, so when you place the third party icon on your site, it know where to link to. This is done by expanding the site menu of the site into which you want to integrate the content for the below example it is VC Demo Website 1. Click on the arrow in front of the title (appears when you mouse over it). This will show the sub-menus. One of the sub-menus is Integrations. Click the ellipsis (three dots ) that appear when you hover your mouse over Integrations. From here, you can choose the integration you are currently adding: \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 4 of 37

5 Step 3: Fill in the information that appears. This will vary depending on the type of third party service you are using. So now your site is armed with what it needs to link to these third party services. But you still need to tell it where you want them. Referring back to Section 3, you learnt to use the text editor. One of the options you have when using the text editor is to add a Macro. This example shows a Full Width Element added and the text editor with the Macro option. When you have decided where you want the third party service to appear, click on Macro in the Rich Text Editor and chose the Macro you want to insert from the list. Refer to section 6 for further explanation of each macro. \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 5 of 37

6 In this case you see the Search Function as well as the Gallery has been added: Scoop Digital is always integrating new third party services into our functionality. Please contact our team with any specific requirements not yet available. \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 6 of 37

7 2 Integrating the Scoop Guides The Scoop Online Guide Network includes 5 directories, 27 databases and more than 6,000 full-page profiles. It includes the largest online arts, events & travel guide in WA. You can choose any of the following directories and any of the guides within the directories to be displayed through your site. Integration of these guides into your site is no different to integrating any third party content. You should have already filled in a Content Licensing Registration Form if you wish to have the Scoop Guides integrated onto your site. If you have not done so and would now like to use the Scoop Guides, please contact Scoop Digital and we will generate a licensing key for you. Scoop Digital team will set this integration up for you. Once Scoop Digital has set up the integration for you, you need to add another page called a Site Navigation Link this will be the page that hosts your chosen guide. The Guide will not sit on an existing page, it is essentially a new page in itself. Add a site navigation link as a new page: \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 7 of 37

8 Name the page and then choose which guide you want to appear using the Link to Local Guide drop down list at the end of the page. Once you save and publish, this page will display as a guide. \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 8 of 37

9 Once you save and publish, you will see your new Guide page appear in your website structure. Here we have added the Events guide to the Scoop Digital site. The front of your site will now have a new page that appears like this: \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 9 of 37

10 3 Macros Scoop Hosted Websites provide a range of Macros that allow you to integrate design options and display Third Party Services on your website refer to section 1 for details on how these Macros are integrated into your pages. Below is a list of Macros that are available for your site. Further Macros will be added as new technology becomes available and the Scoop Digital team review, test and integrate them into the Scoop Hosted Website platform. Bookeasy Widget Breadcrumbs This is the widget you need to add so that your Bookeasy integration will show on your chosen page. This Macro displays where the current page is in the menu navigation, showing the pages that the user has previously clicked on to get to there. For example, if you have clicked on three links to get to the current page, it will display those links in order so that users can easily trace back their steps, like breadcrumbs. Contact Form This will insert a standard form that can be used by website viewers to send your chosen address a message without having to open a new window. Dimmi Widget Full Text Search This is the widget you need to add so that your Dimmi integration will show on your chosen page. This Macro allows users to search your whole website for key words. \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 10 of 37

11 Guides Nav Bar Image Gallery This inserts a navigation bar so that users can search the Scoop Guides from any page on your website. This inserts an image gallery that is similar to the gallery that you can insert when adding elements to a page. Latest News Levart Widget Scoop Traveller Maps This Macro will allow your page to display the latest news, although it is still under development at the time of publication. This is the widget you need to add so that your Levart integration will show on your chosen page. This Macro displays the Scoop Traveller Maps on your page so that users can view your chosen Scoop Guide via location. This can only be used if you have integrated the Scoop Guides into your website as well. Text Search Weather Widget This is similar to the Full Text Search. Either search bar can be used interchangeably. This widget displays the local weather on your page. You will need to go to and choose the location of the weather you d like to display, and then copy the URL into the widget where shown. TIP: Create a text page with a Contact Macro so that users can easily send s through your site. Include your business details on this page, such as physical and addresses, phone numbers and opening hours. \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 11 of 37

12 4 Theme Options Your Scoop Digital Hosted website gives you the flexibility to customise your site s colour scheme and fonts. There are also some other theme aspects you can customise. This section shows you how. The Theme Options tab allows you to change these site settings, including adding advanced code as you get more comfortable with the environment. This is an example of what the different font styles look like. There are the default fonts already populated into the system so no additional input is required from you if you are happy with them and the colour scheme. If you would like to change these fonts or colours, as well as background colours, please read on. \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 12 of 37

13 You can make the following customisations to your theme: Header H1 Font Style H2 Font Style Links Footer Second Footer \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 13 of 37

14 4.1 Changing Fonts You will need to add some simple lines of code (text) into your Theme Options tab fields. (Please also see the CSS Tools portion of this manual for more information.) Step 1: Click on ( Step 2: Select a font you like and click as indicated below (eg: Droid Sans) Step 3: Copy the font name after.?family= per the example below (in green) into the url( \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 14 of 37

15 Step 4: Copy this text into the Font field on the admin page of your website Now your h1 (Header 1) font will be Droid+Sans on your site, wherever you insert a Header 1. As you have learnt in Section 3, you can now add content using the Rich Text Editor and modify the font as you please picking from the Formats list of fonts you have defined for the various styles (Header 1, Header 2 etc): \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 15 of 37

16 4.2 Changing Font Weight and Size Font weight refers to the boldness of your chosen font. The font you have chosen to use will appear in at different weight and size depending on the style, but you can adjust weight and size in your Theme Options tab, here: You will need to set your font size and weight and then preview your page to see how your chosen font style appears after you make these adjustments. This may take some trial and error to get your font exactly how you d like it. Different font sizes you can choose from are: Medium (this is default) Xx-small X-small Small Large X-large Xx-large Smaller Larger OR you can choose to set your font to a percent of the default size, for example 200% will set your font to 200% of the default. Different font weights you can choose from are: Normal Lighter Bold Bolder OR use numbers 100 to 900, with 400 being normal weight and 700 the same as a bold weight. \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 16 of 37

17 4.3 Changing Colours All colours are defined by a number in the web environment. Unfortunately these numbers are written in Hex code, not decimal. But you can look up these codes as explained here: Visit for a vast range of these colour codes. You can type in the Hex code for the colour you d like (e.g. #FFFFFF is white, # is black). To do this, click on the colour field of a header, for example, and type the number in as shown here: \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 17 of 37

18 Or you can simply type Black, White, Green etc, and Umbraco will pick a standardised colour for you. Press Choose and the colour will be imbedded. Here is the result! \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 18 of 37

19 4.4 Changing the appearance of the Navigation Menu You will need to add CSS codes into your Theme Options tab if you wish to change the colour and appearance of the navigation menu. CSS refers to custom coding that uses an internet language to force desired changed that override your templated site, usually if you would like to do something a little more advanced. Please see Using CSS for more information and a sample code. \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 19 of 37

20 5 Header and Footer Integration You can set up a standard header and footer, as detailed in Part 3. This section shows you how to set up Header and Footer Integration for a more customisable site. You will need to add the Header and Footer integrations to your site through the Integrations tab here: First, add an integrations folder and simply name it Integrations. Click save and publish. Under integrations, you can add in the Header and Footer integrations: \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 20 of 37

21 From here you can design your header and footer in the same way that you would add normal elements to your page, the only difference is that this will appear on every page above your navigation menu. We have used a headline and an image of an underscore as our site heading. Here is a comparison of the back end and result. Back end: This will now automatically appear on each page of the website: \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 21 of 37

22 The Footer is created in the same way, using the standard tools to add elements in whichever way you like so that it will automatically appear at the bottom of each page. Here we have added social media links and contact information to the footer. In the back end, it looks like this: Now each page will automatically feature this at the footer: \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 22 of 37

23 6 Password Protecting Pages If you have a page on your website that you would only like to be visible to certain viewers, you can create a password protected page so that only users with a username and password can view that particular page. After you have the page/s that you would like to be hidden to the general public, you will need to add the Login page. In this example, we will show a hotel that wishes to hide instructions regarding logging onto their free Wi-Fi service. To do this, click on the icon that appears to the right of your homepage. Choose Login from the list, as shown below: Name the Login page User Login, just to keep things simple. Click Save and publish. Now you will need to go to the page that you want to add the password protection to. Click the on this page, then choose Do Something Else : \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 23 of 37

24 Choose Public Access from this list: \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 24 of 37

25 Choose the Single user protection option and click select. From here, you can set the username and password that users are required to enter in order to view your page. Choose your Login page this is the User Login that you previously created (it will have an icon of three little people on it). You can create a page that has an Error login failed message on it if you like, but we have chosen to redirect people to the homepage if they try to log in and don t have permission. \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 25 of 37

26 Click update. Your page is now password protected, and will look like this: \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 26 of 37

27 7 Using CSS CSS stands for Cascading Style Sheets along with HTML it is the basic language of all websites. When building your website using standard tools, you do not require any knowledge of HTML or CSS. However, if you wish to incorporate bespoke functionality or design not available through the standard tools, CSS may be required. A CSS Tool is built into your website for this purpose. The standard tools available on your Scoop Hosted Website should satisfy the majority of your design and functional needs. These standard tools have been thoroughly tested across all platforms and devices to ensure they are fully responsive, bug-free and working as intended. This level of robustness and reliability is one of the strongest aspects of the Scoop Hosted Website system. When standard tools are not able to meet your requirements, CSS makes it possible to do additional coding and incorporate styles and functionality not available through the standard tools. For more common requirements, Scoop Digital has developed Template CSS Code, which is available for use on your website. This code has also been thoroughly tested and is integrated into some of the standard templates. An example of when CSS Templates may be required, is for changing the colour of the top navigation bar (eg: For bespoke requirements beyond those outlined above, CSS still be used. However, it must be acknowledged that bespoke development and design requiring unique CSS Code will not have been tested with the same rigour as the standard tools, and may lead to your website not performing or displaying at an optimal level on all platforms at all times. Below are some Template CSS elements that you can add to your website through the Theme Options tab in your page settings. Paste the code into the Custom CSS area at the bottom of the page. \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 27 of 37

28 7.1 Newsletter Integration In order to set up a form so that people can easily subscribe to your newsletter, you will need to set up a third party account with MailChimp. Once you have done this, you can follow the steps below to add a subscriber form to the footer of your website that will look like this: MailChimp Steps: 1. Login to MailChimp 2. Go to "Lists" 3. Find the list you want to add subscriptions to, and click on it 4. Click "Signup Forms" 5. Choose "General forms" 6. Make sure the dropdown is on "Subscribe --> Signup Form" 7. Design the form as you see fit using the drag-n-drop interface 8. Copy the "Signup form URL" (e.g Mailchimp use URL-shortening which seems to mess up when passing the form data (requiring reentry of the address), so we have an extra step: o Paste the shortened URL (from Step 8) into a browser tab o The URL will change to a longer URL, so copy this new URL from the browser (e.g. Umbraco steps 1. Go into Umbraco admin and select the homepage for the site you want to add the form to 2. Change to the "Admin Settings" tab 3. Paste the copied URL into the "Newsletter Signup Form URL" textbox e.g Click "Save & Publish" to finish \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 28 of 37

29 7.2 Changing Navigation Bar Colour This code will allow you to change the colour of the navigation bar at the top of your website. Paste this code into the Custom CSS area in the Theme Options. /*.slick-slide img { width: 100%; } */ /*.slick-list { overflow: visible; } */ /* Styling to change background color of the top menu */.contain-to-grid { background: #000000!important; }.contain-to-grid.top-bar { background-color: #000000!important; }.top-bar a { background-color: #000000!important; }.top-bar li { background-color: #000000!important; }.top-bar select { background-color: #000000!important; }.top-bar input { background-color: #000000!important; }.top-bar button { background-color: #000000!important; } This code can be used to change the menu format from this: To this: Paste this into the Custom CSS area in the Theme Options tab. /* Change header - remove search and float right only screen and (min-width: 61em) {.top-bar-section.has-form { display: none; } }.top-bar-section.left { float: right!important; only screen and (min-width: 61em) {.top-bar.title-area { float: right; } } \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 29 of 37

30 @media only screen and (min-width: 61em) {.top-bar.name h1 a { height: 20px;} only screen and (min-width: 61em) { header.large-4 { overflow: visible; z-index: 10; } only screen and (min-width: 61em) {.top-bar { margin-top: -45px!important; } only screen and (min-width: 61em) {.fixed.top-bar { margin-top: 0px!important; } } \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 30 of 37

31 8 Social Media Social media can be integrated into your site through a number of ways. Firstly, you can use the Social Links that appear in the header, here: CONNECT WITH US These social media links can be added under the Social Links tab, here: You can choose the type of link you want to add, and then simply copy the URL of your social media site into the Social URL area. You can add more links, delete links, turn links on and off and move the order by using the buttons to the right. You can also add social media widgets to your site through third party websites. A widget is a little gadget that is taken from a generator and added to your site, like a badge. To add a widget, you need to generate the widget code and then copy that code into the source code area of a Rich Text Editor control: \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 31 of 37

32 This is how it appears on our site. It is a widget that is set to scroll across: To generate a widget code, there are a number of site you can use. Feel free to do some Googling and find the best one for you. The widgets that we have used on our sites are: These sites will guide you through the process and show you a preview of what your widget will look like, then you can generate the code and copy/paste this wherever you want the widget to appear on your site! \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 32 of 37

33 9 News Posts (Blogs) Your Scoop Digital website provides specialised News Post functionality for operating a blog. These news posts will appear on the News page of your website, and the most recent news post will display in the news widget if you have included the widget on one of your pages (for more information about the widget, see the Macros, pg xx). In the above screenshot, you can see that three news posts (or blog posts) have been created. Checking the box alongside a news post pops up a series of buttons for publishing, unpublishing and deleting that news post. Clicking on the Create button displays a page where the news post information can be entered, as shown in the following screenshot. \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 33 of 37

34 It is important that you provide a name for the news post and some introduction text (also known as a news post excerpt). In the Content tab, you define the structure and content of the news post, in much the same way you would define the structure and content for a text page. This process is further described in Drag and Drop Content Editor (pg xx). \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 34 of 37

35 10 Search Engine Optimisation Engine Optimisation (SEO) refers to the ranking that is given to your site by search engines such as Google, so that people will be able to find your site more easily when they are searching for key phrases. For example, if you are a site for a hotel in Perth City, you will want your site to be on the first page of Google when people search for Perth Hotel. Getting your site into the top rankings is SEO Text Page SEO The SEO tab allows you to specify the important SEO (Search Engine Optimisation) details for this specific page. Turn the page for further details. \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 35 of 37

36 10.2 Search Engine Optimisation The SEO tab for your website allows you to specify the important SEO (Search Engine Optimisation) details for your website. These SEO details are critical to placing your website at the forefront of search engine results, so it is crucial that you research thoroughly to determine which keywords and phrases are being used to search for your business and services. These SEO fields are also available at the page level of the website so that you can specifically target SEO for each individual page. Both the meta keywords tag and the meta description tag contribute to your search engine ranking. The meta description tag influences the likelihood that a person will actually click on the search engine results page and visit your site. The fields available on this tab are as follows: SEO Title Meta Description Can be used to override the Page Name to display in the page title tags. The meta description for your business. The meta description tag is intended to be a brief and concise summary of your website content, which can be used by search engines or directories. Meta Keywords The meta keywords for your business, separated by commas. Pick the 10 or 15 terms that most accurately describe the content of the website. It is important that you seek independent, expert advice regarding Search Engine Optimisation and what will work for your site. Search Engine Marketing (SEM), even more so, requires specific advice and guidance. \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 36 of 37

37 11 Admin Settings The Admin Settings tab for your website allows you to specify some important integration details for your website, including newsletter signup, database licensing, webpage analytics and advertising. Newsletter Integration Many organisations will publish some form of newsletter, often using an online service such as MailChimp. Your Scoop Hosted Website allows you to include a newsletter signup form in the footer. Google Analytics Integration The success of your content strategy can be monitored using Google Analytics. Once you have setup your Google Analytics account you can integrate it with your Scoop Hosted Website. Google DoubleClick for Publishers Integration Google DoubleClick for Publishers (DFP) is a free ad management solution that helps growing publishers sell, schedule, deliver, and measure all of their digital ad inventory. The fields available on this tab are as follows: Newsletter Signup Form URL Scoop Guide License Number Google Analytics Tracking ID Google DFP Targeting ID The URL for your newsletter signup form. The Scoop Guide License Number for the license you have been allocated. The GA Tracking ID associated with your Google Analytics account. The DFP Targeting ID associated with your Google DFP account. \\dc01fp\redirected$\harriette.smith\desktop\scoop Hosted Websites User Manual - Part 4 - Rev2.docx Page 37 of 37