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.
To add an image, photo or any kind of graphical file, you just need to drag and drop the ‘Image’ icon to the crafting area. You can hover over the crafting area to see where exactly it can placed, and the gray line will indicate whether it's in grid or full width!
Now simply click anywhere on the image area and the options for editing will appear.
First things first! 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 is here.
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.
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.
If you need an internal link you’ll need to choose a page from your website, and you can easily do so by clicking on ‘Select Inner Page’ and selecting the page you want to connect, push ‘Ok’ and you’re good to go.
Now let’s see what do we have under the ‘Image settings'.
You can put your Image in the Normal or Background mode, add an Image Title and Alt text. Title stands for the text you see while hovering on your image in public view, while Alt refers to the image SEO.
Yet not the end.
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: Hover or Loading, your choice!
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.
You may not like how your image is positioned on the page, never mind. To change that, click on the ‘Alignment’ icon like on the gif below!
You’ll have three options available. You can align the image to top, center or bottom.
Don't miss the Visibility Settings either.
This option enables making a certain Element appear on Desktop or Mobile only, or everywhere by default. Simply hit Visibility Settings and choose the desired option from the dropdown menu to get full control over the Visibility of the Image on your page.
Mind the Location visibility as well. Include or exclude specific cities or countries or set the appropriate Custom IP.
If you've changed your mind and decided to delete the image you’ve chosen, click on the ‘Remove Image’ button and the image will be gone.
If you really want to remove the image, push the ‘Trash’ button.
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 update the ‘Background’ image 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.
o remove the background image, simply hover over the selected image in the same window and you'll notice the 'X' icon. That's it!
Cool, right? As you're reading this, our enthusiastic team is already working on implementing new elements and functionalities, stay tuned!
Have questions on Elements? We recommend checking out these Articles for a bigger view at SpringBuilder!
Always remember we're just a step away so hit the Chat box in the lower right corner and our Support Team will be there to guide you through!