A maioria dos modelos de seção de herói Elementor gratuitos tem o mesmo problema: você importa um arquivo JSON, obtém um layout congelado e, em seguida, passa uma hora clicando em widgets de cabeçalho individuais, widgets de imagem e espaçadores tentando torná-lo seu Altere a cor de acento São doze painéis de estilo separados.
Antes de rolar: esta coleção apenas cresceu para 11. o mais novo, Extremidades Soltas, o herói de partículas da GPU sentado em #11, foi construído depois que filmamos o vídeo do YouTube, então você não vai encontrá-lo lá Não pule. Mil partículas orbitando sua manchete e se esquivando do cursor do visitante não é algo que você verá em qualquer outra biblioteca do Elementor, e há uma prévia animada abaixo para que você possa vê-la se mover.
Construímos essas 10 seções de heróis de maneira diferente Cada uma importa como a widget único através do Construtor de widgets de complementos mestres. Quando você arrasta para o Elementor, cada título, parágrafo, botão, link e imagem é um campo rotulado na guia Conteúdo, e todo o esquema de cores fica na guia Estilo como 3 a 6 selecionadores de cores Altere um “Accent Color” e os botões, os estados de hover, brilhos e sublinhados atualizam todos juntos, porque o CSS deriva cada tom secundário das cores básicas que você escolhe.
Todos os 10 são gratuitos para download nesta página Cada zip contém o arquivo de widget, as imagens de demonstração que você vê nas capturas de tela (como PNGs prontos para upload mais os SVGs originais) e um README que mapeia cada imagem para seu campo exato As animações (montanhas de paralaxe, gráficos de auto-desenho, emblemas de ingredientes em órbita) aparecem automaticamente, e cada um deles respeita a configuração de movimento reduzido do visitante, então você não está enviando problemas de acessibilidade junto com o colírio para os olhos.
As capturas de tela não explicam como realmente a animação parece Eu fiz um vídeo para você que você deve assistir para que você tenha uma ideia adequada sobre a animação e o que você obterá depois de baixar o modelo das seções de heróis.
E um herói é a primeira tela Tudo o que um visitante rola depois que ele rola a grade de recursos de depoimentos explica, os depoimentos que convencem, a tabela de preços que fecha, o FAQ que mata a última objeção ainda precisa construir Nós embalamos todos aqueles em uma coleção complementar de 30+ modelos de seção Elementor gratuitos, construído da mesma maneira baseada em widgets: escolha um herói aqui, empilhe o resto da página de lá e uma landing page completa será criada em uma tarde em vez de uma semana.
Abaixo você encontrará todos os 10 designs com capturas de tela reais, uma nota honesta sobre quem cada um realmente se encaixa e, em seguida, um guia de importação passo a passo com capturas de tela do fluxo de trabalho exato.
Alguns heróis lêem melhor com movimento neles do que com uma foto estática Se essa é a direção que você está indo, o 20 designs de carrossel de elementadores são o conjunto complementar deste (fluxo de órbita), um acordeão de imagem, um pano de cortina, uma faixa de rolagem de arrasto e um controle deslizante de herói de sangramento completo chamado Plinth, que carrega seu próprio painel de legenda e call-to-action.
Eles importam exatamente como os heróis abaixo: um arquivo JSON, Widget Builder, em seguida, um widget com campos rotulados Oito dos vinte são executados no plugin gratuito e doze precisam Pro, que é a única diferença que vale a pena saber antes de escolher Cada design tem uma demonstração ao vivo, para que você possa assistir a um estilo de movimento por dez segundos em vez de adivinhar a partir de uma captura de tela.
O que está nesta coleção
- 1. produto de análise de Pulseboard (SaaS)
- 2. Alpenrute & aventura
- 3. & Oak & Oak Ember loja/restaurante
- 4. Norr & e-commerce de atelier Norr &
- Agência criativa 5. offbeat Studio
- 6. Forge Atletismo, academia e fitness
- 7. Mentes feias & educação crianças Wiggly apps & educação
- 8. Studio Meridian & interiores arquitetura
- 9. Lowtone eventos e música
- 10. Måne & cuidados com a pele
- 11. pontas soltas (Loose Ends). para portfólios, estúdios e páginas de lançamento que precisam de um queixo
- Como importar uma seção de herói para o Elementor (passo a passo)
- Perguntas frequentes
Por que esses não são modelos de seção comuns
Uma distinção rápida antes da vitrine, porque muda a forma como você as usará.
Um modelo de seção Elementor normal é um arranjo salvo de widgets de estoque Parece terminado, mas estruturalmente são dezenas de peças soltas Esses 10 heróis são widgets personalizados construído com o Widget Builder: HTML, CSS e JavaScript empacotados atrás dos controles do Elementor. Três consequências práticas:
- A edição é mais rápida. O herói do festival de música tem 24 campos (data, localização, três linhas de formação com seus próprios links, dois botões, cores).Você edita-los em um painel em vez de caçar através de uma árvore de recipientes aninhados.
- Animações sobrevivem. O JavaScript é fornecido dentro do widget: botões magnéticos, estatísticas de contagem, paralaxe do mouse Sem plug-ins extras, sem chamadas de CDN, exceto Google Fonts, que cada widget carrega uma vez, por si só.
- Nada vaza. Cada folha de estilo tem como escopo sua própria classe de embalagem e cada nome de animação tem seu prefixo, então dois heróis na mesma página não lutarão entre si ou com os estilos do seu tema Aprendemos isso da maneira mais difícil.
Vai precisar do Plugin Master Addons PRO instalado ao lado Elementor O Widget Builder e seu recurso de importação estão incluídos na versão gratuita, que é como 30.000 + sites já executá-lo.
1. Pulseboard para SaaS e produtos analíticos
O clássico herói dividido, copie à esquerda e product à direita, mas com três detalhes que fazem os visitantes pararem O gráfico de receitas desenha-se em carga com um ponto de pulso viajando ao longo da linha Duas cartas de estatísticas flutuam sobre o painel em um bob lento E todo o visual se inclina alguns graus em direção ao seu cursor, o que faz uma maquete plana ser lida como um objeto.
A linha de prova social por baixo conta até ao seu número (padrão: 4.700 equipas).Você digita um número simples no painel e a animação trata do resto Este é o layout a escolher se o seu produto tem uma tela que vale a pena mostrar: ferramentas analíticas, CRMs, painéis, sistemas de reservas Se o seu produto não fizer uma boa demonstração numa captura de ecrã, olhe para Offbeat (#5) em vez disso, porque este layout vive ou morre nessa imagem da mão direita.
Você pode editar: Título de 4 partes (a palavra de acento sublinhada é seu próprio campo), texto do crachá, parágrafo, 2 botões com controles de link completo, número de contagem, texto de prova, 3 imagens, 6 cores.
2. Alpenrute (Alpenrute) para viagens, passeios e marcas ao ar livre
Um panorama de montanha em tela cheia construído a partir de três camadas de imagem separadas Mova o mouse e as camadas se deslocam em velocidades diferentes Isso é profundidade real, não uma foto plana com texto no topo Nuvens flutuam em loops de 55 e 90 segundos, e um ticker vertical de altitude à direita conta de 0 a 2.847 m enquanto a página carrega Há até um pequeno caminhante com um farol piscando no cume da frente Ninguém precisa do caminhante Todo mundo se lembra do caminhante.
Como o cenário vem de três campos de imagem, você pode trocar as montanhas por suas próprias obras de arte em camadas (dunas, litoral, horizonte da cidade) e manter a paralaxe A linha de fatos (27 rotas /8 caminhantes max /19 anos) é de seis campos editáveis, e é onde esse herói ganha confiança: números específicos em vez de adjetivos Melhor ajuste: empresas de trekking, operadores turísticos, locais de parques nacionais, qualquer marca que venda um lugar em vez de um produto.
Você pode editar: Manchete de 2 linhas, sobrancelha, parágrafo, 2 botões + links, número e rótulo de altitude, 3 pares de fatos, 4 imagens de cenário, 4 cores (todas as re-tintas do gradiente do céu de uma cor base).
3. & Oak & Oak para cafeterias, cafés, cafés e restaurantes Ember
Fundo escuro de café expresso, manchete serifada com uma palavra de acento âmbar itálico e a peça de assinatura: um anel de texto lendo “SMALL BATCH · ROASTED EVERY THURSDAY · SINGLE ORIGIN” que gira lentamente em torno de uma foto de café com leite de cima para baixo enquanto o vapor sobe do copo Um saco de café se inclina para o canto e se endireita quando pairado Na parte inferior, uma marquise de nome de origem (Yirgacheffe, Huila, Sidra...) rola em loop e faz uma pausa no hover.
O texto do anel é um campo editável, então uma padaria escreve “SOURDOUGH · BAKED AT 5 AM · NO SHORTCUTS” e toda a personalidade transfere O mesmo para a marquise: um campo, impresso duas vezes internamente para que o loop nunca mostre uma costura Trabalha para qualquer negócio de alimentos onde o artesanato é o pitch roasteries, padarias, cervejarias, restaurantes farm-to-table.
Você pode editar: Manchete de 3 partes com palavra de acento, parágrafo, nota de preço, 2 botões + links, texto em anel, texto de marquise, 2 imagens, 5 cores.
4. Norr 4. atelier para marcas de moda e premium e-commerce
O design mais silencioso do conjunto e o mais editorial Duas palavras de grandes dimensões (QUIET /TAILORING por padrão) abrangem uma moldura de retrato em arco, cada palavra limpando de uma borda cortada na carga. Passe o mouse sobre o retrato e ele se transforma em um segundo visual enquanto a legenda abaixo muda de “01/02 The Longline Coat para 002/02 The Drape Dress” Que a troca de passagem de duas imagens é todo o widget em miniatura: contido, mas vivo.
Apenas três cores para gerenciar (tela, tinta, sotaque sábio) porque o poder do design é tipografia e espaço negativo em vez de paleta Se sua marca fotografa bem e você quer que o site pareça um lookbook, este é o único Moda, jóias, cerâmica, móveis Se você precisar amontoar cinco propostas de valor acima da dobra, ele vai lutar com você, e deve.
Você pode editar: ambas as palavras principais, etiqueta vertical da temporada, parágrafo, botão + link, dica de hover, 2 imagens de look com 2 legendas, faixa de rodapé, 3 cores.
5. Offbeat Studio para agências criativas e estúdios
Cobalto, coral e limão em off-white Bauhaus poster energia A manchete grita em maiúsculas com uma palavra de destaque destacada que recebe um golpe amarelo sublinhado meio segundo após a carga Abaixo dela, três peças de portfólio sentam-se ligeiramente giradas como impressões em uma mesa; cada uma endireita, levanta e inclina-se em direção ao seu cursor em 3 D no hover Um adesivo “BOOKING FOR Q4” gira preguiçosamente acima da colagem.
O call-to-action circular é a peça com a qual as pessoas brincam. É magnético: segue o seu cursor dentro do seu raio e volta quando sai Cada telha tem o seu próprio campo de ligação, por isso a colagem funciona como um mini portfólio com três estudos de caso clicáveis diretamente do herói Para agências, designers, fotógrafos, qualquer um cujo trabalho é o campo.
Você pode editar: 3 etiquetas de serviço, kicker, título de 5 partes (palavra de sotaque separada), parágrafo, botão magnético + link, 3 peças com 3 links, texto adesivo, marquise do cliente, 5 cores.
6. Forge Athletics para academias e marcas de fitness
Carvão e verde volt, condensado tipo maiúscula, e uma manchete que bate em: cada linha pousa com um snap distorcido e em escala em vez de um fade educado A linha dois é delineada em vez de preenchida, a linha três leva a cor volt Por trás de tudo, uma palavra fantasma gigante (FORGE) deriva contra o seu pergaminho A imagem do atleta fica em um quadro de paralelogramo angular com uma barra de volt cortando o layout diagonalmente.
Estatísticas contam acima ao longo da parte inferior: 14 plataformas, 31 classes, 24 membros por treinador max Observe o que esse último número faz. “Membros por treinador, max” é uma promessa, não uma ostentação, e é o tipo de linha que preenche as sessões de introdução Troque a palavra fantasma pelo nome da sua academia em um campo Construído para ginásios de força, caixas CrossFit, estúdios de artes marciais e treinadores cuja marca é intensidade.
Você pode editar: Manchete de 3 linhas, sobrancelha, parágrafo, palavra fantasma, etiqueta vertical, 2 botões + links, 3 pares de estatísticas, imagem de atleta, 4 cores.
7. Wiggly Minds (Mentes Wiggly) para aplicativos infantis, escolas e educação
Pastéis doces, tipo arredondado, e três mascotes blob: um lendo um livro, um segurando um lápis, um acenando uma varinha estrela Eles pop em com uma mola, bob suavemente, e fugir de seu cursor como ele se move Estrelas cintilar através do fundo, um rabisco amarelo desenha-se sob a palavra de acento inclinado, eo botão principal esmaga para baixo como geléia quando pressionado Uma onda branca fecha a seção para que ele flui para o que vem a seguir.
O layout centrado mantém os pais (os compradores reais) em um caminho claro: faixa etária crachá, promessa, um parágrafo que responde “é este tempo de tela EU vou me arrepender?”, linha de confiança com a classificação App Store Os mascotes são três campos de troca em seus próprios personagens e o comportamento de salto, sombra e cursor-tímido se aplicam automaticamente Para aprender aplicativos, creches, clubes infantis, práticas pediátricas e marcas de brinquedos.
Você pode editar: manchete com acento inclinado, crachá, parágrafo, 2 botões + links, linha de confiança, 3 imagens de mascote, 6 cores.
8. Studio Meridian (Estúdio Meridian) para arquitetos, designers de interiores e portfólios
Disciplina de grade suíça: uma meta coluna (prática, fundada, projetos no local), uma fina manchete de 300 pesos com uma palavra sublinhada em tijolo e uma grande foto de projeto que revela com um pano Uma cortina cor de papel desliza e a imagem se instala a partir de um leve zoom durante um segundo inteiro O detalhe sobre o qual as pessoas nos enviam um e-mail é a planta baixa na barra lateral, que desenha-se 1000 primeiro, depois baloiços de porta, depois rótulos de sala desaparecendo É uma animação SVG que é enviada dentro da imagem de demonstração, sem plugin envolvido.
Vinte e cinco campos editáveis fazem deste o herói mais rico em dados dos dez Todo meta rótulo, ambas as legendas, até mesmo as coordenadas na regra inferior Apenas três cores, e isso é deliberado: grafite, papel e tijolo é um sistema, e sistemas são o que esse público respeita Para escritórios de arquitetura, estúdios de interiores, engenheiros estruturais e qualquer portfólio onde a restrição sinalize competência.
Você pode editar: Título de 5 partes, parágrafo, botão + link de texto com URLs, 3 meta pares, foto + legenda, planta baixa + legenda, regra de coordenadas, 3 cores.
9. Lowtone para festivais, concertos e páginas de eventos
O design mais alto aqui, e ele ganha Uma marca de palavras gigante divide a palavra do meio em um gradiente laranja-violeta, um orbe brilhante deriva atrás do conteúdo e se inclina para longe do seu cursor, e ao longo da parte inferior corre uma largura total equalizador: dezenas de compassos, cada um animando em seu próprio ritmo para que a tira nunca faça loops visíveis As barras são geradas pelo próprio script do widget e extraem seu gradiente das cores da aba Estilo, então recolorir o festival recolora o som.
Três linhas de formação (FRI / SAT / SUN) cada um carrega seu próprio rótulo, lista de atos e link, para que você possa enviar cada dia para sua própria página de programação O gradiente é de três paradas de cores separadas na guia Estilo Mudá-los e a marca de palavras, botões, brilho e equalizador todos seguem Para festivais, locais, noites de clube, conferências com headliners e lançamentos de álbuns.
Você pode editar: divida a marca da palavra, data, localização, parágrafo, 3 linhas de formação com 3 links, 2 botões + links, imagem orb, 5 cores incluindo todas as 3 paradas de gradiente.
10. Måne (marcas de cuidados com a pele, beleza e bem-estar)
Nebulosa lavanda e pêssego turvas borrar e deriva atrás de uma manchete serifada cuja linha itálico, “the night shift.”, recebe um gradiente suave sublinhado que floresce para fora A garrafa de produto flutua suavemente no centro de um anel tracejado, e três emblemas de ingredientes (2% retinal, 5% fermento de aveia, 0% fragrância) órbita ele está em um loop de 26 segundos, girando em sentido contrário para que permaneçam em pé o tempo todo.
Esses emblemas são o jogo de conversão Reivindicações percentuais são o que os compradores de cuidados com a pele procuram, e aqui eles literalmente circundam o produto Todos os seis valores de emblemas e rótulos são campos de texto simples A linha de reivindicações abaixo (dermatologista testado · fragrância livre · vidro reciclável) arredonda a história de confiança Para cuidados com a pele, suplementos, velas, cuidados com o cabelo qualquer produto onde a lista de ingredientes é o argumento.
Você pode editar: Manchete de 2 partes, sobrancelha, parágrafo, 2 botões + links, 3 reivindicações, 3 pares de crachás em órbita, imagem de garrafa, 4 cores.
11. pontas soltas (Loose Ends). para portfólios, estúdios e páginas de lançamento que precisam de um queixo
Este é novo, e é a coisa mais ambiciosa que temos empurrado através do Widget Builder até agora: uma manchete em tela cheia sentado no olho de um vórtice de mil partículas, simuladas na GPU do visitante em tempo real. Mova o mouse e as partes do enxame ao redor do cursor, depois salta para trás A câmera deriva um pouco também, o que faz com que o campo seja lido como um espaço em vez de um vídeo de fundo A manchete se decodifica com uma confusão de personagens na carga, o botão primário carrega uma varredura lenta de luz e uma camada de filme-grão mantém o fundo escuro de bandas.
As partículas não são uma aparência fixa. Um dropdown na guia Estilo alterna o campo entre elas Fios (filamentos rodopiantes coloridos), Neve (deriva branca lenta), Estrelas (um campo estelar quase parado) e Universo (longos wisps de espaço profundo).Quatro sliders controlam a densidade (100 a 2.000 partículas), tamanho, profundidade e quão duro o enxame reage ao mouse Há também um controle de alinhamento que move toda a pilha de conteúdo para a esquerda, centro ou direita, então o mesmo widget funciona como um herói editorial alinhado à esquerda ou uma página de respingo centrada Uma nota honesta: o mecanismo 3 D carrega de um CDN, cerca de 1,2 MB armazenado em cache após a primeira visita, e é executado na WebGPU no Chrome e Edge com um fallback WebGL2 em todos os outros lugares Se essa solicitação falhar, o herói renderiza como uma seção de estilo normal e nada quebra Nenhuma imagem para fazer upload também; toda a cena é gerada.
Você pode editar: texto de pílula, sobrancelha, cabeçalho, slogan, 2 botões com controles de link completo, dica de rolagem, 3 textos de barra inferior, alinhamento de conteúdo (esquerda/centro/direita), tipo de partícula (fios /neve /estrelas /universo), densidade, tamanho, profundidade e controles deslizantes de reação do mouse, 5 cores.
Como importar um modelo de seção de herói para o Elementor (passo a passo)
Todo o processo leva cerca de dois minutos por widget Você precisa WordPress com Elementor e o Adições Mestres Plugin PRO ativo Aqui está o fluxo de trabalho exato, capturado em tela de uma importação real do herói do festival de música.
Passo 1: Descompacte o download
Clique duas vezes no zip (aqui, music-festival-hero.zip).Nentro você encontrará três coisas: o arquivo widget (widget-music-festival.json), a demo-images pasta com PNGs prontos para upload e a README.txt isso indica qual imagem pertence a qual campo. Há também um svg-originals pasta mais no FAQ.
Passo 2: Importe o JSON para o Widget Builder
No seu administrador WordPress, acesse Complementos mestres → Construtor de widgets e clique Importar Widget. Arraste o .json entre na caixa de diálogo ou clique em Procurar arquivos. Apenas o JSON vai aqui As imagens vêm mais tarde, através da biblioteca de mídia normal.
Passo 3: Verifique o widget e salvar
O widget abre no construtor com tudo já com fio: seções de conteúdo à esquerda, o HTML/CSS/JS atrás de guias e uma barra lateral de Documentação listando cada token de campo Você não precisa tocar em nenhum deles Basta clicar Salvar configurações. Se você está curioso para saber como os campos se conectam ao código, o Guia de configurações do Widget Builder explica o sistema de tokens.
Passo 4: Arraste-o para sua página
Abra qualquer página com o Elementor Seu novo widget aparece no painel abaixo Favoritos; procurar o nome dele se não o avistarem Arraste-o para um recipiente Uma dica para si: definir o recipiente Largura do conteúdo até a largura total portanto, designs de ponta a ponta, como o festival e os heróis de viagens, podem realmente chegar aos limites.
Passo 5: Edite o conteúdo e os links
Clique no widget e a guia Conteúdo lista cada peça editável, agrupada da maneira como o design é agrupado: Área de conteúdo, Linhas de alinhamento, Botões, Imagens. Digite qualquer texto e as atualizações de visualização ao vivo Cada botão e linha vinculada tem um controle de link Elementor adequado Cole sua URL e, em seguida, clique no mecanismo para alternar “open em nova janela” e “nofollow”.
Passo 6: Carregue as imagens de demonstração
Na seção Imagens, clique em cada campo e carregue o arquivo correspondente do demo-images pasta.o README mapeia-os se um widget tem vários Os PNGs de demonstração são exportados com resolução de 2 x, para que eles permaneçam afiados nas telas de retina Troque em suas próprias fotos a qualquer momento; o campo é um selecionador de mídia padrão do WordPress. Então Publicar. Feito.
Para reestilizar: abra o Guia estilo. Cada herói expõe sua paleta completa como um punhado de controles de cores, e cada tonalidade derivada (estados de pairar, brilhos, bordas, gradientes) recalcula a partir deles Você não pode mei-recolorir esses desenhos, que é exatamente o ponto.
Perguntas frequentes
Esses modelos de seção de heróis funcionam com Elementor gratuito?
Sim. tudo aqui é executado em Elementor livre mais o plugin Master Addons PRO. Não Elementor Pro necessário O recurso de importação Widget Builder é enviado na versão gratuita.
As animações vão desacelerar meu site?
Nenhuma diferença mensurável em nossos testes As animações são CSS e um pequeno script scoped por widget Sem bibliotecas de animação, sem dependência jQuery, sem solicitações externas, exceto um Google Fonts chamada por widget (e carrega uma vez, mesmo que o widget aparece duas vezes) Os zips em si executar 30 KB a 2 MB, e isso é quase inteiramente as imagens de demonstração.
O que acontece com os visitantes que desligam as animações?
Todo widget verifica a preferência de movimento reduzido do sistema operacional Se estiver ligado, as entradas são renderizadas instantaneamente, as marquises e as órbitas param e os contadores mostram seus números finais O design permanece intacto; o movimento sai educadamente.
Por que existem arquivos SVG no zip se o WordPress não os carrega?
O WordPress bloqueia uploads SVG por padrão por razões de segurança, de modo que os zips incluem versões PNG que carregam em qualquer lugar Esses são os que o guia de importação usa O svg-originals pasta é um bônus: se o seu site permite SVG (através de um plugin como Safe SVG), as versões vetoriais são infinitamente nítidas em uma fração do tamanho do arquivo.
Posso usar duas dessas seções de heróis no mesmo site?
Sim, mesmo na mesma página Os estilos de cada widget são pontuados para sua própria classe de wrapper e seus nomes de animação são prefixados, para que não possam colidir uns com os outros ou com seu tema.
Posso alterar as fontes?
Cada widget carrega suas duas Fontes do Google automaticamente para corresponder ao design Para trocá-las, abra o widget no Widget Builder, edite o URL da fonte na guia JS e os nomes da família de fontes na guia CSS É uma mudança de duas linhas Documentos do Widget Builder cubra como funcionam as guias de código.
Posso editar o design em si, não apenas o conteúdo?
Essa é a parte divertida Todo widget está totalmente aberto no Widget Builder O HTML, CSS e JS estão bem ali em guias, comentadas e legíveis Adicione um campo, remova uma seção, altere um ponto de interrupção Se você puder editar uma folha de estilo, poderá bifurcar qualquer um desses em algo novo O Construtor de widgets page tem uma visão geral, e se você construir algo bom, queremos vê-lo.
Todas as 10 seções de heróis são gratuitas para projetos pessoais e comerciais Construído e testado pela equipe Master Addons no Elementor com Master Addons v3. x. Perguntas ou um pedido de widget? nos diga nos comentários A coleção cresce com base no que as pessoas pedem.
