PMG-Joomla-Quick-Start-Guide

21
Quick Start Guide PMG MEDIA GROUP, LLC 360pmg.com | linkedin.com/in/360pmg | twitter.com/360pmg

description

The Joomla Quick Start Guide was developed for the most novice user. The tutorial is an easy read with tons of step-by-step illustration for the Joomla beginner.

Transcript of PMG-Joomla-Quick-Start-Guide

Page 1: PMG-Joomla-Quick-Start-Guide

Quick Start Guide

PMG MEDIA GROUP, LLC 360pmg.com | linkedin.com/in/360pmg | twitter.com/360pmg

Page 2: PMG-Joomla-Quick-Start-Guide

Joomla! Quick Start Guide 2

Table of Contents Table of Contents .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 2 Introduction .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . 3 Categories and Articles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Edit an Article. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. .4 Create an Article. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6 Adding an Image…………………………………………………………………..9 Uploading Multiple Images………………………………………………11 Inserting a Link………………………………………………..……………….….15

Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Core Components. . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . 19 Third Party Components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ... . . . . . . . 20

PMG, LLC – 360pmg.com

Page 3: PMG-Joomla-Quick-Start-Guide

Joomla! Quick Start Guide 3

Introduction Hello there! Today, we are going to walk you through administering your Joomla! administration control panel. In this tutorial, you will gain access to your Joomla 2.5.x website located at http://yourdomain.com/administrator. This tutorial will provide you a simple, step by step illustration of how to maintain and update your webpage(s) including editing articles, creating new articles, adding images and links and managing components.

PMG, LLC – 360pmg.com

Page 4: PMG-Joomla-Quick-Start-Guide

Joomla! Quick Start Guide 4

Categories, and Articles One of the most important parts of a website is the content. Articles, the primary content items of your Joomla website, are the building blocks for your website linking to menus, files and external websites. Articles are sorted in categories and sub categories. Joomla’s content structure can contain numerous categories and articles. Edit an Article 1. To edit an article in your website, go to http://yourdomain.com/administrator and login with your assigned Username and Password (Figure 1.1).

FIGURE 1.1 2. To begin managing your website article(s), click Article Manager (Figure 1.2).

FIGURE 1.2

PMG, LLC – 360pmg.com

Page 5: PMG-Joomla-Quick-Start-Guide

Joomla! Quick Start Guide 5

3. Select the desired article(s) to be edited and/or trashed. Click Edit (Figure 1.3).

FIGURE 1.3

PMG, LLC – 360pmg.com

Page 6: PMG-Joomla-Quick-Start-Guide

Joomla! Quick Start Guide 6

4. Edit the item using the JCE HTML editor and press Save/Save & Close on the toolbar (Figure 1.3).

FIGURE 1.3: JCE (Joomla Content Editor) is the default editor in your administration panel and resembles MS Word. Create a New Article 1. To create a new article to your website click New on the Joomla Toolbar (Figure 2.1).

FIGURE 2.1

PMG, LLC – 360pmg.com

Page 7: PMG-Joomla-Quick-Start-Guide

Joomla! Quick Start Guide 7

2. Edit the article(s) using the Joomla HTML editor. There are a lot of different things you can do here (Figure 2.2):

FIGURE 2.2: The HTML editor is essentially a word processor and functions very similar to Microsoft Word.

• Add a Title for the article, and put it into a category. • You have the option to publish or un-publish your article, as well as the choice

whether to display the article on the front page. • The large box is for the article's contents (Figure 2.3).

o You can use the Page Break button to divide the article into pages. o You can use the Read More to divide the article into the section to display

in a summary view and full view. o You can use the Image button to insert an image into your article using

the simple upload form in combination with Joomla's media manager.

FIGURE 2.3

PMG, LLC – 360pmg.com

Page 8: PMG-Joomla-Quick-Start-Guide

Joomla! Quick Start Guide 8

3. Insert a Title (DO NOT insert an alias, the alias field will auto populate after the article is saved).for the article, choose your respective category and then press Save on the toolbar (Figure 2.4).

FIGURE 2.4

PMG, LLC – 360pmg.com

Page 9: PMG-Joomla-Quick-Start-Guide

