Edição completa do site WordPress: um guia para iniciantes

A edição completa do site (FSE) é a mais nova novidade no WordPress. Embora existam temas premium que utilizam essa tecnologia promissora há vários anos, ela finalmente chegou ao mainstream graças à adoção do Gutenberg em 2018. Neste post, daremos a você os detalhes sobre o que é a edição completa do site WordPress, no que ela é construída e como usá-la. Vamos lá.

O que é a edição de site completo do WordPress?

Nos últimos anos, o WordPress teve uma estrutura muito distinta. Você usaria o Editor do WordPress para adicionar conteúdo a postagens e páginas e, em seguida, instalaria plug-ins para funcionalidade extra. Os arquivos principais do WordPress eram responsáveis ​​por cabeçalhos, rodapés, áreas de conteúdo, barras laterais e outros elementos. Nos últimos anos, a edição completa do site WordPress mudou tudo isso. Com base em blocos, a edição completa do site torna muito mais possível editar todos os aspectos do seu site WordPress. Você pode criar cabeçalhos e rodapés personalizados e criar conteúdo personalizado em qualquer lugar. A edição completa do site também se estende além do núcleo do WordPress com criadores de páginas como o Divi, que o levam a um nível totalmente novo de recursos de design.

Benefícios da edição completa do site no WordPress?

Um dos maiores benefícios da edição completa do site é a capacidade de personalizar seu site da maneira que desejar, de cima para baixo. Por exemplo, agora você pode criar e editar modelos de postagem e página, cabeçalhos e rodapés, tudo no front-end. Além disso, você pode adicionar estilos globais ao seu site e blocos e criar suas próprias paletas de cores, fontes, espaçamento e muito mais. Ele permite que os usuários do WordPress criem sites personalizados com mais facilidade do que no passado devido aos requisitos mínimos de codificação. Como mencionado anteriormente, os temas completos de edição do site usam blocos, para que você possa utilizá-los em todas as áreas do seu site para criar um site personalizado especificamente para você.

Fácil de usar

Outro benefício da edição completa do site no WordPress é a facilidade de uso para seus clientes. Se você é um freelancer ou profissional de agência da web que deseja entregar um site após a conclusão, os temas do FSE são o caminho a percorrer. Não há necessidade de eles se aprofundarem no código do tema para fazer alterações no design. Você vê, os temas de edição de sites completos utilizam um arquivo theme.json que permite aos desenvolvedores adicionar estilos e funcionalidades facilmente. A criação de uma paleta de cores global, a atribuição de fontes e outros estilos podem ser definidos globalmente, tornando mais fácil para os usuários finais adicionar e editar conteúdo.

Otimizado para velocidade

Por fim, os FSEs geralmente são mais rápidos. Eles geralmente têm menos inchaço, são configurados de maneira ideal e processam solicitações muito mais rapidamente do que os temas tradicionais do WordPress. Dito isto, a hospedagem é um fator, então você deve escolher um provedor de hospedagem respeitável que utilize cache, seja compatível com a versão mais recente do PHP e, de preferência, forneça opções de hospedagem em nuvem. Para saber mais, confira como otimizar a velocidade da página para SEO.

A edição completa do site WordPress está disponível apenas em temas de bloco

É importante observar que nem todos os temas suportam a edição completa do site. Construído sobre blocos de Gutenberg, lançado em 2018, é a base do FSE. Quando introduzidos pela primeira vez, os blocos eram suportados apenas na área de conteúdo dos sites – como postagens e páginas. Com temas FSE, essa funcionalidade se expande para literalmente todos os aspectos do tema. Conforme mencionado anteriormente, o arquivo theme.json controla todas as configurações e estilos globais do site. Nas gerações anteriores, o personalizador de temas controlava as configurações do site. Agora, o WordPress Site Editor controla todos os estilos e configurações globais, além de oferecer aos usuários a capacidade de adicionar blocos em todo o tema.

