Como criar componentes no Elementor

Construir um componente

Inicialmente, vá para WordPress Dashboard > JetEngine > Listings/Components para começar a construir um componente.

Clique no botão “ Adicionar novo componente ”.

No pop-up Configurar componente , preencha o nome do componente e selecione a opção “Elementor” no menu suspenso da visualização do componente . 

Pressione o botão “ Criar Componente ”.

Adicione os widgets necessários que mais tarde se tornarão dinâmicos. Por exemplo, adicionamos os seguintes widgets: 

• Imagem — a imagem do serviço; 
• Título — o título do serviço;
• Editor de Texto — uma descrição do serviço;
• Botão – botão com o link que leva à página com informações adicionais sobre o serviço.

Para ajustar os controles, clique no ícone de “ engrenagem ” no painel na parte inferior da página.

Abra a guia Controles de conteúdo do componente . 

A guia Controle de Texto é apresentada aqui por padrão. Por enquanto, nós o excluímos pressionando o ícone “ cruz ”.

Em seguida, pressionamos o botão “ Adicionar Item ” para criar nossos controles personalizados.

No nosso caso, o primeiro rótulo de controle será definido como “Imagem de serviço”, seu nome de controle como “imagem_serviço”, o tipo de controle como “mídia única” e o valor padrão como a imagem personalizada selecionada na biblioteca de mídia .

Em seguida, pressionamos o botão “ Adicionar Item ” para adicionar o próximo controle.

O controle a seguir representa o título do serviço, portanto, seu rótulo de controle é definido como “Título do serviço”, seu nome de controle como “service_title”, seu tipo de controle como “Texto” e seu valor padrão como “Título do serviço”.

Também adicionamos o terceiro controle “Descrição do Serviço” com o tipo de controle “Textarea” .

O próximo controle “Service Link” também é definido como “Text” Control Type .

O último controle é chamado de “Botão de Serviço” e possui o valor padrão “Saiba mais” .

Depois que todos os controles de conteúdo forem adicionados, abra a guia Controles de estilo de componente .

Clique no botão “ Adicionar Item ” para personalizar o controle.

As configurações aqui são as mesmas da guia Controles de conteúdo do componente .

Definimos o rótulo do controle como “Cor de fundo” e o nome do controle como “cor de fundo” e escolhemos a cor desejada como valor padrão .

Agora, os controles criados devem ser anexados aos widgets adicionados.

Primeiro, queremos anexar o controle de cores ao contêiner. Para isso, procedemos à edição do container.

Abrimos a guia Configurações de estilo e clicamos no seletor de cores próximo ao campo Cor na guia Plano de fundo .

Lá, pressionamos o botão “ Dynamic Tags ” e selecionamos a macro “Component Control Color”.

Colocamos o valor “background_color” como Nome do Controle .

Em seguida, clicamos no widget Imagem para abrir suas configurações. Em seguida, pressione o botão “ Tags dinâmicas ” e encontre a macro “Imagem de controle de componente”.

Especifique o nome do controle que você adicionou anteriormente, que possui o tipo de controle “Single Media” .

O widget a seguir ao qual anexamos o controle é Heading . 

O controle é anexado a ele de forma semelhante ao widget Imagem . Clique no botão “ Tags dinâmicas ” próximo ao campo Título e selecione a macro “Valor de controle do componente”.

Em seguida, especifique o nome de controle necessário .

O widget a seguir é um Editor de Texto . Para este widget, a macro “Component Control Value” deve ser selecionada e o nome de controle necessário especificado.

O último widget do componente é o Button . 

Primeiro, pressionamos o botão “ Tags dinâmicas ” próximo ao campo Texto . Lá, selecionamos a macro “Component Control Value” e definimos o nome do controle como “service_button”.

Além disso, repetimos a mesma etapa com o campo Link , mas desta vez o Nome do controle é definido como “service_link”.

Você também pode estilizar a aparência do componente e, quando estiver pronto, pressione o botão “ Atualizar ”.

Adicionar componente à página

Vá para a página onde deseja colocar o componente. Prosseguimos para WordPress Dashboard > Pages e abrimos a página já construída no Elementor Page Builder.

Procuramos o novo componente digitando seu nome na barra de pesquisa. Em seguida, colocamos o componente na página.

Agora você pode observar as guias de configurações de Conteúdo e Estilos . Vamos ajustar as configurações de conteúdo primeiro.

Você pode inicialmente alterar o Contexto do Componente , se necessário; agora, deixamos como “Objeto padrão”.

Em seguida, são apresentados os controles que você criou anteriormente. Os nossos são Service Image , Service Title , Service Description , Service Link e Service Button , respectivamente.

Assim, preenchemos esses campos com os valores necessários.

Na guia Estilos , a cor de fundo do contêiner pode ser alterada, se desejado.

Em seguida, adicionamos e personalizamos mais dois componentes.

Feito isso, pressione o botão “ Publicar/Atualizar ”.

Verifique o resultado

Abra a página que você criou no front end. Os componentes construídos agora são exibidos na página.

Também podemos clicar no botão “ Saiba mais ” para abrir as landing pages adicionais.

Isso é tudo; agora você sabe como criar um componente no Elementor com a ajuda do plugin JetEngine para sites WordPress.