Adding an Image to a Web Page in Virteom

Adding an Image to a Web Page in Virteom

This article will explain how to upload an image into your Virteom powered website.

Login

First login to your website. You should see the Virteom administration toolbar at the top. Then click on the page in your site you want to add the image to.

Login

Make Page Editable

Make the page editable by:

1. Clicking on the "Editor" option on the top toolbar.

2. You should see an editable zone, this will have a dotted outline around it. In here you can add text and images to your website.

Make Page Editable

Focus your Cursor

Place your cursor inside the editable zone where you want the image to appear.

Focus your Cursor

Click on Add Image Icon

Click on the add image icon. It will look like a little photo of a house and it's next to the flag icon. This will open a new window.

Click on Add Image Icon

Image Properties Box

After you click the icon this image properties box will show up. Now you need to browse for the image that you want to place on the page. Click the "Browse Server" button to browse for an image.

Image Properties Box

File Browser

Once you click "Browse Server" the Image File Browser will appear. In here you can either select an image that you previously uploaded or you can upload one from your computer to the site. We are going to show you how to upload one from your computer. Click "Upload File".

File Browser

Upload a File

After you click "Upload File" a new box will appear. This is the file uploader box. To browse for a file on your computer click the "Browse File" box.

Upload a File

Select File(s)

Now go tot he folder on your computer that has the image that you want to upload. You can select one or more images and upload them all at the same time. Once you find the image(s) click the "Open" button to load them into the uploader window.

Select File(s)

Verify the Images

All of your images should be ready to upload. When you are ready, click the "Upload" button to get the images to the server.

Verify the Images

Find Images

Now that you've uploaded the images, browse to the folder that you loaded the image(s) to and select the image by clicking on the blue check next to the image to select it to insert into the webpage.

Find Images

Add Alternative text to the image

After you click on the check the dialogue window will show your image. Fill out the Alt text with an image description for better SEO. Then click the "OK" button to finish.

Add Alternative text to the image
 

floating images to the right or left

After you load your image in, you may find that you want it to appear to the right or left of your text. In web development, we call this floating an image. 

Floating images to the right or left of text is relatively easy in Virteom CMS. When you're on the Image Properties Screen (in the steps prior to this) there is an option for Alignment on the bottom left-hand side of the window. 

Alignment of Images in Virteom CMSFloating Images  | Virteom CMS

 

Floating images to the left

If you would like to float an image to the left, choose 'Left' from the Alignment box.

Floating Images to the right

If you would like to float an image to the right of your text, choose 'Right' from the Alignment box.

adding space

Adding Horizontal Space to Photos in Virteom CMS Adding Space in Virteom CMS

Adding whiteSpace to the left or right of your photo

If you find that the text is too close to the left or right of your photo, add in 'HSpace'. H Space is short for Horizontal space. The number entered into this box goes by pixels. 

Adding whitespace to the top and bottom of your photo

If you find that the text is too close to the top or bottom of your photo, add in 'VSpace'. V Space is short for Vertical space. The number entered into this box goes by pixels.

You're Done

Now your image is on the webpage. Make sure to hit "Save Page" to save the image to the webpage. That's it you are done.

Want to know more about images in virteom cms? 

Check out How to Add Images and Other Photo Tips by Clicking Here

Want to know how to resize images the right way? Click Here


Article revised 06/26/2018 by Olivia Justice

Loading Form...
Posted By Dan Carbone in Learning

Related Posts

Email Footers with Dynamic Advertisements, Company Wide

Virteom has the ability to manage all of your employees email footers easily and effectively.  The first thing you will want to do is add each employee as a member of the Virteom system.  Do this by clicking on the 'Manager' option on the top toolbar and then clicking on the 'Members' option on the left toolbar. Every member in the system can have the capability of having their own footer. So this can be an 'Admin' or an 'Employee' as as example.  But it is not limited to those types. Add a Member Now add each employee of your organization as a member to the system. Do this by clicking 'Add New Member' and fill in their information.    Managing Your Email Footers Company Wide Once you are done adding each employee you will notice that there is an Email Footer in the lower right with a button called click here. When you click this button a new window will open up and a generated email footer for that employee will

Nov 25, 2012 Posted By Dan Carbone

How to Add Images to Your Website

One of the easiest ways to add some flare to your website is to add images. But how do you add images to your Virteom website? In this article we'll cover all the bases on just that.  Preparing your image for upload First things first, we'll need you to prepare your image for upload. There are a few things you should do to your image before uploading your image to your website: Make sure your image name does not have any spaces in it. We suggest replacing any spaces in your file name with dashes (-) or underscores (_).  Optimize your image for the web. To keep your website running at top speed, you'll want to optimize your image for web. How do you do this? Use an image optimizer like this one.   Uploading your new Image into Virteom Editor Now that you have prepared your image to be uploaded, you're locked in loaded to upload it to the Virteom CMS.  Go to your website and log into your Virteom editor. Once you are logged in go to

