Visão Geral Components

O diretório de componentes pode ser encontrado em WordPress Dashboard > JetEngine > Listings/Components .

Os modelos e componentes de listagem são apresentados em uma lista.

Também é possível alternar entre as listas “Todos”, “Listagem de Itens” e “Componentes” e verificar a quantidade de itens já criados (números próximos aos rótulos da lista).

Para construir um novo componente, deve-se pressionar o botão “ Adicionar Novo Componente ”.

No pop-up aberto, deve-se preencher os seguintes campos:

• Nome do componente  — um campo que será exibido posteriormente como nome do widget/bloco/elemento;
• Visualização do componente — um menu suspenso com opções que indicam o construtor que será usado para construir o componente. Entre as opções possíveis estão: “Elementor”, “Tijolos”, “Madeira/Galho” e “Blocos (Gutenberg)”.

Para prosseguir para o editor, deve-se clicar no botão “ Criar Componente ”.

Primeiramente, deve-se adicionar os widgets à página e defini-los como controles.

As configurações do componente podem ser encontradas clicando no ícone “ engrenagem ” no canto inferior esquerdo.

Aqui, três guias de configurações são apresentadas: Configurações Gerais , Configurações de Conteúdo do Componente e Configurações de Estilo do Componente .

Configurações Gerais

Nesta aba é possível alterar as seguintes configurações:

• Título — um título do componente. Este título pode ser alterado se necessário;
• Status — status do componente atual que pode ser alterado para: “Rascunho”, “Revisão Pendente”, “Particular” ou “Publicado”.

Controles de conteúdo de componentes

Esta guia contém as principais configurações de conteúdo do componente atual. 

Dentro da guia, há uma seção chamada Controles de componentes . Por padrão, inclui uma guia de controle de texto e o botão “ Adicionar item ” abaixo dela.

Ao lado do rótulo do item, encontram-se os ícones “ duplicar ” e “ excluir ”.

” alt=”guia de controles de conteúdo do componente no elementor” width=”1024″ height=”618″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/component-content-controls-tab-in-elementor-1024×618.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/component-content-controls-tab-in-elementor-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/component-content-controls-tab-in-elementor-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/component-content-controls-tab-in-elementor-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/component-content-controls-tab-in-elementor-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/component-content-controls-tab-in-elementor-600×362.webp 600w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/component-content-controls-tab-in-elementor.webp 1824w” data-sizes=”(max-width: 1024px) 100vw, 1024px” />

Quando desdobrada, a guia do item contém as seguintes configurações:

• Control Label — um rótulo do controle que será exibido posteriormente nas configurações de widget/bloco/elemento deste componente;
• Nome do Controle — um nome anexado ao controle que será salvo no banco de dados. Essa chave deve ser exclusiva para estilos e controles e incluir apenas letras latinas minúsculas, números e o símbolo “_” em vez de espaços;
• Tipo de controle — um tipo de controle. Pode ser definido como “Texto”, “Textarea”, “Selecionar” ou “Mídia única”. Se a opção “Selecionar” for escolhida, o campo Opções fica disponível para personalização. Lá, é possível especificar as opções para o controle “Select” atual.

• Valor padrão — um valor padrão definido para o controle atual.

O novo item pode ser adicionado pressionando o botão “ Adicionar Item ”.

Controles de estilo de componente

Na guia de configurações Controles de estilo de componente , a seção Controles de estilo é apresentada. 

Para ajustar um novo controle de estilo, deve-se pressionar o botão “ Adicionar Item ”.

• Control Label — campo que indica o rótulo do controle que será posteriormente exibido nas configurações do widget/bloco/elemento deste componente;
• Nome do Controle — um nome anexado ao controle que será salvo no banco de dados. Essa chave deve ser exclusiva para estilos e controles e incluir apenas letras latinas minúsculas, números e o símbolo “_” em vez de espaços;
• Valor padrão — um valor padrão definido para o controle atual.

Nomes de controle

Cada widget que posteriormente será alterado por controle deverá ter um Nome de Controle anexado. 

Para isso, deve-se clicar no ícone “ tags dinâmicas ” nas configurações do widget correspondente e selecionar a macro “Valor de controle do componente/Imagem de controle do componente/Cor do controle do componente”.

