Como vincular um valor de campo dinâmico a uma âncora de URL
Adicione um link ao widget de campo dinâmico no Elementor
Dê à seção um ID CSS
Abra o modelo de postagem única no editor Elementor.
Encontre a seção ou contêiner de destino e insira as configurações avançadas . No campo CSS ID , insira um ID exclusivo que será usado como link âncora.
Copie este ID.
Adicione o widget Campo Dinâmico
Adicione o widget Campo Dinâmico à página onde os dados dinâmicos do metacampo devem ser exibidos. No nosso caso, colocamos próximo ao título do post, no topo do modelo.
Selecione a fonte “Meta Data” e encontre a opção Meta Field necessária na lista suspensa abaixo.
Definir a configuração Personalizar saída de campo
Role para baixo nas configurações do widget Campo Dinâmico e ative a alternância Personalizar saída do campo . Essa configuração ajuda a customizar a saída do valor recuperado pelo widget Campo Dinâmico .
Na área de texto Formato do campo , insira o código HTML abaixo:
<a href="#map-section">%s</a>Aqui, “%s” representa o valor do Campo Dinâmico e a âncora “#map-section” representa o ID CSS atribuído à seção com o mapa. Sinta-se à vontade para substituir o link âncora pelo URL de sua escolha.
Agora, atualize as alterações.
” alt=”adicionando html para personalizar a área de saída do campo do widget de campo dinâmico” width=”1024″ height=”640″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/10/adding-html-to-customize-field-output-area-of-dynamic-field-widget-1024×640.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/10/adding-html-to-customize-field-output-area-of-dynamic-field-widget-1024×640.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/10/adding-html-to-customize-field-output-area-of-dynamic-field-widget-300×188.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/10/adding-html-to-customize-field-output-area-of-dynamic-field-widget-768×480.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/10/adding-html-to-customize-field-output-area-of-dynamic-field-widget-1536×960.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/10/adding-html-to-customize-field-output-area-of-dynamic-field-widget-600×375.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” data-sizes=”(max-width: 1024px) 100vw, 1024px” />Adicione um link ao bloco de campo dinâmico no editor de bloco
Crie uma âncora
Abra o modelo de postagem única ou a postagem no Block Editor.
Encontre a seção de destino e adicione o bloco Título em cima dela. Abra a guia Avançado de configurações e insira uma âncora HTML .
Copie este ID de âncora.
Adicione o widget Campo Dinâmico
Adicione o bloco Campo Dinâmico à página onde os dados dinâmicos do metacampo devem ser exibidos. No nosso caso, colocamos em cima do modelo.
Selecione a FONTE “Meta Data” e encontre a opção META KEY necessária na lista suspensa.
Definir a configuração Personalizar saída de campo
Role para baixo nas configurações do bloco Campo Dinâmico e ative a alternância Personalizar saída do campo . Esta configuração ajuda a personalizar a saída do valor recuperado pelo bloco Dynamic Field .
Na área de texto FIELD FORMAT , insira o código HTML abaixo:
<a href="#map-section">%s</a>Aqui, “%s” representa o valor do Campo Dinâmico e a âncora “#map-section” representa o ID CSS atribuído à seção com o mapa. Sinta-se à vontade para substituir o link âncora pelo URL de sua escolha.
Agora, atualize as alterações.
Adicione um link ao elemento de campo dinâmico em Bricks
Adicione um ID CSS à seção
Abra o modelo de postagem única no Bricks.
Encontre a seção ou contêiner de destino. Mude para as configurações de ESTILO , desdobre as configurações de CSS e insira um ID exclusivo no campo CSS ID . Este ID servirá como âncora.
Copie este ID de âncora.
Adicione o elemento Campo Dinâmico
Adicione o elemento Campo Dinâmico ao local da página onde os dados dinâmicos do metacampo devem ser exibidos. No nosso caso, colocamos em cima do modelo.
Selecione a fonte “Meta Data” e encontre a opção de campo Meta necessária na lista suspensa abaixo.
Definir a configuração Personalizar saída de campo
Role para baixo nas configurações do elemento Campo Dinâmico e ative a alternância Personalizar saída do campo . Essa configuração ajuda a personalizar a saída do valor recuperado pelo elemento Dynamic Field .
Na área de texto Formato do campo , insira o código HTML abaixo:
<a href="#map-section">%s</a>Aqui, %s representa o valor do Campo Dinâmico e a âncora #map-section representa o ID CSS atribuído à seção com o mapa. Sinta-se à vontade para substituir o link âncora pelo URL de sua escolha.
Agora, atualize as alterações.
Verifique o resultado
Teste o link no front-end. A página deve rolar para a seção vinculada após clicar no widget/bloco/elemento do Campo Dinâmico .
Isso é tudo sobre como vincular o valor do Campo Dinâmico ao URL com a ajuda do plugin JetEngine para WordPress.