--- title: "Widgets personalizados no Elementor: Guia em 5 passos" description: "Widgets personalizados no Elementor são blocos de funcionalidade que o editor padrão não entrega: um carrossel de posts filtrado, um formulário com." url: https://full.services/widgets-personalizados-elementor/ date: 2026-06-27 author: "Clayton Margiotti" --- # Widgets personalizados no Elementor: Guia em 5 passos **Widgets personalizados no Elementor** se criam por dois caminhos: addons prontos (Essential Addons, Crocoblock, PowerPack) ou um widget em PHP que estende a classe Widget_Base. Segundo a [W3Techs](https://w3techs.com/technologies/details/cm-elementor) (2026), o Elementor roda em 13,0% de todos os sites. Cada addon extra pode somar 200 KB de CSS e JS por pagina. Escolha pela função que falta, nao pela quantidade de widgets. Widgets personalizados no Elementor são blocos de funcionalidade que o editor padrão não entrega: um carrossel de posts filtrado, um formulário com lógica condicional ou um card dinâmico que lê campos do banco. Você chega neles por addon (plugin que injeta dezenas de widgets na aba lateral) ou por código próprio, registrando uma classe PHP no Elementor. A decisão certa depende de quantos sites você mantém, do peso que cada plugin adiciona e de quão específica é a função. Este guia de widgets personalizados no Elementor mostra os caminhos reais, o custo de cada um e onde a conta fecha. Para o ecossistema completo, veja [todos os artigos de Elementor da FULL](https://full.services/elementor/). --- ## Visão geral: Addon pronto ou widget em código Existem três rotas para widgets personalizados no Elementor, e a escolha muda o custo. A primeira é instalar um addon como Essential Addons, que traz mais de 100 widgets prontos. A segunda é escrever um widget próprio em PHP. A terceira combina as duas, e é a que mais economiza tempo. A tabela abaixo resume o trade-off de cada rota de widgets personalizados no Elementor antes de você abrir o editor. Crocoblock JetElements e PowerPack entram na primeira rota; o widget em código estende a classe `ElementorWidget_Base`. A regra é simples: addon para o grosso e código só para o que ninguém entrega.
Widgets personalizados no Elementor: rotas, esforço e custo
Rota Esforço técnico Custo e manutenção
Addon pronto (Essential Addons, PowerPack) Baixo: instala e arrasta Licença anual por addon; risco de peso extra
Crocoblock (JetEngine + JetElements) Médio: exige configurar query e dado dinâmico Licença anual; curva de aprendizado maior
Widget próprio em PHP (Widget_Base) Alto: precisa de desenvolvedor Zero licença; manutenção é sua
A regra prática é direta: se a função já existe em um addon, instalar é mais barato que programar. --- ## Quando o widget nativo do Elementor não basta O Elementor entrega cerca de 40 widgets nativos no plano gratuito e passa de 90 no Elementor Pro 3.x, mas três cenários estouram esse limite quase sempre. São eles: conteúdo dinâmico filtrado por um campo do banco, interação avançada como formulário multi-etapa e um layout que nenhum widget padrão reproduz. Nesses casos, você parte para widgets personalizados no Elementor via addon ou código. A maioria dos tickets de Elementor que a gente vê no suporte da FULL começa aqui: o usuário tenta forçar um widget nativo a fazer o que ele não foi feito para fazer, empilha HTML solto e o layout quebra no mobile. O caminho limpo é reconhecer o limite cedo. Se o que falta é dado dinâmico, um glossário rápido ajuda: entenda o que é um [widget no WordPress](https://full.services/glossario/widget-wordpress/) antes de escolher a ferramenta. Quando o gargalo é o peso do site e não a função, vale ler antes por que o [Elementor fica lento](https://full.services/elementor-lento/) com plugins demais. --- ## Os 3 addons que mais entregam widgets personalizados Três addons dominam os widgets personalizados no Elementor por cobertura e estabilidade: Essential Addons, Crocoblock e PowerPack. Essential Addons passa de 100 widgets e foca em volume visual. Crocoblock aposta em conteúdo dinâmico via JetEngine, e PowerPack equilibra os dois com peso menor. A escolha de widgets personalizados no Elementor depende do que falta no seu projeto, não do tamanho do catálogo. Crocoblock monta listagens a partir de Custom Post Types e campos do ACF Pro. A diferença de campo aparece na manutenção. Essential Addons, com muitos widgets ativos e um tema que não faz o dequeue dos assets não usados, carrega CSS e JS extra em toda página, o que infla o LCP. Crocoblock pede mais configuração inicial, mas resolve dado dinâmico que os outros não alcançam, como mostra o tutorial de como o [Crocoblock cria páginas ultra-personalizadas](https://full.services/crocoblock-elementor-como-criar-paginas-ultra-personalizadas/). Para comparar as bibliotecas mais leves, veja os [widgets do Essential Addons](https://full.services/essential-addons-para-elementor/) e as opções do [Ultimate Addons](https://full.services/ultimate-addons-para-elementor/) lado a lado. --- ## Como instalar um addon de widgets no Elementor Instalar um addon é o caminho mais rápido para widgets personalizados no Elementor e leva menos de 10 minutos em um site limpo. O fluxo é o mesmo para Essential Addons, PowerPack ou Crocoblock: instale o plugin, ative a licença quando for premium e selecione só os widgets que vai usar. O ponto crítico está no último passo, porque ativar 100 widgets de uma vez carrega assets que você nunca vai usar e pesa o editor. Os passos abaixo seguem a ordem que evita retrabalho e mantém o site leve desde o início. ### Passo 1: Instale e ative o plugin do addon Vá em Plugins, Adicionar novo, busque o addon (por exemplo, Essential Addons for Elementor) e clique em Instalar e Ativar. A versão gratuita já libera dezenas de widgets na aba lateral do editor. Para a versão premium, suba o .zip baixado da conta do desenvolvedor em Plugins, Adicionar novo, Enviar plugin. Confirme que o Elementor Pro 3.x está ativo antes, porque alguns widgets dependem dele. ### Passo 2: Ative só os widgets que vai usar Abra o painel de configuração do addon (em Essential Addons fica em EA, Elements) e desative em massa o que não entra no projeto. Manter 15 widgets ativos em vez de 100 reduz o CSS e o JS injetados em cada página. Esse passo é o que separa um site rápido de um site travado, e quase ninguém faz. ### Passo 3: Arraste o widget e configure os controles No editor do Elementor, procure o widget pela busca da aba lateral e arraste para a estrutura. Cada widget tem seus próprios controles, definidos pelo método `register_controls()` no código do plugin. Ajuste conteúdo, estilo e responsividade nas três abas padrão e salve. Pré-visualize sempre no mobile, onde os widgets dinâmicos mais quebram. --- ## Como criar um widget próprio em PHP (widget_base) Criar um widget próprio é a rota para quando nenhum addon entrega a função, e ela parte de uma única classe PHP. Segundo a [documentação oficial da Elementor](https://developers.elementor.com/docs/widgets/widget-structure/), um widget customizado estende a classe `ElementorWidget_Base` e implementa cinco métodos obrigatórios para funcionar. São eles: `get_name()` define o identificador, `get_title()` o rótulo na aba, `get_icon()` o ícone, `get_categories()` a categoria e `register_controls()` os campos editáveis. O método `render()` gera o HTML final. É mais trabalho, mas não custa licença. O erro de campo mais comum aqui tem solução simples. Um widget customizado em PHP registrado no `functions.php` do tema, e não em um plugin próprio, some quando você troca de tema, e o layout salvo no Elementor quebra junto. A correção é empacotar o widget em um plugin dedicado, que sobrevive à troca de tema. Para uma versão guiada que usa campos dinâmicos, veja como [criar um widget customizado no Elementor com ACF Pro](https://full.services/criar-widget-customizado-no-elementor-com-acf-pro/), que resolve a parte de dado sem escrever a query na mão. --- ## Plano PRO da FULL: Todos os addons Premium por r$85 o site Comprar cada addon premium avulso vira um problema de caixa quando você mantém mais de um site. Essential Addons Pro, PowerPack e Crocoblock somam três licenças anuais separadas. No plano [PRO da FULL, por R$849](https://full.services/planos), todos entram juntos, com ativação por clique. Dividido pelos 10 sites do plano, dá R$85 por site, contra dezenas de dólares por licença individual fora do bundle. Você ativa Elementor Pro, Crocoblock, Essential Addons e Ultimate Addons no mesmo lugar. A gente vê no suporte da FULL que o gargalo de quem trabalha com Elementor raramente é a falta de um widget específico: é a soma das licenças e a manutenção de chave em cada site. Por isso o [Elementor Pro](https://full.services/elementor-pro) e os principais addons entram juntos no PRO, ativados pelo painel sem upload manual de .zip. --- ## Como não deixar os widgets pesarem o site Cada addon de widgets personalizados no Elementor adiciona CSS e JS, e o efeito soma rápido: um site com três addons pode carregar mais de 200 KB extra por página. O sintoma aparece no LCP e no tempo de bloqueio do mobile, e a causa é quase sempre asset de widget que você nem usa. A boa notícia é que dá para conter isso sem trocar de ferramenta, com três ajustes diretos. Primeiro, desative no painel do addon os widgets fora do projeto, como no Passo 2. Segundo, use o controle de carregamento de assets do Elementor Pro 3.x, que só injeta o CSS de um widget na página onde ele aparece. É o ajuste que mais protege a performance de quem usa widgets personalizados no Elementor em escala. Terceiro, mantenha um plugin de cache com exclusão correta das páginas dinâmicas. O combo costuma estabilizar o Core Web Vitals na maioria dos cenários testados. Se o Elementor já estiver pesado, o diagnóstico de [por que o Elementor fica lento](https://full.services/elementor-lento/) mostra onde cortar primeiro. --- ## Perguntas frequentes sobre widgets personalizados no Elementor
Por que widgets personalizados no Elementor deixam o site lento?

