Add/Edit article

What is an Article?

An article is any type of text and/or images you want your visitors to read or see on your web site. An article stands for the content of your web site.

There are different styles when it comes to putting content on web sites:

  1. The complete, full article is displayed
  2. A summary is displayed with a link leading to the full article
  3. Article with a link to external site
  4. Article with an uploaded file
  5. Combination of above mentioned options

To access Article management panel select Articles from the main administrative menu.

On you’re the left hand side you may find the Article user menu containing quick links, search, tags and preferences tab. Right hand side is reserved for the quick access to all of your articles and article options.

Quick link

Add new article

To add a new article select Articles link from the main administrative menu.

Articles menu

After requested page is loaded click on the Add new article button.

Add new article

You may find this button in the top corner of the content page or in the quick links in the left-hand side navigation menu.

Quick link

This section is divided into two main areas. The right hand side is used to input text and other content.

The left hand side handles a number of parameters, which control what and how the content is displayed.

Article publishing options

Article publishing options

SE Friendly options tab

Allows you to define keywords and description of your article.

SE friendly options

When finished with setting up article preferences you may start with article creation process.

You may take these actions in different order (firstly add an article then define other parameters) but don’t forget to define publishing options!

Add article content

To create your article you must enter the title and the body text in the required fields (if you do not enter them, either the name or the body, you will get a ‘Missing argument(s): Article title, Article body’ message).

In the Title field enter the title (name) of your article (for example, ‘This is the newest article posted on my site’).

Enter your Abstract (summary) in the text editor. Your text should be short two or three sentences long.

Article title

Abstract Image

To add an image to your article, click Browse button and in the dialog box select the current location of the image that you want to add. Your image will be automatically resized to predefined values(for detailed info check section Preferences, later in this manual).

Image Caption

Image caption field has the same effect like Alt tag in HTML. When you point your cursor on some image on your website, this image description will appear.

Abstract Image

The body content of the article can be managed by WYSIWYG Text Editor. Some of its main features will be explained later in this manual.

Attachment

Your Article may contain a file attached to it (word document, PDF file, image etc).

Attachment

To attach some document to your article click Browse button and in the dialog box that will load select the current location of the image that you want to add from your hard drive. Then select Open.

After you have finished with creation of an article you should press Save/Publish button and you will have one as well. Click on the Save/Publish button when you are done.

To see your newly created article click on View live site at the secondary administration menu at the top of your administration panel.

Article

Your article will appear in the Latest news section on the home page and in selected category/subcategory.

The default Full story will be displayed under the summary of the article. These words will be underlined as a sign that they are clickable.

When your visitor clicks on Full story link a new page containing full article, or if you have uploaded a file, download link for that file will appear.

Article

If you have attached some document to your article, click on Full story link and the whole article content will appear. Then you will notice Download attachment link that will be displayed under the article.

When you select this link, you will be offered to download a specified document to your hard drive.

Article attacment

If you have entered web page link under Publishing date field, in the left-hand side Option menu, External link icon will be displayed under the article summary.

When you click this icon (pointed on the picture), you will be taken to the official website where the news was posted.

Formatting your articles – WYSIWYG text editor

The WYSIWYG (What You See Is What You Get) editor allows you to edit and format text, insert pictures and other media files. You can copy and paste from Microsoft Word, Excel and other programs into the content editor. The text editor keeps the formatting from the original document.

WYSIWYG text editor

On the image above, you may see the different buttons that are available in the editor. They are almost identical to the ones in Word, so we won’t explain the way they work in detail, we will mention only short description about each button.

Creating a custom Tiny MCE styles

Article highlight

These styles describe the rectangular boxes that are generated from the article’s body elements. Each text box has a content area (text, an image) and surrounding border and margin areas. After you select the article content, from the Styles dropdown menu choose one of the offered option, highlight right or highlight left. This will create the article, similar as shown on picture beside.

Copying and pasting from Microsoft Word or other programs

Text can be copied and pasted directly from Microsoft Word or another program into the text editor. When editing in WYSIWYG mode, all the formatting will be kept when copying and pasting.

  1. Open the source document (the document from which you are pasting)/li>
  2. Select the text to be copied
  3. Choose Edit -> Copy from the File Menu
  4. Return to the window containing the Vivvo content editor
  5. Click inside of the content editor area. Make sure the cursor is blinking inside this area
  6. Click the paste
  7. Click Submit changes

Adding a hyperlink to the body text

  1. While in the editor, highlight the text that is about to make a hyperlink.
  2. Click the hyperlink icon on the editor toolbar Link. This button opens a new window.

Insert/edit link

There are few fields in this window that you will have to fill out.

The first one Link URL is the address to which you want to link your selection.

You have to enter the full address, including http:// prefix.

Target enables you to select how the link is to be opened (new window, same page etc).

In the Title field enter text that you want to appear when user points a mouse cursor on it, it is an Alt tag actually.

Select Insert button and your hyperlink is inserted.

Adding an image into the body text

The Vivvo CMS content editor allows user to upload images directly into the content area. Click the Add Image button Image on the content editor toolbar. The image properties dialogue box appears containing three tabs: General, Appearance and Advanced settings.

General Tab

Insert/edit image

Image URL tells you the location of the image.

Next to the image description, type a name or description of the image. Keep it short. That way, if the image has trouble loading, the reader knows what should have been there.

Insert title (name) for you image in Title field.

In the preview box you can see your selected image.

Appearance Tab

In the drop down menu, select the Alignment. This will decide how the image is displayed in relation to the text.

Image alignment

Resize pictures before you upload them. The bigger your image is, the longer it will take for your web page to load.

Appearance Tab

Again, resizing should not be one of the adjustments that should be taken care of before the image is put in the editor but for some fine-tuning, you should type in dimensions of your picture in pixels.

If you want your image proportionally resized mark Constrain proportions option.

Horizontal and Vertical spacing allows you to put some spacing around the image so that the text around the image or the margin is not too close. Zero value won’t give you any spacing, but for example a 4 will give you nice spacing.

Border thickness refers to the border around the image. Type in the corresponding field zero, if you want no border, 1 if you want a tiny border, 2 if you need a thicker border, etc.

Click Insert to save. This returns you to the page being edited.

The image is now part of the content area.