Como reutilizar o componente criado

Navegue até o Painel do WordPress > JetEngine > guia Listagens/Componentes . Pressione o botão “ Adicionar Novo Componente ” para criar um novo componente.

Preencha os campos pop-up Configurar componente : digite o nome do componente no campo apropriado e selecione o editor na lista suspensa Visualização do componente .

Aqui, definimos o nome do componente “Componente para livros” e escolhemos “Elementor” como visualização do componente .

Nesse caso, criamos o componente que exibe o título da postagem e os metacampos “Autor”, “Capa” e “Descrição” do tipo de postagem personalizada “Livros” pré-criado . Portanto, definimos três controles, cada um para o widget apropriado.

O tutorial Visão geral dos metacampos personalizados detalha como criar os metacampos.

O tutorial Como criar tipos de postagem personalizados no WordPress detalha todos os recursos de criação de CPT .

Navegamos até o canto inferior esquerdo da página do componente aberta, pressionamos o ícone de “ engrenagem ” para abrir a guia Configurações do componente e passamos para o bloco Controles de conteúdo do componente .

Pressione a guia “ Controle de texto ” para desenrolar suas configurações. Em seguida, preencha os campos de texto Etiqueta do controle e Nome do controle , selecione seu tipo na lista suspensa Tipo de controle e defina o Valor padrão . Para adicionar outro controle, pressione o botão “ Adicionar Item ”.

Aqui, definimos as seguintes configurações para um widget que será adicionado para exibir o título do post: digitamos o texto “Título” no rótulo de controle, o “título” nos campos de texto Nome do controle ; selecionou a opção “Texto” na lista suspensa Tipo de controle e digitou o texto “Título” no campo de texto Valor padrão .

Para adicionar controles para outros widgets, pressione o botão “ Adicionar Item ”.

Por exemplo, definimos os seguintes controles: 

• Para exibir o metacampo “Autor” por meio do widget Campo dinâmico , digitamos o texto “Autor do livro” como o rótulo de controle , “livro_autor” como o nome do controle e o texto “Autor” como o valor padrão . Em seguida, selecionamos a opção “Texto” na lista suspensa Tipo de controle ;
• Para exibir o metacampo “Capa” por meio do widget Imagem dinâmica , digitamos o texto “Capa do livro” no rótulo de controle e o texto “book_cover” nos campos de texto Nome do controle e selecionamos a opção “Mídia única” no tipo de controle lista suspensa;
• Para exibir o metacampo “Descrição” por meio do widget Campo dinâmico , digitamos o texto “Descrição do livro” no rótulo do controle , “book_description” para Nome do controle e o texto “Descrição” nos campos de texto Valor padrão . Por fim, selecionamos a opção “Textarea” na lista suspensa Tipo de controle .

” alt=”controlar configurações de dados” width=”1024″ height=”640″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/control-data-settings-1024×640.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/control-data-settings-1024×640.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/control-data-settings-300×188.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/control-data-settings-768×480.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/control-data-settings-1536×960.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/control-data-settings-600×375.webp 600w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/control-data-settings.webp 1824w” data-sizes=”(max-width: 1024px) 100vw, 1024px” />

Depois de concluído, pressione o botão “ Atualizar ”.

Retorne à página do componente e adicione os widgets necessários.

Aqui, dividimos o layout em duas colunas. Arrastamos e soltamos o widget Campo Dinâmico na coluna da esquerda para exibir o título da postagem CPT . Em seguida, selecionamos a opção “Component Control Value” na lista suspensa Source e digitamos o nome do controle no campo Object / Meta field / Repeater key / Component prop text field (o texto “title”, que foi adicionado no Campo Nome do controle da guia Configurações do componente , no caso em questão.)

Adicionamos os widgets Dynamic Fields e Dynamic Image para exibir outro meta-campo, selecionamos a opção “Component Control Value” na lista suspensa Source e digitamos o nome do controle apropriado no Object field / Meta field / Repeater key / Component prop campos de texto.

Leia mais sobre como gerenciar as configurações do Dynamic Field no tutorial Visão geral do widget de campo dinâmico .

Pressione o botão “ Atualizar ” para salvar as alterações.

Retorne à guia Configurações do componente da página do componente. Desenrole o bloco Component Style Controls e preencha os campos de texto Control Label e Control Name (a “text_color”, neste caso). Em seguida, navegue até o campo seletor de cores Valor padrão e defina a cor necessária. Por fim, pressione o botão “ Atualizar ”.

Agora, de volta à página do componente. Selecione o widget que deseja estilizar. Nesse caso, selecionamos o widget Campo Dinâmico para exibir o título da postagem CPT e desenrolamos suas configurações de Estilo > Campo . Em seguida, pressionamos o ícone Dynamic Tags no campo Cor e selecionamos a opção “Component Control Value” na lista suspensa.

Por fim, digitamos o Nome do Controle no campo Configurações aberto (a “text_color”, neste caso).

Depois de concluído, pressione o botão “ Atualizar ”.

Crie um item de listagem

Navegue até o Painel do WordPress > JetEngine > guia Listagens/Componentes . Pressione o botão “ Adicionar novo item de listagem ” para criar um item de listagem que exiba o CPT pré-especificado . 

O tutorial Como criar um modelo de listagem para tipos de postagem no Elementor detalha como desenvolver itens de listagem para postagens CPT .

Neste tutorial, criamos o item de listagem para os posts “Livros” do CPT .

Para encontrar o componente necessário, digite seu nome (“Componentes para livros” no nosso caso) na barra de pesquisa. Encontre o componente e arraste e solte-o na página.

Desenrole o componente Content Settings .

A opção “Objeto padrão” na lista suspensa Contexto do componente é definida por padrão. Abaixo deste campo, os controles adicionados são listados.

Pressione o ícone “ Tags dinâmicas ” próximo ao campo do componente apropriado e escolha a opção “Campo personalizado” ou “Campo de objeto atual” na lista suspensa. Em seguida, selecione o campo necessário na lista suspensa Campo do pop-up que aparece.

Por exemplo, para o controle Título do livro , selecionamos a opção “Campo do objeto atual” na lista suspensa e, em seguida, escolhemos a opção “Título” na lista suspensa Campo .

Para o controle Autor do livro , escolhemos a opção “Campo personalizado” na lista suspensa e definimos o metacampo “Autor” na lista suspensa Campo , e para o controle Capa do livro , o metacampo “Imagem”.

Quando tudo estiver concluído, pressione o botão “ Atualizar ”.

Navegue até Painel do WordPress> guia Páginas e crie uma nova página ou edite uma criada anteriormente.

Encontre o widget Listing Grid e arraste e solte-o na página. Em seguida, selecione a listagem criada na lista suspensa Listagem .

Para uma compreensão mais aprofundada dos principais recursos do widget Listing Grid , recomendamos verificar nossa Visão geral do widget Listing Grid .

Além disso, você pode exibir outro grupo de componentes (ou seja, com base nos dados do usuário) na página. A única exceção neste caso é a criação do item de listagem para usuários .

Leia o tutorial Como criar um novo usuário através do painel WordPress para aprender como criar usuários através do painel.