Nov 20, 2012 Posted By Dan Carbone

Virteom Cloud Marketing Overview

So many marketing and web development firms promise you award winning websites. This sounds sexy, but what does it really mean to you? Doesn't this mean that they will be winning the award for a good looking website rather than building you a tool that will effectively grow your business?  We think that's what it means. Virteom is on a Mission Virteom is on a mission to change what we do once we launch websites.  We're so serious about this mission that we've become the back end technology firm for marketing firms from Cleveland to Detroit.These marketing firms put their trust in Virteom that we will effectively help them grow their customers relationships.  How do we do it? Take a look at the quick overview video of our technology and you'll quickly understand that we create what we like to call Marketing Rhythm.  In fact some experts believe we just may be forging a whole new segment with our technology.  Rhythmic Marketing Rhythmic

Nov 13, 2012 Posted By Dan Carbone

Most Recent

How To Set A Social Share Image for a Page

Posted By Alesha Wireman
May 01, 2020 Category: Learning, Modules, How To

One of the newest features found within your Virteom powered website is the ability for you to add a social share image to any and every site page. This means that when any page of your website is shared on a social media platform, the image that accompanies the post is one that you choose. Social share images play a large role in the number of engagements your posts or others' posts linking to your website receive. It can impact a viewer's decision to click the post, view the page to find out more, and can ultimately result in new business for you.   This new feature is important for several reasons. You now have the ability to control the social share image for every page of your website to ensure that it's the best reflection of your company and the content overall. You can set the image so that it follows your brand guidelines and captures your audience's attention, making them want to visit the website page every time! Updating the social share image is the simplest way to guarantee that your website, blog posts, and site pages present beautifully on any social media platform across the board. How to set a social share image Login To Your Site To make edits to your website, you'll need to log-in first:  Login to the back-end of your website by visiting (your URL.com)/virteom Enter your username Enter your password Click 'Login' Navigate to the Page you're Setting A Social

How to Add, Edit and Delete Photos Using the Masonry Module

Posted By Olivia Justice
March 23, 2020 Category: Learning, Modules

Is your Virteom powered website utilizing the Masonry Photo Module? Adding new photos to your gallery is really simple and even allows you to upload multiple images at one time. The one real advantage of using the masonry module is so that you can display images in groupings or categories on a singular webpage. This allows you to separate images out into different galleries so like photos can appear together. For example: Say you're a landscaper and you have a webpage entitled "Hardscapes". You may want to output multiple galleries on this single page to break out each type of hardscape you've done: walkways, patios, pergolas, steps, fire pits, etc. The masonry photo module allows you to accomplish this. You can set multiple categories, and multiple galleries in that one category - all to output on one single webpage. In this how-to article, we explain how to add a new category, add a new gallery, edit an existing category, edit an existing gallery (adding images to an existing gallery), and how to delete categories, galleries, and images in the Masonry Photos module powered by RocketSites. Logging-In First things first, you must log-in to your Virteom powered website. You can do this by visiting your website and adding /virteom at the end. This will take you to the log-in screen for the site. Enter your email address in the email field Enter your password in the password field Click 'Login' Navigate to the Masonry Grid

How to Create Private Pages with Virteom

Posted By Olivia Justice
August 21, 2019 Category: How To

Websites make it easy to get your business information out to the online community, but after building websites for 20+ years, we've learned that sometimes you don't want every page on your website accessible to the general public. Which is why RocketSites offers the ability to create private pages that are only accessible to a designated person/company. Why would you want to use private webpages? Private webpages are used for a number of reasons. Our clients have used private pages for promotions in email campaigns, as a document center, for quote calculators, you name it. Private pages really come in handy! Private pages also allow you to essentially have a draft of the webpage you're creating without it being accessible to the general public. Whatever the use case, Virteom Rocketsites makes it easy to mark a page as 'private' and set permissions for the users you want to have access. In this how-to guide, we'll explain how to create a new page, mark it as private, create a new member, and give access to the user.  Keep reading to learn how to mark pages as private in RocketSites. LOG-IN TO VIRTEOM CMS The first step in adding a new private page to your Virteom powered website is to log-in. Visit your website domain /virteom (Ex: https://yourdomain.com/virteom). Once you hit the log-in page, you'll need to enter your username and password. NAVIGATE TO SITE PAGES Now that you're logged in to the CMS