Image shortcode

Displays an image to your web page. You can change the behavior of the click action. It can open a lightbox image
or it can be a simple link. You can also change the hover icon, its size and color.

Examples of the image shortcode usage

We tried to cover all the basic and
advanced uses for the image shortcode

Image in a full width column

Images in a half width column with hover and a lightbox link

Images in a three thirds column with hover, lightbox link and random content

A bike chained to a post

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.

Perfect weekend in the mountains

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.

Birds flying around an old dock

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.

Images in four columns set as a gallery

A look at the city

Perfect contrast

Eating out

Main city buildings

A bike chained to a post

Summer getaway

Weekend in the mountains

Birds around an old dock

Images arranged as a team preview with fade animation

Meet our amazing team

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.

Michaella Johnson

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.

Brad Smith

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.

Jane Smithsonian

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.

Left aligned image in a full width row with dark background

This is a screenshot from our
Division template for Wordpress

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut laboren et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi utnaliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doneiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud nexercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet,nconsectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. nnUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo nconsequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt nut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nnisi ut aliquip ex ea commodo consequat.

Central aligned image with a flip X animation

Image in a fullscreen column

Basic settings for image shortcode

Basic settings for your basic needs. Frontend builder gives the
user an option to create basic stuff with ease

Add an image

Choose an image from your media library or paste an URL from any image on the web

Image alignment

You can align the image left, right or centered in the case where the image is smaller then the column

Bottom border

Add a bottom border to the inserted image. You can set the border color and hover color

Set custom dimensions

You can choose to override the image dimensions and set your own. You can change the image width and height

Round edges

You can set the round edges for your images when your design is revolving around rounded edges

Media library

Frontend builder uses the latest Wordpress media library for managing images and media

Advanced settings for image shortcode

In case that you need something more creative and complex
Frontend builder has a set of advanced options to get you there

Set the image link

You can set the image link by inserting an URL to your destination page/image

Choose the link type

You can open a standard link, in new tab, a lightbox image or a lighbox iFrame

Dimensions of the Lightbox iFrame

You can set custom dimensions for the Lightbox iFrame link type

Hover icon size

After you choose the icon for your hover effect, you can change its size

Hover icon

You can easily change the hover icon. We are offering you 3 icon galleries with Fbuilder

ID & Custom CSS

You can easily insert your own, custom CSS for that personalized look

Bottom margin

You can set different bottom margins for different elements / shortcodes

Animation

You can easily animate each shortcode with tons of different animation types

Animation delay

All animations appear only when the user scrolls to the specific shortcode, you can set the delay for that

Animation speed

You can manually change the speed of each animation for each element / shortcode

Animation group

By placing different shortcodes in a group, all shortcodes in that group will animate once the user scrolls to the first element in the group

Clone shortcode

Once you are happy with the looks of your shortcode, you can clone it and use it somewhere else

Drag & drop shortcode

You can move your shortcode to any column on the page by dragging that shortcode