Category Archives: Image Elements

Image Elements: “Single Image”

Share

Tutorial At A Glance

Images on your website are very important to keep your viewer interested. Adding an image is simple through CommonSpot.

To insert an image using the “Single Image” element follow these two (2) steps:

  1. Insert the custom element “Single Image”
  2. Choose & Adjust your image

Detailed Tutorial

To add a single image to your web page use the “Single Image” element and follow these two (2) steps:

Step 1: Insert the custom element on your page where you want it to be displayed by clicking on this highlighted icon. 

tutorials- Insert Single Image

Step 2: Now click on the gear icon to choose your image, adjust your image size, add a rollover image, or add a flyover text. 

tutorials- Insert Image w Surrounding Text1

And that’s it! You’re containers will now look something like this:

tutorials- Insert Single Image1

Tips & Tricks

You can add a rollover image that will appear if you hover your mouse over the current image. You can add a caption to your element by clicking the “+” sign in the top left of your elements container.

Image Elements: “Text Around an Image”

Share

Tutorial At A Glance

Having a website is a great tool to direct traffic to your department, organization or facility. The most important aspects of your site is making sure your content is accurate and useful. But even with the most useful and up-to-date information, you may want to add some images to your page. This image element allows you to add images surrounded by text that can serve for your choice of purpose.

To insert the “Text Around an Image” element follow these three (3) steps:

  1. Insert the custom element “Text Around an Image”
  2. Choose & Adjust your image
  3. Add the surrounding text

Detailed Tutorial

To insert an image with text around it use the element “Text Around an Image” and follow these three (3) steps:

Step 1: Insert the custom element on your page where you want it to be displayed by clicking on this highlighted icon. 

tutorials- Insert Image w Surrounding Text

Step 2: Now click on the gear icon to choose your image, adjust your image size, add a rollover image, or add a flyover text. 

tutorials- Insert Image w Surrounding Text1

Step 3: After you’ve saved these changes, your image should appear on your page. Now select the + sign in the top left of your image to edit the surrounding text of your image. Here you can add text in the text block and the header text if you wish. You can add a style to your text here in this element.

tutorials- Insert Image w Surrounding Text2

And that’s it! You’re containers will now look something like this:

tutorials- Insert Image w Surrounding Text3

Tips & Tricks

You can add a rollover image that will appear if you hover your mouse over the current image. While editing the element’s text, you can position the text however you want by using a style sheet or using html code.