Em seguida, o campo Nome do Controle deve ser preenchido com um valor definido anteriormente no campo Nome do Controle das Configurações do Componente .

” alt=”configurações de macro de valor de controle de componente no elementor” width=”1024″ height=”618″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/component-control-value-macro-settings-in-elementor-1024×618.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/component-control-value-macro-settings-in-elementor-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/component-control-value-macro-settings-in-elementor-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/component-control-value-macro-settings-in-elementor-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/component-control-value-macro-settings-in-elementor-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/component-control-value-macro-settings-in-elementor-600×362.webp 600w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/component-control-value-macro-settings-in-elementor.webp 1824w” data-sizes=”(max-width: 1024px) 100vw, 1024px” />

Confira mais informações em Como criar um componente no Elementor .

As configurações dos componentes podem ser encontradas na seção Configurações de componentes da guia Listagem de itens/componentes do Editor de blocos.

Configurações de componentes

Lá, a guia Configurações do componente está disponível. Se estiver aberto, serão apresentados os dois botões a seguir:

” alt=”guia de configurações de componentes em gutenberg” width=”1024″ height=”618″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/component-settings-tab-in-gutenberg-1024×618.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/component-settings-tab-in-gutenberg-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/component-settings-tab-in-gutenberg-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/component-settings-tab-in-gutenberg-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/component-settings-tab-in-gutenberg-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/component-settings-tab-in-gutenberg-600×362.webp 600w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/component-settings-tab-in-gutenberg.webp 1824w” data-sizes=”(max-width: 1024px) 100vw, 1024px” />

• Adicionar/editar controles de conteúdo — um botão que abre o pop-up de edição dos controles de conteúdo;
• Adicionar/editar controles de estilo — um botão que abre o pop-up de edição dos controles de estilo.

Assim que o botão “ Adicionar/Editar controles de conteúdo ” for clicado, o pop-up de edição será aberto.

A princípio, apenas um botão “ Adicionar novo item ” é apresentado. Uma vez clicado, as configurações para ajuste do item são mostradas. Elas são idênticas às configurações dos controles de conteúdo do componente Elementor descritas na parte anterior.

Cada novo item pode ser adicionado pressionando o botão “ Adicionar novo item ”.

Para salvar os itens, deve-se pressionar o botão “ Salvar controles ”.

” alt=”editar pop-up de controles de conteúdo em gutenberg” width=”1024″ height=”618″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/edit-content-controls-pop-up-in-gutenberg-1024×618.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/edit-content-controls-pop-up-in-gutenberg-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/edit-content-controls-pop-up-in-gutenberg-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/edit-content-controls-pop-up-in-gutenberg-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/edit-content-controls-pop-up-in-gutenberg-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/edit-content-controls-pop-up-in-gutenberg-600×362.webp 600w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/edit-content-controls-pop-up-in-gutenberg.webp 1824w” data-sizes=”(max-width: 1024px) 100vw, 1024px” />

Se alguém apertar o botão “ Adicionar/Editar controles de estilo ”, outro pop-up será aberto. É idêntico ao dos controles de conteúdo descritos acima.

Para adicionar um novo item, deve-se pressionar o botão  “ Adicionar novo item ”.

As configurações de controle de estilo aqui são as mesmas da guia Component Style Controls do Elementor Builder.

O botão “ Adicionar novo item ” deve ser pressionado toda vez que um novo controle for adicionado.

Componente CSS

Em Gutenberg, a guia Component CSS correspondente permite especificar as classes CSS para um componente.

Os componentes de estilo adicionados são armazenados abaixo da área de texto Component CSS e podem ser usados ​​no código CSS.

Nomes de controle

Uma vez configurados os controles, eles devem ser anexados aos blocos correspondentes. Para isso, no Editor de Blocos, deve-se clicar no botão “ Tags Dinâmicas ” acima do campo.

Aqui, na guia Fonte de dados , deve-se escolher a FONTE “Dados personalizados” e encontrar o “Valor de controle do componente” no menu suspenso SELECIONAR DADOS PARA MOSTRAR .

Em seguida, o NOME DO CONTROLE deve ser especificado.

