How to add an image module to your page


 

Drag the Image module onto your web page where you’d like to add an image, then select the image file from My Drive or upload it from your computer.

 

Before we begin: Have you checked out the Focus feature? Focus provides you with a set of 20 functional web page sections designed in the style of your template that you can add with a single click.

 

Focus saves you time and effort by putting together some of the most common page sections, like Photo Gallery, About Us, Team, Price Table, Quote, Statistics five styles of content layout and much more. It’s all customizable, so you can tweak it to your liking.

 

Before you start building areas on your web page, take a look at
Focus - the work might have already be done for you!  
 

 

Here’s are the steps to follow to add an image to your page using modules:

Step 1: Open the target page

In the website builder, open the page of your site that you want to add the image to.

 

Step 2: Open the Modules tab

In the left sidebar menu, click on Modules:


 

Step 3: Locate the image module Icon

In the Modules sidebar, you will see the Image module icon.

 

Step 4: Click and drag the image module icon onto your page
 

Point your mouse at the image module, click and drag it onto your page to where you want the new image to be located. Then drop it.

 

As you drag it around the page, you will see black lines appear, indicating the edges of the existing elements on the page. Use these lines as guides help you drop your image module in the right place. You can add spacers or other elements later to adjust its position if desired.

 

For this example, we will add an image between two other images on the Projects page of the Elenore Designs template.

 

Below you can see the image module before it was dropped, hovering over the page. The black line indicates the boundary between the two images already on the page. If the image module is dropped now, it will be inserted between them.


 

Step 5: Select the image from My Drive

Your new module needs an image file. As soon as you drop the module on the page, My Drive will open.  Double-click an image in My Drive, or click New>File to upload an image.

 

For this example, we will double-click the circled image below:
 


 

Step 6: Image formatting options

Your image is added to your page. You will notice that the original two images have been automatically resized to adjust to the addition of the new image. Click on the new image to open the format options bar.

 

Note: The options bar in the builder has basic formatting options for how your image is displayed on the page, like borders and padding. The advanced image editing options are available inside My Drive. You should do any advanced image editing in My Drive before adding the image to your website with modules.


 

Tip: To move the image, including removing it to the trash can, click the thick black grab bar in the center-top and drag it.

 

Here’s a closer look at the options bar. If you’re already familiar with these options, please scroll down to our last step: Step 7: Saving the changes.

 

 

Here’s a brief description of each of these options:
 

Align left - aligns the image to the left of the block


 

Align center - aligns the image to the center of the block


 

Align right - aligns the image to the right of the block
 

 

Link image

Clicking this icon opens the editor box to link (or remove) a URL or a link to another page of your website.
 

 

Caption image

Clicking this icon opens the Caption window, where you can add a caption for your image.

 

 

 

Border

Choose border size (None, Small, Medium, Large) or style (None, Solid, Dashed, Dotted) using the drop-down menus.

 

 

Padding

Padding is the amount of white space around your image. Your padding options are: None, Small, Medium or Large.

 

Pinterest Pin-it button - adds a Pin-it button for Pinterest to the top left corner of your image.

 

 

Clicking this icon opens My Drive, where you can perform advanced image editing functions, or choose, upload, or link to a different image.


 

Step 7: Saving the changes

Once you have finished with your image, remember to click the Save button at the bottom center of the modules sidebar to save and protect your changes.
 

This concludes our guide: How to add an image module.

 

Other guides you might be interested in:

Adding Focus to your Bookmark Website

Guide to the image editor in My Drive

How do I move or re-size modules that are already on my page?

How do I remove a module from my page?

How to add a gallery

How to add a slideshow

 

 

Bookmark Supports your Success
 

Ask An Expert:  Get sound advice from our community, ask questions and get answers quickly and easily.

 

Bookmark Pro: Members get premium support from our dedicated success team - Chat with us one-on-one by clicking the chat icon inside Bookmark.

 



↵   Back To Topics