Iniciar #

Crie e personalize seu próprio Elementor Widget em minutos. Não precisa de nenhum conhecimento profundo de codificação! Basta seguir os passos e você poderá criar seu próprio widget com campo de controle personalizado.

Assista ao vídeo:

Criar um widget #

Assista ao vídeo guia:

Passo=>1: Vá para Elementskit

1. Módulos de clique
2. Ative o botão de alternância Widget Builder
3. Salvar alterações

Passo=>2

1. Clique em Widget Builder
2. Adicionar novo

Passo=>3

• Adicionar título do widget
• Clique em alterar ícone para adicionar um novo ícone–> Selecione o tipo de ícone–> Pesquise por ícone
• Selecione a categoria do widget
• Clique em Salvar

Passo=>4

• Agora vá para Elementor–> Você pode ver que o widget foi criado na seção de categoria selecionada

Texto #

Assista ao vídeo guia:

Etapa=>1: Crie um widget

• Adicionar título do widget
• Clique em alterar ícone para adicionar um novo ícone–> Selecione o tipo de ícone–> Pesquise por ícone
• Selecione a categoria do widget
• Clique em Salvar

Etapa=>2: Adicionar controle de texto

• Agora clique em Adicionar seção para adicionar o controle de texto ao widget

Etapa=>3

• Pesquisar por controle de texto
• Arrastar -> Soltar

Etapa=>4

• Alterar o título
• Alterar o rótulo
• Alterar o campo de nome — Clique no campo de nome–> o nome será adicionado automaticamente na aba HTML. Observação** O nome deve ser único e deve conter apenas letras, números e sublinhado (_)
• Adicionar qualquer descrição–> Mostrar a descrição fornecida

Etapa=>5

• Adicione qualquer espaço reservado que será exibido como um texto de ajuda para o usuário
• Adicionar texto padrão
• Mostrar ou ocultar rótulo
• Selecione o tipo de exibição–> Mostrar ou ocultar o estilo do bloco
• Selecione a posição do separador–> Padrão, Antes, Depois ou nenhum
• Adicionar classes personalizadas para controlar o wrapper no painel
• Salvar

Passo=>6: Agora vá para Elementor–> Procure o widget criado –> Arraste o widget–> Solte

• Agora você pode adicionar ou editar seu campo de texto aqui

Número #

Passo=>1: Criar um widget

• Adicionar título do widget
• Clique em alterar ícone para adicionar um novo ícone–> Selecione o tipo de ícone–> Pesquise por ícone
• Selecione a categoria do widget
• Clique em Salvar

Etapa=>2: Adicionar controle numérico

• Agora clique em Adicionar seção para adicionar Número controle para o widget

Etapa=>3

• Pesquisar por Controle de números
• Arrastar
• Derrubar

Etapa=>4

• Alterar o título
• Alterar o rótulo
• Alterar o campo de nome — Clique no campo de nome–> o nome será adicionado automaticamente na aba HTML. Observação** O nome deve ser único e deve conter apenas letras, números e sublinhado (_)
• Adicionar qualquer descrição–> Mostrar a descrição fornecida

Etapa=>5

• Adicione qualquer espaço reservado que será exibido como um texto de ajuda para o usuário
• Defina o valor mínimo
• Defina o valor máximo
• Forneça o passo (Número do valor incremental)
• Defina o valor padrão

Passo=>6

• Mostrar ou ocultar rótulo
• Selecione o tipo de exibição–> Mostrar ou ocultar o estilo do bloco
• Selecione a posição do separador–> Padrão, Antes, Depois ou nenhum
• Adicionar classes personalizadas para controlar o wrapper no painel
• Salvar

Etapa=>7: Agora vá para Elementor–> Procure o widget criado –> Arraste o widget–> Solte

• Agora você pode adicionar ou editar seu campo numérico aqui

Área de texto #

Assista ao vídeo guia:

Etapa => 1: Criar um widget

• Adicionar título do widget
• Clique em alterar ícone para adicionar um novo ícone–> Selecione o tipo de ícone–> Pesquise por ícone
• Selecione a categoria do widget
• Clique em Salvar

Etapa=>2: Adicionar controle de área de texto