Dito isto, ainda não há muitas opções para temas completos de edição de sites. Existem milhares de temas WordPress por aí, com apenas um pouco mais de 160 temas FSE disponíveis atualmente. Enquanto a edição full-site está crescendo em popularidade, a tecnologia está apenas começando a se firmar.

O que é um tema de bloco?

Para simplificar, um tema de bloco é um tema do WordPress que contém modelos totalmente construídos em blocos. Isso não inclui apenas postagens e páginas, mas literalmente todo o resto. Barras laterais, rodapés, cabeçalhos, modelos de postagem e todos os outros aspectos do conteúdo do tema.

No passado, os sites WordPress consistiam em uma série de arquivos PHP tradicionais. Agora, os temas de bloco são todos construídos em modelos de bloco. Como mencionado anteriormente, todos os temas de bloco têm um arquivo theme.json que permite que desenvolvedores e usuários adicionem funcionalidades adicionais, definam estilos globais e muito mais.

Temas padrão, como Twenty Twenty-Two, são considerados temas de bloco. Em vez de usar o antigo personalizador do WordPress para adicionar os slogans do seu site, escolher cores ou selecionar fontes, você usa o WordPress Site Editor para controlar essas coisas. Além disso, você usa blocos para adicionar conteúdo a modelos para personalizá-lo.

Qual é a diferença entre blocos estáticos e dinâmicos (tema)

Antes de começarmos a mostrar como usar a edição completa do site no WordPress, há alguns princípios básicos a serem entendidos em relação aos blocos do WordPress. Existem dois tipos de blocos no WordPress FSE – blocos estáticos e blocos temáticos dinâmicos. Os blocos estáticos são compostos de conteúdo conhecido no momento em que você cria e publica uma postagem. Alguns exemplos de blocos estáticos são parágrafo, cabeçalho, imagem (embora também possam ser dinâmicos), citação, quebra de página, botões e muito mais.

Por outro lado, os novos blocos dinâmicos FSE (chamados Theme Blocks ou Site Blocks) são projetados para serem usados ​​na criação de modelos e podem extrair conteúdo do back-end de seu site dinamicamente para exibi-lo em seu site. Esses blocos temáticos dinâmicos podem gerar feeds de postagem de blog (com um bloco de loop de consulta), títulos de postagem, conteúdo de postagem, imagens em destaque e muito mais. O bloco de conteúdo da postagem é um ótimo exemplo porque qualquer alteração no conteúdo da postagem no back-end atualizará automaticamente cada instância desse bloco de conteúdo da postagem em todo o site.

Introdução à edição completa do site no WordPress

Agora que você tem uma compreensão básica do que é a edição completa do site, vamos falar sobre como usá-la. Nesta seção, vamos ajudá-lo a entender como escolher um tema de bloco, como personalizar os modelos contidos no tema, definir estilos globais, usar blocos de tema dinâmico e apresentá-lo aos padrões de bloco.

Escolhendo um tema que suporte a edição completa do site

Atualmente, existem mais de 150 temas completos de edição de sites disponíveis no repositório do WordPress. Existem duas maneiras de escolher um tema FSE. Você pode escolher um gratuito no repositório do WordPress ou comprar um de um fornecedor premium. Para esta postagem, escolheremos um FSE no repositório do WordPress.

Primeiro, faça login no painel do WordPress e clique em Aparência > Temas . Em seguida, clique no botão Adicionar novo .

Em seguida, clique no link Filtro de recursos para definir as opções de filtragem.

Existem três opções para classificar, incluindo assunto, recursos e layout. Você pode escolher o assunto do tema se desejar, caso contrário, basta marcar a caixa Editor do site . Depois de fazer suas seleções, clique em Aplicar filtros .

Sua tela será atualizada e revelará as opções disponíveis para você. Você pode escolher um tema para acompanhar este tutorial, ou simplesmente escolher o tema Twenty Twenty-Two, que é o que usaremos para este post. Depois de fazer sua escolha, ative seu tema para começar.

Personalizando um Modelo

