Using the Agend Info card

The Agend Info Card is an Elementor element/widget that has a lot of flexibility in what it displays; how it displays and where it displays.

A typical use case for an info card is to show static data in a structured way. This could be used in the form of an image followed by some introductory text and then a call-to-action (CTA). Any number of these can be created and grouped together and the layout ensures they are all the same width, height and controls other uniform elements for consistency and visual appeal. An example can be seen below:

Example of Agend Info Cards

If you’re looking for a dynamic way of showing cards, check out our documentation for using “Posts” here.

Adding an Agend Info Card to your page #

First off, edit your page in Elementor.

Add a new section via the “+” symbol and choose the type of structure (let’s assume a full-width structure).

Adding a new section

Under Elements, do a search for “agend”. This will bring back all the Agend-specific widgets you have access to:

Select the “Agend Info Card” and drag and drop that onto the page.

Configuring the Info Card #

There are a number of parameters the info card can have. They include:

  • a title
  • the content that sits in the main text area
  • the hero image for the card
  • the URL for where you want the CTA to take the user when clicked
  • the URL label is the CTA wording (eg “Nominate” in the example shown)
  • the Badge can have an overlay added to the image (eg “Members Only”)
  • the Card Height is utilised to either expand to whatever content is shown or if default is shown, it will apply a “read more” link

Tip: Duplicate the card for quick content entry #

By right clicking on the Info Card, choose “Copy” as seen below. You can then paste that into the blank spot next to it to replicate the card and you can then simply edit the specifics (content copy, image, link) to quickly create new and consistent copy:

Updated on 27/03/2024

Powered by BetterDocs