• Agora clique em Adicionar seção para adicionar Área de texto controle para o widget

Etapa=>3

• Pesquisar por controle de área de texto
• Arrastar
• Derrubar

Etapa=>4

• Alterar o título
• Alterar o rótulo
• Alterar o campo de nome — Clique no campo de nome–> o nome será adicionado automaticamente na aba HTML. Observação** O nome deve ser único e deve conter apenas letras, números e sublinhado (_)
• Adicionar qualquer descrição–> Mostrar a descrição fornecida

Etapa=>5

• Adicione qualquer espaço reservado que será exibido como um texto de ajuda para o usuário
• Adicionar número de linhas

Passo=>6

• Adicione qualquer valor padrão
• Mostrar ou ocultar rótulo
• Selecione o tipo de exibição–> Mostrar ou ocultar o estilo do bloco
• Selecione a posição do separador–> Padrão, Antes, Depois ou nenhum
• Adicionar classes personalizadas para controlar o wrapper no painel
• Salvar

Etapa=>7: Agora vá para Elementor–> Procure o widget criado –> Arraste o widget–> Solte

• Agora você pode adicionar ou editar o conteúdo da sua área de texto aqui

WYSIWYG #

Assista ao vídeo guia:

Etapa=>1: Criar um widget

• Adicionar título do widget
• Clique em alterar ícone para adicionar um novo ícone–> Selecione o tipo de ícone–> Pesquise por ícone
• Selecione a categoria do widget
• Clique em Salvar

Etapa=>2: Adicionar controle WYSIWYG

• Agora clique em Adicionar seção para adicionar WYSIWYG controle para o widget

Etapa=>3

• Procurar WYSIWYG controlar
• Arrastar
• Derrubar

Etapa=>4

• Alterar o título
• Alterar o rótulo
• Alterar o campo de nome — Clique no campo de nome–> o nome será adicionado automaticamente na aba HTML. Observação** O nome deve ser único e deve conter apenas letras, números e sublinhado (_)
• Adicionar qualquer descrição–> Mostrar a descrição fornecida

Etapa=>5

• Adicionar texto padrão
• Mostrar ou ocultar rótulo
• Selecione o tipo de exibição–> Mostrar ou ocultar o estilo do bloco
• Selecione a posição do separador–> Padrão, Antes, Depois ou nenhum
• Adicionar classes personalizadas para controlar o wrapper no painel
• Salvar

Etapa=>6: Agora vá para Elementor–> Procure o widget criado –> Arraste o widget–> Solte

• Agora você pode adicionar ou editar seu conteúdo aqui

Código #

Etapa=>1: Crie um widget

• Adicionar título do widget
• Clique em alterar ícone para adicionar um novo ícone–> Selecione o tipo de ícone–> Pesquise por ícone
• Selecione a categoria do widget
• Clique em Salvar

Etapa => 2: Adicionar Código Ao controle

• Agora clique em Adicionar seção para adicionar Código controle para o widget

Etapa=>3

• Pesquisar por controle de código
• Arrastar
• Derrubar

Etapa=>4

• Alterar o título
• Alterar o rótulo
• Alterar o campo de nome — Clique no campo de nome–> o nome será adicionado automaticamente na aba HTML.  Observação** O nome deve ser único e deve conter apenas letras, números e sublinhado (_)
• Adicionar qualquer descrição–> Mostrar a descrição fornecida

Etapa=>5

• Selecione seu tipo de idioma–> JavaScript, CSS, HTML, MYSQL, PHP, PHP(Blade Template), SAAS, SCSS, SQL e Texto
• Adicionar valor padrão
• Mostrar ou ocultar rótulo
• Selecione o tipo de exibição–> Mostrar ou ocultar o estilo do bloco
• Selecione a posição do separador–> Padrão, Antes, Depois ou nenhum
• Adicionar classes personalizadas para controlar o wrapper no painel
• Salvar

Etapa=>6: Agora vá para Elementor–> Procure o widget criado –> Arraste o widget–> Solte

• Agora você pode adicionar ou editar seu campo de código aqui

Interruptor #

Assista ao vídeo guia:

Etapa=>1: Crie um widget

