home_video_thumbnail

CMS-5

How do I edit a page on CMS-5?

Changing around basic content and functionality with CMS-5 is simple.

1. After logging into your account (this url will always get you to a login page if you haven’t: yoursite.com/index.php/login)
2. Go to the page where you want to make an edit, just as you normally would.

To start making changes to your page, click Edit in the editing toolbar.

edit.gif
The page edit drop down will open, allowing you to edit this page, or add Sub-pages and various other options.

toolbar_Editing.png

Notice that edit changed to editing in the toolbar.

editingToolbar.png
The page will reload with all editable areas highlighted by dotted red borders.

dotted_red.png

This is where you can insert and edit content blocks. To edit a content block just click on it and select Edit from the pop-up menu.

InPage_block_edit.gif

You can also add new blocks  or stacks to areas you have add rights to by clicking “Add to AreaName.”

addtoMain_menu.png

When you click Editing to exit Edit Mode from the In-context editing toolbar, you will have to choose one of three options:

  • Discard – Throw away all the changes you just made, for ever.
  • Preview – Save these edits as a new version, but only show that new version to other editors/administrators who have access to edit this page. When they visit this page they will see this most recent version, but regular site visitors will only see the last published version.
  • Publish – Save these edits, and make them live for all guests to see, now.

Editing_version3.png

Once you have the page looking the way you like, click Publish My Edits to make your changes live for all to see.

Permalink.

Tips for adding images to your header slider

If you are changing or uploading new images to your header slider, here’s a few useful tips to help you get it right.

1. Uploaded images to your slider and it’s jumping about?
All images in the slider must be the same size. You can check your slider image size in the file manager. Simply click one of the current slide images, in the drop down select properties. You’ll find the Width and Height lost to the bottom.  If in doubt contact support@hmlmarketing.co.uk 

2. Uploading images and it takes ages to load?
When saving the image ensure it’s less than 250kb

There’s a useful free tool to help you resize and save your image it’s on the link below:
https://pixlr.com/express/

Permalink.

How to change your fonts

Click on the icon as shown below and use the drop down menus to change the font style and size.cleartech font demonstration

Permalink.

The Toolbar

The editing toolbar appears across the top of your pages when you’re logged in to your site. It allows you to enter and exit edit mode, gives you quick access to your Dashboard and intelligent search.

toolbar_Editing.png

When you hover the “Edit” button, the page edit drop down will open, allowing you to edit this page, add Sub-pages, or change some of the options related to this page.

edit_this_page.gif

Clicking the Dashboard label will give you easy access to all of the configuration pages.

Intelligent search is an easy way to get around. Hit the TAB key and start typing and intelligent search will try to find meaningful results. Intelligent search takes the text you’re typing and tries to find matching content across a few sources:

  1. Your site’s public pages. If you just need to quickly get to your Press Releases section, start typing “Press” and see what comes up!
  2. Your site’s dashboard. Even if you don’t know where to go in the Dashboard to change a setting, just start typing in Intelligent Search to see what you learn.
  3. The marketplace. Type “ecommerce” and quickly see what’s available.

Permalink.

Dashboard

The Dashboard is where you can change the behind-the-scenes settings that control how your site operates.

Accessing the Dashboard

There are a couple of different ways one can access the Dashboard. While logged in as an Administrator, you’ll have easy access to the Dashboard whenever you see the editing toolbar.

Hover over the “Dashboard” button to access commonly used features in the Dashboard Quick-access dropdown.

Or, click the Dashboard button to navigate directly to the full Dashboard.

toolbar_Editing.png

Dashboard Quick-access dropdown

dashdropdown.png

Recent lists a breadcrumb-style navigation menu of pages across your site that you’ve visited recently. They’re linked here so that you can quickly access any of them again.

Below the Recent menu, we see several Dashboard pages that you might want to access often, such as Composer,SitemapFiles, and Reports.

Below we see three other links to certain sections of our Dashboard.

News allows quick access to the Dashboard news overlay page, which displays news and marketplace information from concrete5.org.

System & Settings links you directly to the Dashboard pages that allow you to configure advanced site settings.

