Articles in this category

GOOD STUFF!

Image element

Adding images to your website is a great way to make it more eye-catching and visually appealing. That's where you'll need the Image Element.

Getting started

To add an image, photo or any kind of graphical file, you just need to drag and drop the 'Image' icon to the canvas. You can hover over the canvas area to see where can it be placed, and the gray line will indicate whether it's in grid or full width!

Now simply click anywhere on the image and the options for editing will appear in the upper left.

Upload the image by clicking on the ‘Upload’ button and choosing the image you want from your PC. Once you've found what are you looking for, just click open and your desired image will be loaded.

If you have already uploaded some images and you want to use them, choose the ‘Select Image From Media’ option and pick the one you want to add.

We also suggest making use of the amazing integration with the Unsplash Free stock to get some cool pics.

To change the image size, click on it and move the controllers respectively. You will notice two types of controllers. With black ones you can change the margin, while the green controllers are responsible for the image height. 

If you want to add a link to the image, select the ‘Link’ button from the editing options.

Here you can pick the type of the link you want to have on your image. There are three choices available: Internal, External or Anchor. 

You should use internal links when you want to connect an already existing page of your website to the image you’ve uploaded, so that your site visitors get redirected to that exact page when clicking on the image. Simply choose a page from your website by Selecting an Inner Page and you’re good to go.

External links are used when you want to point to another website and Anchor is used to specify the area on your page the navigation will be set for your link.

Settings

Now let’s see what we got under the ‘Image settings'.

You can put your Image in the Normal or Background mode, add an Image Title and Alt. Title stands for the text you see while hovering on your image in public view, while Alt refers to the image SEO. 

If you’re looking for something with crazy animation effects – Effects option in our Image element is your best fit. Why not add some cool Effects to your Image: when someone hovers over the image for example.

Click on the desired one to select it and pick the colors you prefer for the Title, Description, Overlay and the Graphic Element on your Image using the Colors Tool.

Wanna range far beyond the basics? Go for the Loading Effects section and pick the one you want the same way. Hit the effect name on the left to preview how the effect will look like.

Alignment - To change alignment settings of the element, click the Alignment icon and choose the desired position: top, center or bottom.

Visibility Settings - It enables making a certain Element/Block appear on Desktop, Mobile only, or everywhere by default. Simply hit Visibility Settings and choose the desired option from the drop down menu to get full control over the Visibility of the Divider on your page.

Next comes Location visibility. Include or exclude specific cities or countries or set the appropriate Custom IP.

Delete - If you don't need the image anymore, click Trash to remove it from your page in a blink of an eye.

At the same time, you have an option to move your image to background. To have it available, just click hover over the desired block, go to Block Settings hitting the 3 dots in the upper left corner of the Block and upload the ‘Background’ image from your PC with ease. Move the pointer to choose the preferred image area. When it’s all set, push the ‘Save’ button.

Did you know you can even add a Video Element as a Background? 

Alternatively, you can just select an image from your 'Media' or the cool pics offered by Unsplash.

Now change the 'Opacity' if you wish, enable or disable the Cover mode. 

Voila!

To remove the background image, simply hover over the selected image in the same window and you'll notice the 'X' icon. That's it! 

Have questions? Just let us know in the chat!

Did you find this resource helpful?
Return to top
Ready to get started
with Subbly?
Try for free