Recent Activity Tabs Element

Last Update: August 5, 2026

The Avada Recent Activity Tabs Element replaces the functionality of the old Avada Tabs Widget, and allows you to display tabs showing popular posts, comments and recent posts. It’s completely configurable, with any section being able to be removed. It’s a great way to summarise useful blog information in an easy to use, compact area. Read on to see the complete list of options.

How To Use The Recent Activity Tabs Element

The Recent Activity Tabs Element has a relatively simple function, to display popular posts, recent posts and recent comments in a tabbed format. You can decide yourself to display all three, or two of them, or even just one. It’s very simple to configure, and there is a full range of styling options to get it to look just how you want it.

This could be used in a single post layout section, or perhaps just on a page. Just add the Element into a page or layout section, and configure it to display what you want. See the full list of Element options below, and see the example below of the actual Element.

Element Options

Note: Please note that the displayed option screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

HeadingDescription
Tabs ShowingChoose which tabs are shown. Drag to reorder them, the first one is the active tab.
Post DesignSelect how the posts displayed should look.
Show ExcerptChoose to show the post excerpt on an additional row below the date.
Tabs AlignmentChoose how the tabs are distributed. "Stretch" spreads them over the full element width.
Popular Posts Tab LabelThe label of the popular posts tab. Leave empty to use the default wording.
Popular Posts Tab IconClick an icon to select, click again to deselect.
Popular Posts Order BySelect what popular posts should be sorted by.
Number Of Popular PostsHow many popular posts should appear.
Recent Posts Tab LabelThe label of the recent posts tab. Leave empty to use the default wording.
Recent Posts Tab IconClick an icon to select, click again to deselect.
Number Of Recent PostsHow many recent posts should appear.
Comments Tab LabelThe label of the comments tab. Leave empty to use the default wording.
Comments Tab IconClick an icon to select, click again to deselect.
Number Of CommentsHow many recent comments should appear.
Excerpt LengthThe length of the post excerpt. Words or characters, depending on the "Excerpt Base" global option.
Comment LengthThe number of words shown of each comment.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.
AttributesAdd custom HTML attributes to the element.

Design

HeadingDescription
MarginEnter values including any valid CSS unit, ex: 4%.
Border SizeControls the border size. The top value also applies to the line that closes the tab row. In pixels or percentage, ex: 10px or 10%. Leave empty to use a default value of 1px.
Border StyleControls the border style.
Border ColorControls the border color.
Border RadiusIn pixels or percentage, ex: 10px or 10%.
Tab PaddingControls the padding of the tabs. In pixels or percentage, ex: 10px or 10%.
Tab Indicator Bar SizeControls the height of the bar on top of the tabs that indicates the active tab. Set to 0 to hide it. In pixels.
Tab Top Bar ColorControls the color of the top bar of the tab.
Tab Background ColorControls the background color of the inactive tab.
Tab Title TypographyControls the tab typography.
Tab Title ColorControls the text color of the inactive tab.
Tab Icon PositionChoose the position of the icon on the tab. Icons can be selected per tab in the general tab.
Tab Icon SizeSet the size of the icon. In pixels, ex: 13px.
Tab Icon ColorControls the color of the tab icon.
Content Items PaddingControls the padding of the items in the tab content. In pixels or percentage, ex: 10px or 10%.
Separator SizeControls the size of the separator between the items in the tab content. Set to 0 to hide it. In pixels.
Separator StyleControls the style of the separator.
Separator ColorControls the separator color.
Content Background ColorControls the background color of the tab content.
Image WidthSet the width of the featured image and the comment avatar, in pixels. The date block instead sizes to its text and padding.
Image/Date GapControls the space between the image or date block and the text. Enter value including any valid CSS unit, ex: 12px.
Date PaddingControls the padding of the date block, which sizes to its text. In pixels or percentage, ex: 10px or 10%.
Date Background ColorControls the background color of the date block.
Image/Date Border RadiusControls the border radius of the featured image, the date block and the comment avatar. In pixels or percentage, ex: 10px or 50%.
Date TypographyControls the date typography.
Date ColorControls the text color of the date.
Title TypographyControls the title typography.
Title ColorControls the color of the title.
Link Hover ColorControls the hover color of the title and content links.
Content Lines ClampHow many lines to clamp the content for post excerpt and comments.
Content TypographyControls the typography of the post excerpt and comment text.
Content ColorControls the text color of the post excerpt and comment text.

Extras

HeadingDescription
Conditional RenderingAdd conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results.
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.

In this article