Como criar seções de sites de heróis em Gutenberg com o tema total

O tema Total WordPress vem com toda uma gama de ferramentas que um site de negócios pode precisar.

O tema oferece edição visual via WordPress Customizer e uma rápida importação de dados de demonstração, que são especialmente úteis para criar uma excelente página inicial.

Como você vê, a versão gratuita do Total não o prende a nenhum construtor de página extra do WordPress, mas oferece uma maneira nativa do WordPress de projetar seu site.

Com a chegada do Gutenberg, o editor WordPress baseado em blocos, qualquer tema WordPress, incluindo o Total, pode ser personalizado muito mais. A escolha dos elementos de conteúdo (blocos) nos dá a liberdade de personalização que nunca vimos antes no núcleo do WordPress, difícil negar isso.

Algumas configurações de estilo de bloco, no entanto, ainda são muito limitadas no editor padrão. Portanto, se você estiver no novo editor Gutenberg e no Total procurando criar e projetar conteúdo melhor, encontrará algumas dicas úteis neste tutorial.

Para ser mais preciso, neste post, gostaríamos de mostrar alguns exemplos de como criar e personalizar elementos cruciais do site, como seções de herói, sub-herói e call-to-action em Gutenberg. Aqueles que geralmente ajudam as empresas:

• Crie seções de introdução/boas-vindas para o site
• Promova os principais produtos ou eventos
• Concentre-se em itens ou serviços específicos do portfólio, etc.

Para aumentar as possibilidades de personalização do Gutenberg, usaremos o plugin Getwid WordPress Blocks que recomendamos para os usuários do tema Total. Temos certeza de que alguns usuários do Total já experimentaram o Getwid.

Mas para aqueles que estão se perguntando o que é Getwid, a seguir está uma breve descrição.

Em poucas palavras, é um addon gratuito nativo do Gutenberg que vem com a maior biblioteca de blocos premium e uma coleção de designs personalizados para o Gutenberg . Não é a única razão pela qual recomendamos.

Estamos particularmente interessados ​​neste plugin porque ele combina muito bem com o estilo Total padrão, permite que você desligue qualquer bloco que você não precise e é realmente rico em recursos.

O plug-in aparece como recomendado quando você ativa o Total – é uma solução temporária para ver se atende aos nossos clientes.

Mas bem, você precisa tentar você mesmo para ver se é a sua solução. Enquanto isso, vamos aos exemplos que conseguimos criar.

Exemplos de seção de herói e call-to-action criados com Getwid no Total

Realizamos esses testes em uma versão gratuita do tema Total e podemos dizer com segurança que quase não havia limitações.

No entanto, as opções de largura total do contêiner do site são limitadas, portanto, se você estiver procurando por layouts imersivos em tela cheia, convém pensar no Total Plus.

Em primeiro lugar, você quase sempre precisará usar o bloco Section dos blocos Getwid WordPress. É um contêiner que pode lidar com qualquer número de outros blocos. Assim, suas seções de heróis podem exibir qualquer tipo de conteúdo.

Outra coisa proeminente sobre o contêiner Section é que ele oferece muitos tipos de plano de fundo: uma imagem, cor, vídeo (da sua biblioteca de mídia WP ou YouTube), gradiente multicolorido e muito mais.

Portanto, suas principais tarefas ao projetar áreas do site com o bloco Seção são:

• Escolha e personalize o tipo de plano de fundo para que o conteúdo permaneça legível e claro.
• Insira os blocos necessários na ordem preferida.
• Ajuste o espaçamento (há ângulos arrastáveis ​​como nos construtores visuais para definir espaços internos e externos).
• Opcional: adicione animação, divisores de forma e outros elementos de decoração.

Vamos agora com exemplos.

Exemplo 1. A vitrine do produto

Todos os blocos neste exemplo são colocados dentro do bloco Seção:

1. Título Avançado
2. Título Avançado
3. Título Avançado
4. Grupo de botões
5. Plano de fundo da seção: uma imagem (Posicionamento > Superior direito; Tamanho > Automático)

O bloco de cabeçalho permite que você use qualquer fonte do Google, tamanho do texto, peso da fonte, etc. Também existem vários estilos para botões (preenchimento ou contorno).

O maior desafio que pode acontecer é encontrar a imagem de fundo correta e escolher a posição adequada da imagem, pois ela é redimensionada automaticamente com base na janela de visualização.

Exemplo 2. Extrato de portfólio

Todos os blocos são colocados dentro do bloco Seção:

1. Título Avançado
2. Título Avançado
3. Três colunas (Parágrafo, Imagem, Imagem, Imagem)
4. Plano de fundo da seção: gradiente

Você também pode colocar um botão de call-to-action para vincular à página completa do portfólio.