Extend concrete5 provides quick access for purchasing new add-ons and themes directly from the concrete5.org Marketplace without ever leaving your Dashboard, or simply update the add-ons you currently have installed on your site.

To see the entire Dashboard, click View Full Dashboard.

Navigating directly to the Dashboard

The dashboard is also available directly at a static path. Simply go to: http://your-concrete5-site.com/index.php/dashboard

You will be prompted to enter your username and password if you’re not already logged into the site.

Full Dashboard

The Dashboard landing page groups related pages together for easy navigation. Each of these sections represents certain aspects of your site: Sitemap, Members, Pages & Themes, etc. We’ll discuss what each of these does later in this guide.
dashboard_full.png

At the bottom of the Dashboard landing page we find links allowing us to view the concrete5.org News page, a link to your site’s System & Settings page, and links to pages allowing the management of themes and add-ons on your site.

Dashboard Pages

Every Dashboard page has some standard navigation in the corner:

  • The triangle shows you related pages to this. IE if I’m adding a user, I might see add groups and search users in there too.
  • The question mark has custom help information for this config page.
  • The star icon lets you add this page to your Quick Nav on the left. The Quick Nav is the blue bar that slides down from the editing toolbar showing your favorite dashboard pages on the left and your most recently viewed pages on the right. You can disable it from the “Interactive Settings” page in the dashboard.

blockTypes.png

Permalink.

How do I upload a single image to file manager?

First log in to the admin area of your website, using your username and password.

Log in

 

Now you are logged in, navigate to the top right hand corner of your browser window to the “Dashboard” icon. Once located,click on the word Dashboard.

dashboard

 

This will take you to the Dashboard of your website, which will look similar to the image below. To upload an image, you need to use the “File Manager” function of your Dashboard. This is located in the “Files” block, at the top right of the example below. Blocks may appear in a different location within your own Dashboard.

filemanager 1

 

Once you have located the Files block, click on the File Manager.

filemanager 2

You will then be taken to the File Manager home screen where you will be able to see all previously uploaded images.

filemanager 3

 

To upload an image, you must first select which image you would like to upload. To browse your images, use the “Choose File” option. Notice, there is currently “no file chosen”.

choosefile

 

Once you click Choose File, you will be able to browse all the images stored on your computer. Simply locate the image you wish to use, select it and then click “open”, like the example below.

open image

 

Now you have opened your image, you are returned to the File Manager home screen. However, now you can see your  image name is now listed next to the Chose File icon. Click on “Upload File” to upload your chosen image.

upload image

 

Once successful, you will be presented with the following screen. This will show you the image you have uploaded and a few basic details about the image.

upload complete

 

Now your image is successfully uploaded, you can add the image to a “Set” in order to organise, and make it easier to locate in the future. Click on the”Sets” icon within the upload complete screen. Within the Sets tab, you can assign your image to an existing Set by ticking the box next to an existing Set name. Alternatively, you can create a new Set by typing a new Set name in to the “Add to New Set” box. Clicking “Update” will then save this set name and assign it to your image. Clicking on the green “continue” icon will then return you to the File Manager home screen.

set

 

You can now see your image is located at the top of your image list. You can now use the “In Sets” search bar to find images within a Set. Clicking inside the In Sets search bar will open a drop down list of Sets you currently have.

set search

By selecting a set name, you can then view all images within this set.

set result

 

Now you have successfully, uploaded and organised your chosen image!

 

 

Permalink.

How do I upload multiple images to File Manager?

First log in to the admin area of your website, using your username and password.

Log in

 

Now you are logged in, navigate to the top right hand corner of your browser window to the “Dashboard” icon. Once located,click on the word Dashboard.

dashboard

 

This will take you to the Dashboard of your website, which will look similar to the image below. To upload an image, you need to use the “File Manager” function of your Dashboard. This is located in the “Files” block, at the top right of the example below. Blocks may appear in a different location within your own Dashboard.

filemanager 1

 

Once you have located the Files block, click on the File Manager.

filemanager 2

You will then be taken to the File Manager home screen where you will be able to see all previously uploaded images.

filemanager 3

 

To browse for the batch of images you wish to upload, locate the blue “Upload Multiple” icon. This is located at the top right of the File Manager window. Click on Upload Multiple.

upload multiple

A new window will appear called “Add Files”. You will notice the upload queue is currently empty. Click on “Add Files”.

Add files

 

You will now be able to browse all of the images on your computer. Locate the images you wish to upload. Select all of the images you want to upload together and click “Open”. At this point in the process, it is advised you organise the all the images you want to upload in to one file location on your computer. This will make the process much easier for yourself.

Select multiple

 

Once opened you will now be able to see all of your selected images in the Upload Queue. Click the blue “Start Uploads” icon to begin uploading your images.

Start uploads

Your images will then begin to upload. You can track the progress of each image with the blue progress bar. Once an image is uploaded the status changes from pending to upload complete.

upload process

 

Once all of your images have been uploaded, you are automatically taken to the “Upload Complete” window.

Multiple upload complete

 

You can now organise this group of images in to a Set. This will help you to locate them more easily. Click on the “Sets” icon. In the Sets tab you can them assign these images to an existing Set/Sets by ticking the box/boxes. You can also create a new Set by entering a new title into the “Add to New Set” box. Clicking “Update” will save your choice of Set/Sets and apply this to all images within the upload. Click on the green “Continue” button to return to the File Manager home screen. Your group of images will now appear at the top of your File Manager list.

multiple set

You can search for the group of images you just uploaded by using the “In Sets” search bar. Clicking the In Sets search bar, opens a drop down list of your existing Sets.

multi set search

By selecting a set name you can then view all images within this set.

test 4 results

You have now successfully uploaded and organised multiple images!

Permalink.

How do I edit images in my gallery?

First log in using your user name and password.

Log in

 

 

Click on the image group in your gallery you want to edit, this will open these images on a new page. Next you need to click “Edit” button. You can find this on the grey toolbar on the top left of your browser window.

gallery

open gallery

 

edit

You will now see your own website ready to perform any edits you want. The Edit button will now be green, and content block boundaries will be shown. Hover your mouse over the images and click, this will produce a drop down menu. Click “Edit”  from this list.

gallery edit

 

You will then be taken to the “Edit Deluxe Image Gallery” window. Here you can manage your image settings including order, size, transition effects and caption location. To change the order of your images simply click and hold, then  drag the image into place.

edit image gallery

The “File Set” option enables you to move between image groups you created when uploading your images.

file set

 

If you navigate to the Titles & Captions tab, you can name and caption individual images.

title caption

 

Make sure to click the blue “Save” button once you are finished your edits.

 

*All images above are intended as a guide only.Your own website design, images and information will will be displayed.*

 

 

Permalink.

How do I edit my Sitemap?

First log into your website,  using your email address and password.

Locate the Dashboard icon in the top right hand corner of your browser window and click the icon. This will open the Dashboard page.

dashboard

Within your Dashboard, locate the Section titles Sitemap. Then select the option “Full Sitemap”.

Sitemap block

Full Sitemap will then present you with a screen similar to the one below. Headings will appear based on your own website pages.

full site map

 

From here you can now edit your Sitemap.

Rearranging the page order

In order to move a title page, such as “Contact Us”,  higher up the Sitemap place your cursor over the little file icon to the left of the title page you want to move. When the cursor is over the file icon it will change in to a little cross. This now means you can move the page. In a click and drag movement, click the cross on the file icon and drag the title page to the location you wish to place it. You will see a series of this dots appear identifying where you are about to place your page. An example of this can be seen below.

Move page dotted lines

Here you can see the “Contact Us”  page will be placed where the dotted line appears, between Home and About. If you now release the click the page will be placed in the new location like the image below.

Move page final

Moving a Title Page in to a sub-page of a different Title Page

For this example the image below shows Contact us and Guestbook as two separate Title Pages. If you wanted to merge these two pages, and have the Guestbook appear as a sub-page to the Contact Us there are a few simple steps that can be applied to any combination of pages within your own website.

make a subpage

Since Contact us will remain as the Title page, we will move the Guestbook icon. Place your cursor over the Guestbook file icon, the cursor will change to a little cross. Then click and drag the Guestbook icon over the Contact Us page. You will see a highlighted band appear, this can be seen below.

highlighted location

 

Now when you release the click on the Guestbook icon, you will be presented with the following options.

move,alias,copy

 

Select the option which suits you, in this case “Move” and then click the blue GO button. You can now see the Guestbook is a sub page below Contact Us.

final subfolder

 

If you wish to simply place a link to the Guestbook, select “Alias”. Your Sitemap will appear like this.

final alias

 

Or if you wish to keep the original Guestbook page and a copy as a sub-page on your Contact us page, select “Copy”. Your Sitemap will appear like this.

final copy

 

How do I rename a page? 

Click on the page you wish to rename. You will be presented with the following drop down menu.

properties

 

Select the “Properties” option,this will open up your Page Properties window.

page properties

 

You can now change you page name and descriptions. Moving to the “Custom Attributes” tab enables you to place a Tag on the page.

add tag

 

How do I change a sub page to a title page?

Lets say you meant to move a Title page but accidentally dropped it in the wrong location and now it is appearing as a sub-page. For example, the image below shows the Guestbook has been placed within the About title page.

wrong location

 

To remove the Guestbook and replace it as a Title page, simply hover your mouse over the Guestbooks file icon. When you see the little arrow appear, click and drag the Guestbook to the Home page.

return to homepage

 

Now when you release the Guestbook you will see the Move/Copy pop up window.

move,alias,copy

 

Selecting Move returns your page to a Title Page. You can then follow the instructions above on how to rearrange Title pages.

 

Permalink.

What do the icons in the Add Content block do?

When adding content to your website, you will see many icons above your writing area.

Add content block

 

If you are unsure what an icon does, you can simply hover your mouse over the icon and its name will appear. For example, if you hover the mouse over the B icon you will see the following.

bold

This shows the Bold function and a short cut that can be used upon selected text.

Some icons only become available once your writing has been selected. This is the case when creating a link to an external website.

When no text is selected, the link icons will appear like the image below.

link unlink

However, if you type content relevant to a website you wish to create a link for and then select this text such as the image below

hml link

You can now see the Insert Link button is illuminated and can be used.

Clicking insert link will present you with the following page. Simply enter the URL of the website you wish to link to, and choose for the link to open in the current or a new window. Finally click the green insert button and you have successfully inserted a link from your website.

insert link

Your text will now be underlined, showing an active link.

hml link done

 

You can unlink at any time by selecting the link and clicking the Unlink button.

unlink

unlink icon this is the Unlink icon.

 

How do I add extra content like an  image or files? 

All of these functions can be found at the top of the Add Content block.

content options

Select the content type you wish to add i.e. Add Image or Add File. A File Manager window will open. From here you can search for a specific image or file. Adding an image or file uses the same following steps.

file manager

Images that appear in the window will be from previously uploaded images/files. You can search for a specific image/file by typing the image name in to Keyword. Alternatively you can search with a Set of images/files by selecting one from the drop down list.

If you need to upload a new image/file, you will see the Upload File and Upload Multiple options in the top right hand corner. There is a separate step-by-step guide for uploading images/files.

How do I add extra content like an internal link?

Select the word or phrase you wish to link to a page on your own website then click Insert Link to Page at the top of the screen.

internal link

 

You will then be presented with your Sitemap. Click the page you wish to link to. You will be returned to your content where you can now see your link underlined.

internal link done

 

Permalink.

How do change page properties?

First log in to your website using your existing email and password.

Navigate to the page you wish to edit properties of. Locate the Edit button in the top left hand side.

edit

Hover your mouse over the edit button, you will see the following options appear.

properties drop down

 

Select “Properties” and the following window will appear.

page properties

 

You can now edit the properties of the page. Moving to the Custom Attributes tab will allow you to add, remove and change Tags.

add tag

 

Permalink.

How do I add a product to my shop?

Login to your website using your existing email and password.

Navigate to the page you wish to add a product and click the Edit button located in the top left hand corner.

edit

The edit button will now turn green and the page is ready for you to add a product. Click on the block which you want to add a product to, you will see the following drop down menu.

edit dropdown small

 

Select Edit.

An Edit Ecommerce Express Product Window will appear. Any existing products will be shown here. You can edit an existing product through this menu, or click “Add Product” for a new product entry.

