managing your joomla! 3 content management system (cms ...€¦ · managing your joomla! 3 content...

56
Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business  This manual will take you through all the areas that you are likely to use in order to maintain, update and make basic changes to your website.  2015 Jennifer Keys and Jason Keys Websites For Small Business (03) 9017 0682 

Upload: others

Post on 17-Jun-2020

15 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

  

Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business  This manual will take you through all the areas that you are likely to use in order to maintain, update and make basic changes to your website.  

2015 

Jennifer Keys and Jason Keys Websites For Small Business 

(03) 9017 0682 

Page 2: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    1 | P a g e  Copyright © Websites For Small Business 2013 

TABLE OF  CONTENTS 

Table of Contents ................................................................................................................................................................. 1 

JOOMLA! CONTENT MANAGEMENT SYSTEM CMS MANUAL ............................................................................................... 2 

RULES OF THE WEBSITE ................................................................................................................................................................... 2 GETTING STARTED .......................................................................................................................................................................... 2 

Getting to Know your Joomla! CMS ..................................................................................................................................... 3 LOGIN .......................................................................................................................................................................................... 4  BACK END ADMINISTRATOR MENUS ................................................................................................................................................. 5 USERS AND ACCESS PERMISSIONS ..................................................................................................................................................... 5 CREATING A NEW USER .................................................................................................................................................................. 6 YOUR WEBSITE .............................................................................................................................................................................. 9 

Template .............................................................................................................................................................................. 9 Editable Areas ...................................................................................................................................................................... 9 

EDITING YOUR WEBSITE .................................................................................................................................................................. 9 Front End .............................................................................................................................................................................. 9 Back End Administrator ...................................................................................................................................................... 11 

CREATING NEW PAGES ................................................................................................................................................................. 12 What is an Article? ............................................................................................................................................................. 12 What is a Menu Item? ........................................................................................................................................................ 13 How to create an Article ..................................................................................................................................................... 13 How to Create a Menu Item ............................................................................................................................................... 16 How to Create a Sub Menu Item ........................................................................................................................................ 19 Menu Ordering ................................................................................................................................................................... 20 

FORMATTING CONTENT ................................................................................................................................................................ 21 MODULES .................................................................................................................................................................................. 22 

Module Positions ................................................................................................................................................................ 23 How to Create a Module .................................................................................................................................................... 24 How to Change a Module ................................................................................................................................................... 26 

LINKS ......................................................................................................................................................................................... 26 Types of Links ..................................................................................................................................................................... 26 Linking Images and Text to external websites ................................................................................................................... 27 Linking images and text to pages within your website i.e. Contact Us .............................................................................. 28 Linking images and text to PDF’s ....................................................................................................................................... 29 

INSERTING IMAGES INTO AN ARTICLE ............................................................................................................................................... 32 Image Alignment ................................................................................................................................................................ 35 

IMAGE GALLERIES ........................................................................................................................................................................ 36 Ignite Gallery ...................................................................................................................................................................... 36 Widgetkit ............................................................................................................................................................................ 39 

Widgetkit – Gallery ............................................................................................................................................................................ 39 Widgetkit – Slideset ........................................................................................................................................................................... 40 Widgetkit – Slideshow ....................................................................................................................................................................... 44 

Layer Slider ......................................................................................................................................................................... 47 CONTACT US ............................................................................................................................................................................... 51 

Fox Contact Menu Item ...................................................................................................................................................... 51 Message delivery ............................................................................................................................................................................... 52 Form Fields ........................................................................................................................................................................................ 52 

Fox Contact in a Module..................................................................................................................................................... 53 Message delivery ............................................................................................................................................................................... 53 Form Fields ........................................................................................................................................................................................ 53 

LOGOUT ..................................................................................................................................................................................... 55 FOR MORE INFORMATION ............................................................................................................................................................. 55 

          

Page 3: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    2 | P a g e  Copyright © Websites For Small Business 2013 

JOOMLA!  CONTENT  MANAGEMENT  SYSTEM  CMS  MANUAL  

At Websites For Small Business, our aim is to present to you, a website that you can update and maintain yourself.  To assist you, we have compiled a manual detailing how to make changes to your website.  This manual will take you through all the areas that you are likely to use in order to maintain, update and make changes to your website.  If you are unable to find what you are looking for, please do not hesitate to contact us.  We have chosen the Joomla! Content Management System (CMS), as the basis for your website.  CMS is a web based application used to manage your website and its content.  It is simple for even non‐technical users to add or edit the content and anybody with basic word processing skills can easily learn to manage a Joomla! website.  With the click of a few buttons, you can make changes to your website.  

RULES  OF  THE  WEBSITE  

You can’t break the website, but we do recommend that if you find yourself being unsure, please do not hesitate to contact us for guidance.  Never press the browser back or forward arrow buttons.  If you want to close off the page you are working on you have two options:  

Click Save & Close.  This will save all the changes that you have made. 

Click Close.  This will cancel any changes that you have made and will revert the page back to its original condition.   Original condition refers to the condition it was in when you last pressed the Save or Save & Close button.   

Two users cannot edit the same page so make sure that if other people have access to editing the website that they don’t keep the page open for any longer than is necessary.  Within the Back End Administrator, in the Site Menu, there is no need to change the Global Configurations.  If you feel that something in this section needs to be changed, please contact Websites For Small Business as changes in this area could result in causing errors in your website, even shutting your website down.   That’s the rules!  Now, let’s get started!  

GETTING  STARTED  

Throughout this manual, we will show you images from our Demo website.  From these images, you will be able to understand your website and how it works.               

Page 4: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    3 | P a g e  Copyright © Websites For Small Business 2013 

GETTING  TO  KNOW  YOUR  JOOMLA!  CMS 

There are two parts to your website, your website and administrator. Your website – www.yourwebsite.com.au also known as ‘The Front End”  

  

Administrator – www.yourwebsite.com.au/administrator also known as ‘The Back End”  

   

Page 5: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    4 | P a g e  Copyright © Websites For Small Business 2013 

LOGIN 

Login to the website is done through the back end Administrator: www.yourwebsite.com.au/administrator Enter your Username and Password and then press Log in.  

  You will then see the following screen:  

  

Page 6: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    5 | P a g e  Copyright © Websites For Small Business 2013 

 BACK  END  ADMINISTRATOR  MENUS  

There are 2 menus in the Administrator.  

  

USERS  AND  ACCESS PERMISSIONS 

1. Guests 2. Registered Users 

Guests are the general public who can view the website (front end only).  This means that they do not have access to making any changes to the website.  Registered users have been approved by the Super Administrator to access the website to make changes and have been given a Username and Password.  There are two types of Registered Users: 

1. Front End 2. Back End 

 Front‐end Users get additional rights over guests, which may include the ability to create and publish content on the web site. We will generally refer to these users as content providers since their primary goal is to provide content on the web site, not to administer the site or alter its design.  They only have access through the front end interface.  Back‐end users ‐‐ Managers, Administrators, and Super Administrators ‐‐ are typically thought of as the site administrators, but they also have access to the Back End Administrator and the Front‐end interface.  

User Access  Permissions 

Front End 

Registered  

A Registered User has no ability to create, edit, or publish content on a Joomla! web site.  They may submit new Web Links for publication and they may have access to restricted content that is not available to guests. 

Author Authors can create their own content, specify certain aspects of how the content will be displayed, and specify the date when the material should be published. 

Editor Editors have the same abilities as an Author and they can edit their own content as well as that of any other Author. 

Publisher Publishers can perform all the duties of Authors and Editors and have the ability to publish content. 

Back End 

Manager  

A Manager has the same permissions as a Publisher but with access to the Backend Administrator’s panel.  Managers have access to all the content associated controls in the administrator panel but are not able to change templates, alter page layouts, or add or delete extensions to Joomla!  Managers also have no authority to add users or alter existing user profiles 

1. Admin Menu 

2. Top Menu 

Page 7: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    6 | P a g e  Copyright © Websites For Small Business 2013 

Administrator 

Administrators have a broader range of access than Managers do.  Administrators can add and delete extensions to the web site, change templates or alter page layouts and can even alter user profiles equal to their own permission levels or below.  What they cannot do is edit the profiles of a Super Administrator or change certain global characteristics of the web site. 

Super Administrator 

The Super Administrator has the same kind of power as root in a traditional Linux system and has unrestricted abilities to perform all administrative functions inside of Joomla! Only Super Administrators have the ability to create new users with Super Administrator permissions or to assign Super Administrator permissions to existing users. 

 

CREATING  A  NEW  USER  

Only a Super Administrator can create or delete a user on the website.   Login to your administrator www.yourwebsite.com.au/administrator, enter your Username and Password and press Login.  Once logged in, go to the Admin Menu and select: 

Users 

User Manager  The following screen will appear:  

  In the Top Menu, click the Green “+ New” button and complete the details for the new user.   

Page 8: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    7 | P a g e  Copyright © Websites For Small Business 2013 

  There are 3 Tabs: 

Account Details 

Assigned User Groups 

Basic Settings  Account Details Complete the following details: 

Name – The first and last name of the new user. 

Login Name ‐ This is also known as the Username. 

Password – Ensure that this is not an easily guessed word and numbers should also be added. 

Confirm Password – Type the password again. 

Email – enter their email address.  This cannot be the same as another user. 

Registration Date – Leave blank 

Last Visit Date – Leave blank 

Last Reset Date – Leave blank 

Password Reset Count – Leave at 0 

Receive System Emails – Select No 

Block this User – Select No 

ID – Leave as 0  Assigned User Groups 

Page 9: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    8 | P a g e  Copyright © Websites For Small Business 2013 

  Select the User Group for the New User.  N.B. See the table in Users and Access Permissions for more information.   Basic Settings  

 

Page 10: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    9 | P a g e  Copyright © Websites For Small Business 2013 

 Leave all options as – Use Default –    Once you have completed the New User details, click on the Save & Close button in the Top Menu. Please keep Websites For Small Business as a Super Administrator so that we can make changes when requested. 

YOUR  WEBSITE  

Your website is divided into two parts: 1. Template 2. Editable Areas 

TEMPLATE 

The template determines the format in which your website appears including the design, colours, text sizes, fonts and heading colours.  This is not editable by users. 

EDITABLE  AREAS 

Editable areas can be accessed by users and changes to these areas can be made.  Accessible through the Admin Menu, these areas are: 

Articles 

Modules 

Menus 

Various Components including o Widgetkit o Ignite Gallery o Proforms Basic 

 

EDITING  YOUR  WEBSITE  

There are two ways to access and make changes to your website: 

Front End 

Back End as known as Administrator 

FRONT  END 

To access and make changes through the Front End, you will need to request a login link on the front page of the website.  Once this has been created: Click on the Login link.  Login may appear as a module or in the footer of your website.  When prompted, type in your Username and Password Once logged in, you will see the word Edit appears in the Article under the article name.     

Page 11: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    10 | P a g e  Copyright © Websites For Small Business 2013 

  Go to the page that you want to edit and click on the Edit Button.  Your website now looks like it has a Word document imbedded in it.  You can now edit the article.  When you have finished, click Save.  When you refresh your website, the changes will appear.  

Edit Button 

Page 12: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    11 | P a g e  Copyright © Websites For Small Business 2013 

  

BACK  END  ADMINISTRATOR 

In your internet browser, type in your website address and then add /administrator i.e www.yourwebsite.com.au/administrator and then press enter. A login screen will appear and you need to enter your Username and Password.     

  Once you have logged in, your Control Panel will appear:  

Edit the Article 

When you have finished editing the article, click 

Save. 

Page 13: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    12 | P a g e  Copyright © Websites For Small Business 2013 

  To make changes to your website through the Back End Administrator, see individual chapters.  

CREATING  NEW  PAGES 

There are two parts to creating a new page on your website: •  Creating an Article •  Creating a Menu Item Creating new pages can only be done by Back End Administrator Users. 

WHAT  IS  AN  ARTICLE?  

An article is the content on a page of your website.  This can be written words and / or images.   

Page 14: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    13 | P a g e  Copyright © Websites For Small Business 2013 

  

WHAT  IS  A  MENU ITEM? 

There are either one or two menus on your website depending on how it has been set up.  If you have a menu across the top, it will generally be called Main Menu.  If you have a menu down the side of the site, it will generally be called Left Menu.  A menu item is the name of the tabs in the menu i.e. Home, About Us.   

 

HOW  TO  CREATE  AN  ARTICLE 

In order to create a new page, you must first create an Article and then link the Article to a Menu.    In the Back End Administrator, in the Admin Menu, click on Content then select Article Manager.  

Article 

Main Menu  Menu Items Left Menu 

Menu Items 

Page 15: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    14 | P a g e  Copyright © Websites For Small Business 2013 

 

   This will bring up the Article Manager Page.    

  Click on the Green “+ New” button in the Top Menu  There are 5 Tabs to complete to create an Article:  

Article Details 

Publishing Options 

Article Options 

Configure Edit Screen 

Metadata Options 

Article Permissions  

Page 16: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    15 | P a g e  Copyright © Websites For Small Business 2013 

  Article Details Complete the Title and then type your content into the blank field  

  In the Content area, type or Paste (using Ctrl v only as right click will not work in this program) the content you want to add.  If you choose to paste the content from another program, paste it into Notepad first, copy the text again and then paste it into the website.  This will remove all the formatting of the other program. DO NOT USE THE FOLLOWING FORMATTING: 

Font Family 

Font Size 

Styles 

Add your content here 

Add the title 

5 Tabs 

Page 17: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    16 | P a g e  Copyright © Websites For Small Business 2013 

These have been set in the template and once changed, will make your website messy and unprofessional and your content formatting will be all over the place. If you wish to make permanent changes to the formatting, please contact us to make changes in the template i.e. make the text smaller or larger. If you wish to make headings, use the Formatting box on the right side that is defaulted to Paragraph or Div.  Use the drop down list to select the Heading style you want.  Usually you would use Heading 3.   Publishing Options Leave everything blank in the tab; the program will complete these automatically.  Article Options Leave all the switches in the positions that you find them.  In the Use Global position, these switches are linked to the template and will keep your website uniform.  Configure Edit Screen Leave all the switches in the positions that you find them.  In the Use Global position, these switches are linked to the template and will keep your website uniform.  Metadata Options There is no need to make changes to this area.  Article Permissions Do not change the settings.  Once you have completed the Tabs, click Save & Close.  This will save and close the article. 

HOW  TO  CREATE  A  MENU ITEM  

Firstly, determine which menu you are going to add the article to.  Generally, the horizontal menu at the top of the website is called Main Menu and the Vertical menu may be called Left Menu.   Go to the Admin Menu and select the menu you wish to add the new menu tab to.  If you make an error here, don’t panic, you can easily change this.  

  Click the green “+ New” button.  The New Menu Item screen will appear.  There are 3 Tabs to be completed: 

Details 

Advanced Options 

Module Assignment for this Menu Item   

Page 18: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    17 | P a g e  Copyright © Websites For Small Business 2013 

  Details For the Menu Item Type click the Select button and from the options choose Articles and from the dropdown list choose Single Article.  

  This will return you to the original screen and a new option has appeared – Select Article Click on the Select button and from the list select the Article that you just created.  

Page 19: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    18 | P a g e  Copyright © Websites For Small Business 2013 

  Once the Article has been selected, it will return you to the original screen.  

  Fill in the Menu Title and make sure that the Status is published.  Menu Location – choose which menu the Menu Item will appear in.  Advanced Options Leave all the switches in the positions that you find them.  In the Use Global position, these switches are linked to the template and will keep your website uniform.  Module Assignment for this Menu Item There is no need to make changes to this Tab.  

Page 20: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    19 | P a g e  Copyright © Websites For Small Business 2013 

 Click Save & Close Now when you refresh your website, you will see the new menu item and the article that you have just written.  If you find that you have made an error, open the menu item that you have just created and go through the list to make changes. 

HOW  TO  CREATE  A  SUB  MENU ITEM  

To create a sub menu, follow the instructions as per creating a Menu Item.  Change Parent Item from Menu Item Root to the name of the Menu Item that you want the new Menu Item to appear under.  This creates the new Menu Item as a sub menu.  

  Click Save & Close. Now, when you refresh your website, and click on the Parent Item, a new sub menu will appear.  

     

Page 21: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    20 | P a g e  Copyright © Websites For Small Business 2013 

MENU ORDERING 

Once you have created the menu, you can change the order of the menu items as they appear on the website.  In the Admin menu, Click Menus and then the menu you want to change the order in.  For this example, we will change the order in the Left Menu.  In the table, find the Blue Up & Down Arrows as highlighted below.  If the three dots are already black, it means you can change the order.  If the three dots are grey, click on the blue up & down arrows to change the dots to black.  

   With your mouse, click on the three dots next to the menu item you want to move and drag it to the position you want it.  In this example I have the order of the pages as Page 1, Page 2, Page 3 and Page 4.  I want to change Page 4 to be above Page 3. So I clicked on the black dots next to Page 4 and dragged it above Page 3.  

 

Page 22: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    21 | P a g e  Copyright © Websites For Small Business 2013 

There is no Save button.  All changes made in this format are automatically changed on the website.  Click refresh on your website to see the changes.   

FORMATTING  CONTENT  

Formatted means that what you put into your articles is the same font and colour as the rest of the website.  This keeps it all uniform and stops your website looking like an infomercial.  All the content that you paste (Ctrl v only) or type into an Article is already formatted using the global settings of the template.  This is done to keep the website uniform from page to page.  If you want to create a Heading within the Article, highlight the words you want to change and select from the drop down list titled Format.  

  Notes for Formatting: 

The colour of the font won’t show in the Editor but it will when the page is saved and displayed on the website. 

Try not to sure the Styles, Font Family and Font Size to change the content as this will make your website look unbalanced.  The styles, colours and font family are set in the template. 

 Your website, when you save and refresh the website will show the new headings you have created. 

Page 23: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    22 | P a g e  Copyright © Websites For Small Business 2013 

  

MODULES 

DO NOT MAKE CHANGES TO THE FOLLOWING MODULES: 

Any Menu type module.  This will change the way that the Menus are displayed. 

Any wording contained inside [ ] or { } as this is a link to another module or image gallery and removal of these will remove the modules.  

 N.B. Some website will have 1, 2, 3 or 4 footers and you will be able to see their position by looking at the Position in the Module Manager.  Generally if there is only one footer it will be called Copyright, Copyright Footer or Footer.  These are the positions depending on how many footers you have:  1 Footer (uses the Copyright Position)    2 Footers (uses Footer 1 and Footer 2 Positions)    3 Footers (uses Footer 1, Footer 2 and Footer 3 Positions)      4 Footers (uses Footer 1, Footer 2, Footer 3 and Footer 4 Positions)         

Footer 1  Footer 2  Footer 3 

Footer 4 

Copyright 

Footer 1  Footer 2 

Footer 1  Footer 2 

Footer 3 

Page 24: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    23 | P a g e  Copyright © Websites For Small Business 2013 

MODULE  POSITIONS   

There are many areas that you can position modules in the website.  Each position has a specific name and when selected, will place the module in a specific area of the website  i.e. selecting ‘right’ will place the module on the right side of the website, ‘left’ will place it on the left, ‘banner1’ will place it above the article, banner5 will place it under the article etc. Don’t be afraid to click one option, click Save, refresh your website and see what it looks like.  If you are not happy, go back into the Module and change the position until you are happy.  See the diagram below for module positions available.  

 

Page 25: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    24 | P a g e  Copyright © Websites For Small Business 2013 

N.B. When selecting the Module position, ensure that you select it from the template that your website is using.  See the Screenshots of your website for your template name. 

HOW  TO  CREATE  A  MODULE 

This is a very basic run down of how to create a standard module and for more detailed information about creating Modules, please contact us. In the Admin menu, click on Extensions and then Module Manager.   

  Here you will see a list of the modules that are in your website.   To create a new module, click the green “+ New” button.  

  This will bring you to the page where you create your module. 

Page 26: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    25 | P a g e  Copyright © Websites For Small Business 2013 

  There are 4 tabs to complete: 

Details 

Options 

Customer Output 

Menu Assignment  Details Title – add a name for the module Show Title – Do you want the title of the module to show on the website? Position – Using the information listed previously in ‘Module Positions’, determine which position you want your module to appear in. Status – Ensure that ‘Published’ is green otherwise the module will not show up on the website. There is no need to change any of the other options on this page.  Options There is no need to change any of the options on this page.  Custom Output Enter in here the content you want in the module.  Menu Assignment You can choose where customers will see this module on the website.  If you want it to appear on all pages, select On all pages from the dropdown list.  If you want to select it to appear on only certain pages, click Only on the pages selected and then click on the pages you want it to appear on.    Once all the details are complete, click Save & Close.    

Page 27: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    26 | P a g e  Copyright © Websites For Small Business 2013 

Now, when you refresh your website, the module will appear on the pages that you have specified and in the position you have specified.  If you are not happy with the module position, go back to the Details page of the module, select another position within the template, click Save and refresh the website to see the new position. 

HOW  TO  CHANGE  A  MODULE 

Modules are used to display specific content on your website in specific positions and on specific pages.  These are generally “Call to Action” pieces of information such as contact details, image galleries and menus.  In the Admin menu, click on Extensions and then Module Manager.  

  Here you will see a list of the modules that are in your website.   Click on the name of the module that you wish to make changes to.   There are 4 tabs that have been completed: 

Details 

Options 

Customer Output 

Menu Assignment  Go through tab and change the information you want.  If you are unsure, see the previous section ‘How to Create a Module’.   Once all the changes are complete, click Save & Close.  

LINKS 

Links, either internally or externally, can be attached to images and / or text in your website.  

TYPES  OF  LINKS 

There are three types of links: 1. Linking Images and Text to external websites 2. Linking images and text to pages within your website i.e. contact us 3. Linking images and text to PDF’s  

Page 28: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    27 | P a g e  Copyright © Websites For Small Business 2013 

LINKING IMAGES  AND  TEXT  TO  EXTERNAL  WEBSITES 

Open the Article that you want to place the link into Highlight the text or image that you want to link Click on the Link button (looks like 3 links in a chain) 

    Once you have clicked the Link button a popup will appear:  

 In the URL, type in the website address you want to link to.  Ensure that you begin the URL with http://www. Click on the Target drop down menu and select ‘Open in a New Window’.  This will ensure that by leaving your site to go to the link, they will still have your website open in another tab on their browser and will not get lost or not be able to find your website again. Click Insert The text or image will now be linked to the external website. Click Save & Close for the article. 

Page 29: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    28 | P a g e  Copyright © Websites For Small Business 2013 

LINKING IMAGES  AND  TEXT  TO  PAGES  WITHIN  YOUR  WEBSITE  I.E.  CONTACT  US 

Open the Article that you want to place the link into, highlight the text or image that you want to link and click on the Link button (looks like 3 links in a chain) 

  Once you have clicked the Link button a popup will appear Click on the + next to the ‘Menu’ button Click on the Menu that your link page appears in i.e. Main Menu Click on the page that you want to link to i.e. Contact Us Click Insert  

  The text or image will now be linked to a page in your website. Click Save & Close for the article.  

Page 30: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    29 | P a g e  Copyright © Websites For Small Business 2013 

LINKING IMAGES  AND  TEXT  TO  PDF’S   

Open the Article that you want to place the link into, highlight the text or image that you want to link and click on the Link button (looks like 3 links in a chain) 

  Click the Page with the + button in the top right corner.  

  The File Browser window will appear.  Here, you will need to upload the PDF.  Click the Upload button (the Page with an Up arrow in the top right corner.)  

Page 31: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    30 | P a g e  Copyright © Websites For Small Business 2013 

  This will take you to your computer files.  Select the PDF that you want to link.  When the PDF appears in the Upload box, click upload.  

  A green tick will appear to say that your PDF is uploaded.  Once this happens, click close or it may close on its own.  The File Browser box will re‐appear.   Select the PDF from the list in the middle of the page and click Insert.  

Page 32: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    31 | P a g e  Copyright © Websites For Small Business 2013 

  The Link page will now re‐appear and the PDF you just uploaded and selected appears in the URL box at the top.  Click Insert   

  The link will then appear in the article with an underline. Click Save & Close for the article.  N.B. There is a file size limit.  If you receive a warning that your file size is too large, please contact us for assistance.   

Page 33: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    32 | P a g e  Copyright © Websites For Small Business 2013 

INSERTING  IMAGES  INTO  AN  ARTICLE  

Please note that images inserted into articles does not work well when Joomla! 3 websites are viewed on mobile devices.  To insert an image into an article, open the article you want to insert the image into and place the curser at the beginning of the line where you want the image to appear.  Click on the ‘Insert Image’ icon (looks like a picture frame)  

   The Image Manager will pop‐up.    

  Click on the folder ‘upload’ to upload your image.  The Upload box will appear    

Page 34: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    33 | P a g e  Copyright © Websites For Small Business 2013 

   Click Browse and locate the image on your computer or drag the files from your computer folder and drop the file/s into the Upload box.    Once you have chosen your image, it will appear in the Upload Queue with a red cross.  Click Upload  Once the image has finished uploading, a green tick will appear and your image has been uploaded.  If the Upload window has not closed on completion, click Close.  This will add the image to the Media Manager section of your Back End Administrator.  You can also access this through the Admin menu > Content > Media Manager. You will now be returned to the Image Manager popup.  In the centre box, locate and click on the Image Name.  This image name will appear as the URL for the image.  The Preview box in the top right will show you how the image will look in the article.  For image alignment, see the next chapter on Image Alignment.   

Page 35: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    34 | P a g e  Copyright © Websites For Small Business 2013 

  Now click Insert and the image will appear in the article. Click Save & Close for the article, refresh your website and your image will appear as per the preview.    

    

Page 36: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    35 | P a g e  Copyright © Websites For Small Business 2013 

IMAGE  ALIGNMENT    

From the previous example of how to insert an image into an article, when the image was selected in the Image Manager, the preview showed you how the image would look in the article.   

  To change the alignment of the image, click on the drop down box next to Alignment.  

  Now you can choose how you want the image to be aligned.  The preview box will show you how the image will look in the article.  Left will align the image to the left with the text wrapping around the image, Right will align the image to the right and again the text will wrap around the image.   

Page 37: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    36 | P a g e  Copyright © Websites For Small Business 2013 

   Click Update.   Then click Save & Close at the top of the page and your article will be saved and your image will now appear in the article in the alignment that you have set.   If, once you have placed the image in the article, you want to change its alignment, click on the image, click on the ‘insert image’ icon (the picture frame), change the alignment and click Update and then Save & Close for your article.   

IMAGE  GALLERIES 

 There are two types of image galleries that may appear in your website; Ignite Gallery and / or Widgetkit.  Refer to the screen shots of your website in the front section of this manual to see what type of gallery you have.  N.B. This section will tell you how to add images to an existing gallery.  If you require a new gallery to be created, please contact us. 

IGNITE  GALLERY 

In the Admin menu go to Components and from the drop down hover over Ignite Gallery and then from the pop‐out, select Images.   

   

Page 38: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    37 | P a g e  Copyright © Websites For Small Business 2013 

The Image Manager will now appear and you need to select the Category for your new images to go into.   

  These are easily distinguished as the Category names will describe the gallery i.e. Headers will be the Gallery that appear at the top of the home page, Gallery will be the gallery that appears on your Gallery page.  If you are unsure, click on the gallery and see the images that are contained in that gallery and this will determine whether you are in the right category.  If not, go back to Select Category and choose another gallery.  

   Once you are in the Category that you want to add an image to, click on the Add files button in the big grey box, locate the files on your computer, click on them and then click Open.  Alternatively, you can locate the files on your computer and drag them into the grey box where it says Drag files here.  Now your images are in the grey box, click Start upload and your images will upload to the website  

   

Page 39: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    38 | P a g e  Copyright © Websites For Small Business 2013 

 and appear with your other images.  

   In this example, I now have 4 images in my gallery and when I refresh the website, the images will appear.  There is no Save & Close button for the Ignite Gallery; all images added or deleted are instantly changed on the website. 

   

Page 40: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    39 | P a g e  Copyright © Websites For Small Business 2013 

WIDGETKIT 

There are 3 different types of galleries in Widgetkit.  Each of these galleries has a distinct purpose and displays your images in a specific way.  The screenshots of your website at the front of this manual shows what type of Widgetkit you have (if any) in your website.  N.B. This section will tell you how to add images to an existing gallery.  If you require a new gallery to be created, please contact us.  N.B. All gallery images need to be a certain size for them to appear correct on your website.  The dimensions are marked on the screenshots of your website at the front of this manual.  For each of the three types of Widgetkit galleries, go to the Admin menu and select Component, from the drop down, select Widgetkit.  

  

WIDGETKIT – GALLERY 

 From the Widgetkit menu, select Gallery and then the name of the Gallery you want to add images to.  

  A list of images will appear as well as a box for you to drop new images into.   

Page 41: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    40 | P a g e  Copyright © Websites For Small Business 2013 

   From your computer, find the files that you want to add and drag them from your computer to the ‘Drop new images here to upload’ area.  Once you drag the image here, it will automatically upload the image to the Gallery.  

  Once it has uploaded, it will appear in your gallery.  Click Save and it will appear on your website.  To leave the Gallery once you have saved your newly added images, click Cancel or navigate to a different area using the Admin menu.  

WIDGETKIT – SLIDESET 

 This is generally for, but not limited to, brand logos to display and rotate on the website.   

Page 42: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    41 | P a g e  Copyright © Websites For Small Business 2013 

  In the Widgetkit menu, select Slideset and then the name of the Slideset you want to add the new images to.    

  This Widgetkit is set out whereby individual images need to be uploaded to each Item.  

Page 43: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    42 | P a g e  Copyright © Websites For Small Business 2013 

  To add a new image, scroll to the bottom of the page and click ‘Add New Item’.   

Item 1

Item 2

Page 44: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    43 | P a g e  Copyright © Websites For Small Business 2013 

  A new item will appear.  

  

 New Item 

Page 45: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    44 | P a g e  Copyright © Websites For Small Business 2013 

Complete the Title and then add the new image.  For more information about adding images, see the Chapter ‘Inserting Images into an Article’.  When complete, Click Save at the top of the page and it will appear on your website.  

  

WIDGETKIT – SLIDESHOW 

 The Slideshow is generally used for Home page header images or a gallery.  In the Widgetkit menu, select Slideshow and then the name of the Slideshow you want to add the new images to.  

  This Widgetkit is set out whereby individual images need to be uploaded to each Item.  

Page 46: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    45 | P a g e  Copyright © Websites For Small Business 2013 

  To add a new image, scroll to the bottom of the page and click ‘Add New Item’.  

 

 Item 1 

 Item 2 

Page 47: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    46 | P a g e  Copyright © Websites For Small Business 2013 

A new item will appear.  

  Complete the Title and then add the new image.  For more information about adding images, see the Chapter ‘Inserting Images into an Article’.  When complete, Click Save at the top of the page and it will appear on your website.  

  

 New Item 

Page 48: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    47 | P a g e  Copyright © Websites For Small Business 2013 

LAYER  SLIDER  

 N.B. This section will tell you how to add images to an existing gallery.  If you require a new gallery to be created, please contact us.  All gallery images need to be a certain size for them to appear correct on your website.    From the Admin menu, click Components and then select Layer Slider from the Drop Down list.  

  Here you will see all the Galleries and Headers listed above.  To add to a Gallery, click on the name of the Gallery.  Here you will find all the images currently in the Gallery.   

  This Gallery currently has 6 images.  Each image is assigned to a tab.  

Page 49: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    48 | P a g e  Copyright © Websites For Small Business 2013 

  To add a new slide, click on Add new slide. 

   Click on Choose slide image > CLICK TO SET 

  Scroll down to Upload file, select Browse and select the file from your computer that you want to add. Once you have selected the file and it appears next to the Browse button, click Start Upload.   

Page 50: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    49 | P a g e  Copyright © Websites For Small Business 2013 

   When the upload is complete, the image will appear in the box next to the other images.  Click on that image and select Insert.  

   The image will now appear in the new slide.  Scroll to the bottom of the page and click Save changes.   

Page 51: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    50 | P a g e  Copyright © Websites For Small Business 2013 

  DO NOT CLICK ON ANYTHING ELSE UNTIL THE CHANGES HAVE SAVED AND THE BUTTON RETURNS TO SAVE CHANGES!  Now when you refresh the Rainbow page, the new image will appear.  Scroll to the top of the page and select ‘Back to the list’ to leave the page.   

          

Page 52: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    51 | P a g e  Copyright © Websites For Small Business 2013 

CONTACT  US  

The Contact Us is a component of your website and can be changed as required by Users with Back End Administrator access only.  There are 2 ways Fox Contact can be used; as a Menu Item or a Module. 

FOX  CONTACT  MENU ITEM  

 In the Back End Administrator, Admin menu, go to Menus and then select the Menu item using Fox Contact.  

  Here you will find 2 areas that you can make changes: 

Message delivery 

Form Fields  

 

         

Page 53: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    52 | P a g e  Copyright © Websites For Small Business 2013 

 

MESSAGE DELIVERY 

This is where you can change your email address. 

FORM FIELDS 

Here you can edit the text at the top of the page as well as the fields in the Contact Form.  

  As you scroll down, you will see what information has been added to what area.    NOTES:  Field Name Enter the name of the Field as you want it to appear on the website. Field State This is where you decide whether the field is Optional or Required.  Required means that the form cannot be submitted unless that field is filled in. Disabled means that the field will not appear on the website. 

 

Page 54: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    53 | P a g e  Copyright © Websites For Small Business 2013 

Once you have finished editing, scroll to the top of the page and click Save & Close.  

FOX  CONTACT  IN  A  MODULE 

 In the Back End Administrator, Admin menu, go to Extensions and from the drop down list click on Module Manager.  From the list, select the module that is using Fox Contact.  

  Here you will find 2 areas that you can make changes: 

Message delivery 

Form Fields  

  

MESSAGE DELIVERY 

This is where you can change your email address. 

FORM FIELDS 

Here you can edit the text at the top of the page as well as the fields in the Contact Form.  

Page 55: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    54 | P a g e  Copyright © Websites For Small Business 2013 

  As you scroll down, you will see what information has been added to what area.    NOTES:  Field Name Enter the name of the Field as you want it to appear on the website. Field State This is where you decide whether the field is Optional or Required.  Required means that the form cannot be submitted unless that field is filled in. Disabled means that the field will not appear on the website. 

 Once you have finished editing, scroll to the top of the page and click Save & Close.        

Page 56: Managing your Joomla! 3 Content Management System (CMS ...€¦ · Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take

    55 | P a g e  Copyright © Websites For Small Business 2013 

LOGOUT 

 Always ensure that any pages open in the website are Saved or Closed before you log out otherwise you will lose you work.    To logout, click on your name in the top right corner of the Back End Administrator and select Logout.  

  Make sure that you log out of the website at the end of your session otherwise other users may not be able to access the pages that they need to edit.  

FOR  MORE  INFORMATION  

If you would like more information or require further assistance or instruction, please do not hesitate to contact us: Websites For Small Business w. www.websitesformsmallbusiness.com.au e. [email protected] p. (03) 9017 0682