Circle Images
A row of round overlapping or spaced images, with an optional counter circle, title, star rating, and text, for an avatar stack next to social proof.
Circle Images shows a row of round images, overlapping or spaced apart, with an optional last circle for a counter like "+12," a title, a star rating, and a line of text. It's typically used as an avatar stack next to social proof, for example "Trusted by 140+ teams." With a single photo and a Title and Text, it also works well as an author byline, for example under a testimonial quote.
Add it
In WPBakery, click Add Element and pick Circle Images from the Highend Shortcodes category. Or use the shortcode. See Shortcode.
Settings
imagesEach image is cropped to a circle from its center, so faces work best centered.
48sizeDiameter in pixels.
OverlappinglayoutOptions: Overlapping, Spaced apart.
Left circles on toporderOptions: Left circles on top, Right circles on top. Only shown when Layout is Overlapping.
3border_widthIn pixels. A ring around each circle that separates overlapping ones. Enter 0 for none.
border_colorUsually the background color behind the circles. Leave empty for white.
count_textOptional. A last circle with text instead of an image, for example +12.
count_bgOnly shown when Counter Text isn't empty.
count_colorOnly shown when Counter Text isn't empty.
titleOptional. A line above the stars and text, such as a name when the element shows one person.
title_sizeIn pixels. Leave empty for a little larger than the text. Only shown when Title isn't empty.
ratingOptional. A rating out of 5, for example 4.8, shown as stars next to the circles.
18star_sizeIn pixels. Only shown when Star Rating isn't empty.
star_colorLeave empty to use the text color. Only shown when Star Rating isn't empty.
textOptional. Shown next to the circles, under the stars, for example "Trusted by 1k+ clients (4.8/5)".
text_sizeIn pixels. Only shown when Text isn't empty.
text_colorFor the title and the text.
LeftalignOptions: Left, Center, Right.
Same as desktopalign_phoneOptions: Same as desktop, Left, Center, Right.
Images, Counter Text, Title, Star Rating, and Text are all optional, but the element shows nothing if all five are empty.
Animation tab
NoneanimationPlays when the circles scroll into view. Options: None, Fade in, Pop in, one after another.
animation_delayIn milliseconds. Only shown when Reveal Animation isn't None.
Common settings
Circle Images also has an Extra class name field. See the Elements overview.
Shortcode
[hb_circle_images images="12,34,56" size="48" layout="overlap" count_text="+12" rating="4.8" text="Trusted by 1,200+ clients"]