[Elementor Pro] Custom listing cards
Note: the following functionalities are only available when using Elementor Pro.
Elementor Pro comes with a theme builder that allows you to design your entire site in a visual way. Together with the Posterno elementor integration you now have access to new customization capabilities. One of them is the ability to create complete custom cards for your listings.
The default list listing card of Posterno looks like this:
In some cases however you might want to display custom fields and change the look of the card. You can do this by creating a custom card!
To create a custom card, navigate to Templates → Theme builder and press the "add new" button. From the popup, select "Section" then select "Listing card".
You'll then be redirected to the editor page.
Setup the editor preview
When in the editor, click on the settings icon in the bottom left corner of the screen, then click on "preview settings", change the setting "Preview Dynamic Content as" to "listing" then search for a specific listing on your site.
This will change from where Elementor is going to retrieve data for the widgets.
You can now start adding widgets to create your custom card.
Make sure you use dynamic tags when you wish to display data that belongs to listings.
For example, if you wish to display the title of the listing within the card, you could use the "heading" widget and then use "Post title" as dynamic tag for the "title" parameter, like in the example below:
You can also use listings custom fields within cards, please refer here for more information: https://docs.posterno.com/article/689-elementor-pro-listings-dynamic-tags
Assign your custom card to a listing type
Once you're done working on your custom card, publish it and then you need to assign it to a listing type.
To assign a card to a listing type, navigate to "Settings → Posterno → Listings" and locate the "cards layout" section. Here you'll see a list of all listings types created onto your site with a dropdown from where you can select your custom cards.
By default Posterno provides 2 layouts for displaying listings on the frontend. A list layout and a grid layout. Hence why you'll see a setting for each type of layout per listing type.
Select your custom card and then save your settings.