Como usar o Visual Editor para criar widgets no WordPress

Deseja usar um editor visual para criar widgets para seu site?

Com o editor visual correto, você pode criar widgets personalizados com links, imagens, texto e muito mais. Em seguida, você pode adicionar esses widgets a diferentes áreas do seu tema e exibi-los em todo o seu site WordPress.

Neste artigo, mostraremos a você como usar um editor visual para criar widgets no WordPress.

Por que usar o Visual Editor para criar widgets no WordPress?

Os widgets permitem que você adicione conteúdo rico fora da página principal e da área de postagem. Cada tema do WordPress é diferente, mas, em geral, você pode adicionar widgets a áreas como o rodapé, o cabeçalho e a barra lateral.

Muitos sites usam essas áreas para mostrar uma seção sobre, exibir as postagens mais populares, adicionar um formulário de inscrição no boletim informativo por e-mail e muito mais.

O WordPress permite que você adicione uma ampla variedade de blocos a qualquer área pronta para widgets, e muitos plug-ins do WordPress também adicionam seus próprios blocos.

Por exemplo, se você estiver usando o Smash Balloon Twitter Feed, poderá incorporar tweets recentes em qualquer área pronta para widget usando o bloco Twitter Feed do plug-in.

No entanto, às vezes você pode querer criar um widget personalizado que mostre conteúdo multimídia rico aos seus visitantes. Por exemplo, talvez você queira carregar sua foto de autor e usá-la para criar um widget de biografia do autor, completo com links para seus diferentes perfis de mídia social.

Dito isso, vamos ver como você pode usar um editor visual para criar widgets personalizados no WordPress. Basta usar os links abaixo para acessar o método adequado para seu tema:

Método 1: Usando o plug-in de opções de widgets (funciona com todos os temas do WordPress)

A maneira mais fácil de criar um widget personalizado é usar o plug-in Widget Options. Ele adiciona muitas configurações extras ao editor de widget visual padrão do WordPress, incluindo a capacidade de mostrar widgets diferentes dependendo da função do usuário, ocultar widgets do WordPress em dispositivos móveis e muito mais.

Ele também adiciona um widget de texto que você pode personalizar com seus próprios links, imagens, formatação e muito mais. Isso permite que você crie um widget personalizado sem precisar escrever nenhum código.

Primeiro, você precisa instalar e ativar o plug-in Widget Options. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, vá para a página Appearance ” Widgets em seu painel do WordPress.

Agora você verá uma lista de todas as áreas prontas para widgets em seu tema do WordPress. As opções que você vê podem variar dependendo do seu tema.

Você também verá todos os widgets que pode adicionar ao seu site. Usaremos o widget Text para este guia, portanto, basta arrastá-lo e soltá-lo em qualquer área preparada para widgets.

Agora você verá uma pequena janela pop-up.

Esse pop-up é essencialmente um editor de minipágina ou postagem, portanto, deve parecer familiar.

Para começar, você pode digitar um título, que será exibido acima do widget.

Depois disso, você pode digitar o texto diretamente no pequeno editor, adicionar links e imagens, alterar a formatação, adicionar marcadores e listas numeradas e muito mais.

Você também pode exibir ou ocultar widgets em páginas específicas do WordPress e adicionar estilos personalizados ao widget do WordPress.

Quando estiver satisfeito com a configuração do widget, clique no link “Done” (Concluído) para salvar suas configurações.

Agora, se você visitar seu site, verá o novo widget de rich-text ativo.

Se preferir, você pode criar um widget personalizado visualmente usando o WordPress Customizer.

Basta ir para Appearance ” Widgets, mas, dessa vez, clique em ‘Manage with Live Preview’.

Isso abrirá o Customizer com as configurações do widget já selecionadas.

Agora você pode clicar na área em que deseja adicionar o widget personalizado.

Depois disso, clique em “Add a Widget” (Adicionar um widget), que abre um painel mostrando todos os diferentes widgets.

Basta localizar “Texto” e dar um clique para adicioná-lo ao seu site.

Isso abre um pequeno editor onde você pode adicionar texto, links, mídia e muito mais.

À medida que você fizer alterações no editor, a visualização ao vivo será atualizada automaticamente.

Quando estiver satisfeito com a aparência do widget, clique no botão “Publish” (Publicar) para torná-lo ativo em seu blog ou site do WordPress.

Se não conseguir encontrar o personalizador de temas no painel do WordPress, consulte nosso guia sobre como corrigir a falta do personalizador de temas no painel de administração do WordPress.

Método 2: Usando o editor completo do site (funciona com temas do WordPress habilitados para blocos)

Se estiver usando um tema do WordPress habilitado para blocos, você poderá adicionar blocos a qualquer área preparada para widgets usando o editor de site completo.

Dessa forma, você pode criar widgets personalizados organizando os blocos padrão do WordPress em uma área pronta para widgets, como a barra lateral. Você também não precisa instalar um plug-in separado do WordPress.

É também uma forma de adicionar widgets a áreas que você não pode editar usando o editor de widgets ou o personalizador padrão do WordPress. Por exemplo, você pode adicionar widgets ao modelo de sua página 404.

Para começar, vá para Appearance ” Editor no painel do WordPress.

Por padrão, o editor de site completo mostra o modelo inicial do seu tema, mas você pode adicionar widgets e blocos a qualquer área.

Para ver todas as opções disponíveis, basta selecionar “Templates” ou “Template Parts”.

Agora você pode clicar no modelo ou na parte do modelo que deseja editar.

O WordPress agora mostrará uma visualização do design. Para prosseguir e editar esse modelo, clique no pequeno ícone de lápis.

Feito isso, clique no ícone azul “+” e localize o primeiro bloco que deseja usar em seu widget personalizado.

Você pode usar qualquer combinação de blocos que desejar, mas se planeja usar uma imagem e um texto, recomendamos começar com o bloco Media & Text.

Isso permite que você organize facilmente uma imagem ao lado de algum texto em um layout agradável. Com isso em mente, o bloco Media & Text é perfeito para criar uma caixa de informações do autor, como você pode ver na imagem a seguir.

Depois de selecionar o bloco que deseja usar, basta arrastá-lo e soltá-lo em uma área pronta para widgets, como a barra lateral e o rodapé.

O editor de site completo lhe dá acesso ao conjunto completo de ferramentas e configurações do WordPress. Isso significa que você pode adicionar um botão de chamada para ação, texto, links, imagens e outros conteúdos a uma variedade maior de blocos.

Dito isso, você deve conseguir criar exatamente o widget que tinha em mente. Basta adicionar mais blocos e conteúdo à área pronta para o widget até que você fique satisfeito com a aparência.

Para obter mais ideias sobre como usar as áreas prontas para widgets do seu tema, consulte nossa lista de verificação de itens a serem adicionados ao rodapé do seu site WordPress.

Quando estiver satisfeito com as alterações feitas, clique em “Save” (Salvar).

Agora, se você acessar seu site do WordPress, verá o novo widget personalizado ativo.

Esperamos que este artigo tenha ajudado você a aprender como usar facilmente o editor visual para widgets do WordPress. Talvez você também queira ver nosso guia sobre os melhores construtores de páginas do tipo arrastar e soltar e como criar uma página de destino com o WordPress.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.