Joomla! Quick Start Guide 9

Adding an Image Joomla offers multiple methods for uploading images/files to your website. We will discuss two methods including single and multiple upload methods.

1. To upload a single image/file to the desired directory/location, click Media Manager (Figure 3.1).

FIGURE 3.1

PMG, LLC – 360pmg.com

Page 10: PMG-Joomla-Quick-Start-Guide

Joomla! Quick Start Guide 10

2. In the left menu under Media Folders, navigate to the folder where you want to

upload the file to by clicking on the individual folders. If you need to create a new folder, in the right side of the page enter a name for the new folder and then click Create Folder (Figure 3.2).

FIGURE 3.2

3. After navigating to the folder where you want to upload your file to, under Upload Files click the Browse (Figure 3.2) button. Find the file on your computer, select it by clicking on it, and then click Open (Figure 3.3). Finally click Start Upload (Figure 3.4).

FIGURE 3.3

PMG, LLC – 360pmg.com

Page 11: PMG-Joomla-Quick-Start-Guide

Joomla! Quick Start Guide 11

FIGURE 3.4

4. After the file has been uploaded, you will see a message similar to: Upload Complete: /holy_bible.gif If you need to link to this file, you need to find the path to it. The path is actually given to you after uploading the file. In our example, the path was /holy_bible.gif. The link to your new file will be: Your Joomla site's URL + /images + your uploaded file's path: http://yourdomain.com/images/holy_bible.gif

Uploading Multiple Images

1. Your administration panel includes an upgrade to your HTML editor, referred to in this document as the JCE (Joomla Content Editor). JCE allows for multiple image uploads via the JCE file browser. *JCE does not use Joomla’s Media Manager file browser and therefore requires an article to be open before allowing you to upload multiple files to your website using the JCE file browser (Figure 3.1a).”

FIGURE 3.1a

PMG, LLC – 360pmg.com

Page 12: PMG-Joomla-Quick-Start-Guide

Joomla! Quick Start Guide 12

2. To upload a single image/file to the desired directory/location, click Insert/Edit

Image icon (Figure 3.2a).

FIGURE 3.2a

3. In the left menu under Folders, navigate to the folder where you want to upload the file, double-click on the individual folder. If you need to create a new folder, in

the middle of the image browser window, click the Add Folder

icon (Figure 3.3a). Your files/folders will upload to the current directory displayed in the middle pane at the bottom of the image browser window (Figure 3.3a).

FIGURE 3.3a

PMG, LLC – 360pmg.com

Page 13: PMG-Joomla-Quick-Start-Guide

Joomla! Quick Start Guide 13

4. After navigating to the folder where you want to upload your file click the Upload Icon (Figure 3.4a).

FIGURE 3.4a Click Browse in the JCE file browser window (Figure 3.5a) and locate the file(s) on your computer, select each file separately and click Open (Figure 3.6a).

FIGURE 3.5a After you have selected the files you would like to upload to your website click Start Upload (Figure 3.5a).

PMG, LLC – 360pmg.com

Page 14: PMG-Joomla-Quick-Start-Guide

Joomla! Quick Start Guide 14

FIGURE 3.6a

5. After your files have been uploaded, you will be able to view your recently uploaded

files in the middle pane at the bottom of the image browser window (Figure 3.3a).

6. Also since you multiple uploads require article access to utilize you may also choose to insert images into the current article

immediately following upload (Figure 3.7a). FIGURE 3.7a

PMG, LLC – 360pmg.com

Page 15: PMG-Joomla-Quick-Start-Guide

Joomla! Quick Start Guide 15

Inserting a Link Any text or image in an article can be made into a link.

1. Select the content you want to make into a link (Figure 4.1). If it's text, highlight the text. If it's an image, click on the image to select it.

FIGURE 4.1: In the Edit Article window, select the text or image you want to turn into a link.

PMG, LLC – 360pmg.com

Page 16: PMG-Joomla-Quick-Start-Guide

Joomla! Quick Start Guide 16

2. Click the add link icon . It looks like a chain link. The icon is grayed out until you have selected something to make into a link. Once you click on this icon, a pop-up box comes up that allows you to enter the link (Figure 4.2).

