---
description: Read more about the plugin and the user interface.
---

# Plugin Interface

## Views

Add a View and select target fields or import a pre-built component.

* **Add New** - On the Views list, used to add a new _View_.
* **Search View** - Search in your list of _Views_ by Name, Description, Labels or View-id.
* **Bulk validation** - Used to validate the Custom Template fields of all existing items and displays items that have failed validation.
* **Pre-built Components** - Import commonly used elements with Meta fields and responsive CSS rules included.

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FBbfU4xEgRtd6LeFlN9ps%2Fviews%20add%20new.jpg?alt=media&#x26;token=9431f653-2d70-49c1-97d0-3650ff6bdfd9" alt=""><figcaption></figcaption></figure>

**Views list Table Header Labels**

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FiRi72ZbeNKUcwgKshyBE%2Fviews%20header.jpg?alt=media&#x26;token=f487b48f-603e-46bd-9bac-2438c86a2c6a" alt=""><figcaption></figcaption></figure>

* **Title** - Name of your _View._
* **Description** - The description of your _View_ for admin or editor role users.
* **Shortcode** - The primary shortcode used to display your _View_.
* **Assigned Group** - The fields that have been assigned in your _View_.
* **Assigned View** - The _View_ that is assigned within a field.
* **Assigned to Card** - The Card names you've assigned the _View_ to.
* **Last modified** - The date the _View_ was last modified.

#### When hovering on the Views list Rows

* **Edit** - To edit your _View_.
* **Clone** - To clone your _View_.
* **Delete** - To delete your _View_.

### Tabs on edit screen

### **Fields tab**

Assign Fields to your _View_.

#### **Parent group**

Choose a parent group. If you require fields from various groups, keep this field blank.

#### Fields

* **Add Field** - Used for adding field rows to your _View_.

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FlHGq2FHAVrYFdam7Ivz9%2Fassign%20fields.jpg?alt=media&#x26;token=0ca7f578-6eaa-42d3-8eef-5eb77db6b984" alt=""><figcaption></figcaption></figure>

#### **Field**

* **Group** - Select a target group.
* Make your selection from the following field Groups:
  * [**Post & Product fields (WordPress, WooCommerce)**](../../display-content/wordpress/post) - For selecting built-in post and Woo product fields.
  * [**Taxonomy terms (WordPress)**](../../display-content/wordpress/taxonomy-terms) - For selecting categories or custom taxonomy fields.
  * [**Term (WordPress)**](../../display-content/wordpress/taxonomy-terms) - For selecting taxonomy term fields.
  * [**User (WordPress)**](../../display-content/wordpress/user) - For selecting built-in user fields.
  * [**Comment (WordPress)**](../../display-content/wordpress/comments) - For selecting comment fields and comment author fields.
  * [**Comment items (WordPress)**](../../display-content/wordpress/comments) - For selecting the list of comments.
  * [**Product specific fields (WooCommerce)**](../../display-content/woocommerce-product) - For selecting WooCommerce product related fields.
* **Field** - Select a target field. Note: only fields with [supported data vendors](../supported-data-vendors) are listed.
  * **Label** - If filled will be added to the markup as a prefix label of the field above.
  * **Link Label** - You can set the link label here. Leave empty to use the default.
  * **Image Size** - Controls the size of the image, it changes the image source.

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2Fo90DpXEVfN24eDj7Qt0p%2Fassign%20field.png?alt=media&#x26;token=0775b176-b101-48e2-b640-7a31eacf3201" alt=""><figcaption></figcaption></figure>

* **Gallery Layout** (For Gallery field type) - Select the gallery layout type. If Masonry is chosen see **Field Options** for more settings.
  * **None** - Displays a grid of images from the field.
  * **Classic Masonry** - Displays images using the Macy v2 library.
  * **Flat Masonry** - Displays images using the Advanced Views library.
  * **Inline-Gallery** - Displays images using the Lightgallery v2 library.
* **Enable Lightbox** (For Image field type -Pro Only) - If enabled, image(s) will include a zoom icon on hover, and when clicked, a popup with a larger image will appear.
  * LightGallery v2 - Adds a Lightbox when images are clicked. See the JS Code field on the CSS & JS tab to customize settings.
  * Simple - Adds a Lightbox when images are clicked. This option has no settings.