• Adicionar título do widget
• Clique em alterar ícone para adicionar um novo ícone–> Selecione o tipo de ícone–> Pesquise por ícone
• Selecione a categoria do widget
• Clique em Salvar

Etapa=>2: Adicionar Switcher Ao controle

• Agora clique em Adicionar seção para adicionar Interruptor controle para o widget

Etapa=>3

• Procurar Interruptor controlar
• Arrastar
• Derrubar

Etapa=>4

• Alterar o título
• Alterar o rótulo
• Alterar o campo de nome — Clique no campo de nome–> o nome será adicionado automaticamente na aba HTML. Observação** O nome deve ser único e deve conter apenas letras, números e sublinhado (_)
• Adicionar qualquer descrição–> Mostrar a descrição fornecida

Etapa=>5

• Rótulo em: Sim==> O rótulo para o estado “não verificado” que significa quando o interruptor está SOBRE o rótulo do comutador mostrará Texto SIM.
• Etiqueta desligada: Não==> A etiqueta para o estado “verificado” que significa quando o interruptor está DESLIGADO o rótulo do comutador mostrará Nenhum texto
• Adicionar valor de retorno==> O valor retornado SIM ou NÃO quando o comutador é verificado
• Selecione qualquer valor padrão: Sim ou Não
• Mostrar ou ocultar rótulo
• Selecione o tipo de exibição–> Mostrar ou ocultar o estilo do bloco
• Selecione a posição do separador–> Padrão, Antes, Depois ou nenhum
• Adicionar classes personalizadas para controlar o wrapper no painel
• Salvar

Passo=>6: Agora vá para Elementor–> Procure o widget criado –> Arraste o widget–> Solte

• Agora ligue o comutador -> mostrando o valor padrão Sim

Selecione #

Assista ao vídeo guia:

Etapa=>1: Crie um widget

• Adicionar título do widget
• Clique em alterar ícone para adicionar um novo ícone–> Selecione o tipo de ícone–> Pesquise por ícone
• Selecione a categoria do widget
• Clique em Salvar

Etapa=>2: Adicionar Selecione Ao controle

• Agora clique em Adicionar seção para adicionar Selecione controle para o widget

Etapa=>3

• Procurar Selecione controlar
• Arrastar
• Derrubar

Etapa=>4

• Alterar o título
• Alterar o rótulo
• Alterar o campo de nome — Clique no campo de nome–> o nome será adicionado automaticamente na aba HTML. Observação** O nome deve ser único e deve conter apenas letras, números e sublinhado (_)
• Adicionar qualquer descrição–> Mostrar a descrição fornecida

Etapa=>5

• Adicione ou edite o valor e selecione suas opções para esse valor
• Adicionar texto padrão
• Mostrar ou ocultar rótulo

Passo=>6

• Selecione a posição do separador–> Padrão, Antes, Depois ou nenhum
• Adicionar classes personalizadas para controlar o wrapper no painel
• Salvar

Etapa=>7: Agora vá para Elementor–> Procure o widget criado –> Arraste o widget–> Solte

• Agora você pode selecionar sua categoria e o valor será exibido de acordo

Escolher #

Assista ao vídeo guia:

Passo=>1: Criar um widget

• Adicionar título do widget
• Clique em alterar ícone para adicionar um novo ícone–> Selecione o tipo de ícone–> Pesquise por ícone
• Selecione a categoria do widget
• Clique em Salvar

Passo=>2: Adicionar Escolher Ao controle

• Agora clique em Adicionar seção para adicionar Escolher controle para o widget

Passo=>3

• Procurar Escolher controlar
• Arrastar
• Derrubar

Etapa=>4

• Alterar o título
• Alterar o rótulo
• Alterar o campo de nome — Clique no campo de nome–> o nome será adicionado automaticamente na aba HTML. Observação** O nome deve ser único e deve conter apenas letras, números e sublinhado (_)
• Adicionar qualquer descrição–> Mostrar a descrição fornecida

Passo=>5