Widgets personalizados no Elementor pesam porque cada addon enfileira seu próprio CSS e JS, mesmo nos widgets que você não usa. Três addons ativos podem somar mais de 200 KB extra por página, o que infla o LCP no mobile. A correção é desativar no painel do addon os widgets fora do projeto e ligar o carregamento condicional de assets do Elementor Pro 3.x, que injeta o CSS só onde o widget aparece.

É possível criar widgets personalizados no Elementor sem programar?

Sim, é totalmente possível sem escrever uma linha de código. Addons como Essential Addons, PowerPack e Crocoblock entregam mais de 100 widgets prontos que você arrasta e configura nos controles visuais. Programar em PHP só vale quando nenhum addon cobre a função exata que o projeto precisa, como um card que lê um campo específico do banco de dados.

Qual a diferença entre Essential Addons, Crocoblock e PowerPack?

Essential Addons foca em volume visual, com mais de 100 widgets de carrossel, grid e contador. Crocoblock aposta em conteúdo dinâmico via JetEngine, ideal para listar Custom Post Types e campos do ACF Pro. PowerPack fica no meio, com peso menor e foco em performance. Para a maioria dos sites institucionais, Essential Addons resolve; para diretórios e listagens, Crocoblock é a escolha técnica.

Quanto custa ter addons de widgets personalizados no Elementor?

