O Elementor, um poderoso construtor para WordPress, permite-lhe combinar o seu design com várias fontes de dados para automatizar as actualizações de conteúdo e personalizar a sua apresentação através da sua funcionalidade de conteúdo dinâmico. Este artigo analisa em profundidade o fluxo de trabalho de conteúdo dinâmico do Elementor, desde a seleção de fontes de dados até à implementação do design final, para o ajudar a tirar o máximo partido desta funcionalidade para criar sítios Web mais interactivos e envolventes.

O que é o Elementor Dynamic Content?

O Elementor Dynamic Content é uma funcionalidade avançada do Elementor Pro que permite aos utilizadores ligar os seus designs de página a fontes de dados dinâmicas para apresentar e atualizar automaticamente o conteúdo. Para tal, é necessário criar um modelo que extraia e apresente dinamicamente dados de bases de dados, entradas do utilizador, API de terceiros ou campos personalizados sem ter de atualizar manualmente a página.

Seleção das fontes de dados

Antes de começar a conceber conteúdos dinâmicos, é necessário escolher uma fonte de dados adequada. O Elementor suporta uma variedade de fontes de dados, incluindo:

1. Base de dados WordPressFonte de dados: Esta é a fonte de dados mais utilizada. Pode utilizar os campos incorporados no WordPress, tais comoTítulos de artigos, conteúdos, imagens em destaque, categorias e etiquetasetc. Com o Elementor, estes dados podem serApresentado dinamicamente na página.
2. Campos personalizados: Por meio de Campos personalizados avançados (ACF) e outros plugins para adicionar campos personalizados a uma página ou publicação e, em seguida, utilizar os dados desses campos no Elementor. Permitir que os campos personalizados sejam mais flexíveis na gestão e apresentação de informações adicionais relacionadas com a publicação, tais como informações do autor, data de lançamento, especificações do produto, etc.

3. Dados do WooCommerceNo caso de um sítio de comércio eletrónico, o feed de dados do WooCommerce ajuda-o a apresentar dinamicamente informações sobre produtos, preços, estado do stock, categorias de produtos, etc. Isto torna a conceção das páginas de produtos e das páginas do carrinho de compras mais flexível e dinâmica.
4. API de terceirosAPI: Para sítios Web que requerem dados de fontes externas, o Elementor suporta APIs para obter dados e apresentá-los dinamicamente. Por exemplo, pode obter actualizações de redes sociais, informações meteorológicas ou dados da bolsa de valores através da API.
5. entrada do utilizadorOs dados introduzidos pelo utilizador (por exemplo, comentários, formulários de feedback, conteúdos gerados pelo utilizador) podem também ser utilizados como fonte de conteúdos dinâmicos. Isto permite que os sítios Web actualizem e apresentem conteúdos em tempo real com base no comportamento ou nos contributos dos utilizadores.

Utilizar conteúdos dinâmicos no Elementor

O Elementor fornece vários widgets para apoiar a implementação de conteúdos dinâmicos. Com estes widgets, os web designers podem facilmente ligar o conteúdo a dados em bases de dados ou outras variáveis para tornar as páginas mais flexíveis e inteligentes.

1. widget do título do post

O widget de título de publicação é um exemplo simples de conteúdo dinâmico. Este widget apresenta o título da página ou do post atual e muda automaticamente consoante a página ou o post que está a ser utilizado. Por exemplo, quando alterna entre diferentes publicações do blogue, o título será automaticamente atualizado para o título da publicação correspondente.

2、 Slogan do sítio Web de visualização dinâmica

Supondo que pretende adicionar dinamicamente o slogan do seu sítio Web à página, pode seguir os passos abaixo:

1. Arrastar o widget de cabeçalho para o ecrã: Primeiro, selecione um widget de título no editor Elementor e arraste-o e largue-o num local apropriado da página.