Com seu novo tema ativo, o próximo passo é começar a customizar. Neste tutorial, não vamos editar o theme.json. Vamos nos ater ao básico do Twenty Twenty-Two para que você se acostume com o funcionamento dos temas de edição de sites completos. Dito isso, vá para Aparência > Editor .

Depois que o editor do site for carregado, você será padronizado para o modelo de página inicial.

Para editar outros modelos dentro do seu tema, basta clicar no logotipo do WordPress no canto superior esquerdo do editor do site e clicar em Modelos . No Twenty Twenty-Two, há vários modelos que você pode editar, incluindo postagem única, página, 404, em branco, arquivo de pesquisa e muito mais. Para selecionar um modelo diferente para editar, clique nele para ativar o editor de site para essa página. Além disso, você pode criar um novo modelo para seu site clicando no botão Adicionar novo no canto superior direito do painel.

Existem várias opções para novos modelos no Twenty Twenty-Two, incluindo página inicial, autor, categoria, data, tag e páginas de taxonomia. Dito isto, essas opções serão diferentes dependendo de qual tema você escolheu na seção anterior.

Peças do modelo

A próxima área que você pode editar em um modelo de página são as partes do modelo. Em Twenty Twenty-Two, você pode editar as partes do modelo de cabeçalho e rodapé em cada modelo. No entanto, cada modelo possui partes de modelo diferentes que são editáveis. Por exemplo, o modelo de página inicial também oferece uma parte do modelo de blog.

Para este exemplo, vamos editar a parte do modelo de cabeçalho. Aqui você pode editar os blocos existentes ou adicionar novos ao modelo. Para adicionar mais blocos, alterne o inseridor de bloco clicando no botão + azul no canto superior esquerdo do editor.

Isso revelará todos os blocos disponíveis para você. Você pode adicionar um bloco de duas maneiras. Clique e arraste o bloco escolhido para a parte do modelo ou clique no ícone + para adicionar um.

Além disso, você pode editar blocos existentes em um modelo. Basta clicar no bloco que deseja editar para exibir suas opções. Por exemplo, se você deseja editar o logotipo do site, clique nele para adicionar uma nova imagem.

Como definir estilos globais

Outro grande recurso de um tema de edição de site completo é a capacidade de definir estilos globais. Você pode escolher fontes, cores, temas de cores e ajustar o espaçamento. Você pode optar por definir estilos em todo o site ou apenas em determinados blocos. Esta é uma enorme economia de tempo em comparação com os temas do passado.

Para acessar os estilos do seu site, clique no ícone de estilos no canto superior direito do editor do site.

Uma vez ativado, você pode navegar pelos estilos disponíveis no tema Twenty Twenty-Two clicando no link de estilos de navegação para escolher um esquema de cores para o seu site.

A próxima opção, tipografia, permite que você escolha as opções de fonte para seu texto e links. Isso inclui a família da fonte, tamanho, altura da linha e espessura da fonte (aparência).

Em cores, você pode editar as cores usadas em sua paleta de cores global. Você pode atribuir cores ao plano de fundo, texto e links. Em Twenty Twenty-Two existem 17 cores sólidas e 20 gradientes. Além disso, você pode adicionar cores e gradientes personalizados ao seu site, o que é ótimo para fins de branding.

Por fim, você pode ajustar o preenchimento ao seu layout. O preenchimento pode ser definido como superior, esquerdo, direito e inferior como um todo ou individualmente.

Usando blocos de tema dinâmico

O editor de bloco contém mais de 90 blocos que podem ser utilizados para construir modelos de página no editor de site. Entre eles, existem alguns blocos de temas dinâmicos que preencherão o conteúdo dinâmico mostrado no front-end do seu site. Por exemplo, ao clicar no modelo de postagem única, você verá alguns que são usados, incluindo o título da postagem, a imagem em destaque da postagem e os blocos de conteúdo da postagem. Eles são úteis para criar um modelo dinâmico para exibir suas postagens de blog dinamicamente.

Ao editar temas, você pode utilizar blocos de temas para criar cabeçalhos, rodapés e muito mais. Ao todo, são 27 blocos temáticos. Não abordaremos todos eles aqui, mas examinaremos alguns para que você tenha uma boa compreensão do que pode fazer.

Construindo um novo cabeçalho para seus modelos

Vamos demonstrar como usar alguns blocos de tema para criar uma nova parte de modelo de cabeçalho para seu site. Comece navegando até o menu Modelos . Em seguida, clique em Modelo em branco para começar.

Se você deseja ver quais blocos são utilizados em sua página, pode usar a visualização de camadas. É acessível clicando no ícone de camadas na parte superior esquerda da tela do editor do site.

Clique no ícone + azul para revelar os blocos e, em seguida, role para baixo até as opções de blocos temáticos. O primeiro bloco de tema que selecionaremos é o bloco de parte do modelo. Isso é muito útil para criar seções globais para o seu site. Vamos usar uma parte de modelo para criar um cabeçalho personalizado para seu site que pode ser atribuído a determinadas páginas.

Arraste o bloco de parte do modelo para a página em branco do editor do site. Selecione iniciar em branco para criar uma nova peça de modelo.

Atribua um nome para a parte do modelo e clique em criar .

Primeiro, abra os blocos e procure pelo espaçador e, em seguida, adicione-o à sua área de transferência. Dê-lhe uma altura de 20px. Isso adicionará 20px de espaço no topo do seu modelo.

Em seguida, encontre o bloco de colunas . Arraste-o para a área de transferência. Selecione a variação da coluna 33/33/33 . Isso colocará três colunas em sua linha. Cada coluna ocupará 33% do espaço disponível do site.

Sua parte do modelo agora deve ficar assim:

Adicione blocos ao seu modelo de cabeçalho

Abra o menu de blocos clicando no ícone + azul . Role para baixo até os blocos de tema e arraste o bloco do logotipo do site para a primeira coluna. Carregue uma imagem ou atribua uma da sua galeria de mídia.

Em seguida, arraste o bloco de navegação para a segunda coluna. Para o bloco de navegação, você pode adicionar páginas do seu site ao menu ou criar links personalizados. Adicionar menus em temas de edição de sites completos é um pouco diferente de outros temas. Você não usa mais Aparência > Menus para adicioná-los. Agora, todos os menus são criados e adicionados no editor do site. Clique em iniciar vazio para criar links para seu site ou selecionar páginas. Para adicioná-los, pressione a tecla enter no teclado.

Por fim, adicione o bloco de links sociais à sua terceira coluna. Adicione os ícones de mídia social que deseja destacar clicando no + no local certo do bloco de ícones sociais.

OBSERVAÇÃO: você não está limitado a adicionar blocos temáticos aos seus modelos. Você pode usar qualquer Bloco do WordPress. Neste exemplo, o bloco de links sociais não é um bloco de tema dinâmico, mas ainda é um elemento útil para adicionar a um cabeçalho.

Com todos os blocos adicionados, seu cabeçalho deve ficar assim.

Ajustando o layout do modelo

Agora que você tem todos os blocos em seu novo cabeçalho, notará que o espaçamento parece um pouco errado. Não se preocupe, como acontece com todos os aspectos da edição completa do site, você também pode ajustar isso. Primeiro, clique na primeira coluna na visualização de camadas. No painel de configurações em Column Settings > Width , clique no menu suspenso para revelar as diferentes opções de dimensionamento. Escolha % . Digite 20 para a largura da primeira coluna.

Repita as etapas para ajustar a segunda coluna para 60% e, em seguida, a terceira coluna para 20%. Seu cabeçalho agora deve ter um espaçamento melhor. Salve seu modelo clicando no botão Publicar no canto superior direito.

Seu modelo agora deve ficar assim.

Usando padrões de bloco para alavancar seus projetos