• Se deve permitir alternar/desativar para desmarcar a seleção.
• Fornecer opções para Esquerda Alinhamento. Por exemplo: Chave: esquerda, Título: Esquerda, ícone: fa fa-alinhar-esquerda
• Fornecer opções para Centro Alinhamento. Por exemplo: Chave: centro, Título: Centro, ícone: fa fa-align-center
• Fornecer opções para Certo Alinhamento. Por exemplo: Chave: certo, Título: Certo, ícone: fa fa-alinhar-direita
• Clique em Adicionar para adicionar nova opção

Passo=>6

• Definir valor padrão
• Mostrar ou ocultar rótulo
• Selecione o tipo de exibição–> Mostrar ou ocultar o estilo do bloco
• Selecione a posição do separador–> Padrão, Antes, Depois ou nenhum
• Adicionar classes personalizadas para controlar o wrapper no painel
• Salvar

Passo=>7: Agora vá para Elementor–> Procure o widget criado –> Arraste o widget–> Solte

• Agora você pode selecionar seu alinhamento à esquerda, ao centro ou à direita

Cor #

Assista ao vídeo guia:

Passo=>1: Criar um widget

• Adicionar título do widget
• Clique em alterar ícone para adicionar um novo ícone–> Selecione o tipo de ícone–> Pesquise por ícone
• Selecione a categoria do widget
• Clique em Salvar

Passo=>2: Adicionar Cor Ao controle

• Agora clique em Adicionar seção para adicionar Cor controle para o widget

Passo=>3

• Pesquisar por controle de cores
• Arrastar
• Derrubar

Passo=>4

• Alterar o título
• Alterar o rótulo
• Alterar o campo de nome — Clique no campo de nome–> o nome será adicionado automaticamente na aba HTML. Observação** O nome deve ser único e deve conter apenas letras, números e sublinhado (_)
• Adicionar qualquer descrição–> Mostrar a descrição fornecida

Passo=>5

• Habilitar para adicionar valor alfa (valores de cor)
• Adicionar valor padrão
• Mostrar ou ocultar rótulo
• Selecione o tipo de exibição–> Mostrar ou ocultar o estilo do bloco
• Selecione a posição do separador–> Padrão, Antes, Depois ou nenhum
• Adicionar seletores CSS (defina o seletor CSS para valor de controle)
• Adicionar classes personalizadas (wrapper de controle no painel)
• Salvar

Passo=>6: Agora vá para Elementor–> Procure o widget criado –> Arraste o widget–> Solte

• Selecione qualquer cor da paleta de cores

Data hora #

Assista ao vídeo guia:

Passo=>1: Criar um widget

• Adicionar título do widget
• Clique em alterar ícone para adicionar um novo ícone–> Selecione o tipo de ícone–> Pesquise por ícone
• Selecione a categoria do widget
• Clique em Salvar

Passo=>2: Adicionar Data hora Ao controle

• Agora clique em Adicionar seção para adicionar Data hora controle para o widget

Passo=>3

• Pesquisar por controle de data e hora
• Arrastar
• Derrubar

Etapa=>4

• Alterar o título
• Alterar o rótulo
• Alterar o campo de nome — Clique no campo de nome–> o nome será adicionado automaticamente na aba HTML. Observação** O nome deve ser único e deve conter apenas letras, números e sublinhado (_)
• Adicionar qualquer descrição–> Mostrar a descrição fornecida

Passo=>5

• Habilitar para mostrar o tempo e desabilitar para ocultar
• Definir incremento de minutos
• Adicionar data e hora padrão
• Mostrar ou ocultar rótulo
• Selecione o tipo de exibição–> Mostrar ou ocultar o estilo do bloco
• Selecione a posição do separador–> Padrão, Antes, Depois ou nenhum
• Adicionar classes personalizadas para controlar o wrapper no painel
• Salvar

Passo=>6: Agora vá para Elementor–> Procure o widget criado –> Arraste o widget–> Solte

• Agora você pode selecionar sua data e hora aqui

Fonte #

Passo=>1: Criar um widget

• Adicionar título do widget
• Clique em alterar ícone para adicionar um novo ícone–> Selecione o tipo de ícone–> Pesquise por ícone
• Selecione a categoria do widget
• Clique em Salvar

Passo=>2: Adicionar Fonte Ao controle

• Agora clique em Adicionar seção para adicionar Fonte controle para o widget

Passo=>3