FIGURE 4.2: When you click the add link icon, a pop-up window comes up to put in the link information. Enter a link to an external site

1. Paste the link into the URL box at the top (Figure 4.2).

2. At the bottom of the window, select an option from the Target drop-down box (Figure 4.2). For usability purposes, the best option to choose is "Open in new window" (Figure 4.3). When a person clicks on your link, this option will open the other site in a new window so your site will still be open in their browser.

PMG, LLC – 360pmg.com

Page 17: PMG-Joomla-Quick-Start-Guide

Joomla! Quick Start Guide 17

FIGURE 4.3: The Target options allow you to set what happens with the window when a link is clicked on.

3. For SEO purposes, put a title in the title field (Figure 4.2). This should describe your link.

4. Once you have put in your link parameters, click Insert (Figure 4.2) and your link has been created.

Link to another part of your Joomla site

1. Just below the URL box in the Add Link pop up window is the Link Browser (Figure 4.4). This following image identifies the places within your site you can link to.

FIGURE 4.4: The Link Browser lets you link to content in your site.

PMG, LLC – 360pmg.com

Page 18: PMG-Joomla-Quick-Start-Guide

Joomla! Quick Start Guide 18

a. Contacts: If you have defined contacts in the Contacts component you can link directly to a specific contact.

b. Content: This shows a navigation tree through your categories and articles, so you can link directly to an item within your Joomla site.

c. Menu: If you want to link to a page that you have already defined in your menu, you would find those links here. If you have linked to a page within your menus, it is preferable that you link to the same article through the menu tree rather than the Content tree. That way the system will format the page the same as you have defined for that menu link.

d. Weblinks: If you have defined any links in the Weblinks component, you can link to the same sites using the Weblinks navigation tree.

2. At the bottom of the pop-up window put a title for your link. This is for SEO purposes and should describe the link you have created.

3. Once you have put in your parameters, click Insert and your link has been created.

PMG, LLC – 360pmg.com

Page 19: PMG-Joomla-Quick-Start-Guide

Joomla! Quick Start Guide 19

Components Component Menu

Components are the most important extensions for a Joomla! website, the others being modules, plugins, templates, and languages. The component menu affords you the ability to administrate the functionality of Joomla! core components and third-party components (Figure 5).

FIGURE 5

Core Components The core components of Joomla! are:

• Banner - A tool to rotate advertising banners on your site. The component is made up of a Banner Manager and a Banner module.

• Contacts - By using this component, you can present a list of contacts on the site. A manager also has the ability to set categories for contacts. When linking to the component, you can link to individual contacts or a whole category.

• Newsfeeds –The newsfeed component is a great way to effortlessly build relevant content for your site. It makes use of RSS technology. If another website has an RSS feed, you can present that feed on a page of your site.

• Search - Joomla has a powerful built-in search function. Along with its corresponding module, it allows visitors to search all the articles of the site with keywords.

• Web Links - Any web page can have links to other sites. The web link component takes this a step further by storing the links and showing a count of how many times they have been clicked. Its most useful feature is that it allows site users to submit links by creating a corresponding menu item. This type of tool is commonly called a directory.

PMG, LLC – 360pmg.com

Page 20: PMG-Joomla-Quick-Start-Guide

Joomla! Quick Start Guide 20

Third-party Components One of the exciting things about Joomla! is the huge range of extensions available for Joomla. Joomla is unique in the open source world where open source GPL advocates and commercial vendors work side by side to grow the project. With more than 2,000 extensions, it's impossible to provide any generalities on how they work. Each one tends to have a slightly different admin structure in the backend based on the decisions of the creator as well varying interactions with other components. Example third-party extensions include the following: RS Form Akeeba Backup Admin Tools JCE Editor URL Redirect Manager

PMG, LLC – 360pmg.com

Page 21: PMG-Joomla-Quick-Start-Guide

Joomla! Quick Start Guide 21

PMG MEDIA GROUP, LLC JOOMLA! QUICK START GUIDE

360pmg.com | linkedin.com/in/360pmg | twitter.com/360pmg

PMG, LLC – 360pmg.com