Logging In

To begin, click on the ‘login’ or ‘admin’ link on your site. If you have chosen not to have either of those links on your site, then type in your website URL into your browser’s address bar and then add the word ‘/user’ after that.

ie. http://yourcompanyname.com/user.

Once you do this you’ll be taken to your login page and then you will be prompted for a user name and password. If you do not have this information, please contact us, and we will be pleased to pass it along.

Figure 1: Logging into Your Site

Creating New Content

With the Drupal CMS that we’ve integrated into your site, you have the ability to create new content. Once you’ve logged into your site you’ll notice that a new vertical navigation menu will appear. Choose ‘Create content’. After that choose the ‘Page’ option.

Once you do this, the first option that you’ll have is to ‘Title’ your new page. Be sure to make the title reflect the content as completely as possible for ease of navigation and also page titles can also be helpful in giving you better search engine results if you name your pages based on your top keywords. The first title option will go at the top of the content area of your page. If you choose to also fill out the ‘Page Title’ field just below, then you’ll actually be creating the text that will be seen at the very top of your browser bar. For example if you look at the top of your browser now, you should see the text “How To Create A New Page in Drupal”. This additional text can be quite helpful for SEO. For more info on how to make a search engine friendly website you may want to read Search Engine Copywriting Tips in our blog.

The next field down is the ‘Body’ field. This is where you can add/adapt your text for this page. Be sure to use the rich-text option. For most installs this will be the ‘WYSIWYG‘ editor choice which you should see in the ‘input format’ section just below the body field. Rich text is probably the most convenient and quickest method to input your page content (unless you have a decent knowledge of HTML or Textile). Here, you can use bold, italics, add links and format the body. (Refer to the section Using the Rich Text Editor for further information on editing).

If you want the page to be available within an already existing category, click on Menu Settings settings after you are finished typing your content. You can then choose a Title for your page as it will appear on the menu, and a mouseover description also. Here, you will see a drop-down menu called ‘Parent Item‘. This will allow you to select where you want this new page to live on your site.

Figure 2: Menu Settings

‘Weight‘ simply refers to the placement of your new page within the category. If you have no real preference, leave the default option at 0. The lower the number, the higher it will be placed in the order.

Don’t be afraid to explore the menus on this page. Any item that is preceded with a symbol can be expanded to show more options. For example, you can attach a file to your page, or go as far as adding meta-tags (providing a hidden description for the web page). Search engines (such as Google or Yahoo!) can direct users to your site.

 

Configuring Your Site Settings

To configure your site’s default email address, mission statement (which is sometimes the welcome message on the front page), footer message, and the default home page go to:

Administer > Site Configuration (right column) > Site Information.

The ‘Email address’ is the address where site registrations, password requests and other notifications will be sent.

The ‘Footer Message’ will be shown at the bottom of each page of your site. This is a good place to put a copyright notice.

The Default front page is the page that visitors will come to when they enter your site address. Usually, you will want to enter “home” in this field.

Click ‘Save Configuration’ to make your changes live.

Creating a Webform

If your site has form content, such as requests for information, or adding names to a mailing list, you can maintain the webforms in this area. You can review submissions users made, view an analysis or the original table used to create the form, or toggle the fields included in your form. You can personalize a message for users when they have submitted their information by going to ‘edit’ in webform settings.

To create a webform, click on the ‘Create Content’ link in the left sidebar after you’ve logged into your site. Then click on ‘Webform’. You will be asked for a ‘Title’ for your new page. Be sure to make the title reflect the content as completely as possible for ease of navigation. (eg. Free Quote Request) In the ‘Description’ field, you should give instructions or a short description of the form.

The ‘Confirmation message or redirect URL’ is the message that will be shown when the site user has submitted a completed form.

Figure 3: Creating a Webform

Components

The next section, Components, is where you will create the fields to appear on the form. Click on the ‘Add a new component’ pulldown menu to choose what kind of field you would like.

• Captcha – A captcha is the image of skewed letters and numbers or a simple math question that appears on a form to differentiate between computers and humans. This serves to reduce spam. Please note that this function will only work if the captcha module is installed.

• Date/email/time – You can create components that will ask users to fill in a date, time or email address. Choose the component you would like to include and click Add, and you will be able to set the options for the component.