Comprado avulso, cada addon premium custa uma licença anual separada, e três deles somam dezenas de dólares por ano por site. No plano PRO da FULL, por R$849, Elementor Pro, Crocoblock, Essential Addons e Ultimate Addons entram juntos, ativados por clique. Dividido pelos 10 sites do plano, dá R$85 por site, bem abaixo da soma das licenças individuais fora do bundle.

O que é o Widget_Base na criação de widgets no Elementor?

O `ElementorWidget_Base` é a classe PHP que todo widget customizado estende, segundo a documentação oficial da Elementor. Ela exige métodos como `get_name()`, `get_title()` e `register_controls()`, que definem o identificador, o rótulo e os campos editáveis do widget. O método `render()` gera o HTML final. Empacote esse widget em um plugin próprio, e não no functions.php do tema, para ele não sumir na troca de tema.

--- ## Próximos passos para escolher o caminho certo Escolher entre addon e código de widgets personalizados no Elementor depende de uma conta simples: quantos sites você mantém e quão única é a função. Para a maioria dos projetos, um addon como Essential Addons resolve em minutos e por uma fração do custo de programar. Para conteúdo dinâmico em escala, Crocoblock paga a curva de aprendizado. O widget próprio em PHP, com a classe Widget_Base, fica reservado ao que nenhum addon entrega, sempre empacotado em plugin dedicado. No fim, a melhor estratégia de widgets personalizados no Elementor combina addon e código sob o mesmo painel. Se a dúvida ainda é sobre a versão paga, o review de [se o Elementor Pro vale a pena](https://full.services/elementor-pro-vale-a-pena-2026/) ajuda a fechar a decisão. Para continuar aprendendo, o [FULL Academy](https://full.services/academy/) reúne tutoriais e guias de Elementor em um só lugar.