* Enable Slider
  * Splide v4 - Displays images from the gallery field in a slider.

**View** - (For Relationship and Link field types) If filled then data within this field will be displayed using the selected _View_. When empty it will show the object title with link or attachment title with link.

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2F6ClxL0QCZOznhsssKqHO%2Fpost-object-view-stub.png?alt=media&#x26;token=40d167f7-0c1e-4a23-af45-601b17655e6d" alt=""><figcaption></figcaption></figure>

#### **Field Options**

**See all** [**field options here**](plugin-interface/field-options)**.**

### **Template tab**

* **Default Template** - Output preview of the generated template. Important! Publish or Update your view to see the latest markup.
* **Custom Template** - Write your own template with full control over the HTML markup. You can copy the Template Preview field output and make your changes.\
  Powerful [Twig features](../../templates/template-engines/twig) and/or [Blade features](../../templates/template-engines/blade) (depending on the Template Engine you chose), including [our functions](../../../templates/template-engines/twig#our-functions), are available for you. **Note:** WordPress shortcodes inside the template are only supported in the Pro version.\
  Press **Ctrl** (Cmd) **+ Alt + L** to format the code. Press **Ctrl + F** to search (or replace).

{% hint style="info" %}
Important! The Custom Template field will not be updated automatically when you add or remove fields, so you have to update this field manually to reflect the new changes (you can refer to the Default Template field for assistance).
{% endhint %}

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FUXiq4d6AUpmnBypjk9Uv%2Fviews%20template.jpg?alt=media&#x26;token=781cc497-04f0-4e74-ac8a-a862514c1c15" alt=""><figcaption></figcaption></figure>

* **BEM Unique Name** - Define a unique [BEM name](https://getbem.com/introduction/) for the element that will be used in the markup, or leave it empty to use the default ('acf-view').
* **CSS classes** - Add a class name without a dot (e.g. “class-name”) or multiple classes with single space as a delimiter (e.g. “class-name1 class-name2”).\
  These classes are added to the wrapping HTML element. [Learn more about CSS Classes](https://www.w3schools.com/cssref/sel_class.asp).
* **Add classification classes to the markup** - By default, the field name is added as a prefix to all inner classes. For example, the image within the 'avatar' field will have the '\_\_avatar-image' class.\
  Enabling this setting adds the generic class as well, such as '\_\_image'. This feature can be useful if you want to apply styles based on field types.
* **Do not skip unused wrappers** - By default, empty wrappers in the markup are skipped to optimize the output. For example, the '\_\_row' wrapper will be skipped if there is no field label.\
  Enable this feature if you need all the wrappers in the output.

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FpTwwdQMEC42sfth6tQDT%2Ftemplate%20subs.jpg?alt=media&#x26;token=ab5a9de3-b6df-4a01-bdc4-39cfa44f4f73" alt=""><figcaption></figcaption></figure>

* **Custom Data (Pro)** - Using the [Custom View Data](../../display-content/custom-data-pro) PHP snippet you can add custom variables to the template and define the ajax handler. \
  Press Ctrl (Cmd) + Alt + L to format the code. Press Ctrl + F to search (or replace).

### **CSS & JS tab**

* **CSS Code** - Define your [CSS style rules](../../../templates/css-and-js#id-3.1-selectors) here or within your theme. Rules defined here will be added within `<style></style>` tags ONLY to pages that have this view.\
  Press Ctrl (Cmd) + Alt + L to format the code.\
  [Magic shortcuts](../../../templates/css-and-js#id-3.1-selectors) are available (and will use the BEM Unique Name if defined) :\
  '`#view`' will be replaced with '`.acf-view--id--X`' (or '`.bem-name`').\
  '`#view__`' will be replaced with '`.acf-view--id--X .acf-view__`' (or '`.bem-name .bem-name__`'). It means you can use '`#view__row`' and it'll be replaced with '`.bem-name .bem-name__row`'.\
  '`#__`' will be replaced with '`.acf-view__`' (or '`.bem-name__`')
* **JS Code** - Add your custom Javascript to your View.\
  By default, the View is a [web component](https://docs.acfviews.com/templates/css-and-js#web-components-for-js-code), so this code will be executed once for every instance, and 'this', that refers to the current instance, is available.\
  If the Web Component Type is set to none, the js code here is plain, and can be used for any goals, including [WP Interactivity API](https://docs.acfviews.com/templates/wordpress-interactivity-api).\
  The code snippet will be added within \<script type='module'>\</script> tags ONLY to pages that have this View.\
  Press Ctrl (Cmd) + Alt + L to format the code. Press Ctrl + F to search (or replace).\
  Note: With some fields like the Gallery field type you'll have settings added that you can customize.

### **Options tab**

* **Description** - Add a short description for your _Views’_ purpose. Note: This description is only seen on the admin Advanced Views list.
* **Register Gutenberg Block** (Pro only and requires ACF Pro) - If block vendor is chosen, a separate Gutenberg block for this View will be available. [Read more](https://docs.acfviews.com/display-content/custom-gutenberg-blocks-pro)

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2Fhcr1MGVnIZNjolKALwLS%2Fregister-gutenberg-block.jpg?alt=media&#x26;token=60ec866d-92a9-4e6b-9ff5-6f61cddc72df" alt=""><figcaption></figcaption></figure>

* **Template Engine -** Choose one of the [Supported Template engines](../../templates/template-engines), which will be used for your View.
* **Web Component Type** - By default, every Card is a [web component](https://docs.acfviews.com/templates/css-and-js#web-components-for-js-code), which allows you to work easily with the element in the JS code field. Choose between Classic (no CSS isolation), Declarative Shadow DOM (CSS isolated, server-side), JS Shadow DOM (CSS isolated, client-side) and None.\
  Set it to 'None' if you're going to use the [WP Interactivity API](https://docs.acfviews.com/templates/wordpress-interactivity-api).
* **Classes generation** - Controls classes generation in the Default Template. By default the BEM style is used.
* **Render template when it's empty** - By default, if all the selected fields are empty, the Twig template won't be rendered. Enable this option if you have specific logic inside the template and you want to render it even when all the fields are empty.
* **Use the Post ID as the View ID in the markup** - Enable this option if you have external CSS selectors that rely on outdated digital IDs. Note: For backward compatibility purposes only.&#x20;

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2F2gsqIpHz0cVilgTESxFD%2Fcard%20options%20tab.jpg?alt=media&#x26;token=a4192331-3076-4319-8df9-8250f4940d27" alt=""><figcaption></figcaption></figure>

### **Preview**

* **Preview Object** - Select a data object (from which field values will be used) and update the _View_. After that, reload the page to see the markup in the Preview.
* **Preview** - Here you can see the preview of the view and play with CSS rules. [Read more](https://docs.acfviews.com/guides/acf-views/features/preview)\
  Important! Update the View after changes and reload the page to see the latest markup here.\
  Your changes to the preview won't be applied to the view automatically, if you want to keep them copy amended CSS to the 'CSS Code' field and press the 'Update' button.\
  Note: styles from your front page are included in the preview (some differences may appear)

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2Fz88hImRohocwtMvigRsT%2Fpreview.png?alt=media&#x26;token=5aefa135-682c-4e14-8977-fc60861afe26" alt=""><figcaption></figcaption></figure>

### **Mount Points (Pro)**

* **Mount Points** - 'Mount' this View/Card to a location that doesn't support shortcodes. Mounting uses 'the\_content' theme hook.
* [**Add Mount Point**](../../display-content/mount-points-pro) - Used for adding a Mount Point.

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FZVvXUYbbt48cOxLF91Qi%2Fmount%20point.jpg?alt=media&#x26;token=a837283d-44e9-43a4-a488-e1ec59fe67e7" alt=""><figcaption></figcaption></figure>

## Cards

Add a Card and select a set of posts or import a pre-built component.\
[Attach the Card](https://docs.acfviews.com/getting-started/introduction/key-aspects#id-2.-integration-approaches) to the target place, for example using [the shortcode](https://docs.acfviews.com/shortcode-attributes/card-shortcode), to display queried items with their fields. (The assigned View determines which fields are displayed)

* **Add New** - On the Cards list, used to add a new Card.
* **Search Card** - Search in your list of Cards by Name, Description, Labels or View-id.
* **Bulk validation** - Used to validate the Custom Template field of all existing items and displays items that have failed validation.
* **Pre-built Components** - Install commonly used elements with Meta fields and responsive CSS rules included.

#### Cards list Table Header Labels

* **Title** - Name of your View
* **Description** - The description of your _View_ for admin or editor role users.
* **Shortcode** - The primary shortcode used to display your _View_.
* **Related View** - The _View_ that has been assigned to your _Card_.
* **Mount Points** - The Mount Points added to your _Card_.
* **Last modified** - The date the _Card_ was last modified.

#### When hovering on Cards list Rows

* **Edit** - To edit your Card.
* **Clone** - To clone your Card.
* **Delete** - To delete your Card.

### Tabs on edit screen

### **General tab**

* **View -** Assigned View is used to display every post from the query results.
* **Source** - 'Posts Query (WP\_query)' will get posts based on the defined query, while 'Page Context (archive pages)' will get posts from where the Card is inserted (e.g. archive, author or category).
* **Post Type** - Filter by post type. You can select multiple items.
* **Post Status** - Filter by post status. You can select multiple items.
* **Maximum number of posts** - Use '-1' to set 'unlimited'.
* **Sort by** - Select which field results should be sorted by. ‘Default’ keeps the default order (latest first, sticky options may affect it).
* **Sort order** - Defines the sorting order of posts.

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2F2DwU9dFThIu8iQ3Ib3Dq%2Fcard%20tabs.jpg?alt=media&#x26;token=cf1cf95c-bb7f-4b9e-981d-8eb00a5b0d4b" alt=""><figcaption></figcaption></figure>

### **Advanced tab**

* **Description** - Add a short description for your views’ purpose. Only seen on the admin Cards list.
* **No Posts Found Message** - This message will be displayed in case there are no posts found. Leave empty to not show a message.
* **Pool of posts** - Here you can manually assign specific posts. If set then the query will be limited to posts ONLY from this pool. It means the result will consist ONLY from posts from this pool, which also fit all other filters. If you want to have the same order of results like here, please choose the 'Pool of posts' option in the Sort tab.
* **Exclude posts** - Here you can manually exclude specific posts from the query. It means the query will ignore posts from this list, even if they fit the filters. Warning : this field can't be used together with 'Pool of posts'.
* **Ignore Sticky Posts** - If unchecked then sticky posts will be at the top of results. [Learn more about Sticky Posts](https://wordpress.org/support/article/sticky-posts/).
* **Template Engine** - Choose one of the [supported template engines](../../templates/template-engines), which will be used for this Card.
* **Web Component Type** - By default, every Card is a [web component](https://docs.acfviews.com/templates/css-and-js#web-components-for-js-code), which allows you to work easily with the element in the JS code field.\
  Set it to 'None' if you're going to use the [WP Interactivity API](https://docs.acfviews.com/templates/wordpress-interactivity-api).
* **Classes generation** - Controls classes generation in the Default Template.
* **Use the Post ID as the Card ID in the markup** - Note: For backward compatibility purposes only. Enable this option if you have external CSS selectors that rely on outdated digital IDs.
* **Query Preview** - For debug purposes. Here you can see the query that will be executed to get posts for this card. Important! Publish or Update your card and reload the page to see the latest query.
* **Custom Data (Pro)** - Using the [Custom Card Data](../../query-content/custom-data-pro) PHP snippet you can add extra variables to the template, extra arguments to the [WP\_Query instance](https://developer.wordpress.org/reference/classes/wp_query/#parameters), and define the ajax handler.\
  Press Ctrl (Cmd) + Alt + L to format the code. Press Ctrl + F to search (or replace).

### **Template tab**

* **Default Template** - Output preview of the generated [Twig template](https://docs.acfviews.com/guides/twig-templates). Important! Publish or Update your view to see the latest markup.
* **Custom Template** - Write your own template with full control over the HTML markup.\
  You can copy the Template Preview field output and make your changes, such as adding an extra heading.\
  Powerful [Twig features](https://docs.acfviews.com/templates/twig-templates) or [Blade features](../../templates/template-engines/blade), including [our functions](https://docs.acfviews.com/templates/twig-templates#our-functions), are available for you.\
  Press Ctrl (Cmd) + Alt + L to format the code. Press Ctrl + F to search (or replace).

{% hint style="danger" %}
Important! Make sure you retain all the default classes; otherwise, **Pagination** won't work.
{% endhint %}

* **BEM Unique Name** - Define a unique [BEM name](https://getbem.com/introduction/) for the element that will be used in the markup, or leave it empty to use the default ('acf-card').
* **CSS classes** - Add a class name without a dot (e.g. 'class-name') or multiple classes with single space as a delimiter (e.g. 'class-name1 class-name2'). These classes are added to the wrapping HTML element. [Learn more about CSS Classes](https://www.w3schools.com/cssref/sel_class.asp)

### **CSS & JS**&#x20;

*   **CSS Code** - Define your CSS style rules. This will be added within tags ONLY to pages that have this card.

    Press Ctrl (Cmd) + Alt + L to format the code. Press Ctrl + F to search (or replace).

    Don't style view fields here, View has its own CSS field for this goal.

    [Magic shortcuts](../../../templates/css-and-js#id-3.1-selectors) are available (and will use the BEM Unique Name if defined) :

    '#card' will be replaced with '.acf-card--id--X' (or '.bem-name').

    '#card\_\_' will be replaced with '.acf-card--id--X .acf-card\_\_' (or '.bem-name .bem-name\_\_').

    '#**' will be replaced with '.acf-card**' (or '.bem-name\_\_').

    To match items wrapper you should use '#card\_\_items' selector, to match single item you should use '#card .acf-view' selector.
* **JS Code** - Add your custom Javascript to your Card.\
  By default, the Card is a [web component](https://docs.acfviews.com/templates/css-and-js#web-components-for-js-code), so this code will be executed once for every instance, and 'this', that refers to the current instance, is available.\
  If the Web Component Type is set to none, the js code here is plain, and can be used for any goals, including [WP Interactivity API](https://docs.acfviews.com/templates/wordpress-interactivity-api).\
  The code snippet will be added within \<script type='module'>\</script> tags ONLY to pages that have this Card.\
  Press Ctrl (Cmd) + Alt + L to format the code. Press Ctrl + F to search (or replace).

### **Layout** tab

* **Enable Slider (Pro) -** Select the slider library to enable. Customize the slider after saving, by editing the JS Code in the CSS & JS tab.
* **Enable Layout rules** - When enabled CSS layout styles are added to CSS Code in the Advanced tab. These styles are automatically updated each time.\
  Tip: If you’d like to edit the Layout CSS manually, simply disable this here. Disabling this does not remove the previously added CSS Code.
* **Layout Rules** - The rules control layout of card items.\
  Note: These rules are inherited from small to large. For example: If you’ve set up 'Mobile' and 'Desktop' screen rules, then 'Tablet' will have the same rules as 'Mobile' and 'Large Desktop' will have the same rules as 'Desktop'.
  * **Screen Size** - Controls to which screen size the rule applies.
  * **Layout** - Change the type of layout.
  * **Horizontal gap** - Horizontal gap between items. Format: '10px'. Possible units are 'px', '%', 'em/rem'.
  * **Amount of Columns** (For Grid Layout) - Define how many columns each row should have. By default, columns have equal width.
  * **Vertical gap** - Vertical gap between items. Format: '10px'. Possible units are 'px', '%', 'em/rem'.

### **Meta Filters (Pro) tab**

* **Rules** - Rules for the meta query. Multiple rules are supported. [Read more](https://docs.acfviews.com/guides/acf-cards/features/meta-filter-pro)\
  If you want to see the query that was created by your input, update the Card and reload the page. After that, have a look at the **Query Preview** field in the **Advanced** tab.
* **Add Rule** - For adding Rule rows.&#x20;

{% hint style="info" %}
Adding multiple Rules will add a Relation to join the rules within the meta query.
{% endhint %}

* **Add Field** - For adding meta fields to filter by.

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FHEISouVlkkicbq9NIyM9%2Fmeta-filter-rules.jpg?alt=media&#x26;token=2b808adc-92bd-4009-ab73-05150d945788" alt=""><figcaption></figcaption></figure>

**Fields** - Fields for the meta rule. Multiple fields are supported.

* Group - Select a target group.
* **Field** - Select a target field. Note : only fields with [supported field types](../supported-data-vendors) are listed here.
* **Comparison** - Controls how field value will be compared.
* **Value** - Value that will be compared. \
  Can be empty, in case you want to compare with empty string. \
  Use **$post$** to pick up the actual ID or **$post$.field-name** to pick up field value dynamically.\
  Use **$now$** to pick up the current datetime dynamically.\
  Use **$query$.my-field** to pick up the query value (from $\_GET) dynamically
* **Relation** - Controls how meta rules will be joined within the meta query.

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FNJ7hGh4l2m3L6nGagVeT%2Frelation.jpg?alt=media&#x26;token=40acb46a-4b62-4901-9f55-c0963e891f78" alt=""><figcaption></figcaption></figure>

### **Taxonomy Filters (Pro) tab**

* **Rules** - Rules for the taxonomy query. Multiple rules are supported. [Read more](https://docs.acfviews.com/guides/acf-cards/features/taxonomy-filter-pro).\
  If you want to see the query that was created by your input, update the Card and reload the page. After have a look at the 'Query Preview' field in the 'Advanced' tab
* **Add Rule** - For adding Rule rows.&#x20;
* **Taxonomies** - Taxonomies for the taxonomy rule. Multiple taxonomies are supported.
* **Add Taxonomy** - For adding Taxonomies to filter by.
* **Taxonomy** - Select a target taxonomy.
* **Comparison** - Controls how taxonomy will be compared.
* **Static Term** - Static term that will be compared.
* **Dynamic Term** - Dynamic term that will be compared.

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FulPIjnnXRULp6nblbYer%2Ftax-rules.jpg?alt=media&#x26;token=111e442e-000e-4e16-8081-03a5ca8d2cf9" alt=""><figcaption></figcaption></figure>

### **Pagination (Pro) tab**

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FaNdwA3EztYTzO16cm5gO%2Fpagination.jpg?alt=media&#x26;token=3b6f15f2-e7d6-4a14-a73c-f777cfece7f9" alt=""><figcaption></figcaption></figure>

* **With Pagination** - If enabled then the selected pagination type is applied and the 'Posts per page' rule takes effect.
* **Pagination Type** - Defines a way in which user can load more. For 'Load More Button' and 'Page Numbers' cases a special markup will be added to the card automatically, you can style it (using the 'CSS Code' field in the 'Advanced' tab).
* **'Load More' button** label - Define a Custom label for the load more button.
* **Posts Per Page** - Controls how many posts will be displayed initially and how many posts will be appended every time when user triggers 'Load More'. Total amount of posts is limited by the 'Maximum number of posts' field in the 'General' tab.

### **Preview tab**

See an output preview of your _Card_, where you can test some CSS styles.\
Styles from your front page are included in the preview (some differences may appear).\
Note: Press 'Update' if you have changed Custom Markup (in the Template tab) to see the latest preview.

{% hint style="warning" %}
Important! Don't style your _View_ here, instead use the CSS Code field on the CSS & JS tab in your _View._
{% endhint %}

After testing: Remember to Copy and paste the _Card_ styles to the **CSS Code** field.

### **Mount Points (Pro) tab**

'Mount' this View/Card to a location that doesn't support shortcodes. Mounting uses 'the\_content' theme hook.

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2F4qHpBxOfjTNwBpmv2QZT%2Fmount-point-add.jpg?alt=media&#x26;token=3a451d14-09dd-49f1-a303-644c97d37472" alt=""><figcaption></figcaption></figure>

* **Specific posts** - Limit the mount point to only specific posts. Leave empty and use the 'Post Types' field to limit to specific post types.
* **Post Types** - Specific post types, to all items of which the shortcode should be mounted. Leave empty if you want to add to specific items only and use the 'Specific posts' field.
* **Mount Point** - To which unique Word, String or HTML piece to Mount to. Together with the 'Mount Position' controls the placement. If left empty all the content will be used as a mount point.
* **Mount Position** - Where the shortcode should be mounted.
* **Shortcode Arguments** - Add arguments to the shortcode, e.g. 'user-with-roles'. Only the view/card 'id' argument is filled by default.
