Intrudução
Os blocos são os elementos básicos usados no WordPress para criar e organizar o conteúdo do seu site. Cada bloco possui suas próprias configurações e pode ser personalizado de várias maneiras. Você pode ajustar a cor, o espaçamento, as margens, as bordas, as sombras e até mesmo os efeitos de hover (que são os efeitos que aparecem quando o mouse está sobre o elemento), todo bloco possui tres principais categorias que são elas : geral, estilo e avançado.
Adicionar um Bloco
- Para adicionar um novo bloco ao seu site, clique no símbolo de mais (+) que aparece no editor presente na página que você deseja personalizar.
Escolher o Tipo de Bloco
- Após clicar no símbolo de mais, uma barra de busca será exibida. Digite o nome do tipo de bloco que você deseja inserir (por exemplo, “Texto”, “Imagem”, “Botão”, etc.).
- Se você preferir clique em “Navegar por todos” para ter acesso a todos os blocos disponíveis em seu site
Habilitar a visualização detalhada dos blocos
Caso esta opção já estiver ativa em sua página prosseguir com o guia , porem caso não esteja você deve:
- Na barra superior da sua página clique no ícone representado por três linhas.
- Assim que você clicar ele ficara selecionado em preto , abrindo assim uma nova aba na lateral esquerda da página, permitindo assim com que você edite os blocos adicionados.
Opções de blocos
Por serem infinitas opções de blocos neste guia iremos ressaltar apenas sobre os mais importantes e mais utilizados, que são eles:
- Bloco de Contêiner: Usado para agrupar outros blocos e criar layouts complexos.
- Bloco de Imagem: Permite a inserção de imagens nos posts ou páginas. Você pode fazer upload de novas imagens ou selecionar da biblioteca de mídia.
- Bloco de Lista: Cria listas ordenadas (numeradas) ou não ordenadas (com marcadores).
- Bloco de Cobertura: Utilizado para criar seções de destaque com imagens ou vídeos de fundo e texto sobreposto.
- Bloco de Botão: Permite adicionar botões de call-to-action que podem ser personalizados em termos de cor, texto e link.
- Bloco de Colunas: Permite a criação de layouts de várias colunas, facilitando a organização do conteúdo em formatos diferentes.
- Bloco de Vídeo: Permite a inserção de vídeos no post ou página, seja através de upload ou de URLs de serviços como YouTube.
- Bloco de Título: Usado para adicionar títulos ou cabeçalhos (H1, H2, H3, etc.) que estruturam o conteúdo.
- Bloco de Parágrafo: Usado para adicionar texto simples. É o bloco mais básico e comum.
- Bloco de Galeria: Usado para exibir várias imagens em uma grade ou carrossel.
1.Contêiner
O bloco Contêiner é usado para agrupar outros blocos, permitindo a criação de layouts complexos e organizados, ele é um dos blocos mais importantes que existe.
Como Usar o Bloco Contêiner
Adicionar um Bloco Contêiner:
- Clique no símbolo de mais (+) e procure por “Contêiner”.
Personalize o Conteiner
- Após adicionar o contêiner, você deve escolhe uma dentre 10 variações diferentes de estilo , selecionando a opção que melhor se adapta às suas necessidades.
- Depois de selecionar o estilo do contêiner, você poderá arrastar outros blocos para dentro dele.
Configurações do Contêiner
As configurações de todos os blocos estão divididas em três abas principais: Geral, Estilo e Avançado.
Geral
Largura do Contêiner:
- Largura Total: O contêiner ocupará toda a largura da tela.
- Em Caixa: O contêiner ficará centralizado com uma largura máxima definida.
- Personalizado: Permite definir uma largura específica para o contêiner.
Largura do Conteúdo:
- Em Caixa: O conteúdo dentro do contêiner estará em uma caixa centralizada com uma largura máxima.
- Largura Total: O conteúdo ocupará toda a largura do contêiner.
Largura do Conteúdo da Caixa:
- Permite ajustar a largura máxima do conteúdo dentro do contêiner quando a opção “Em Caixa” está selecionada.
Altura Mínima:
- Define a altura mínima do contêiner. Pode ser especificada em pixels (PX) ou em relação à altura da tela (VH).
Altura Igual:
- Quando ativado, todos os itens dentro do contêiner terão a mesma altura, ajustando automaticamente para alinhar os elementos.
Tag HTML
- Define a tag HTML usada para o contêiner (ex:
div,section,article), importante para a estruturação semântica do site.
Transbordar
- Visível: O conteúdo que ultrapassa a área do contêiner será visível.
- Oculto: O conteúdo que ultrapassa a área do contêiner será escondido.
- Automático: O navegador decidirá automaticamente se deve ou não exibir barras de rolagem para o conteúdo que ultrapassa a área do contêiner.
Layout
Disposição Flexível:
- Flex: Permite utilizar o modelo de layout flexível (Flexbox), que facilita o alinhamento e a distribuição de elementos dentro do contêiner.
- Direção, Alinhar itens, Justificar conteúdo, Invólucro(explicação na imagem)
Disposição Grade:
- Colunas: Escolha o número de colunas que deseja na sua grade. Isso determinará quantos elementos serão exibidos lado a lado.
- Linhas: Escolha o número de linhas que deseja na sua grade. Isso determinará quantas camadas de elementos você terá verticalmente.
- Alinhar itens: configure o alinhamento vertical para os itens da grade dentro do contêiner.
- Justificar itens: configure o alinhamento horizontal para os itens da grade dentro do contêiner.
- Alinhar conteúdo: configure o alinhamento vertical de toda a grade dentro do contêiner.
- Justificar conteúdo: configure o alinhamento horizontal de toda a grade dentro do contêiner.
Estilo
Pano de fundo: aqui você pode selecionar o tipo de plano de fundo que deseja aplicar:
- Ícone de Lápis: Seleciona uma cor sólida como plano de fundo.
- Ícone de Imagem: Permite escolher uma imagem como plano de fundo.
- Ícone de Galeria: Permite escolher várias imagens para um plano de fundo em slideshow.
- Ícone de Vídeo: Permite adicionar um vídeo como plano de fundo.
Cor
2.Lista
O bloco “Lista” no WordPress serve para criar listas organizadas de itens em uma página ou post.
- 1.Após adicionar o bloco, Digite o primeiro item da lista e pressione Enter para adicionar um novo item.
- 2.Continue adicionando itens da lista conforme necessário.
- 3.Com o bloco selecionado, use a barra de ferramentas do bloco para escolher entre Lista com Marcadores (pontos) ou Lista Numerada.
- Marcadores: Cada item é precedido por um ponto.
- Numerada: Cada item é precedido por um número
- Na barra lateral direita, você pode ajustar o Estilo e Formato da lista, se necessário.
- 4.Após selecionar a mídia, você verá um espaço para adicionar texto diretamente sobre a imagem ou vídeo.
- 5.Clique no texto “Escreva o título…” e adicione seu conteúdo.
- 6.Você pode usar a barra de ferramentas na barra superior da página para formatar o texto, como negrito, itálico, ou até mesmo para alterar a alinhamento (à esquerda, centralizado, à direita).
3.Cobertura
- 1.Após adicionar o bloco, você verá opções para adicionar uma imagem ou vídeo de fundo.
- 2.Clique em Enviar para enviar uma nova mídia ou em Biblioteca de Mídia para escolher uma imagem ou vídeo já existente no site.
- 3.Escolha a imagem ou vídeo desejado.
- 4.Após selecionar a mídia, você verá um espaço para adicionar texto diretamente sobre a imagem ou vídeo.
- 5.Clique no texto “Escreva o título…” e adicione seu conteúdo.
- 6.Você pode usar a barra de ferramentas na barra superior da página para formatar o texto, como negrito, itálico, ou até mesmo para alterar a alinhamento (à esquerda, centralizado, à direita).
4.Botão
O bloco de botão serve para criar botões clicáveis em uma página ou post no WordPress. Esses botões podem ser usados para direcionar os visitantes do site a uma ação específica, como:
- 1.Texto do Botão: Clique no botão inserido e digite o texto desejado.
- 2.Link: Na barra de ferramentas do bloco, clique no ícone de corrente e insira a URL para onde o botão deve levar
- 3.Abrir em nova janela: Marque essa opção se quiser que o link abra em uma nova janela do navegador.
Personalizar o Estilo do Botão
- Com o botão selecionado, acesse as configurações no painel à direita.
- Cor do Fundo: Escolha a cor do fundo do botão.
- Cor do Texto: Defina a cor do texto do botão.
- Borda e Espaçamento: Ajuste a borda, padding, e o espaçamento do botão conforme necessário.
- Tamanho e Estilo da Fonte: Personalize a fonte do texto do botão.
5.Título
O bloco de título no WordPress é usado para criar cabeçalhos ou títulos que organizam e estruturam o conteúdo de uma página ou post
- 1 .Digite o texto do título desejado.
- 2.Escolha o Nível de Título: Na barra de ferramentas do bloco, selecione o nível do título (H1, H2, H3, etc.) conforme a hierarquia da sua página.
- Com o bloco de título selecionado, acesse as configurações no painel à direita.
- Tipografia: Personalize a fonte, tamanho, peso, e espaçamento das letras.
- Cor do Texto: Defina a cor do texto do título.
- Margem e Padding: Ajuste a margem e o padding do título conforme necessário.
- Efeitos e Estilos: Explore opções como sombra de texto e transformação de texto.
6.Parágrafo
O bloco de parágrafo é usado para inserir o texto principal de uma página ou post.
- 1 Digite o texto diretamente no bloco de parágrafo.
- 2.O texto será automaticamente formatado como um parágrafo.
- 3.Com o bloco de parágrafo selecionado, use a barra de ferramentas superior na pagina para
- Negrito: Clique no ícone “B” para aplicar negrito ao texto selecionado.
- Itálico: Clique no ícone “I” para aplicar itálico.
- Alinhamento: Alinhe o texto à esquerda, centro ou direita.
- Link: Adicione um link ao texto.
- 4.Na barra lateral direita, você pode ajustar
- Cor do Texto: Escolha uma cor para o texto.
- Cor do Fundo: Defina uma cor de fundo para o parágrafo.
- Tipografia: Ajuste o tamanho da fonte.