Ao criar modelos, existe uma maneira fácil de inserir uma série de blocos para facilitar o processo de design. Esses grupos de blocos são chamados de padrões de bloco. O WordPress vem de fábrica com alguns padrões de blocos que você pode usar ou pode criar o seu próprio para reutilizá-los em todo o site. Para acessar os padrões de bloco, clique no ícone + azul no canto superior esquerdo do editor do site e clique na guia padrões. Existem várias categorias de padrões de blocos para escolher, incluindo rodapés, cabeçalhos, botões, galerias, colunas e muito mais.

Cada padrão de bloco pode ser editado para se adequar às suas escolhas de design. Estilos de cor, fonte e preenchimento podem ser ajustados em blocos individuais no padrão. Se quiser salvar um padrão de bloco que você criou, basta clicar no menu de reticências na exibição de lista e, em seguida, clicar em Adicionar a blocos reutilizáveis ​​. Como alternativa, você também pode salvá-lo como uma peça de modelo .

Divi: o melhor tema de edição de site completo para WordPress

Se você está procurando um tema de edição de site completo versátil e repleto de recursos para WordPress, não procure mais, Divi. Leve a edição completa do site a um nível completamente diferente, utilizando o Visual Builder mais avançado do mundo. Os usuários podem aplicar efeitos de foco, adicionar divisores de forma, aplicar animações, editar elementos em massa e aplicar estilos globais e paletas de cores, para citar alguns recursos. Além disso, o Divi possui mais de 200 elementos em seu arsenal para ajudá-lo a criar um site impressionante e altamente funcional. Com elementos como blogs, controles deslizantes, chamadas para ações, preços, depoimentos e muito mais, os usuários podem criar um site verdadeiramente exclusivo.

Divi Theme Builder

Além dos recursos ilimitados de design do Divi, os usuários também podem expandir as personalizações para todo o site. Você pode criar cabeçalhos, rodapés, modelos de produtos, páginas de categoria e arquivo, modelos 404, modelos de postagem e muito mais. Além disso, você pode fazer tudo isso com o Visual Builder proprietário da Divi, que permite ver as alterações de design em tempo real. Não há limite para o número de modelos que você pode criar. Além disso, os modelos do Theme Builder podem ser atribuídos como elementos globais ou a páginas individuais, se desejado.

Divi Conteúdo Dinâmico

O Divi também possui a capacidade integrada de criar conteúdo dinâmico para o seu site. Usando o Template Builder e/ou o Visual Builder, os usuários podem atribuir conteúdo dinâmico a postagens, páginas, produtos e modelos. Você pode usar conteúdo dinâmico em todos os elementos Divi, o que permite construir módulos dinâmicos para exibir informações extraídas diretamente do seu banco de dados.

Módulos Dinâmicos em Divi

Os módulos dinâmicos são ótimos para uso em todos os tipos de sites. Eles podem ser usados ​​para criar módulos para sites de viagens, receitas, serviços de aluguel e muito mais. Usando o Divi's Visual Builder, você pode atribuir conteúdo dinâmico com base no tipo de modelo que deseja criar. Por exemplo, ao criar modelos de postagem ou categoria, o conteúdo dinâmico disponível para um módulo de texto tem opções diferentes daquelas de um módulo de imagem. Para módulos com texto, você pode escolher itens como título da postagem/arquivo, trecho da postagem, data de publicação, contagem de comentários, tags, descrição da categoria e muito mais. Por outro lado, os módulos de imagem são usados ​​para definir conteúdo dinâmico, como imagem em destaque, foto de perfil do autor e imagem do logotipo do site.

Módulos Dinâmicos de WooCommerce

Os proprietários de sites de comércio eletrônico recebem um bônus adicional com o Divi. Quando o WooCommerce é instalado, o Divi adiciona uma série de módulos WooCommerce dinâmicos que oferecem a capacidade de adicionar conteúdo dinâmico ao criar modelos de produto, carrinho e página de checkout. Não é mais necessário utilizar CSS ao usar o WooCommerce para fazer com que as páginas de produto e carrinho do seu site correspondam à sua marca. Além disso, os módulos WooCommerce podem ser usados ​​em qualquer lugar dentro do Divi para destacar produtos, criar galerias de produtos e muito mais.

