C5 Tutorial: Editing

A quick cheat sheet for some Concrete5 editing tips

 

In Context Editing

Most of the work on your site will take place on the very same pages you want to edit. This "In-Context Editing" means you can easily, fix typos, add new text, images and more.

The following examples explains how to do some basic "In Context Editing.

Further information is available on the Concrete5 Documentation.

 

Image


To Enter Editing Mode

You will need to log in into the site to edit it. At the bottom of the page there is a “Site Admin: Sign In” link.

Click that and sign in with your username and password.

A new menu bar will appear at the top of each page with an “Edit” button in the top left.

Go to the page you want to edit. Hover over the "Edit" button and then click "Edit this page".

Now the page changes to edit mode.

Every “block” you can change will have a dotted red line around it and below that block will be an “ Add to …” bar.

To ADD a new block to an area left click on the "Add to ... " bar and select "Add Block" from the menu.

There are host of blocks that you can add plus many more that you can install from the market place to make your website engaging including adding images, slideshows, videos and forms to name a few.

To DELETE an existing block, left click on it and select "Delete" from the menu.

Use the CLIPBOARD to move similar content between different areas and pages. Left click on a block and select "Copy to clipboard" from the menu. Left click on the area you want to move it too and select "Paste from Clipboard". In the clipboard viewer left click on the title of the content you want to paste. The clipboard saves multiple content - not just one thing at a time so can be a real time saver.

To Edit an existing block, left click on it and select "Edit" from the menu. Below are some simple instruction for editing content blocks, image blocks and the Nivo slideshow block.

Remember after making any page edits you must hover your mouse over the "Editing" button and choose "Discard My Edits", "Preview My Edits" or "Publish My Edits".

Top Tips: The difference between these options are:

  • Discard will throw away the changes you just made.
  • Preview will save these edits to a new page version but make these only available for editors and administrators to see.
  • Publish will save these edits and make them live on your website for all users to see, immediately.

Further information available on the Concrete5 Documentation.

tutorial-edit-sml1.jpg
tutorial-edit-sml2.jpg
tutorial-edit-sml3.jpg

Editing A Content Block

A CONTENT BLOCK is great for basic text and images.

Its easy to change headers, paragraphs, insert links add images and more.

In edit mode, roll your mouse over the block you want to change (it will appear shaded).

Left click and choose "Edit" in the menu.

Your content will now be viewed in the text editor.

You can easily add or amend text directly

You will see familiar formatting icons in the menu bar for adding bold, italics, underline etc.

Top Tips:

  • Use the very top toolbar for adding images, files and links to your content (Links made with this toolbar will continue to work if you move pages around or update images with new versions)
  • Use the "Styles" and the "Format" drop down box to change the look of your text and add paragraph or heading tags to your text.
  • 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.

Click the "Save" button in the bottom right to save your block changes.

Hover your mouse over the "Editing" button and choose "Preview My Edits" or "Publish My Edits" to save your page edits.

Further information available on the Concrete5 Documentation.

tutorial-edit-sml4.jpg

Editing An Image Block

You can add images to your page using the content block, but if you ONLY want to add an image use the IMAGE BLOCK.

In edit mode, roll your mouse over the image block you want to change (it will appear shaded).

Left click and choose "Edit" in the menu.

Click "Image" to add a JPG, GIF or PNG from the file manager.

Click the "Image On-State" if you wish to add a rollover image to the image.

Click the "Image links to " button if you wish to link when the visitor click on the image.

Add an Alt Text/ Caption to help your accessibility and SEO.

Top Tip:

  • For responsive designs leave the maximum dimensions empty as the css will format the size of the image to fit the space.

Click the "Save" button in the bottom right to save your block changes.

Hover your mouse over the "Editing" button and choose "Preview My Edits" or "Publish My Edits" to save your page edits.

Further information available on the Concrete5 Documentation.

tutorial-edit-sml5.jpg

Editing the Whale Nivo Slide Show

A slide show of images is an effective use of space on your web page. There is a default slide show block but I prefer this free addon, the Whale Nivo Slider.

In edit mode, roll your mouse over the Slide Show block you want to change (it will appear shaded).

Left click and choose "Edit" in the menu.

Click the "Add" button to add images from your file manager.

Insert text into the "Title" and "Description" boxes. Text in the description box can be displayed over your image.

Click the "Up / Down" arrows to change the order of your images.

Click the "Dustbin" image to delete an image.

Under the options tab select the style, transitions and timings of your slideshow.

Top Tip:

  • Keep all your images in the same slideshow the same size or you will find it hops about a bit.

Click the "Save" button in the bottom right to save your block changes.

Hover your mouse over the "Editing" button and choose "Preview My Edits" or "Publish My Edits" to save your page edits.

Further information available on the Concrete5 Add-Ons.

tutorial-edit-sml6.jpg