• Fieldset – This allows you to group certain questions together. For example, you can create a fieldset for Contact Information. Enter a name and description for the fieldset, and choose whether you want the fieldset to be collapsible or not. Select the weight and click Done. Then when you create the ‘textfields’ for Name, Phone number etc., you can select the ‘Parent Fieldset’ “Contact Information”, and those textfields will all appear in that fieldset.

• File - You can allow people to upload files to be sent to you through this field. Give the file component a ‘Field Key’ (a name that’s is all in alphanumeric characters and underscores), a ‘Label’ (the label that visitors will see), and a ‘Description’ such as ‘Documents’ or ‘Upload any documents pertaining to your application’. Select the types of files you will allow people to send, specify the maximum file size, and check the mandatory box if everyone must include a file.

• Hidden/Markup – The ‘Hidden’ component is for advanced admin. It creates hidden forms that site visitors will not see. The ‘Markup’ component allows for custom html or PHP. These two options will not be needed.

• Select – This option is used when you want people to choose from a list of options in response to a question. For the ‘Field Key’, enter a title in alphanumeric characters and underscores. In the ‘Label’ field, enter the question you would like answered (eg. Which countries have you visited in the past year?) In the ‘Options’ field, list the possible choices, ensuring that there is one choice per line. Please note that the Rich Text Editor must be disabled. The ‘Description’ field can be filled in to give users extra information on the question. (eg. Only check off countries in which you stayed for over 3 nights). Check off ‘Multiple’ if users will be able to check off more than one choice. If you check off ‘Listbox’, the choices will appear in a pulldown menu.

• Text area/text field – These two will be used when you would like users to respond to a question for which they will have to type out the answer. (eg. Name). ‘Text Area’ is used when you would like to give users a larger space to type in, and text field is used when only one line is needed. For ‘Text fields’, specify the ‘Field Key’ (eg. phone_number), ‘Label’ (eg. Phone number, address), give a ‘Description’ to help users, specify ‘width’ (50-60 is usually large enough), and check off whether or not the field is mandatory. Text area is filled out the same way, except you will need to specify a height in addition to the width. (5 will give you a box that’s 6 lines long)

Once you’ve added all of the components, under the ‘Mail Settings’, please enter the email address that you’d like the submitted forms to be sent to.

Remember that in order for any changes to be made to your webform, you must click ‘submit’ at the bottom of your webform edit page. You can also preview the webform before submitting it.

Editing Content

Editing Already Existing Pages

Editing your page can be quite easy. First, login to your site, choose the page you would like to edit, click on the ‘Edit’ tab.

Figure 4: Edit Tabs

Note: when selecting the page name you want to edit, the sub-pages also become accessible.

Once you’ve clicked on the ‘Edit’ tab, you will be able to make make your changes i.e. spelling, adding content, etc. You can also upload pictures from your computer, to add to or update the page.

Important Note When pasting text from Word, please use the Paste from Word icon. This will get rid of any extra coding that might get transferred onto the site. Click on the icon and then paste the text into the popup window. Click Insert.

Adding Pictures to Your Site

While in the edit mode on your selected page, you will see a tree icon in the text box. Click here, and a new window will open, prompting for the image information.

Figure 5: Upload Popup

You can either add images from your computer or ones from the web. To add an image from your computer click on the ‘upload icon’ indicated in the image above. A new window will pop up, and at the bottom of this window you will be able to ‘Browse’ for your image, and ‘Upload File’. In order for your site to load smoothly for visitors, it is best to keep images under 50kb. Please see the Photo Compression tutorial for instructions on how to compress images.

Once you have uploaded the image, you can find it on the filename list (it will be highlighted in green) and click on the ‘add’. The link for this image will appear in the ‘Image URL’ field. It is a good idea to also add a brief Image description before clicking ‘Insert’ to add your image to the page. Remember to click ‘Submit’ at the bottom of the edit page to confirm your changes.

To add an image from the web, click on the ‘tree icon’ and enter the URL for the image in the ‘Image URL’ field. Click “Insert” to add the image.

To adjust the appearance of an image that you’ve added to a page, you can click on the image while in the Edit window, and then click on the tree icon. Click on the ‘Appearance’ tab in the popup window, and then you will be able to set things like the Alignment of the image, the size, and how much space you’d like around the image. (Entering 10 for the Horizontal and Vertical Space will give you a nice space around your image.) Click ‘Insert’ at the bottom of the window to save your changes.

Content Page:

Using the ‘Content page’, you can go directly to the page you want to edit. You can filter the posts in several different ways. Click on ‘Administer’ in the sidebar of your site to access the Content page under ‘Content Management’. Here you will find all of the pages of your site, which you can then edit by clicking on the edit link in the farthest right column of the page list. You will be able to edit the content on the page in the same way that you add new content.

Figure 6: Content Menu

Using the Rich Text Editor

The rich text editor allows you to edit your text in a manner that is very similar to Word. You can Bold, Italicize, Underline, strikethrough your text, change the alignment, create a bulleted or numbered list, an indented list, undo, and redo your text.

Click on any of the following headings to view the instructions:

Adding a Link
Adding an Image
Editing an Image
Anchors
Creating a Table
Formatting Your Text

Figure 7: Body Text Editor

Adding a Link

• To add a link, type in text that you want to create a link for and highlight it. Click on chainlink icon . A window will pop up and ask you for the ‘Link URL’ (see image below). If we are linking to an outside page, enter the whole URL including http://
• If you’re linking to a page within your site, just type in what comes after the .com (eg. /about)
• When linking to a new site, you can choose ‘Open in new window’ in the ‘Target’ menu. This will keep visitors on your site.
• If you’re linking to a page on your own site, you can choose to ‘Open in this window/frame’.
• The ‘Title’ is optional. In some browsers, when visitors mouseover the link, it will show the title at the bottom of the browser.
• Click ‘insert‘.
• The link will be created, but you must save your changes in order to be able to click on the link.

Figure 8: Link Window

Adding an Image

• To add an image into your text, click on the tree icon and the ‘Insert/edit image’ window will popup. If the image you want has a URL, enter that into the Image URL field including http://
• If you want to upload an image from your computer, click on the ‘upload icon’ beside the Image URL field.
• ‘Browse’ your computer files, choose a gif or jpg file and click ‘Upload file’. The image will appear in the directory. Click ‘add’ to add it into your page. You should add a description so it is easier for search engines to pick up your site. A title is optional. Click ‘Insert’, and the image will appear on your page.
  
• You can resize the image by clicking on it and dragging the edges.

NOTE: In order for your site to load smoothly for visitors, it is best to keep images under 50kb. Please see the Photo Compression tutorial for instructions on how to compress images.

Editing an Image

• You can also edit the image by clicking on the tree icon. Click the ‘Appearance tab’. The window with the text and tree image in the Appearance window shows a preview of what your text is going to look like (see image below).
  
• You can adjust the alignment of the image. The dimensions of the image can be adjusted also. You can enter a number in one size field and then if you press your tab key, the second field automatically changes it so it constrains the proportions of the image.
• You can add ‘Vertical or Horizontal space’ around your image. (tip: A figure of around 10 will give you a good amount of space around your image.) You can set a border if you’d like by entering a figure in the Border field. The preview will always show you how your adjustments will look.
• Click ‘update’ to make changes.

Figure 9: Edit Image Window

Anchors

• Creating anchors will allow you to link to a section in the same page as the link.
  Type in the word/text that you want to be an anchor, click before the word and then click on the ‘Anchor’ icon .
  
• A small window will pop up and ask for a name. Enter a name that can be easily identified and then click Insert.
  
• Now go to the text that you would like to link to the anchor. Highlight the text and click the ‘Insert/edit link’ icon. The window opens and you’ll notice that there’s a pulldown menu for Anchors. Choose the anchor that you just created and then click ‘Insert’.
  

Creating a Table

• You can create tables within your text, similar to the way you would in Word.
  
• Click on the ‘insert/edit table’ icon (see image below) and a window will pop up. Enter the number of columns and rows you would like your table to have.
  
• ‘Cellpadding’ refers to the border around the text.
  
• ‘Cellspacing’ is the space between the cells.
  
• You can also set the alignment of the text in the cells, as well as the border size.
  
• The width and height of the table can be specified, or it can be left blank and it will expand as you enter content. Click ‘insert’ when you are done, and you can begin entering content into your table.
• You can edit the text in the tables by dragging your cursor over the text you would like to edit and then choose one of the icons (bold, italics etc).
  
• You can also insert rows and columns into your table, choose a couple cells and merge them using the buttons indicated in the image below as Table tools.
  

Figure 10: Creating Tables

Formatting Your Text

You can format your text using the ‘Format’ pulldown menu . Highlight the text you want to format and then choose the formatting style from the menu.

