We receive many questions on adding and editing images when using the builder. We understand the value a well placed, cleanly edited image, which fits well onto your page, adds to your website, so have included some tips on image editing for you.
Adding Your Image to the Website Builder
When you upload an image to your website, the online builder will do its best to accommodate that image no matter what size it is. Many customers are unaware that they are, in fact, uploading an image which is VERY large, and, once its been uploaded, this of course leaves no more room on the web page for any text - or, it might even be so large that it extends out the actual width of the website itself. That doesn't look good, of course!
To ensure your image will fit in the space you have allowed for it, consider the width of your entire webpage. You can find this information in Design - Layout Properties. Most web page widths are between 980 and 1000 pixels.
Then, consider the width of any sidebars you have on your website - most tend to display a left hand sidebar at least, with submenus or links to product pages, for example, and this will usually take up anywhere from 150 - 200 pixels of the width of your webpage.
This leaves you with a total width of around 850 pixels in your page content area (and even less if you also have a right hand sidebar to consider).
If you want to add a really large image to display something of importance on your page (your storefront, or a featured product, for example) you could use the "Add" - "Text" feature in the builder, and select the option which shows an image on top of a text area. This will give you a lot of width to display a large image (anywhere up to 800 pixels wide), without having to also fit in text on either the left or right sides.
Otherwise, if you are wanting to include an image with text on the right or left relevant to that image, we would suggest that 400 pixels wide is perhaps the maximum to use. This will leave enough space for the text on either the right or left (depending on the layout you choose) to appear neat and tidy, and uniform beside the image.
Editing Your Image On Your Computer
To work out the current size of your image, and if it needs to be cropped or sized down at all, navigate to your image folder on your computer, and hover over the image you are wanting to upload. A pop-up should appear showing you the width and height of your image in pixels. If you dont see this pop-up, right click on the image, and select "properties" from the drop down list. This will also display the width and height in pixels for you.
If its clear the image is too large for how to intend to use it on your webpage, you can "Resize" or "Crop" it using an image editing application.
Paint - Many computers will come pre-installed with an application called "Paint". It can be located by clicking "All Programs" - "Applications", and then selecting "Paint" from the list. Easily open an existing image in here, and click the "Resize" button to resize down the entire image, or "Crop" to select a section of the image to use (this is helpful to remove unnecessary white space, or to highlight something inside an image).
Microsoft Office Picture Manager - The Professional version of Microsoft Office comes with this application, and it can also be purchased separately. We find it EXCELLENT for simple re-sizing, cropping and colour balancing.
Specialised Image Editing Software - If you believe you will need to do significant image editing in order to make the most of your website, programs like Adobe PhotoShop, GIMP, Microsoft Expression Design, CorelDraw and more are available to purchase both online and in stores.
Editing Your Image Using the Website Builder
If you dont have any of the above applications, or would simply prefer to edit your images online, you can do so via the Builder. Upload your image as usual either via the "Add Component" capability, or simply by clicking the "Insert Image" button while you are editing a text area on your website.
If you've used the "Add Component" section, save your upload even though it isn't the correct size, just to be sure the Builder has a copy of the file. Then, "Edit" the section. You will see a "Resize/Edit Image" button over the image now. Click this button and either resize down the image (in percentages or using the slider), or crop it, and apply your changes.
If you've simply used the insert image button while editing some text, once the image is uploaded into the text, hover your mouse over the sides or corners of the image, and you'll see arrows around the edges of the image. Move these arrows to resize your image down.
Problems?
Email us! Thats what we're here for!