2. Clique no ícone dinâmicoNas definições do widget de cabeçalho, verá um pequeno ícone dinâmico (que normalmente se assemelha a um ícone com um raio) localizado no canto superior direito do campo.
3. Selecionar o slogan do sítioDepois de clicar no ícone dinâmico, selecionar no menu pendente "Slogan do site". Neste ponto, o texto do título é imediatamente atualizado para mostrar o slogan atual do seu sítio.

Desta forma, pode garantir que os slogans das suas páginas são gerados dinamicamente e podem ser actualizados automaticamente à medida que o slogan do seu sítio web muda, sem ter de editar manualmente cada página.

Definições avançadas para conteúdos dinâmicos: campos antes, depois e de recurso

No Elementor, também pode adicionar conteúdo "antes", "depois" e "a seguir" a cada elemento dinâmico. Estas opções permitem-lhe adicionar conteúdo estático antes ou depois do conteúdo dinâmico para melhorar a apresentação do conteúdo. Além disso, o campo de recurso pode ser definido para apresentar um conteúdo alternativo predefinido se o elemento não tiver conteúdo ou se o conteúdo não existir.

1. Clique no ícone da chave inglesaAo lado do tipo de conteúdo dinâmico, verá umchaves inglesasÍcone. Clicar nele abre opções para esse tipo de conteúdo.
2. Definição de conteúdos "antes" e "depoisTexto: Pode introduzir qualquer texto ou HTML que pretenda apresentar antes ou depois do conteúdo dinâmico, por exemplo, pode adicionar o texto "Bem-vindo" antes da tagline.
3. Configurar conteúdos de "cópia de segurançaSe o conteúdo dinâmico do elemento estiver vazio ou indisponível, pode especificar um pedaço de texto predefinido como apresentação alternativa.

Os conteúdos dinâmicos não se limitam ao texto

A funcionalidade de Conteúdo Dinâmico do Elementor não se destina apenas a elementos de texto, mas também a outros tipos de conteúdo, como imagens, vídeos e dados do utilizador. Assim que vir o ícone dinâmico num widget, pode mudar esse conteúdo de estático para dinâmico.

1、Foto do perfil do utilizador gerada dinamicamente na página central do utilizador

Por exemplo, pode gerar a imagem de perfil de um utilizador utilizando dados dinâmicos para criar páginas personalizadas centradas em cada utilizador. Isto pode ser feito ligando dinamicamente um widget de imagem aos dados da fotografia de perfil do utilizador. Desta forma, qualquer que seja o utilizador que inicie sessão, poderá ver a sua imagem de perfil na página, em vez da imagem estática predefinida.

2. aplicação de controlos digitais dinâmicos

Os controlos numéricos dinâmicos foram introduzidos em alguns widgets de utilização comum, como contadores, listas de preços e classificações por estrelas. Isto proporciona aos designers mais criatividade e flexibilidade para definir dinamicamente os valores destes controlos com base em condições específicas. Por exemplo, pode definir um contador dinâmico de vendas de produtos que se actualiza em tempo real para ser apresentado na página com base nos dados de vendas reais da base de dados.

Utilização de chaves de campo personalizadas

Esta é uma funcionalidade poderosa para utilizadores avançados, especialmente quando é necessária a integração com os campos personalizados avançados (ACF) do WordPress.

1、Utilização de chaves de campo personalizadas para preencher controlos dinâmicos

Nas Opções dinâmicas do Elementor, pode selecionar "Chave personalizada" e introduzir o valor da chave de um campo personalizado para apresentar dinamicamente os dados desse campo na página. Para algumas aplicações avançadas, esta abordagem pode aumentar consideravelmente a flexibilidade e a funcionalidade da página.

2、Visualizar conteúdo dinâmico no modelo

O Elementor permite-lhe selecionar páginas ou publicações específicas como conteúdo de pré-visualização ao conceber um modelo, permitindo-lhe visualizar o aspeto do modelo quando aplicado a diferentes páginas durante o processo de conceção.

3、Configurar a pré-visualização de conteúdos dinâmicos

