How To Use The Fancy List Widget By Atomic Addons

The Fancy List widget by Atomic Addons turns a plain list into a set of cards. Each row can carry a title, a sub title, a small image, an icon and a link, and the rows can be numbered. You can lay the rows out in columns or pick one of two animated hover styles. This guide covers adding the widget, building the list and arranging the rows.

Enable the Fancy List Widget

Fancy List is a Free widget and works with the free Atomic Addons plugin. A few of its layout settings carry a Pro badge and need Atomic Addons Pro (see Additional Options). Switch the widget on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Fancy List. You can also open the Content category.

4. 4

   Turn the Fancy List widget on.

5. 5

   Click Save Settings.

Add the Fancy List Widget

Fancy List works on any page:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Fancy List. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Fancy List

Open the widget and go to Content → Fancy List:

1. 1

   Layout Style: 01 (the default) shows the rows in a plain grid. 02 stacks the rows on top of each other in 3D, and they fan out into a list when a visitor points at the widget. 03 blurs and fades every other row while the visitor points at one, and lifts that row slightly. This setting has a Pro badge and needs Atomic Addons Pro; the free plugin uses 01.

2. 2

   List items: One entry per row. Three rows are there to start with, “List Item #1” to “List Item #3”. Click a row to open it, use the copy icon to duplicate it and drag rows to change the order.

Each row has these fields:

• Title — the main text of the row. It is “List Item” by default.
• Sub Title — a second, smaller line under the title. Leave it empty to show the title alone.
• Icon — an icon at the end of the row, from the icon library or an uploaded SVG.
• Image — a small square thumbnail (40px by default) in front of the title. WordPress serves the Medium size, and the title is used as the image's alt text.
• Link — makes the whole row a link. Use the gear icon for Open in new window, Add nofollow and custom attributes.

Title, Sub Title, Image and Link accept Dynamic Tags, so a row can show a value from the current post or the site. Fields you leave empty are simply left out of the row.

Additional Options

Content → Additional Options arranges the rows and the parts inside them. Settings marked with a Pro badge need Atomic Addons Pro.

1. 1

   Columns: 1 to 6 columns, 1 by default on every screen. Use the device icon to set other numbers for tablets and phones. Shown only with Layout Style 01. Pro.

2. 2

   Grid Gap: The space between the rows and columns, 0 to 50px.

3. 3

   Show Number Count: Adds a round counter (1, 2, 3 …) at the start of each row. Off by default. Pro.

4. 4

   Title HTML Tag: The title's markup: H1 to H6, div, span or p. H4 by default.

5. 5

   Icon Position: Where the icon sits in the row. By default, and with Right, it is at the end. Left reverses the row so the icon comes first; Top and Bottom stack the parts in a column with the icon above or below them. Left and Top reverse the whole order, so the counter and image move to the other end too. Can be set per screen size. Pro.

6. 6

   Content Position: Left (the default) or Right. Right mirrors each row, so it reads from the right edge. Pro.

7. 7

   Content Vertical Align: Top, center or bottom alignment of the parts in a row, for rows whose parts have different heights. Rows are centered when you leave it unset. Can be set per screen size.

8. 8

   Alignment: Left, center or right alignment of the text, per screen size.

Style the Fancy List

Everything below is on the Style tab:

• List Item — the row card in Normal and Hover states: background, border, border radius, padding, box shadow and height, plus Gap, the space between the counter, image, text and icon inside a row.
• Number Count — shown while Show Number Count is on: the counter's color, background, border, radius, padding and margin, with a Hover state.
• Title / Subtitle — the color and typography of each, the space around them, and their colors on hover.
• Icon — the icon's color, background, border, radius, padding, margin and shadow, in Normal and Hover states.
• Image — the thumbnail's border, radius, margin and Size.