Perguntas frequentes sobre a edição de sites completos do WordPress

Depois de todas as informações que lhe passamos, temos certeza que você tem algumas perguntas. Não se preocupe, temos respostas para você.

Se eu trocar para um tema de edição de site completo, o que acontecerá com meu site?

Felizmente, os temas completos de edição de sites são construídos em blocos. Portanto, se você estiver trocando de outro tema baseado em blocos, precisará fazer apenas algumas coisas para deixar seu site com uma boa aparência. A primeira coisa é definir o logotipo e a navegação do site criando uma parte do modelo de cabeçalho. Provavelmente, seu tema antigo usava o Personalizador. Com temas FSE, o editor de site é usado para criar o cabeçalho do seu site.

Onde posso encontrar um tema de edição de site completo?

Existem duas maneiras de encontrar um tema de edição de site completo. A primeira maneira é realizar uma pesquisa filtrada na seção de tema WordPress do seu painel de administração. São mais de 160 temas para escolher. A segunda maneira é comprar um tema premium de edição de site completo, como o Divi.

Meu site antigo usa widgets. Eles permanecerão no lugar se eu trocar para um tema de edição de site completo?

Como um tema FSE é construído inteiramente em blocos, ele não utiliza widgets como no passado. No entanto, existem blocos de widgets disponíveis. Você provavelmente precisará substituir widgets antigos por novos blocos de widgets ou adicionar novos padrões de blocos para ajudar a acelerar o processo.

Qual versão do WordPress eu preciso para usar um tema de edição de site completo?

A edição completa do site é compatível com as versões do WordPress desde o lançamento do 5.8 e mais blocos temáticos foram adicionados nas versões recentes. Se sua instalação não tiver 5.8, você precisará atualizá-la para usar um tema FSE. A boa notícia é que você precisa atualizar de qualquer maneira, pois o uso de versões desatualizadas do WordPress deixa seu site vulnerável a hacks de segurança e todos os tipos de outros problemas desagradáveis.

Eu não sou muito experiente em tecnologia. Posso usar um FSE?

Sim! É fácil para quase todo mundo aprender a construir um site usando a edição completa do site. Como os temas do FSE utilizam edição visual de arrastar e soltar, é fácil criar belos layouts com facilidade.

O uso de um tema de edição de site completo acelerará meu site?

Sim, pode, mas há mais do que isso. Primeiro, os temas completos de edição do site podem aumentar o desempenho porque são criados de forma a exigir menos plug-ins para funcionalidade adicional. Portanto, você não precisará instalar muitos para obter o site onde deseja. Dito isto, os temas do FSE não são projetados automaticamente para serem mais rápidos. Existem outras considerações, como provedores de hospedagem. Um bom provedor de hospedagem, como o SiteGround, executará a versão mais recente do PHP e fornecerá um CDN e outros aprimoramentos de velocidade que tornarão os sites mais rápidos.

A edição completa do site é o futuro do WordPress

Full Site Editing está ganhando espaço na comunidade WordPress. Com a capacidade de editar todos os aspectos dos sites, os desenvolvedores e criativos estão começando a ver o valor disso. Temas premium, como Divi, usam essa tecnologia desde 2021 e permanecem à frente da curva. Dito isto, com o lançamento do tema WordPress Twenty Twenty-Two no início deste ano, podemos esperar que os temas completos de edição de sites se tornem a norma em breve. Saber como utilizar a edição completa do site no desenvolvimento do WordPress é uma etapa essencial para mantê-lo preparado para o futuro.

Você usa a edição completa do site no WordPress? Dê-nos seus pensamentos sobre isso abaixo.

Divulgação: esta postagem contém links de afiliados que apóiam nossa equipe e mantêm o conteúdo gratuito do blog fluindo. Quando você compra algo depois de clicar em um link de afiliado, podemos receber uma comissão.