> For the complete documentation index, see [llms.txt](https://wplake.gitbook.io/advanced-views/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wplake.gitbook.io/advanced-views/layouts/ui-description.md).

# Layout UI description

This page describes all the main Layout UI elements.

## 1. List screen

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

* **Add New** - On the *Layouts* list, to add a new *Layout*.
* **Search Layouts** - Search in your list of *Layouts* by Name, Description, Labels or 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.

***Layouts***** list Table Header Labels**

* **Title** - Name of the *Layout.*
* **Description** - The description of your *Layout* for admin or editor role users.
* **Shortcode** - The primary shortcode used to display your *Layout*.
* **Assigned Field Group** - The field groups of the fields assigned in your *Layout*.
* **Related Layout** - The *Layout* that selected to display items by.
* **Assigned to Post Selection** - The Post Selection names you've assigned the *Layout* to.
* **Last modified** - The date the *Layout* was last modified.

## 2. Create & Edit screen

### **2.1) Fields tab**

Assign Fields to your *Layout*.

{% hint style="info" %}
When hovering on the Layouts list Rows:<br>

* **Edit** - To edit your *Layout*.
* **Clone** - To clone your *Layout*.
* **Delete** - To delete your *Layout*.
  {% endhint %}

#### **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 *Layout*.

#### **Field**

* **Group** - Select a Field group.
* Make your selection from the following field Groups:
  * [**Post & Product fields (WordPress, WooCommerce)**](broken://pages/WEFn8dE5Lv5bN8UKTVOZ) - For selecting built-in post and Woo product fields.
  * [**Taxonomy terms (WordPress)**](broken://pages/qJz7w2i5ACULs9NVhwP9) - For selecting categories or custom taxonomy fields.
  * [**Term (WordPress)**](broken://pages/qJz7w2i5ACULs9NVhwP9) - For selecting taxonomy term fields.
  * [**User (WordPress)**](broken://pages/UGgMYsQh4EF0dJ2Yieip) - For selecting built-in user fields.
  * [**Comment & Reviews (WordPress, WooCommerce)**](broken://pages/4moJfeoCR2zr6swoxwOi) - For selecting comment fields and comment author fields.
  * [**Comment & Review fields (WordPress, WooCommerce)**](broken://pages/4moJfeoCR2zr6swoxwOi) - For selecting the list of comments.
  * Menu (WordPress - For selecting menus.
  * Menu item (WordPress) - For selecting items from a Menu.
  * [**Product specific fields (WooCommerce)**](broken://pages/EVdKS1q6JF6wLNCDCcqE) - For selecting WooCommerce product related fields.
* **Field** - Select a target field. Note: only fields with [supported data vendors](broken://pages/aREBNNWXG7YBqpZx5gZI) 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.
* **Gallery Layout (Pro)** (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.

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

#### **Field Options**

* **Default Value** - Set up a default value, only used when the field value is empty.
* **Show When Empty** - By default, empty fields are hidden. Turn on to show even when the field has no value.
* **Open link in a new tab** (For Link field types) - By default, this setting is inherited from ACF, if available. Turn it on to always open link in a new tab.
* **Values delimiter** - If multiple values are chosen, you can define their delimiter here. HTML is supported.

### **2.2) Template tab**

* **Default Template** - Output preview of the generated template. Important! Publish or Update your *Layout* to see the latest markup.
* **Custom Template** - Copy the Default template into Custom Template, then Modify it or Write your own template with full control over the HTML markup. \
  Powerful [Twig features](/advanced-views/features/smart-templates/twig-templates.md) and/or [Blade features](/advanced-views/features/smart-templates/blade-templates.md) (depending on the Template Engine you chose), including [our functions](/advanced-views/features/smart-templates/twig-templates.md#our-functions), are available for you. **Note:** WordPress shortcodes inside the template are only supported in Advanced Views Pro.\
  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 %}

* **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.
* **Custom Data (Pro)** - Using the [Custom View Data](/advanced-views/layouts/code-fields/layout-controller.md) 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).

### **2.3) CSS & JS tab**

* **CSS Code** - Define your [CSS style rules](https://wplake.gitbook.io/advanced-views/layouts/pages/k0TXqgUUlLyFPpZP1roJ#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](https://wplake.gitbook.io/advanced-views/layouts/pages/k0TXqgUUlLyFPpZP1roJ#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 custom Javascript to the *Layout*.\
  By default, the *Layout* 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 *Layout*.\
  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.

### **2.4) Options tab**

* **Description** - Add a short description for your *Layouts’* purpose. Note: This description is only seen on the admin *Layouts* list.
* **Register Gutenberg Block** (Pro only and requires ACF Pro) - If block vendor is chosen, a separate Gutenberg block for this *Layout* will be available. [Read more](https://docs.acfviews.com/display-content/custom-gutenberg-blocks-pro)
* **Template Engine -** Choose one of the [Supported Template engines](/advanced-views/features/smart-templates.md), which will be used for your *Layout*.
* **Web Component Type** - By default, every *Post Selection* 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 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 Layout 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;

### **2.5) Preview tab**

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

### **2.6) Mount Points**

* **Mount Points** - 'Mount' this *Layout/Post Selection* to a location that doesn't support shortcodes. Mounting uses 'the\_content' theme hook.
* [**Add Mount Point**](/advanced-views/layouts/features/mount-points.md) - Used for adding a Mount Point.