• Procurar Fonte controlar
• Arrastar
• Derrubar

Passo=>4

• Alterar o título
• Alterar o rótulo
• Alterar o campo de nome — Clique no campo de nome–> o nome será adicionado automaticamente na aba HTML. Observação** O nome deve ser único e deve conter apenas letras, números e sublinhado (_)
• Adicionar qualquer descrição–> Mostrar a descrição fornecida

Passo=>5

• Adicionar ou editar opções
• Adicionar ou editar grupos
• Adicionar valor padrão

Passo=>6

• Mostrar ou ocultar rótulo
• Selecione o tipo de exibição–> Mostrar ou ocultar o estilo do bloco
• Selecione a posição do separador–> Padrão, Antes, Depois ou nenhum
• Adicionar classes personalizadas para controlar o wrapper no painel
• Salvar

Passo=>7: Agora vá para Elementor–> Procure o widget criado –> Arraste o widget–> Solte

• Agora você pode selecionar seu campo de fonte aqui

URL #

Passo=>1: Criar um widget

• Adicionar título do widget
• Clique em alterar ícone para adicionar um novo ícone–> Selecione o tipo de ícone–> Pesquise por ícone
• Selecione a categoria do widget
• Clique em Salvar

Passo=>2: Adicionar URL Ao controle

• Agora clique em Adicionar seção para adicionar URL controle para o widget

Passo=>3

• Procurar URL controlar
• Arrastar
• Derrubar

Etapa=>4

• Alterar o título
• Alterar o rótulo
• Alterar o campo de nome — Clique no campo de nome–> o nome será adicionado automaticamente na aba HTML. Observação** O nome deve ser único e deve conter apenas letras, números e sublinhado (_)
• Adicionar qualquer descrição–> Mostrar a descrição fornecida

Passo=>5

• Adicione qualquer espaço reservado que será exibido como um texto de ajuda para o usuário (O campo de espaço reservado aparece quando o campo não possui valores)
• Adicione qualquer URL padrão
• Habilitar externo ou não (Abrir link em nova aba)
• Habilitar seguir ou não
• Mostrar ou ocultar botão externo

Passo=>6

• Mostrar ou ocultar rótulo
• Selecione o tipo de exibição–> Mostrar ou ocultar o estilo do bloco
• Selecione a posição do separador–> Padrão, Antes, Depois ou nenhum
• Adicionar classes personalizadas para controlar o wrapper no painel
• Salvar

Passo=>7: Agora vá para Elementor–> Procure o widget criado –> Arraste o widget–> Solte

• Agora você pode adicionar ou editar seu URL aqui
• Marcar ou desmarcar abrir link em nova aba
• Marque ou desmarque para não adicionar nenhum seguimento
• Fornecer atributos personalizados

meios de comunicação #

Assista ao vídeo guia:

Passo=>1: Criar um widget

• Adicionar título do widget
• Clique em alterar ícone para adicionar um novo ícone–> Selecione o tipo de ícone–> Pesquise por ícone
• Selecione a categoria do widget
• Clique em Salvar

Passo=>2: Adicionar meios de comunicação Ao controle

• Agora clique em Adicionar seção para adicionar meios de comunicação controle para o widget

Passo=>3

• Procurar meios de comunicação controlar
• Arrastar
• Derrubar

Etapa=>4

• Alterar o título
• Alterar o rótulo
• Alterar o campo de nome — Clique no campo de nome–> o nome será adicionado automaticamente na aba HTML. Observação** O nome deve ser único e deve conter apenas letras, números e sublinhado (_)
• Adicionar qualquer descrição–> Mostrar a descrição fornecida

Passo=>5

• Mostrar ou ocultar rótulo
• Selecione o tipo de exibição–> Mostrar ou ocultar o estilo do bloco
• Selecione a posição do separador–> Padrão, Antes, Depois ou nenhum
• Adicionar classes personalizadas para controlar o wrapper no painel
• Salvar

Passo=>6: Agora vá para Elementor–> Procure o widget criado –> Arraste o widget–> Solte

• Agora você pode enviar sua imagem aqui

Ícone #

Assista ao vídeo guia:

Passo=>1: Criar um widget