” alt=”botão de tags dinâmicas em gutenberg” width=”1024″ height=”618″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/dynamic-tags-button-in-gutenberg-1024×618.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/dynamic-tags-button-in-gutenberg-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/dynamic-tags-button-in-gutenberg-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/dynamic-tags-button-in-gutenberg-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/dynamic-tags-button-in-gutenberg-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/dynamic-tags-button-in-gutenberg-600×362.webp 600w, https://crocoblock.com/knowledge-base/wp-content/uploads/2024/06/dynamic-tags-button-in-gutenberg.webp 1824w” data-sizes=”(max-width: 1024px) 100vw, 1024px” />

Os controles também podem ser definidos nas configurações do bloco. Por exemplo, para a Imagem Dinâmica , deve-se selecionar a FONTE “Valor de Controle do Componente” e definir o nome do controle necessário no CAMPO OR SET MANUALLY .

Para editar um componente no Bricks, primeiro deve-se definir seus controles no diretório WordPress Dashboard > JetEngine > Listings/Components . 

O botão “ Editar componente ” deve ser clicado quando você passa o mouse sobre o item e, em seguida, os controles necessários são definidos.

A primeira guia Controles de conteúdo no pop-up aberto tem as mesmas configurações descritas anteriormente na parte Controles de conteúdo do componente da visão geral.

A guia Controles de estilo é idêntica àquela descrita na parte Controles de estilo de componente da visão geral.

Em seguida, o botão “ Salvar e ir para o editor ” deve ser clicado.

No editor, os elementos necessários devem ser adicionados e anexados aos controles.

Para fazer isso, o botão “ Dados Dinâmicos ” deve ser clicado nas configurações do elemento necessário, e o controle definido deve ser encontrado e selecionado.

As etapas mencionadas devem ser repetidas para todos os elementos necessários.

Além disso, pode-se anexar os controles de estilo abrindo a guia ESTILO e encontrando o botão “ Dados Dinâmicos ”.

Por exemplo, para definir a cor de fundo na aba FUNDO , deve-se clicar no ícone “ soltar ”, selecionar a opção “ RAW ” e pressionar o botão “ Dados Dinâmicos ”.

Uma vez feito isso, pode-se escolher o controle de estilo criado.

Os controles do componente também podem ser ajustados no construtor Timber clicando no botão “ Configurações ”.

Feito isso, o pop-up é aberto. Ele contém duas guias: Controles de conteúdo e Controles de estilo .

Abaixo do título da aba há um botão “ Novo Controle ”, que deve ser clicado para ajustar o controle.

As configurações aqui são idênticas àquelas apresentadas na guia Component Content Controls do Elementor Page Builder.

A aba Controles de estilo também inclui o botão “ Novo controle ”, que, ao ser clicado, ativa as configurações do controle de estilo.

Os campos de configuração aqui são os mesmos da guia Controles de estilo de componente disponível no Elementor.

No campo Valor padrão , pode-se usar as cores personalizadas ou cores Elementor globais.

Para usar cores globais do Elementor, pode-se clicar no botão “ Usar variável CSS ” abaixo do campo Valor padrão para selecionar o valor necessário.

Para usar os controles de conteúdo adicionados no código HTML, deve-se pressionar o botão “ Dados dinâmicos ” próximo à seção HTML .

Lá, a macro “Component Control Value” deve ser escolhida.

Uma vez clicado, as configurações Nome do controle e É imagem ficam disponíveis.

Para salvar as configurações e inserir o controle no código, deve-se clicar no botão “ Inserir ”.

Os controles de estilo adicionados anteriormente podem ser inseridos no código CSS com a ajuda do botão “ var() ”.

As configurações de controle também podem ser ajustadas diretamente no diretório WordPress Dashboard > JetEngine > Listings/Components . 

O botão “ Editar Componente ” aparece quando você passa o mouse sobre os itens; deve ser clicado para acionar o pop-up com as configurações.

Aqui, são apresentados controles de conteúdo e controles de estilo .

As configurações na guia Controles de conteúdo são as mesmas descritas anteriormente na parte Controles de conteúdo de componentes do artigo.

As configurações dos controles de estilo são idênticas àquelas descritas na parte Controles de estilo de componente do artigo.

Depois que o conteúdo for ajustado e salvo, ele poderá ser usado nos editores Elementor, Block Editor ou Bricks.

O componente pode ser encontrado pelo seu nome na barra de pesquisa do editor preferido.