Article Manager
Here is where you will spend
most of your time. This is where web
pages are made and edited.
First we will have a look at
the Article Manager itself, and then we will look at how to make and edit an
article web page.
Please do not be overwhelmed. This is the biggest tutorial but it basically
covers 90% of what you will ever do on your website.
Important!! After you save any additions/changes, you
need to refresh your browser window to see the changes. We recommend that you have two browser
windows open. One to view your website, and the other one you use to login and
make changes. This way you can save your work on one window, then jump over to
the other to check out your changes after you refreshed the window.
· Article Manager Overview - Please look at this first to get oriented with the Static Content Manager and a Static Content page.
· How to Make and Edit a Web Page - Learn how to make a new page, and how to edit an existing web page.
· How to Link a Web Page to a Menu Item - Learn how to link a web page (static page) to a menu item.
· How to Add or Change Pictures on a Web Page - Learn how to add and change pictures on a webpage.
· How to Make a Link to Your Other Web Pages - Learn how to make a links to other web pages on a web page.
· How to Make Links to Media Files - Learn how to make a link to a file/s on a web page.
Follow the tutorial on how to “Login and get started.”
When you are at the control panel, press the “Article Manager” button and you will get to a screen that looks similar to this one:
(The actual number of articles listed and their description will vary from website to website.)
Notice the button called “New” (1) in the upper right hand corner. You press that button to create a new article page.
Notice also the “Published” symbols (2) in the middle of the line for each static page listed. If you click on this, a red “X” appears
and the page gets Unpublished. This is a way to make a page not appear on the website without deleting it. You could
actually work on a page and leave it Unpublished until you were done!
3 2 1
You can click on any existing page (3) to be taken to the editor window to edit the page. Let’s do that now.
I will click on the article titled, “How To Know God” and it will take me to a page that looks like this:
5 4 3 2 1
Notice the text is in a window on the left with buttons that look something like Word (1). You can actually edit just like you would in Word.
VERY IMPORTANT; notice in the upper right of the page are several buttons. When you are done looking at this page you MUST press
either the “Save” (2) button or the “Close” (3) button to leave this page and go back to the Article Manager page.
Notice on the bottom row of buttons the 3rd icon from the right (may vary in location) is the “insert” image button (4). This is where you press to insert a picture.
Notice also the second little button on the bottom row from the left looks like 2 chain links together (5). This is the button you press after
you highlight some text or a picture to fill in the link for that text or picture, so when someone clicks on that text or picture, they are taken
to the place you indicated in the link.
How to Make and Edit a Web page
First you need to:
· Login (See the “login and get started” tutorial if you do not remember how to do this)
·
Then press the Article Manager button on the control panel.
(See
the “login and get started” tutorial can also help you on this)
You will get to the Article Manager screen that looks similar to this:
OK, so now you want to make a new web page. Just press the “New” button in the upper right corner of the page.
Then you will be taken to a new page that looks like this:
This is where you make a new article page (new web page) for your website.
Now the page has nothing on it yet, because you haven’t put anything on it. It doesn’t even have a name yet. Let’s do that first.
Suppose you want a page for ministry opportunities. OK, so type “Opportunities” in the title and
title alias
Now let’s add some text in the large open white area (2). This will be the actual web page itself.
I will now type in a few ministry opportunities until it looks like this:
3 2 1
Notice I “Bolded” some words and changed some font sizes. You will become acquainted with the Word-like buttons as you use them.
Now, BEFORE DOING TOO MUCH Let’s SAVE the work. You do this by pressing the “Save” button (3) in the upper right corner.
When you do, you will save your page, and be taken back to the Article manager page and it will look like this:
This is the line for the page we just made. You would also click on this to add or edit text .
That is our new page listed on the bottom as “Opportunities”
To get back to this new page to edit the text or add more text, just click on the page title and you will get right back to the page
we were working on.
How to Link a Web Page to a Menu Item
You need to create a menu item BEFORE linking the page to
the Menu item. Using our
if you wanted to link this page to a Main menu item, you would 1st access the Menu Manager, then click on the “New” button (1).
1
Then indicate the type of menu item it represents. In this case, it is an Article (2).
2
There are different types of Articles but in most cases, you will then select an Article Layout (3).
3
Now enter the Menu item title (4), assign it to the applicable menu (top, main, etc.) and click the Select button (5) to select the article
to be linked to. (This page title will also be the Main menu title)
5 6 4
Now click Save to save and exit the page (6).
Now when you go to the website and do a page refresh, you will see the new Opportunities menu item (1), and when
you click on it you see the page that you created.
1
How to Add
or Change Pictures on a Web page
I will now show you how to add a picture to a page using our “Opportunities” page as an example.
We open the page as explained above by clicking on the page title, and then we see our page below:
After we put the mouse cursor before “Click here to sign up” (1) (in this example, the picture is there already)
and clicked on it, we then clicked on the “Insert/Edit Image” button (2).
2 1
You will then see the following window:
1
We will now show you how to add a small “Sign-up” picture to the page:
Note: There are numerous images in the /images/stories/ directory.
Now is a good time to talk about uploading Pictures/Images.
(1) If you have many pictures to upload to the server, I recommend you 1st install
CoreFTP and upload all the pictures. For our example, I have already done this.
Please go to our FTP Tutorial for all the procedures.
(2) If you are only uploading one picture at a time, then you can do that within the
“Insert/Edit Image” window as I will now show you. 1st, click on the “Upload” button, then you will see a smaller
Upload window (1) appear. Now click on the Browse button (2)
2 1
After you click on the Browse button, you will see a similar “Windows Explorer” window
From where you can navigate to the folder on your PC that contains the file you want to upload.
2 1
After you click on the filename to select it (1), press the Open button (2), and then you
will be taken back to the previous Upload window.
You will then see the File Name that you selected in the small Upload window,
1
Now, at this smaller Upload window, click on the “Upload” button (1)
3 4 2 1
The File will now be added to the list while the smaller window will stay up.
Back at the main Upload window, do the following:
Click on the file name “signupicon.jpg” A blue background appears (1) on the file name,
and the Signup icon picture appears in the right window (2).
Since we want the picture to appear in the middle of the web page, we go to the
“Align” area and click on the blue down arrow (3). After a drop down list appears,
click on the word “Middle” (4).
After doing all that, the screen will now look like this:
1
Next we click on the “Update” button (1) on the lower right corner and then you will be
taken back to the Article page and you will see the Signup picture on the page.
At this point, you click Save to save the page and exit out of it. You will then be back at the following page:
Now, let’s say later on that you want to replace this picture.
You open the page as before, then you move your cursor over the picture and left click on it. You will then see some little
squares around the picture. Just press the Delete key on your keyboard and the picture is gone.
Now you can add a new picture following the same procedures as above.
How to Make a Link to Your Other Web
Pages
Here we will show you how to Link a word so that when you click on it, it opens up another page that you had created.
For our example we will use the home for the College & Careers ministry.
Here we will link the words “SEND Ministries” to another site (it could be another article also).
First, we open the Resource article, then we highlite the words SEND Ministries (1), then we click on the “Insert/Edit Link” button (2).
1 2
This new window below will appear. We can then input the URL for the site that we want to link to. (1)
Click on Update to complete the link. (2)
Note: You can also click on this arrow to get the drop down
list below, and select “Open in this window” if you want the page to open
in the same window, instead of opening in a new window. 2 1
If we were linking with an article, we would click on the Content item (1),
Uncategorized and then select the article we want to link to (2).
3 1 2
Then you press the “Insert” button (3).
This Insert/Edit window will go away and now you see that the words SEND Ministries are underlined
and in a different color, which means that they have been linked to the “SEND Ministries” site or would
be linked to another article if that is what you wanted (1).
1
In addition to linking to another article or website, you can also have the system launch the
user’s email system and automatically address the email to a given email address with a
Subject line. To do this, you can click on the email icon (1) and the system will display a
small window prompting for email address information. Complete the required information
and click OK to exit and then Update (3) to exit again.
3 2 1
Now you click on Save to save and exit the page.
When you look at the web page, you see that if you hover over the SEND Ministries link, you can click on the link
or in the case of linking a word to an article, the words are a different color. Now when you click on them, the article will open.
1
How to Make Links to Media Files
In this tutorial we
will show you how to add and link media files.
Please note that
since media files (mp3, wmv, wma, etc) are usually
large, you will need to FTP to transfer (upload) these
files to the media server. Please go to our FTP
Tutorial to learn how to download, install and use CoreFTP
to transfer files.
The media server is where you will be uploading and storing all your audio and video media files. Images can be uploaded
into your Joomla directory as shown earlier. You cannot upload audio and video files up to your Joomla directory.
At this point, it is easier if you have already been in CoreFTP and have gone to the folder assigned to you on a media server.
Once you are in the media folder, navigate to where you have the media file,
i.e., media.calvaryvistamedia/ collegecareer/williamson-danny/studies-books/44-ACT-2009/ and copy and paste
the address into your favorite notepad for reference later on. You’ll also need to add the actual name of the media file,
i.e., 44-ACT-008-001.mp3 to the end of the address.
The whole address might be:
media.calvaryvistamedia/collegecareer
/williamson-danny/studies-books/44-ACT-2009/44-ACT-008-001.mp3
Copy that address into your clipboard.
Next we logged in, then we opened our article page “Studies”. We highlighted with our mouse where we wanted
To create a link between a word or image and a media file. Then we pressed the “Insert File Link” button (1)
1
The Insert File window will appear and look similar to this one.
At the top of the window where it is prompting for the URL address, PASTE the address of the media file (1).
In the Attributes section, type the Title of the media file (this will be displayed when hovering over the link) (2).
2 1
Then click on the drop-down menu for Target and select whether the media
will be displayed in the Same Window or a New Window. (1)
Last step is to press the Insert button (2)
2 1
After we pressed the Insert button, we were taken back to the article page that now shows the file we added.
We then pressed the Save button to save and exit the window.
Now when you add a file like this to your web page, anyone can click on the name and listen to the file.