1. Clique no ícone de engrenagemNo editor Elementor, existe um ícone de engrenagem no canto inferior esquerdo do painel do widget. Clique nele para abrir as definições de pré-visualização.

2. Selecionar o tipo de conteúdo de pré-visualizaçãoNa opção Pré-visualizar conteúdo dinâmico como, pode selecionar o tipo de conteúdo que pretende pré-visualizar, como posts, páginas ou media.
3. Selecionar uma página específicaDepois, selecione uma página ou publicação específica no menu pendente para poder ver o aspeto real do modelo nessas páginas à medida que o edita.

Da fonte de dados à conceção: uma análise completa do processo

Uma vez identificada a fonte de dados, o passo seguinte é integrar esses dados no design da página. Segue-se uma descrição do processo completo, desde a fonte de dados até ao design:

1. Configurar a fonte de dadosNo backend do WordPress, configure a sua fonte de dados. Por exemplo, se estiver a utilizar campos personalizados, certifique-se de que foram criados e configurados através de um plugin como o ACF. Se estiver a utilizar uma API, certifique-se de que os dados da API podem serExtrair e analisar corretamente.
2. Criar modelos dinâmicosCriar uma nova página ou editar uma página existente no Elementor. Com o editor de arrastar e largar do Elementor, pode adicionar uma variedade de elementos dinâmicos. Estes elementos podem ser texto, imagens, vídeos, listas e muito mais. Em seguida, vincule esses elementos à sua fonte de dados. Por exemplo, pode associar um elemento de texto ao campo do título da publicação e um elemento de imagem ao campo da imagem em destaque.
3. Aplicar etiquetas dinâmicasElementor fornece um poderoso sistema de etiquetas dinâmicas que lhe permite ligar facilmente fontes de dados a elementos da página. Pode aplicar etiquetas dinâmicas a elementos como texto, imagens, ligações, etc. Estas etiquetas extrairão automaticamente informações da fonte de dados que selecionar. Por exemplo, se selecionar a etiqueta dinâmica "Título do artigo", a página apresentará automaticamente o título do artigo atual.
4. Design e estilo personalizadosDesign: Com as ferramentas de design do Elementor, pode aplicar estilos e efeitos ao conteúdo dinâmico. Pode definir tipos de letra, cores, espaçamento, alinhamento e muito mais para garantir que o conteúdo dinâmico é consistente com o design geral do seu sítio. Também pode aplicar estilos personalizados CSS avançados a conteúdos dinâmicos para os tornar visualmente mais apelativos.
5. Testes e otimizaçãoDepois de concluir o design, certifique-se de que pré-visualiza e testa a página para garantir que o conteúdo dinâmico é apresentado e atualizado corretamente. Verifique se as diferentes fontes de dados estão a extrair e a apresentar o conteúdo corretamente. Teste a capacidade de resposta em diferentes dispositivos para garantir que a página mantém uma boa experiência do utilizador tanto no computador como em dispositivos móveis.
6. Edição e manutençãoDepois de garantir que todo o conteúdo é apresentado corretamente, a página pode ser publicada. No funcionamento diário do sítio Web, o conteúdo dinâmico será automaticamente atualizado de acordo com as alterações da fonte de dados, sem necessidade de ajuste manual. Isto reduz consideravelmente a carga de trabalho de manutenção e é especialmente conveniente para sítios Web com conteúdos actualizados frequentemente.

resumos

As capacidades de conteúdo dinâmico do Elementor abrem possibilidades infinitas para a conceção de sítios Web. Combinando com múltiplas fontes de dados, é fácil criar conteúdos de página personalizados, actualizados dinamicamente e altamente interactivos. Quer esteja a construir um blogue, um portal de notícias ou um sítio de comércio eletrónico, o Elementor fornece-lhe as ferramentas e as funcionalidades de que necessita para fazer com que o seu sítio se destaque tanto em termos de design como de funcionalidade.