A File Manager window will open,you can search for a previously uploaded image of your product using the Key word and Sets functions. Or Upload an image for your product. Click on the product image you wish to use, a drop downmenu will be shown. Select the “Choose” option from the top of the list.

choose image

You will then be returned to your product list where you can input your product information.

product details

You can name, price and describe your product. As well as adding weight and quantities for shipping purposes. Additionally, where you may have multiple options of the same product e.g. different colours you can also add attrtibutes toyour product.

Add attritbutes

Once all the information is complete, the blue save button will add the product to your shop.

Permalink.

How do I change my Ecommerce payment settings?

Log in to your website using your existing email address and password.

Navigate to your Dashboard.

dashboard

Locate the Ecommerce Express block and select the Payments option.

payment block

You will see the following window.

payment

Tick the enable box for the Payment type of your choice. Enter the email associated with your payment account and add a checkout label if you wish.

Permalink.

How do I change my Ecommerce shipping settings?

Log in to your website using your existing email address and password.

Navigate to your Dashboard.

dashboard

Locate the Ecommerce Express block and select Shipping.

payment block

 

You will see the Ecommerce Express Shipping Calculations window.

shipping settings

 

Select the shipping calculation you want to use from the drop down menu. You can provide your own name for the shipping method in “Method Name/s”.

shipping type

 

Each shipping option will provide guidance on its use and how to format the shipping costs. Subtotal Tier Shipping is shown below, the Calculation Options area at the bottom describes how you can calculate shipping.

subtotal tier

 

 

Permalink.

How do I apply discounts in Ecommerce?

Log in to your website using your existing email and password.

Navigate to your Dashboard.

dashboard

Locate the Ecommerce Express block and select the Discounts option.

payment block

This will open the Ecommerce Express Discount Coupons & Rules window.

discount

You can provide a Coupon Code e.g. Discount10. This will be entered by the customer during checkout.

You can set the Discount Type to a Fixed or Percentage value dependant on your own preference. Once you select a Discount Type, enter the value you wish to discount in the Discount Value box.

Click the Add button to save your new discount.

Advanced Discount Rules 

You can apply advanced discount rules in order to control the discount applied to:

  • Quantities of product within a basket
  • Order subtotal
  • Shipping
  • Tax
  • Total discount value.

Examples of rules you may wish to use are given within the Advanced Discount Rules section.

advanced rules

 

Each rule follows the same basic layout pattern:

(this.quantity >= 20) {return 5;}

The first brackets contain the rule for which discount you wish to apply. The second bracket contains the discount value you wish to apply.

Using the examples provided, you can simply change the given numbers to values you wish to discount.

Once all of your discounts are set up, make sure to click the Save Changes button at the bottom of the window.

 

Permalink.

What are Blocks and how do they work?

Block Areas

What is a Block?

A block is some content or functionality you can edit from within a page in CMS-5. Think of lego, these are the actual building blocks that go together to make your site. There are many types of blocks. Your CMS-5 install comes with about a dozen basic blocks including the Content block, Survey, Guestbook, Slideshow, etc. You can find more blocks, both free and commercially supported in our marketplace.

All your in-context editing is performed in Block Areas. These areas hold the content and functionality blocks that make up your web pages.

Just put the page in Edit Mode, mouse over a block area and click.
You’ll get this add block interface

addtoMain_menu.png

  • Add Block lets you create a new block from the list of installed blocks on your site.
  • Add Stack lets you place a set of blocks you’ve grouped together in the Dashboard > Stacks area.
  • Paste from Clipboard gives you a simple way to copy existing Blocks and paste them around a site. First just click an existing block and add it to your Clipboard.
  • Add Layout let you chop block areas into smaller columns. You should use them sparingly.
  • Design lets you override the CSS for this part of the page.

Select the block you’d like to add from the list of all available types, you can filter the list by typing in the text box.

addBlock.png

How do Blocks go together to make a site?

Your site is a collection of pages arranged in a hierarchy called the site tree. Each page in your site is associated with a page type and theme. That combination of page type & theme defines parts of the page which can have editable content or functionality. These are called block areas. Inside any given block area, you may have many blocks.

When you add a specific type of block to a specific block area, you have created an instance of that block.

