{"id":42250,"date":"2023-10-03T13:27:19","date_gmt":"2023-10-03T13:27:19","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=42250"},"modified":"2024-10-16T11:06:24","modified_gmt":"2024-10-16T11:06:24","slug":"how-to-link-dynamic-field-value-to-url-anchor","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-link-dynamic-field-value-to-url-anchor\/","title":{"rendered":"How to Link a Dynamic Field Value to a URL Anchor"},"content":{"rendered":"\n<p>Let\u2019s imagine that you run a property listing website, and the properties are stored as a <strong>Custom Post Type<\/strong>. The \u201cProperties\u201d <strong>Custom Post Type<\/strong> contains a \u201cTextarea\u201d <strong>meta field <\/strong>for the property address.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/storing-property-address-in-text-meta-field-of-jetengine.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/storing-property-address-in-text-meta-field-of-jetengine-1024x640.webp\" alt=\"storing property address in text meta field of jetengine\" class=\"wp-image-42251\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/storing-property-address-in-text-meta-field-of-jetengine-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/storing-property-address-in-text-meta-field-of-jetengine-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/storing-property-address-in-text-meta-field-of-jetengine-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/storing-property-address-in-text-meta-field-of-jetengine-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/storing-property-address-in-text-meta-field-of-jetengine-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/storing-property-address-in-text-meta-field-of-jetengine.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>The goal is to display the address on a <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetthemecore\/creating-custom-post-type-archive-template-with-jetengine-listing-grid\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Single Page<\/strong><\/a> of the property and link this address to an interactive map below, enabling users to scroll to the map by clicking the address.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-a-link-to-the-dynamic-field-widget-in-elementor\">Add a Link to the Dynamic Field Widget in Elementor<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h3 class=\"wp-block-heading\" id=\"give-the-section-a-css-id\">Give the section a CSS ID<\/h3>\n\n\n\n<p>Open the <strong>Single Post Template <\/strong>in the Elementor editor.<\/p>\n\n\n\n<p>Find the target section or container and enter the <strong>Advanced <\/strong>settings. In the <strong>CSS ID <\/strong>field, enter a unique ID that will be used as an anchor link.\u00a0<\/p>\n\n\n\n<p>Copy this ID.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/giving-a-css-id-to-an-elementor-section.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/giving-a-css-id-to-an-elementor-section-1024x640.webp\" alt=\"giving a css id to an elementor section\" class=\"wp-image-42252\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/giving-a-css-id-to-an-elementor-section-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/giving-a-css-id-to-an-elementor-section-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/giving-a-css-id-to-an-elementor-section-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/giving-a-css-id-to-an-elementor-section-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/giving-a-css-id-to-an-elementor-section-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/giving-a-css-id-to-an-elementor-section.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"add-the-dynamic-field-widget\">Add the Dynamic Field widget<\/h3>\n\n\n\n<p>Add the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/dynamic-field-widget-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Dynamic Field<\/strong><\/a><strong> <\/strong>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.<\/p>\n\n\n\n<p>Select the \u201cMeta Data\u201d<strong> Source<\/strong> and find the needed <strong>Meta Field<\/strong> option from the drop-down list below.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/displaying-meta-field-value-with-dynamic-field-widget.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/displaying-meta-field-value-with-dynamic-field-widget-1024x640.webp\" alt=\"displaying meta field value with dynamic field widget\" class=\"wp-image-42253\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/displaying-meta-field-value-with-dynamic-field-widget-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/displaying-meta-field-value-with-dynamic-field-widget-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/displaying-meta-field-value-with-dynamic-field-widget-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/displaying-meta-field-value-with-dynamic-field-widget-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/displaying-meta-field-value-with-dynamic-field-widget-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/displaying-meta-field-value-with-dynamic-field-widget.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"configure-the-customize-field-output-setting\">Configure the Customize field output setting<\/h3>\n\n\n\n<p>Scroll down the settings of the <strong>Dynamic Field <\/strong>widget and enable the <strong>Customize field output <\/strong>toggle. This setting helps to customize the output of the value retrieved by the <strong>Dynamic Field <\/strong>widget.<\/p>\n\n\n\n<p>In the <strong>Field Format <\/strong>text area, insert the below HTML code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"#map-section\">%s&lt;\/a><\/code><\/pre>\n\n\n\n<p>Here, \u201c%s\u201d<strong> <\/strong>stands for the value of the <strong>Dynamic Field<\/strong>, and the \u201c#map-section\u201d anchor stands for the <strong>CSS ID<\/strong> assigned to the section with the map. Feel free to replace the anchor link with the URL of your choice.<\/p>\n\n\n\n<p>Now, update the changes.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/adding-html-to-customize-field-output-area-of-dynamic-field-widget.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/adding-html-to-customize-field-output-area-of-dynamic-field-widget-1024x640.webp\" alt=\"adding html to customize field output area of dynamic field widget\" class=\"wp-image-42254\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/adding-html-to-customize-field-output-area-of-dynamic-field-widget-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/adding-html-to-customize-field-output-area-of-dynamic-field-widget-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/adding-html-to-customize-field-output-area-of-dynamic-field-widget-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/adding-html-to-customize-field-output-area-of-dynamic-field-widget-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/adding-html-to-customize-field-output-area-of-dynamic-field-widget-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/adding-html-to-customize-field-output-area-of-dynamic-field-widget.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-a-link-to-the-dynamic-field-block-in-block-editor\">Add a Link to the Dynamic Field Block in Block Editor<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h3 class=\"wp-block-heading\" id=\"create-an-anchor\">Create an anchor<\/h3>\n\n\n\n<p>Open the <strong>Single Post Template <\/strong>or the post in Block Editor.<\/p>\n\n\n\n<p>Find the target section and add the <strong>Heading <\/strong>block on top of it. Unfold the <strong>Advanced <\/strong>tab of settings and enter an <strong>HTML Anchor<\/strong>.\u00a0<\/p>\n\n\n\n<p>Copy this anchor ID.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/creating-anchor-in-heading-widget-in-block-editor.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/creating-anchor-in-heading-widget-in-block-editor-1024x640.webp\" alt=\"creating an anchor in the heading widget in the block editor\" class=\"wp-image-42255\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/creating-anchor-in-heading-widget-in-block-editor-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/creating-anchor-in-heading-widget-in-block-editor-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/creating-anchor-in-heading-widget-in-block-editor-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/creating-anchor-in-heading-widget-in-block-editor-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/creating-anchor-in-heading-widget-in-block-editor-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/creating-anchor-in-heading-widget-in-block-editor.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"add-the-dynamic-field-widget\">Add the Dynamic Field widget<\/h3>\n\n\n\n<p>Add the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/dynamic-field-block-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Dynamic Field<\/strong><\/a><strong> <\/strong>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.<\/p>\n\n\n\n<p>Select the \u201cMeta Data\u201d<strong> SOURCE<\/strong>, and find the needed <strong>META KEY<\/strong> option from the drop-down list.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/displaying-meta-field-value-with-dynamic-field-block.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/displaying-meta-field-value-with-dynamic-field-block-1024x640.webp\" alt=\"displaying meta field value with a dynamic field block\" class=\"wp-image-42256\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/displaying-meta-field-value-with-dynamic-field-block-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/displaying-meta-field-value-with-dynamic-field-block-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/displaying-meta-field-value-with-dynamic-field-block-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/displaying-meta-field-value-with-dynamic-field-block-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/displaying-meta-field-value-with-dynamic-field-block-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/displaying-meta-field-value-with-dynamic-field-block.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"configure-the-customize-field-output-setting\">Configure the Customize field output setting<\/h3>\n\n\n\n<p>Scroll down the settings of the <strong>Dynamic Field <\/strong>block and enable the <strong>Customize field output <\/strong>toggle. This setting helps to customize the output of the value retrieved by the <strong>Dynamic Field <\/strong>block.<\/p>\n\n\n\n<p>In the <strong>FIELD FORMAT <\/strong>text area, insert the below HTML code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"#map-section\">%s&lt;\/a><\/code><\/pre>\n\n\n\n<p>Here, \u201c%s\u201d<strong> <\/strong>stands for the value of the <strong>Dynamic Field<\/strong>, and the \u201c#map-section\u201d anchor stands for the <strong>CSS ID<\/strong> assigned to the section with the map. Feel free to replace the anchor link with the URL of your choice.<\/p>\n\n\n\n<p>Now, update the changes.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/adding-html-to-customize-field-output-area-of-dynamic-field-block.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/adding-html-to-customize-field-output-area-of-dynamic-field-block-1024x640.webp\" alt=\"adding html to customize field output area of dynamic field block\" class=\"wp-image-42257\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/adding-html-to-customize-field-output-area-of-dynamic-field-block-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/adding-html-to-customize-field-output-area-of-dynamic-field-block-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/adding-html-to-customize-field-output-area-of-dynamic-field-block-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/adding-html-to-customize-field-output-area-of-dynamic-field-block-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/adding-html-to-customize-field-output-area-of-dynamic-field-block-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/adding-html-to-customize-field-output-area-of-dynamic-field-block.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-a-link-to-the-dynamic-field-element-in-bricks\">Add a Link to the Dynamic Field Element in Bricks<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h3 class=\"wp-block-heading\" id=\"add-a-css-id-to-the-section\">Add a CSS ID to the section<\/h3>\n\n\n\n<p>Open the <strong>Single Post Template <\/strong>in Bricks.<\/p>\n\n\n\n<p>Find the target section or container. Switch to the <strong>STYLE <\/strong>settings, unfold the<strong> CSS <\/strong>settings, and enter a unique ID into the <strong>CSS ID <\/strong>field. This ID will serve as an anchor.<\/p>\n\n\n\n<p>Copy this anchor ID.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/giving-a-css-id-to-a-container-in-bricks.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/giving-a-css-id-to-a-container-in-bricks-1024x640.webp\" alt=\"giving a css id to a container in bricks\" class=\"wp-image-42258\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/giving-a-css-id-to-a-container-in-bricks-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/giving-a-css-id-to-a-container-in-bricks-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/giving-a-css-id-to-a-container-in-bricks-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/giving-a-css-id-to-a-container-in-bricks-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/giving-a-css-id-to-a-container-in-bricks-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/giving-a-css-id-to-a-container-in-bricks.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"add-the-dynamic-field-element\">Add the Dynamic Field element<\/h3>\n\n\n\n<p>Add the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/dynamic-field-block-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Dynamic Field<\/strong><\/a><strong> <\/strong>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.<\/p>\n\n\n\n<p>Select the \u201cMeta Data\u201d<strong> Source<\/strong>, and find the needed <strong>Meta field<\/strong> option from the drop-down list below.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/displaying-meta-field-value-with-dynamic-field-element.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/displaying-meta-field-value-with-dynamic-field-element-1024x640.webp\" alt=\"displaying meta field value with dynamic field element\" class=\"wp-image-42259\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/displaying-meta-field-value-with-dynamic-field-element-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/displaying-meta-field-value-with-dynamic-field-element-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/displaying-meta-field-value-with-dynamic-field-element-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/displaying-meta-field-value-with-dynamic-field-element-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/displaying-meta-field-value-with-dynamic-field-element-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/displaying-meta-field-value-with-dynamic-field-element.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"configure-the-customize-field-output-setting\">Configure the Customize field output setting<\/h3>\n\n\n\n<p>Scroll down the settings of the <strong>Dynamic Field <\/strong>element and enable the <strong>Customize field output <\/strong>toggle. This setting helps to customize the output of the value retrieved by the <strong>Dynamic Field <\/strong>element.<\/p>\n\n\n\n<p>In the <strong>Field format <\/strong>text area, insert the below HTML code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"#map-section\">%s&lt;\/a><\/code><\/pre>\n\n\n\n<p>Here, <strong>%s <\/strong>stands for the value of the <strong>Dynamic Field<\/strong>, and the <strong>#map-section<\/strong> 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.<\/p>\n\n\n\n<p>Now, update the changes.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/adding-html-to-customize-field-output-area-of-dynamic-field-element.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/adding-html-to-customize-field-output-area-of-dynamic-field-element-1024x640.webp\" alt=\"adding html to customize field output area of a dynamic field element\" class=\"wp-image-42260\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/adding-html-to-customize-field-output-area-of-dynamic-field-element-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/adding-html-to-customize-field-output-area-of-dynamic-field-element-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/adding-html-to-customize-field-output-area-of-dynamic-field-element-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/adding-html-to-customize-field-output-area-of-dynamic-field-element-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/adding-html-to-customize-field-output-area-of-dynamic-field-element-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/adding-html-to-customize-field-output-area-of-dynamic-field-element.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"check-the-result\">Check the Result<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>Test the link on the front end. The page should scroll to the linked section after clicking the <strong>Dynamic Field <\/strong>widget\/block\/element.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/dynamic-field-with-an-anchor-link.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/dynamic-field-with-an-anchor-link-1024x640.webp\" alt=\"dynamic field with an anchor link\" class=\"wp-image-42261\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/dynamic-field-with-an-anchor-link-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/dynamic-field-with-an-anchor-link-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/dynamic-field-with-an-anchor-link-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/dynamic-field-with-an-anchor-link-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/dynamic-field-with-an-anchor-link-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/dynamic-field-with-an-anchor-link.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<p>That\u2019s all about how to link the <strong>Dynamic Field<\/strong> value to the URL with the help of the <em>JetEngine <\/em>plugin for WordPress.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>From this tutorial, you will find out how to link Dynamic Field to the page section with the JetEngine plugin.<\/p>\n","protected":false},"author":9,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[390],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Link Dynamic Field Value to URL Anchor \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to make the value of the Dynamic Field widget or block clickable and link it to a page or anchor using the JetEngine plugin for WordPress.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-link-dynamic-field-value-to-url-anchor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Link Dynamic Field Value to URL Anchor \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to make the value of the Dynamic Field widget or block clickable and link it to a page or anchor using the JetEngine plugin for WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-link-dynamic-field-value-to-url-anchor\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-16T11:06:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/storing-property-address-in-text-meta-field-of-jetengine-1024x640.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-link-dynamic-field-value-to-url-anchor\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-link-dynamic-field-value-to-url-anchor\/\",\"name\":\"How to Link Dynamic Field Value to URL Anchor \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2023-10-03T13:27:19+00:00\",\"dateModified\":\"2024-10-16T11:06:24+00:00\",\"description\":\"Learn how to make the value of the Dynamic Field widget or block clickable and link it to a page or anchor using the JetEngine plugin for WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-link-dynamic-field-value-to-url-anchor\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-link-dynamic-field-value-to-url-anchor\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-link-dynamic-field-value-to-url-anchor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Link a Dynamic Field Value to a URL Anchor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Link Dynamic Field Value to URL Anchor \u2014 JetEngine | Crocoblock","description":"Learn how to make the value of the Dynamic Field widget or block clickable and link it to a page or anchor using the JetEngine plugin for WordPress.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-link-dynamic-field-value-to-url-anchor\/","og_locale":"en_US","og_type":"article","og_title":"How to Link Dynamic Field Value to URL Anchor \u2014 JetEngine | Crocoblock","og_description":"Learn how to make the value of the Dynamic Field widget or block clickable and link it to a page or anchor using the JetEngine plugin for WordPress.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-link-dynamic-field-value-to-url-anchor\/","og_site_name":"Help Center","article_modified_time":"2024-10-16T11:06:24+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/10\/storing-property-address-in-text-meta-field-of-jetengine-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-link-dynamic-field-value-to-url-anchor\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-link-dynamic-field-value-to-url-anchor\/","name":"How to Link Dynamic Field Value to URL Anchor \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2023-10-03T13:27:19+00:00","dateModified":"2024-10-16T11:06:24+00:00","description":"Learn how to make the value of the Dynamic Field widget or block clickable and link it to a page or anchor using the JetEngine plugin for WordPress.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-link-dynamic-field-value-to-url-anchor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-link-dynamic-field-value-to-url-anchor\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-link-dynamic-field-value-to-url-anchor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Link a Dynamic Field Value to a URL Anchor"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/42250"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/9"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=42250"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=42250"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=42250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}