Legenda: a aba lateral mostra os widgets extras que um addon adiciona ao editor do Elementor.

--- ## Metadados Estruturados (Schema.org) ```json-ld { "@context": "https://schema.org", "@graph": [ { "@type": "TechArticle", "@id": "https://full.services/widgets-personalizados-elementor/#article", "headline": "Widgets personalizados no Elementor: Guia em 5 passos", "description": "Widgets personalizados no Elementor são blocos de funcionalidade que o editor padrão não entrega: um carrossel de posts filtrado, um formulário com lógica condicional ou um card dinâmico que lê campos", "url": "https://full.services/widgets-personalizados-elementor/", "datePublished": "2026-06-27T09:00:00-03:00", "dateModified": "2026-06-27T09:00:00-03:00", "inLanguage": "pt-BR", "articleSection": "Elementor", "keywords": [ "widgets personalizados no elementor", "Elementor", "WordPress Page Builders", "Web Design" ], "author": { "@id": "https://full.services/#person-clayton" }, "publisher": { "@id": "https://full.services/#org" }, "about": [ { "@type": "Thing", "name": "Elementor", "@id": "https://www.wikidata.org/wiki/Q96322879", "sameAs": "https://www.wikidata.org/wiki/Q96322879" }, { "@type": "Thing", "name": "WordPress Page Builders" }, { "@type": "Thing", "name": "Web Design" } ], "mentions": [ { "@type": "Organization", "name": "Elementor", "url": "https://elementor.com/", "@id": "https://www.wikidata.org/wiki/Q96322879", "sameAs": "https://www.wikidata.org/wiki/Q96322879" }, { "@type": "Organization", "name": "WordPress", "url": "https://wordpress.org/", "@id": "https://www.wikidata.org/wiki/Q13166", "sameAs": "https://www.wikidata.org/wiki/Q13166" } ], "mainEntityOfPage": { "@type": "WebPage", "@id": "https://full.services/widgets-personalizados-elementor/" }, "wordCount": 2278, "citation": [ { "@type": "CreativeWork", "name": "W3Techs", "url": "https://w3techs.com/technologies/details/cm-elementor", "publisher": { "@type": "Organization", "name": "W3Techs" } }, { "@type": "CreativeWork", "name": "Elementor Developers", "url": "https://developers.elementor.com/docs/widgets/widget-structure/", "publisher": { "@type": "Organization", "name": "Elementor Developers" } } ] }, { "@type": "FAQPage", "@id": "https://full.services/widgets-personalizados-elementor/#faq", "isPartOf": { "@id": "https://full.services/widgets-personalizados-elementor/#article" }, "mainEntity": [ { "@type": "Question", "@id": "https://full.services/widgets-personalizados-elementor/#faq-q1", "name": "Por que widgets personalizados no Elementor deixam o site lento?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Widgets personalizados no Elementor pesam porque cada addon enfileira seu próprio CSS e JS, mesmo nos widgets que você não usa. Três addons ativos podem somar mais de 200 KB extra por página, o que infla o LCP no mobile. A correção é desativar no painel do addon os widgets fora do projeto e ligar o carregamento condicional de assets do Elementor Pro 3.x, que injeta o CSS só onde o widget aparece.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/widgets-personalizados-elementor/#faq-q2", "name": "É possível criar widgets personalizados no Elementor sem programar?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Sim, é totalmente possível sem escrever uma linha de código. Addons como Essential Addons, PowerPack e Crocoblock entregam mais de 100 widgets prontos que você arrasta e configura nos controles visuais. Programar em PHP só vale quando nenhum addon cobre a função exata que o projeto precisa, como um card que lê um campo específico do banco de dados.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/widgets-personalizados-elementor/#faq-q3", "name": "Qual a diferença entre Essential Addons, Crocoblock e PowerPack?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Essential Addons foca em volume visual, com mais de 100 widgets de carrossel, grid e contador. Crocoblock aposta em conteúdo dinâmico via JetEngine, ideal para listar Custom Post Types e campos do ACF Pro. PowerPack fica no meio, com peso menor e foco em performance. Para a maioria dos sites institucionais, Essential Addons resolve; para diretórios e listagens, Crocoblock é a escolha técnica.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/widgets-personalizados-elementor/#faq-q4", "name": "Quanto custa ter addons de widgets personalizados no Elementor?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Comprado avulso, cada addon premium custa uma licença anual separada, e três deles somam dezenas de dólares por ano por site. No plano PRO da FULL, por R$849, Elementor Pro, Crocoblock, Essential Addons e Ultimate Addons entram juntos, ativados por clique. Dividido pelos 10 sites do plano, dá R$85 por site, bem abaixo da soma das licenças individuais fora do bundle.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/widgets-personalizados-elementor/#faq-q5", "name": "O que é o Widget_Base na criação de widgets no Elementor?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "O `\Elementor\Widget_Base` é a classe PHP que todo widget customizado estende, segundo a documentação oficial da Elementor. Ela exige métodos como `get_name()`, `get_title()` e `register_controls()`, que definem o identificador, o rótulo e os campos editáveis do widget. O método `render()` gera o HTML final. Empacote esse widget em um plugin próprio, e não no functions.php do tema, para ele não sumir na troca de tema.", "author": { "@id": "https://full.services/#org" } } } ] }, { "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://full.services/" }, { "@type": "ListItem", "position": 2, "name": "Elementor", "item": "https://full.services/elementor/" }, { "@type": "ListItem", "position": 3, "name": "Widgets personalizados no Elementor: Guia em 5 passos", "item": "https://full.services/widgets-personalizados-elementor/" } ] }, { "@type": "Organization", "@id": "https://full.services/#org", "name": "FULL Services", "url": "https://full.services", "logo": { "@type": "ImageObject", "url": "https://full.services/wp-content/uploads/full-services-logo.png", "width": 200, "height": 60 }, "sameAs": [ "https://www.instagram.com/fullservicesbr", "https://www.facebook.com/fullservices.br", "https://www.linkedin.com/company/fullservicesbr/" ], "knowsAbout": [ "WordPress", "WordPress Hosting", "Web Development", "Performance Optimization", "WordPress Security", "SEO para WordPress" ], "award": [ "Gold Medal - The WP Weekly Awards 2023 (https://thewpweekly.com/awards-2023/)", "Gold Medal - The WP Weekly Awards 2024 (https://thewpweekly.com/awards-2024/)" ], "hasCredential": { "@type": "EducationalOccupationalCredential", "credentialCategory": "certification", "name": "CVE Numbering Authority (CNA)", "description": "Autoridade de numeração de vulnerabilidades (CVE) para o ecossistema WordPress, autorizada a atribuir IDs CVE. Certificação válida desde 2022-05-03, com abrangência global.", "url": "https://www.cve.org/PartnerInformation/ListofPartners/partner/FULL", "recognizedBy": { "@type": "Organization", "name": "CISA — Cybersecurity and Infrastructure Security Agency", "url": "https://www.cisa.gov/", "sameAs": "https://www.cisa.gov/" } } }, { "@type": "Person", "@id": "https://full.services/#person-clayton", "name": "Clayton Margiotti", "givenName": "Clayton", "familyName": "Margiotti", "jobTitle": "Fundador e CEO da FULL Services", "description": "Fundador e CEO da FULL Services, plataforma WordPress SaaS com 50 mil clientes e 150 mil sites conectados, e anchor do ecossistema Elevor Global. Em 2024 conduziu a FULL a se tornar a primeira e unica empresa brasileira aprovada como CVE Numbering Authority sob a CISA (DHS/EUA). Mais de 20 anos construindo empresas digitais, com 13+ reconhecimentos internacionais (Facebook, GPTW, ONU, RD Summit).", "url": "https://full.services/sobre-nos/", "image": "https://full.services/wp-content/uploads/2026/05/clayton-margiotti.jpg", "sameAs": [ "https://www.linkedin.com/in/cmargiotti/" ], "knowsAbout": [ "Artificial Intelligence", "Cybersecurity", "CVE Program", "WordPress Enterprise", "SaaS Platforms", "Digital Infrastructure", "Technology Entrepreneurship", "Company Building", "Business Leadership", "Digital Growth" ], "hasOccupation": { "@type": "Occupation", "name": "Fundador e CEO", "occupationalCategory": "11-1011.00" }, "knowsLanguage": [ { "@type": "Language", "name": "Portuguese", "alternateName": "pt-BR" }, { "@type": "Language", "name": "English", "alternateName": "en" } ], "memberOf": { "@type": "Organization", "name": "CVE Numbering Authorities", "url": "https://www.cve.org/", "sameAs": "https://www.cve.org/" }, "alumniOf": [ { "@type": "EducationalOrganization", "name": "Global Scaling Academy (Blitzscaling Program)", "url": "https://www.blitzscalingacademy.com" }, { "@type": "EducationalOrganization", "name": "Esade", "url": "https://www.esade.edu" }, { "@type": "EducationalOrganization", "name": "Business School Sao Paulo (BSP)", "url": "https://bsp.edu.br/" }, { "@type": "EducationalOrganization", "name": "Tera", "url": "https://somostera.com" }, { "@type": "EducationalOrganization", "name": "Le Wagon", "url": "https://www.lewagon.com" }, { "@type": "EducationalOrganization", "name": "FIAP", "url": "https://www.fiap.com.br" }, { "@type": "EducationalOrganization", "name": "PUCRS", "url": "https://online.pucrs.br/" } ], "award": [ "Digital Disruptor – Engaging Experiences Master (Globant, 2021)", "Maior ROI do e-commerce brasileiro – Letrissimas (Facebook, 2019)", "1º lugar – Melhores Empresas para Trabalhar no Brasil – Eleva Digital (Great Place to Work, 2018)", "Case global de educacao no Facebook – Metodo SUPERA (Facebook, 2017)", "Maquina de Geracao de Leads, Agencia do Ano (RD Summit / RD Station, 2015)", "Monthly Recurring Revenue, top performance (RD Summit / RD Station, 2015)", "Quality/Efficiency – Entrepreneurship Training (UNCTAD / PNUD-ONU, 2010)" ], "subjectOf": [ { "@type": "NewsArticle", "url": "https://www.globant.com/news/globant-reveals-inaugural-digital-disruptors-award-winners", "publisher": { "@type": "Organization", "name": "Globant" } }, { "@type": "NewsArticle", "url": "https://www.prnewswire.com/news-releases/letrissimas-com-e-destaque-do-e-commerce-brasileiro-com-maior-roi-de-2018-877517801.html", "publisher": { "@type": "Organization", "name": "PR Newswire" } }, { "@type": "NewsArticle", "url": "https://www.segs.com.br/seguros/102599-gestao-de-pessoas-garante-mais-lucro-as-empresas", "publisher": { "@type": "Organization", "name": "Segs" } }, { "@type": "NewsArticle", "url": "https://franquiaeducacional.com/negocios-inovadores-facebook-elege-supera-case-mundial-de-educacao", "publisher": { "@type": "Organization", "name": "Franquia Educacional" } }, { "@type": "NewsArticle", "url": "https://acontecendoaqui.com.br/marketing/resultados-digitais-divulga-vencedores-do-premio-agencias-de-resultados-2015-durante-o-rd", "publisher": { "@type": "Organization", "name": "Acontecendo Aqui" } } ], "worksFor": { "@type": "Organization", "@id": "https://full.services/#org" } }, { "@type": "HowTo", "@id": "https://full.services/widgets-personalizados-elementor/#howto", "isPartOf": { "@id": "https://full.services/widgets-personalizados-elementor/#article" }, "name": "Passo a passo: widgets personalizados no elementor", "description": "Guia passo a passo sobre widgets personalizados no elementor para WordPress.", "url": "https://full.services/widgets-personalizados-elementor/", "totalTime": "PT18M", "author": { "@type": "Organization", "@id": "https://full.services/#org" }, "step": [ { "@type": "HowToStep", "position": 1, "name": "Passo 1: Instale e ative o plugin do addon", "text": "Vá em Plugins, Adicionar novo, busque o addon (por exemplo, Essential Addons for Elementor) e clique em Instalar e Ativar. A versão gratuita já libera dezenas de widgets na aba lateral do editor. Para a versão premium, suba o .zip baixado da conta do desenvolvedor em Plugins, Adicionar novo, Enviar plugin. Confirme que o Elementor Pro 3.x está ativo antes, porque alguns widgets dependem dele." }, { "@type": "HowToStep", "position": 2, "name": "Passo 2: Ative só os widgets que vai usar", "text": "Abra o painel de configuração do addon (em Essential Addons fica em EA, Elements) e desative em massa o que não entra no projeto. Manter 15 widgets ativos em vez de 100 reduz o CSS e o JS injetados em cada página. Esse passo é o que separa um site rápido de um site travado, e quase ninguém faz." }, { "@type": "HowToStep", "position": 3, "name": "Passo 3: Arraste o widget e configure os controles", "text": "No editor do Elementor, procure o widget pela busca da aba lateral e arraste para a estrutura. Cada widget tem seus próprios controles, definidos pelo método `register_controls()` no código do plugin. Ajuste conteúdo, estilo e responsividade nas três abas padrão e salve. Pré-visualize sempre no mobile, onde os widgets dinâmicos mais quebram. --- Criar um widget próprio é a rota para quando nenhum addon entrega a função, e ela parte de uma única classe PHP. Segundo a documentação oficial da Elementor, um widget customizado estende a classe `\Elementor\Widget_Base` e implementa cinco métodos obrigatórios para funcionar. São eles: `get_name()` define o identificador, `get_title()` o rótulo na aba, `get_icon()` o ícone, `get_categories()` a categoria e `register_controls()` os campos editáveis. O método `render()` gera o HTML final. É mais trabalho, mas não custa licença. O erro de campo mais comum aqui tem solução simples. Um widget customizado em PHP registrado no `functions.php` do tema, e não em um plugin próprio, some quando você troca de tema, e o layout salvo no Elementor quebra junto. A correção é" } ] } ] } ```