Some other useful buttons:

Cut

Copy

Paste

Remove Formatting

Special Characters

Paste from Word Please use this to paste all text from Word. Paste the text into the popup window that appears when you click on the icon and click ‘Insert’.

Indent

Outdent

Horizontal Ruler This creates a line across your page that can serve as a page break.

Photo Compression

Oftentimes, images on websites are so large that when visitors view a page, it takes far too long to download the image. In order to create faster loading pages, it helps a great deal to compress images to smaller sizes. It would be ideal for images to be under 50kb. However, it’s important to have good quality images so compressing them too much will not help the appearance of your site.

To compress images, you can use a program like Adobe Photoshop or if you don’t want have the need for such a sophisticated design tool, you could use a free online image editor. In this case we’d recommend Web Resizer because it’s really easy to use. Just follow the instructions below:

How to Use Web Resizer

• Click “Browse” and choose the image you’d like to resize from your computer, and double click. The Web Resizer will automatically compress the image into a smaller size.

• You can adjust the size of the image using the controls below the image. Check width or height.

• You can also change the image quality to optimize the image.
• Click on “Apply Changes”

Go to Web Resizer now.

Working With Blocks

Blocks are boxes of content that may be set to appear in certain regions of your web pages, for example, into sidebars. Modules usually generate them automatically, but administrators can also create blocks manually.

Figure 11: Blocks on the Homepage

You can access the ‘Blocks’ page through the ‘Administer’ page (under Site Building). Only enabled blocks are shown by default. You can position blocks by specifying which area of the page they should appear in (e.g., a sidebar). Highlighted labels on this page show the regions into which blocks can be rendered. You can specify where within a region a block will appear by adjusting its weight. This is an extremely advanced feature, so if you are unsure about making changes, please consult Image X Media, and we will make the requested edits for you.

Figure 12: Block Menu

To create a new block, click ‘Add block’ at the top of the page. Enter a description of the block (eg. header) and then enter what you wish to appear in that block. You can have this block only appear on certain pages using the option: ‘Show block on specific pages’. Choose one of the options, and enter one page per line in the ‘Pages’ box. Follow the instructions below the box for other options. Then click ‘Submit Block’.

Once you have created a block, you can specify where you would like it to appear (eg. sidebar), and choose its weight. To edit the block, click on ‘configure’ to change the settings.

Slideshowpro Director

If your site has an updateable Gallery, you will be using the Slideshowpro Director (SSP) to update your images and albums. This tutorial will teach you how to create albums and how to add and edit images.

Once your Gallery has been set up, we will give you a link to your SSP login page. Please login using the username and password given to you. If you have not received this information, please let us know and we’d be happy to pass on the login info.

Figure 14: The SSP Login Page

Once you’ve logged in, you’ll see the SSP Dashboard. First, you’ll want to click on the “Add an album” link. Give the album a name and then you’ll be able to add images. If you would like to upload many images at once, you can click on Upload images as a Zip archive. Before you browse for your zip file, go to the folder where are the images are stored and make sure that there are no other files in the folder. Highlight all of the images and zip them. (For instructions on zipping files please see this section of the Sending Large Files support page.) Once you’ve added your images, click Create Album

Now you will see the album you’ve just added on the Dashboard. Click Edit beside this album, and you’ll be able to edit the title of the album. If you’d like thumbnails of your images to appear at the bottom of your gallery, click the Generate Content tab, and then the Edit link beside “No thumbnails have been generated for this album”. In the drop down window, enter the size of the thumbnails (Eg 100× 80), the Quality (we recommend 75) and check off Scale and crop. When you click Generate the system will create the thumbnails for all of your images.

If you have multiple albums that visitors will choose from, it’s a good idea to add an Album Preview image. Click Select to choose one of the existing images. This image will appear in the album index.

Figure 15: Generating Thumbnails

Adding/Deleting Images

To add or delete images from an album, click on the Edit Images tab. You will be able to add new images by clicking Browse and uploading images from your computer. You can also delete existing images by clicking on this icon .

The final step after setting up your album is to make it live. To do this, go to the Dashboard and click Make Active next to the album.

Training Videos

Here are some videos that will introduce different areas of the Drupal Content Management System:

Part 1: Logging into Your Site

Part 2: Creating a Page

Part 3: Intro to the Rich Text Editor

Part 4: Working with Blocks