Circle Image Frame Shortcode

Last Updated on

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

In this article


Displaying a Circle Image Frame Shortcode

To add the shortcode to a page or post:

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

Circle Image Frame Shortcode - Visual Composer section

3
In 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

4
When 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

5
Click 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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket