> 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/integrations/themes/avada/displaying-custom-fields.md).

# Displaying custom fields in the Avada theme

Using [*Layouts*](/advanced-views/getting-started/first-layout.md) from Advanced Views, you can display any custom fields in [Avada](https://avada.com/). Smart templates [give you complete control](/advanced-views/getting-started/key-aspects.md) over the markup and display logic without extra hassle. 

{% hint style="success" %}
Advanced Views natively supports fields from multiple providers:

1. [WordPress fields](/advanced-views/fields/wordpress-fields.md) (like page title, excerpt, user name, etc)
2. [Advanced Custom Fields](/advanced-views/fields/meta-plugins/advanced-custom-fields.md) (any field type)
3. [MetaBox fields](/advanced-views/fields/meta-plugins/meta-box-fields.md) (any field type)
4. [Pods fields](/advanced-views/fields/meta-plugins/pods-fields.md) (any field type)
5. [WooCommerce Product fields](/advanced-views/fields/woo-product-fields.md) (like price, SKU, height, etc)

To display [other fields](/advanced-views/fields/other-fields.md) made by your theme or plugins, just [customize the default Layout template](/advanced-views/layouts/code-fields/custom-template.md).
{% endhint %}

## 1. How to display custom fields on a single page

{% hint style="info" %}
The steps below apply to the Avada builder. If you edit pages using the Gutenberg editor, refer to our [Gutenberg editor guide](/advanced-views/integrations/editors/gutenberg/displaying-custom-fields.md) instead.
{% endhint %}

In Advanced Views, *Layouts* are embedded using native WordPress shortcodes, which you can paste anywhere in the Avada builder: 

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2F32InbUTQqj5yqROr49yN%2Favada-backend-page-editor.png?alt=media&amp;token=163745dd-4244-478a-8fda-1ffc751e92fb" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FzR9bX9oTpEFVOMNBJ5Cx%2Favada-shortcode.png?alt=media&amp;token=284b8a2d-d97c-465e-8a83-3c1401f191e0" alt=""><figcaption></figcaption></figure>

1. [Create an *Advanced Layout*](/advanced-views/getting-started/first-layout.md) (within the Advanced Views plugin)
2. Add target fields in the *Fields* tab and save the *Layout*
3. Copy a [Layout embedding shortcode](/advanced-views/layouts/embedding-shortcode.md)
4. Edit the target page with the Avada builder
5. **Within Avada**: Click on the plus and add a [Code block](https://avada.com/documentation/code-block-element/)
6. **Within the Code block:** Paste the *Advanced Layout* embedding shortcode \
   (Inside the Live Builder, the shortcode preview may display a rendering error as it misses the context; you can safely ignore it)
7. Save the page and visit it to see the result

To change the default field appearance, open the created *Layout* and [customize the *Layout* template](/advanced-views/layouts/code-fields/custom-template.md).&#x20;

{% hint style="success" %}
By default, *Layout* displays chosen fields of the current page. You can display fields from other sources by tuning the [Layout shortcode arguments](/advanced-views/layouts/embedding-shortcode.md).&#x20;
{% endhint %}

## 2. How to display custom fields within a Library element

[Avada Library](https://avada.com/documentation/how-to-use-the-avada-builder-library/) allows you to create and reuse elements, such as a [Post Card](https://avada.com/documentation/how-to-use-post-cards-in-avada/). Using Advanced Views, you can not only display custom fields within any library element, but also add conditions, merge fields, and modify field value output.

### 2.1) Within a Post Card

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2Fw19UEyfu5iVW2lNBumzI%2Favada-elements.png?alt=media&amp;token=df5f344a-97d8-413f-bc7e-aa55e0f2b1a9" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2F890XlHN99TeFiTtHfwmV%2Favada-element.png?alt=media&amp;token=043f9ed1-1bc8-4c70-a3bf-9a9b396f64a6" alt=""><figcaption></figcaption></figure>

1. [Create an *Advanced Layout*](/advanced-views/getting-started/first-layout.md) (within the Advanced Views plugin)
2. Add target fields in the *Fields* tab and save the *Layout*
3. Copy a [Layout embedding shortcode](/advanced-views/layouts/embedding-shortcode.md)
4. Open the [Avada Library](https://avada.com/documentation/how-to-use-the-avada-builder-library/) (Dashboard → Avada → Library)
5. Edit the target [Post Card element](https://avada.com/documentation/how-to-use-post-cards-in-avada/) (or create a new one)
6. **Within Avada**: Click on the plus and add a [Code block](https://avada.com/documentation/code-block-element/)
7. **Within the Code block:** Paste the *Advanced Layout* embedding shortcode \
   (Inside the Live Builder, the shortcode preview may display a rendering error as it misses the context; you can safely ignore it)
8. Save the element and visit the page with the element to see the result

The **Post Card Library element** is rendered for each found post, while the ***Advanced Layout*** within displays the custom fields for that specific post.

{% hint style="warning" %}
If you’ve just created an element, such as a Post Card, don’t forget to add it to the target page.

For a Post Card, add the Post Card element to the page, select the target element name in its settings, and define the query details.
{% endhint %}

## 3. How to display custom fields in a Layout

### 3.1) Custom Post Type layout

If multiple pages or Custom Post Type (CPT) items share the same set of custom fields, you don't need to embed a *Layout* in each item individually. Instead, embed the *Layout* in the appropriate [Avada layout](https://avada.com/documentation/how-to-use-avada-layouts/) so it is rendered automatically for every corresponding item:

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FSyEvABxynBIIWgPV644o%2Favada-layouts.png?alt=media&amp;token=6459cf5e-5c0b-4a86-a8a1-c82dd9bbeaa0" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FPVN3STQrLhh3jE2JtogH%2Favada-backend-builder.png?alt=media&amp;token=988f6645-62d5-4f86-84ad-bfeae5df506c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2Fq0WTpD7UocDNaYAgZ3Wk%2Favada-shortcode.png?alt=media&amp;token=1afbd33b-4196-4e3d-a534-2d77164a0a5f" alt=""><figcaption></figcaption></figure>

1. [Create an *Advanced Layout*](/advanced-views/getting-started/first-layout.md) (within the Advanced Views plugin)
2. Add target fields in the *Fields* tab and save the *Layout*
3. Copy a [*Layout* embedding shortcode](/advanced-views/layouts/embedding-shortcode.md)
4. Open the [Avada Layouts](https://avada.com/documentation/how-to-use-avada-layouts/) (Dashboard → Avada → Layouts)
5. Choose any Template (or add a new one for CPT items)
6. **Within Avada**: Click the plus icon and add a [Code block](https://avada.com/documentation/code-block-element/)
7. **Within the Code block:** Paste the *Advanced Layout* embedding shortcode \
   (Inside Live Builder, the shortcode preview may display a rendering error as it misses the context; here you can safely ignore it)
8. Save the template and visit any CPT item to see the result

{% hint style="warning" %}
If you created a new template for CPT, make sure you have configured the **Display Conditions** so that the template is applied to all your CPT items.
{% endhint %}

When the template is rendered, the embedded *Layout* automatically displays the custom fields for the current page, post, or other content item using that template.

{% hint style="success" %}
*Layout* IDs are unique string identifiers, not WordPress post IDs. Unlike post IDs, they remain unchanged when *Layouts* are exported and imported, ensuring consistent references across different environments, such as staging and production.
{% endhint %}

### 3.2) Header/Footer layout

{% hint style="info" %}
A common use case is [displaying custom fields from an Options page](/advanced-views/field-sources/options-page.md) in the site footer.&#x20;
{% endhint %}

In Avada, Header and Footer sections are edited in the same way as any other layouts. The only difference in this integration is the shortcode modification: you need to add the `object-id` argument to load fields from the Options page:

1. [Create an *Advanced Layout*](/advanced-views/getting-started/first-layout.md) (within the Advanced Views plugin)
2. Add target fields in the *Fields* tab and save the *Layout*
3. Copy a [Layout embedding shortcode](/advanced-views/layouts/embedding-shortcode.md)
4. Modify [*Layout* shortcode](/advanced-views/layouts/embedding-shortcode.md): add `object-id="options"` argument (to [display fields from the Options page](/advanced-views/field-sources/options-page.md))
5. Open the [Avada Layouts](https://avada.com/documentation/how-to-use-avada-layouts/) (Dashboard → Avada → Layouts)
6. Edit the Header/Footer section
7. **Within Avada**: Click on the plus and add a [Code block](https://avada.com/documentation/code-block-element/)
8. **Within the Code block:** Paste the *Advanced Layout* embedding shortcode \
   (Inside Live builder, the shortcode preview may display a rendering error as it misses the context; here you can safely ignore it)
9. Save the section and visit any page to see the result

{% hint style="info" %}
Unlike page-specific custom fields, custom fields from an Options page are site-wide. As a result, the same values are displayed on every site page.
{% endhint %}