Espaçador, separador e como melhorar o design de sites WordPress

Esse parece ser o vídeo mais irrelevante da série, mas usar esses blocos faz uma baita diferença no site: o separador e o espaçador, dois blocos da categoria Elementos de Layout.

Você conhece o termo gestalt? No século XX, estudiosos alemães perceberam que nós vemos conjuntos com muito mais facilidades do que partes separadas, e resumiram algumas noções que vêm para nosso cérebro naturalmente. Por exemplo, nós agrupamos elementos semelhantes, ou que estejam próximos um do outro. Nossos cérebros estão sempre brincando de “ligar os pontos”. Clique aqui para saber mais com o artigo que usei na pesquisa para esse texto.

É por isso que tanto o separador quanto o espaçador são muito valiosos para suas páginas: você pode usá-los para determinar onde as seções acabam e começam de maneira sutil. No design de páginas, menos é sempre mais.

A diferença entre os dois é que, enquanto o espaçador separa conteúdo com um espaço em branco, o separador usa uma linha. O espaçador é tão simples que a única configuração que tem (fica na barra lateral direita) é a altura em pixels que você quer para ele. Ele fica da cor do fundo em que foi aplicado. Se estiver em um grupo com cor de fundo, vai assumir a cor de fundo do grupo.

Já o separador tem três estilos, que você pode escolher na barra acima do bloco ou na barra lateral:

  • uma linha da largura da coluna de texto, chamada “padrão”;
  • uma linha que ultrapassa os limites do texto, chamada “linha larga”,
  • e três pontinhos.

Além do estilo, na barra lateral você configura a cor de fundo que quer para o separador.

Parece besteira, mas são esses acabamentos que transformam um site simples em um site sofisticado. Não acredite em mim: dê uma olhada na palestra que o David Arty, do canal Chief of Design, fez no WordCamp 2019 sobre como o design centrado no usuário pode fazer um site valer 4x mais. Não se assusta quando vir 93 slides, porque o David é designer, então os slides têm pouco texto (como eu acredito que toda apresentação deveria ser). Além disso, os primeiros slides são dedicados à história do David, então o assunto da palestra mesmo começa no slide 36.

Não se esqueça de compartilhar esse artigo, ou o vídeo sobre esse conteúdo no canal do WordPress sem Código no YouTube:

Espaçador, separador e como melhorar o design de sites WordPress | Série Blocos do Gutenberg ep. 10

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *