NETZONE CMS User Guide Copyright Tomahawk

Transcription

1 NETZONE CMS User Guide Copyright Tomahawk 1

2 Phone: getintouch@tomahawk.co.nz Tomahawk NETZONE CMS USER GUIDE

3 WHAT YOU LL FIND INSIDE LOGGING IN 4 NAVIGATING THE CMS 5 PAGES 6 EDITING A PAGE 7 UNDERSTANDING RESPONSIVE LAYOUT 8 USING THE RICH TEXT EDITOR 9 INSERTING AN IMAGE ONTO A PAGE 10 EMBEDDING YOUTUBE VIDEOS ONTO A PAGE 11 CREATING LINKS 14 PAGE SETTINGS 15 UPLOADING IMAGES AND DOCUMENTS 16 CREATING SLIDESHOWS AND GALLERIES 17 WEBSITE SETTINGS 18 Copyright Tomahawk 3

4 Logging in We will provide you with a link to your CMS login page, together with an address and password. The address will be your username to log in. As an additional piece of security, the login screen will also ask you to enter a valid captcha phrase. Once logged in, you will be taken to your dashboard from which you can access all areas of the CMS. 4 NETZONE CMS USER GUIDE

5 Navigation The left-hand column is your main navigation for the CMS and is customised specifically for your requirements. The most common features displayed are Pages, Slideshows and File Manager. These will be explained further on in this guide. Copyright Tomahawk 5

6 Pages Selecting the Pages option from the main navigation will display all the pages currently on your website, including those that are not published. Functionality Includes: Creating New Pages Changing the order in which pages appear on the main navigation of the website Deleting pages no longer required Publishing pages so they re available to visitors Hiding pages no longer needed. 6 NETZONE CMS USER GUIDE

7 Editing a page Content on a responsive website is laid out using rows and columns. The CMS page editor allows you to create as many rows as required with up to 4 columns in each row. This allows you to add content in a structured and meaningful way that is easy for the visitor to read and simple for them to follow. Tips for content loading: Break your content into manageable sections Use Headings to separate content sections Keep your columns balanced by entering the same amount of text into each one You can use a left-hand column for text and a right hand column for an image. Copyright Tomahawk 7

8 Desktop Layout Understanding responsive layout Content on a responsive website is laid out using rows and columns. As the width of the device reduces in size, columns will begin to shrink in width to fit the device and then begin to stack on top of each other grouped in their rows. In the example shown on the right, the desktop layout shows 3 columns side by side. The mobile phone layout shows the same 3 columns stacked on top of each other. You can easily see how your website is viewed on different screen sizes by resizing the width of your browser window. Column 1 Column 2 Column 3 Mobile phone Layout Column 1 Column 2 Column 3 8 NETZONE CMS USER GUIDE

9 Using the rich text editor Also known as a WYSIWYG editor, this allows you to format your text, insert images and create links to other pages or documents on your website or across the Internet. The following describes the function of each button on the toolbar. Experiment with each one to find out how they work. View the source HTML code of the content. Use this to embed code from sources such as Google Maps, Youtube or TripAdvisor. Button 1 allows you to paste text you ve already copied from elsewhere into the content area. Button 2 activates the spell check These will undo and re-do any editing you ve performed in the content area. Button 1 will select all text in the content area. Button 2 will clear all formatting on selected text. Button 1 is used to create a link. This can be to another page, photo or document on your site or to any page on the Internet. Button 2 will remove a link you ve created. Button 3 is used to create an anchor point at the position of your cursor that you can then link to from elsewhere. Button 1 is used to insert an image into your content area. Button 2 will create a table with cells and button 3 allows you to add special characters to your content. Button 1 is used for bold text. Button 2 is for italicised text and button 3 is for strikethrough text. Button 1 is used for subscript text and unless you re a scientis it s unlikely you ll ever need it. Button 2 is for superscript text. E.g. 10m 2 Button will create a numbered list while button 2 will create a bulleted list. Buttons 1 and 2 are used to increase or decrease indentation on a paragraph of text. Button 3 will create a blockquote of text. These four buttons allow you to align text to the left, centre, right or justified. This button allows you to format the text style as normal paragraph text or as a selected heading type. You can use this button to change the font size of a selected piece of text. Copyright Tomahawk 9

10 Inserting an image onto a page Step 1 Place your cursor in the location you would like your image to appear and then click the image icon on the toolbar. A new Image Properties window will open that allows you to select the image and place it into the content area. Click the Browse Server button to locate the image in your website library and a new file manager window will open allowing you to locate and select the image. See Step 2 on the following page. 10 NETZONE CMS USER GUIDE

11 Step 2 In the File Manager window, locate the image you want to place on the page and double-click to select it. This will place the image s URL into the URL field of the Image Properties window shown on the preceding page. Step 3 The width and height of the image will be automatically added to their respective fields on this window. Please delete both of these entries. This allows your CMS to manage the width of images in a responsive nature on various devices. Step 4 Click OK and the image will be inserted into the content area you are editing. Copyright Tomahawk 11

12 Embedding YouTube videos onto a page Step 1 The first thing you need is the code from YouTube. Go to the video you want to embed on Youtube and click the Share button. Select the Embed option and a small text area will display the code that you need which is already selected. While the code is selected, press CTRL+C on your keyboard to copy the code. 12 NETZONE CMS USER GUIDE

13 Step 2 Edit the page on your website that you want the YouTube video to appear and place your cursor into the text area you re going to insert the video. Click the Source button on the toolbar and in the new window that opens, paste the code you ve copied from YouTube using CTRL+V on your keyboard. Click OK, save your page and the video will be embedded on the page. Copyright Tomahawk 13

14 Creating links Within content areas on a page, you can create links to other pages, photos or documents on your site or to pages on other websites on the Internet. Links can be created using text or images. Select the text or image in the content section that you want to become the link. From the toolbar click the link icon and a new Link window will open. Linking to a page on your site or another website: In the URL field that is highlighted, enter the URL of the page you want to link to and click OK. You can find the URL in the address bar of your browser window. Linking to an image or document on your site: Click the Browse Server button and the File Manager window will open. Select the document you want to link to and it place the URL into the URL field for you. To open links in a new window, select the Target tab and choose New Window from the list. 14 NETZONE CMS USER GUIDE

15 Page Settings URL: This is the unique identifier for the page on your website. In the example shown this will be Menu: The text in this field will create a link to the page on your main navigation bar. Sitemap Menu, Breadcrumb Menu and Footer Menu: The text in these fields will create links to the page in each of these various sections if you website design and layout includes any of these items. Slideshow: If your website design uses slideshows then this allows you to select the slideshow to use on the page you re editing. Gallery Group: If your website design includes photo galleries on individual pages, then this allows you to select the gallery you want displayed. Parent: This allows you to group pages into sections. Selecting a parent will cause the page to become a sub-page of the one selected and appear in the drop-down menu for the selected parent. Template: If your design contains more than one template you can choose the template style from this list. Time-based publishing: This feature allows you to choose when a page on your website is available. This feature is great for publishing events or specials. Once the event or special has expired, then you can select a date and time to hide the page. Copyright Tomahawk 15

16 Uploading images and documents Choose File Manager from your main navigation in the CMS. You can create folders to group images and documents in a way that makes it easy to locate them in the future. Click on the folder you want to upload images or documents to from the left-hand list. This will open the folder and display all images and documents it already contains in the left-hand window. From your computer, select all the images or documents you want added and drag them onto the white space in the left-hand window. 16 NETZONE CMS USER GUIDE

17 Creating slideshows and galleries Using the Slideshows / Galleries option from your main navigation in the CMS you can create as many slideshows and galleries as you need. On the Photos tab click the add new slide button and the File Manager window will open. Locate the photo you want to add and double-click to select it. You can then add captions, Alt text and the rank you want the photo to appear in the slideshow or gallery. Alt text is hidden text that describes what the photo is and is great for SEO as well as for those people who use screen readers to view your website. Save the slideshow you ve created and you can then select it from a list when choosing a slideshow to include on any of your website s pages. Copyright Tomahawk 17

18 Website Settings Using the Settings option from your main navigation in the CMS you can set a range of options for your site. Company Details This tab lets you enter details about your company as well as a list of addresses that you would like enquiry form submissions to be sent to. Social Links This tab allows you to enter the links to your various social media platforms such as Facebook and Twitter. Social Widgets If your site uses any social media feeds then this tab allows you to enter the code to produce those feeds. Important Pages This tab contains a list of important pages on your site that the CMS uses to link various functions such as bookings or enquiries. Developer Settings This tab is used to add your Google Analytics code to the website. 18 NETZONE CMS USER GUIDE

19 Copyright Tomahawk 19