Circle Image Frame Shortcode

Updated on December 29, 2017

The circle image frame shortcode allows you to add a circled image with an optional title to a page.

To add a circle image frame in the Jupiter theme, you’ll need to add/edit a page, and then add the shortcode via Visual Composer. The title, image and all other settings are inside the shortcode pop-up screen.

To see the circle image frame in action, check out the demo page.

Circle Image Frame Shortcode - demo


Displaying a Circle Image Frame Shortcode

To add the shortcode to a page or post:

1Add a new page or edit an existing page.
2From the Visual Composer screen, click on the + icon

Circle Image Frame Shortcode - Visual Composer section

3In the Add Element pop-up screen, search for Circle image frame and click on it to be added to the page.

Circle Image Frame Shortcode - add element

4When the shortcode is added, a new pop-up screen called Circle Image Frame Settings will open that allows you to configure the shortcode settings. Click on Upload and upload an image.

Circle Image Frame Shortcode - Circle Image Frame Settings

5Click on Save changes and publish or update the page to check the result.

Configuring the Settings

There are a few settings in the Circle Image Frame Settings pop-up that you can use to configure the shortcode.

SettingDescription

Heading Title Sets a title to your circled image. The title will display above the image. This setting is optional.
Image Link  Adds a link to your image and makes it clickable. Make sure to add https:// at the beginning of the URL for the image link.
Image Upload your desired image which you wish to display in circled frame.
Image Diameter Sets the diameter of circle containing your image. If this value was set to e.g. 200px, the circled image would have 200px width and height.

Configuring the Visibility for Devices

To make the button shortcode visible only for some devices such as Smart Phones, Tablets, Mega Tablets, Netbooks, Desktops, there is a setting in the button settings pop-up which is called Visibility For Devices. The usage of this setting is easy and straightforward but if you need a step by step tutorial, read the Configuring the visibility for devices article.


Adding an Entrance Animation

To show the testimonial shortcode on scroll with animation, there is a setting in the Circle Image Frame Settings pop-up which is called Viewport Animation. Using this setting is easy and straightforward but if you need a step-by-step tutorial, read this tutorial.

Did this answer your question?