Exemplo 3. Cartão de recurso ou evento

Nessa seção de heróis, você pode mostrar um produto, evento, serviço, coisa, pessoa, etc.

O bloco Advanced Heading permite que você escolha qualquer fonte:

Neste exemplo, usamos um plano de fundo gradiente e um divisor de forma de fundo de fundo (Waves Multilayered).

1. Dois títulos avançados
2. Parágrafo
3. Botão
4. Imagem
5. Plano de fundo da seção: gradiente + divisores de forma

Exemplo 4. Seção de apelo à ação

Novamente, você precisa começar com o bloco Seção. Para colocar títulos como no exemplo abaixo, você pode usar um modelo da Biblioteca de Modelos Getwid ou criar um padrão do zero.

É uma seção muito fácil com a imagem de fundo, alguns títulos e um botão centralizado.

1. Três blocos de título avançado
2. O bloco de botões
3. Plano de fundo da seção: uma imagem com opacidade (Tamanho > capa)

Você também apreciará a facilidade com que pode ajustar o alinhamento do conteúdo com os ângulos arrastáveis:

Também é uma tendência criar layouts de deslocamento colocando títulos sobre as imagens:

No Getwid, você pode conseguir isso definindo uma imagem de fundo apropriada com algum espaço em branco para a linha de texto.

Exemplo 5. Seções de sub-heróis

Muitas vezes, as seções de sub-heróis fornecem mais informações sobre um projeto ou pessoa. É adequado para apresentar sua biografia, história ou objetivos principais.

Como elemento visual, usamos o bloco Image Stack Gallery da Getwid, que vem com vários estilos. Você pode, no entanto, substituí-lo por uma imagem, vídeo ou qualquer outro elemento de conteúdo.

1. Dois títulos avançados
2. Parágrafo
3. Botão
4. O bloco da Galeria da pilha de imagens
5. Fundo da seção: cor sólida

Exemplo 6. Acentos visuais

Galerias de imagens, sliders e vídeos são ferramentas visuais muito comuns para criar seções que chamam a atenção.

Por exemplo, você pode usar o bloco Media & Text Slider da Getwid para criar uma apresentação de slides com conteúdo de texto opcional:

1. Controle deslizante de mídia e texto
2. Plano de fundo da seção: gradiente + divisores superiores e inferiores com altura personalizada

Existem também vários blocos Getwid baseados em post que podem ser apresentados em um controle deslizante (eles serão automaticamente originados do conteúdo do seu site). Deseja apresentar algumas postagens mais recentes ou selecionadas manualmente em um formato deslizante ou de grade/lista? Existe um bloco para isso.

Exemplo 7. Banners

Getwid vem com um bloco de Banner útil que oferece contêineres padrão de imagem e texto. Ele também tem uma opção de efeitos de animação que permitem tornar as seções com banners mais dinâmicas.

O bloco é uma combinação perfeita tanto para vendas temporárias quanto para destaques constantes.

1. Bandeira
2. Plano de fundo da seção: gradiente monocromático

Exemplo 8. Seções informativas

Se você deseja mostrar mais informações de forma estruturada e compacta, o Getwid oferece três blocos dedicados para essa finalidade: Tabs, Accordion e Toggle.

Aqui está um layout de duas colunas com o bloco de acordeão e uma imagem ao lado dele:

O recurso exclusivo desses blocos é a capacidade de conter qualquer bloco dentro dos widgets com guias. Isso significa que, além do texto, você pode adicionar imagens, listas, vídeos, galerias, sliders às abas.

Existem muitos outros blocos que podem adicionar funcionalidades exclusivas às suas seções de marketing, por exemplo, Image Hotspot para criar seções de imagens informativas, Icon Box para serviços, feed de galeria do Instagram em tempo real e muito mais.

Você pode criar e projetar seções semelhantes a partir de uma página em branco do Gutenberg, optando pelo layout de página necessário nas configurações de página total.

Para encerrar

Você sabe qual é a melhor coisa de usar a combinação Gutenberg e Getwid no tema Total gratuito? Não, não é apenas o número de blocos que importa.

O que é mais importante, você não precisa ter os olhos de um designer (ou habilidades de desenvolvedor) para criar conteúdo de boa aparência. Existem tantos skins pré-fabricados, padrões de blocos e designs prontos para uso que estão lá para ajudá-lo. Os Getwid WordPress Blocks também são uma boa alternativa aos construtores de páginas para aqueles que ficam com a versão gratuita do Total.

Até que o editor de blocos não esteja maduro o suficiente, um complemento extra nativo do Gutenberg pode ser um ótimo ponto de partida.

Você já tentou Gutenberg ou Getwid? Deixe-nos saber nos comentários.