Most pages in your site will be built out of different blocks sitting in block areas.

 

Permalink.

How do I add content to my website?

A content block is great for basic text and images. Headers, paragraphs, and more– if you can use a word processor, you can create and update content blocks in CMS-5.

content_addEdit.png
If you have ever used TinyMCE, that’s what we’re using here.

Make sure to use the small toolbar at very top when placing images, links to pages, or embedding a file you want people to download. Links made with this toolbar will continue to work if you move pages around or update images with new versions.

Notes:

  • If you’re copying text out of MS Word you should really use that little clipboard icon in the upper left of the toolbar to clean your content up.

Permalink.

How do I insert a picture?

You can add images to your page using the content block, but if you want to lock down a block area for a more controlled image placement (like a header area) this image block can be very powerful.

Imageblock.png

You can add a JPG, GIF or PNG.

The On-State field is optional but typically will show on roll over of the image in the page.

The Link URL is where the image links to if the visitor clicks it.

The Alt Text/Caption area is a short description that is useful for SEO.

The Maximum Dimensions let you control the size of the image. CMS-5 will fit the image inside this space, creating a new copy automatically behind the scenes so you’re not wasting bandwidth.

Permalink.

How do I upload files on to my website?

File

The file block makes it easy for you to link users to a downloadable file.
addFile.png

  • File – pick the file from the file manager, which lets you upload one as well.
  • Link Text – display this copy instead of the file name. Whatever copy is here will be hyperlinked with the download.
  • Password Required – This sidesteps the built in permissions of CMS-5 and just lets you set a quickie password required before downloading the file.

Note: File statistics from the File Manager track who has downloaded your files and when. You can access these statistics through the Dashboard.

Permalink.

How do I look at my reports?

Reports gives you access to the statistics of your site.

The Statistics page gives you a snapshot of the recent activity on your site including: recent page views, recent registrations, pages created, five most recent downloads, total page versions and pages currently in edit mode.

Form Results

Displays a table with your sites forms by name, number of submissions, and options to view submission or open the page the form is on.

Surveys

Displays a table with your sites surveys by name, the page or Stack it’s found in,   when the last response came in and how many responses have been collected.

Permalink.

How do I insert Youtube videos?

The YouTube Video block allows you to easily insert YouTube videos just by pasting the URL into a box.

Make sure you’re grabbing the URL from the video detail page, and not one of those fun channel pages that has a bunch of videos on one side.

addYouTube.png

The video will then appear on your website.

Permalink.

How do I insert a form?

Form

The Form Block gives you a fast way to make forms. All data can be found collected by the form can be accessed in the Dashboard.

Customize your form

The Add tab allows you to add questions

form_addQ.png

This question is required forces people to enter SOMETHING before hitting submit. Don’t forget to use the Add Questions button, the Add button adds the whole form to your page.
Edit tab allows you to change your questions or the order they are presented in. You can change the order with the up and down arrows.

form_edit.png

Preview tab allows you to see how the form with look.

form_preview.png

The Options tab adds contains some additional choices:

form_options.png

Form name is used in the reporting section of your dashboard.

Message to display shows up above the form after it is successfully submitted.

Notify me by email lets you send the form data to an email address when submitted.

CAPTCHA is the annoying “what does this word say” trick that is used to keep spammers at bay.

Redirect to another page lets you send users to a new page after submitting. If you want more control over the thank you message this is a great way to go. You could also build a “fill out this form to get access to our…” type deal with this.

You can see all the results of your forms in the Dashboard. Just type “form” into intelligent search.

Permalink.

How do I insert a survey?

A survey allows you to ask one question. Enter that question in the “Question” area.

AddingSurvey.png

Choose whether you want visitors to be able to answer it, or if they need to be registered on the site.

Add options for them to be able to select as answers in the “add option” area. Once you’ve added all of your potential answers, click the big “Add” button at the bottom to add the survey to your page.

Note: You can see the results of your survey in the Dashboard. Just type “Survey” into intelligent search.

Permalink.

How do I insert a map?

The Google Map block allows you to embed a Google Maps map in your page.
You can add a street address or general area (New York, New York.)

addGoggleMaps.png

It displays as a Google Map.

goggleMaps.png

Permalink.