• Adicionar título do widget
• Clique em alterar ícone para adicionar um novo ícone–> Selecione o tipo de ícone–> Pesquise por ícone
• Selecione a categoria do widget
• Clique em Salvar

Passo=>2: Adicionar Ícone Ao controle

• Agora clique em Adicionar seção para adicionar Ícone controle para o widget

Passo=>3

• Procurar Ícone controlar
• Arrastar
• Derrubar

Etapa=>4

• Alterar o título
• Alterar o rótulo
• Alterar o campo de nome — Clique no campo de nome–> o nome será adicionado automaticamente na aba HTML.  Observação** O nome deve ser único e deve conter apenas letras, números e sublinhado (_)
• Adicionar qualquer descrição–> Mostrar a descrição fornecida

Passo=>5

• Selecione o tipo de pele
• Adicionar ícone

Passo=>6

• Selecione o seu tipo de ícone
• Pesquisar por Ícone

Passo=>7

• Mostrar ou ocultar rótulo
• Selecione o tipo de exibição–> Mostrar ou ocultar o estilo do bloco
• Selecione a posição do separador–> Padrão, Antes, Depois ou nenhum
• Adicionar classes personalizadas para controlar o wrapper no painel
• Salvar

Passo=>8: Agora vá para Elementor–> Procure o widget criado –> Arraste o widget–> Solte

• Agora você pode adicionar ou alterar seu campo Ícone aqui

• Selecione o seu tipo de ícone
• Pesquisar por Ícone

Controle deslizante #

Passo=>1: Criar um widget

• Adicionar título do widget
• Clique em alterar ícone para adicionar um novo ícone–> Selecione o tipo de ícone–> Pesquise por ícone
• Selecione a categoria do widget
• Clique em Salvar

Passo=>2: Adicionar Controle deslizante Ao controle

• Agora clique em Adicionar seção para adicionar Controle deslizante controle para o widget

Passo=>3

• Procurar Controle deslizante controlar
• Arrastar
• Derrubar

Etapa=>4

• Alterar o título
• Alterar o rótulo
• Alterar o campo de nome — Clique no campo de nome–> o nome será adicionado automaticamente na aba HTML. Observação** O nome deve ser único e deve conter apenas letras, números e sublinhado (_)
• Adicionar qualquer descrição–> Mostrar a descrição fornecida

Passo=>5

• Definir valor padrão
• Mostrar ou ocultar rótulo
• Selecione o tipo de exibição–> Mostrar ou ocultar o estilo do bloco
• Selecione a posição do separador–> Padrão, Antes, Depois ou nenhum
• Adicionar classes personalizadas para controlar o wrapper no painel
• Salvar

Passo=>6: Agora vá para Elementor–> Procure o widget criado –> Arraste o widget–> Solte

• Agora você pode selecionar sua faixa etária aqui

Fronteira #

Passo=>1: Criar um widget

• Adicionar título do widget
• Clique em alterar ícone para adicionar um novo ícone–> Selecione o tipo de ícone–> Pesquise por ícone
• Selecione a categoria do widget
• Clique em Salvar

Passo=>2: Adicionar Fronteira Ao controle

• Agora clique em Adicionar seção para adicionar Fronteira controle para o widget

Passo=>3

• Procurar Fronteira controlar
• Arrastar
• Derrubar

Etapa=>4

• Alterar o título
• Alterar o rótulo
• Alterar o campo de nome — Clique no campo de nome–> o nome será adicionado automaticamente na aba HTML. Observação** O nome deve ser único e deve conter apenas letras, números e sublinhado (_)
• Adicionar qualquer descrição–> Mostrar a descrição fornecida

Passo=>5

• Mostrar ou ocultar rótulo
• Selecione o tipo de exibição–> Mostrar ou ocultar o estilo do bloco
• Selecione a posição do separador–> Padrão, Antes, Depois ou nenhum
• Adicionar seletor CSS
• Adicionar classes personalizadas para controlar o wrapper no painel
• Salvar

Passo=>6: Agora vá para Elementor–> Procure o widget criado –> Arraste o widget–> Solte

• Agora você pode selecionar o tipo de borda, definir o tamanho da largura e selecionar a cor aqui