How to Link a Dynamic Field Value to a URL Anchor

From this tutorial, you will find out how to link Dynamic Field to the page section with the JetEngine plugin.

Before you start, check the tutorial requirements:

Elementor (Free version) or Block editor (Gutenberg)
JetEngine plugin installed and activated

Let’s imagine that you run a property listing website, and the properties are stored as a Custom Post Type. The “Properties” Custom Post Type contains a “Textarea” meta field for the property address.

storing property address in text meta field of jetengine

The goal is to display the address on a Single Page of the property and link this address to an interactive map below, enabling users to scroll to the map by clicking the address.

Add a Link to the Dynamic Field Widget in Elementor

Give the section a CSS ID

Open the Single Post Template in the Elementor editor.

Find the target section or container and enter the Advanced settings. In the CSS ID field, enter a unique ID that will be used as an anchor link.

Copy this ID.

Add the Dynamic Field widget

Add the Dynamic Field widget to the page where the dynamic data from the meta field should be displayed. In our case, we place it near the post title on top of the template.

Select the “Meta Data” Source and find the needed Meta Field option from the drop-down list below.

displaying meta field value with dynamic field widget

Configure the Customize field output setting

Scroll down the settings of the Dynamic Field widget and enable the Customize field output toggle. This setting helps to customize the output of the value retrieved by the Dynamic Field widget.

In the Field Format text area, insert the below HTML code:

<a href="#map-section">%s</a>

Here, “%s” stands for the value of the Dynamic Field, and the “#map-section” anchor stands for the CSS ID assigned to the section with the map. Feel free to replace the anchor link with the URL of your choice.

Now, update the changes.

adding html to customize field output area of dynamic field widget

Add a Link to the Dynamic Field Block in Block Editor

Create an anchor

Open the Single Post Template or the post in Block Editor.

Find the target section and add the Heading block on top of it. Unfold the Advanced tab of settings and enter an HTML Anchor.

Copy this anchor ID.

creating an anchor in the heading widget in the block editor

Add the Dynamic Field widget

Add the Dynamic Field block to the page where the dynamic data from the meta field should be displayed. In our case, we place it on top of the template.

Select the “Meta Data” SOURCE, and find the needed META KEY option from the drop-down list.

displaying meta field value with a dynamic field block

Configure the Customize field output setting

Scroll down the settings of the Dynamic Field block and enable the Customize field output toggle. This setting helps to customize the output of the value retrieved by the Dynamic Field block.

In the FIELD FORMAT text area, insert the below HTML code:

<a href="#map-section">%s</a>

Now, update the changes.

adding html to customize field output area of dynamic field block

Add a Link to the Dynamic Field Element in Bricks

Add a CSS ID to the section

Open the Single Post Template in Bricks.

Find the target section or container. Switch to the STYLE settings, unfold the CSS settings, and enter a unique ID into the CSS ID field. This ID will serve as an anchor.

Copy this anchor ID.

giving a css id to a container in bricks

Add the Dynamic Field element

Add the Dynamic Field element to the place on the page where the dynamic data from the meta field should be displayed. In our case, we place it on top of the template.

Select the “Meta Data” Source, and find the needed Meta field option from the drop-down list below.

displaying meta field value with dynamic field element

Configure the Customize field output setting

Scroll down the settings of the Dynamic Field element and enable the Customize field output toggle. This setting helps to customize the output of the value retrieved by the Dynamic Field element.

In the Field format text area, insert the below HTML code:

<a href="#map-section">%s</a>

Here, %s stands for the value of the Dynamic Field, and the #map-section anchor stands for the CSS ID assigned to the section with the map. Feel free to replace the anchor link with the URL of your choice.

Now, update the changes.