Como criar um post ou página com o editor de blocos WordPress
O Editor WordPress usa blocos para transformar a maneira como você cria conteúdo: ele transforma um único documento numa coleção de componentes para adicionar conteúdo. Com os blocos, você pode adicionar e personalizar rapidamente várias mídias e elementos visuais que costumavam exigir códigos de acesso, código HTML personalizado e incorporações. Os blocos facilitam a criação de layouts ricos em mídia nas suas páginas e publicações.
Resultados de aprendizagem
- Identificar termos relacionados ao Editor de blocos
- Criar o conteúdo para um Post ou Página utilizando blocos
- Projetar um layout usando vários blocos.
Perguntas de compreensão
- Quais são as vantagens de usar o Editor de Blocos?
- Como você modifica e exclui blocos?
Transcrição
Bem-vindo ao Learn WordPress. O meu nome é Fellyph e hoje nós vamos aprender como criar posts e páginas com o editor de blocos WordPress. E o que você irá aprender nesse vídeo? Identificar termos relacionados ao editor de blocos. Criar conteúdo para posts e páginas utilizando blocos. Projetar o layout usando vários blocos. Quando criamos blocos, nós temos os seguintes itens. A barra de ferramentas do bloco que vai aparecer no canto superior do bloco selecionado. O conteúdo do bloco, que é a informação que a gente vai cadastrar para aquele componente especificamente. E a barra lateral de configuração do bloco. Esta informação ela irá variar de acordo com o bloco selecionado. Então agora vamos pular para o nosso WordPress e vamos ver como a gente consegue trabalhar com o editor de blocos. Então, agora estamos dentro de uma tela de edição de post para post los ou criar um título. Agora que adicionamos o nosso título, estamos prontos para adicionar blocos dentro do conteúdo do nosso post. Então temos três formas de adicionar blocos dentro de um post. A primeira delas é acessando através de uma busca, então digitamos barra e podemos realizar uma consulta em todos os blocos disponíveis para este site. A segunda opção é clicando no canto direito do meu post, então eu posso acessar todos os blocos disponíveis para essa página. A terceira opção para adição de blocos é através do botão no canto superior esquerdo, clicando no botão demais. Nós teremos uma listagem completa de todos os blocos disponíveis, agrupados por categoria, então aqui nós temos os blocos relacionados a texto.
Uma vez que passamos o mouse sobre o bloco, nós temos uma pré visualização deste bloco. Então, por exemplo, aqui passando o mouse sobre o bloco de lista, nós temos um preview de como esse bloco funciona. Também temos a opção do bloco de código ou o bloco de tabela. Seguindo a nossa lista, nós temos todos os blocos relacionados a mídia. A apresentação. Com widgets. O tema. E códigos incorporados. Neste último caso, nós temos a possibilidade de adicionar um tweet, um vídeo no YouTube ou até uma música no Spotify. Então, depois dessa breve introdução, vamos simular o processo de uma criação de página utilizando o editor de blocos. Então, para isso eu vou alterar o meu título. Então, vamos falar sobre o seguinte assunto como adotar cães e gatos? Agora que decidimos o tema do nosso post, eu tenho algum texto pronto. Então vou copiar e colar esse conteúdo no meu editor. Então aqui a gente vai começar a desenvolver o nosso conteúdo. Então já tenho um texto de introdução. Nós também podemos adicionar uma galeria, então posso pesquisar por galeria. Quando selecionamos o bloco de galeria, nós podemos ou enviar uma mídia do nosso computador para o nosso website ou também eu posso acessar a biblioteca de mídia. Então você sabe, biblioteca de mídia tem algumas imagens que eu já realizei o upload selecioná-las. Criar uma nova galeria. Inseri essas imagens. Então aqui nós temos na nossa galeria com as três imagens que selecionamos anteriormente.
Speaker1: Eu posso clicar na primeira imagem, por exemplo. E quando eu seleciono a primeira imagem, por exemplo, no canto inferior esquerdo, nós temos uma opção de navegação entre os blocos. Então, essa estrutura, basicamente, ela está constituída em imagem, galeria e post. Então, se eu quiser selecionar toda a galeria, eu tenho dois caminhos. Posso tanto clicar no link de galeria no canto inferior esquerdo ou também eu posso selecionar o ícone de galeria na barra de ferramentas desse bloco. Então, clicando nesse ícone, eu agora estou selecionando o Bloco Galeria, como podemos ver aqui na barra de configurações do bloco de galeria. Nós temos algumas opções disponíveis. Eu posso modificar a quantidade de colunas, então, quando modificamos a quantidade de colunas dessa galeria, nós temos uma redistribuição dos elementos no meu layout. Então, aqui a última imagem, ela está com exibição grande. O próximo bloco que eu irei adicionar é um bloco de citação, então eu vou no botão de adicionar bloco. Clicar em Adicionar Pesquisar por citação. Vou adicionar o conteúdo que eu selecionei previamente e com um bloco de citação, como podemos ver na barra lateral direita. Nós temos diferentes opções relacionadas a esse bloco, então temos aqui uma opção de variação de estilo. Por exemplo, eu posso escolher o estilo padrão ou o estilo plano. Agora que temos o bloco de citação pronto. Eu vou adicionar um vídeo do YouTube. Para isso, eu vou selecionar um endereço específico, copiar esse endereço. Selecionar a tela de conteúdo é para esse bloco. Particularmente, eu vou colar o endereço do vídeo do YouTube diretamente.
Uma vez que eu faço isso, o editor de blocos, ele vai reconhecer que o conteúdo que eu inseri é um vídeo no YouTube e vai adicionar o bloco de vídeo do YouTube para esta página que a gente tem um vídeo sobre a Coordenadoria de Saúde e Proteção dos Animais Domésticos, então a gente pode saber mais sobre o projeto. Também podemos aqui adicionar uma legenda a este vídeo, particularmente, então aqui, ao final, podemos informar o que se trata esse vídeo e com o vídeo do YouTube, o que mais podemos fazer então? Dentro das opções relacionadas a esse bloco, nós podemos mudar o alinhamento. Se eu quiser ter uma maior exibição desse bloco. Particularmente, eu posso clicar em largura ampla e eu tenho uma visualização ampla deste vídeo. Continuando a edição desse post, eu vou adicionar três passos que você precisa saber para realizar uma adoção online. Então, para isso, primeiramente eu vou adicionar um título a adoção online. Como vocês podem notar, esse primeiro bloco é um bloco de parágrafo, mas em algumas situações nós podemos converter blocos em outros tipos específicos. Então, nesse caso, se eu clicar no ícone do bloco de parágrafo, eu vou ter algumas sugestões. Nesse caso, eu quero converter esse bloco em particular num título. Então, agora, ao invés da gente ter um parágrafo, nós temos um título. O próximo passo será adicionar um bloco de colunas, então vou aqui pesquisar por colunas. Selecionar o layout de três colunas e adicionar as informações que eu quero.
Então vou adicionar mais um título. Então o primeiro passo será acessar o portal. O segundo passo será enviar os documentos necessários. E o terceiro passo irá iniciar o processo de adoção. Então anotem aqui o conteúdo que eu copiei em alguns momentos ele está em negrito. Eu posso. Removeu o negrito desse texto, selecionando todo o conteúdo. Como também posso reduzir o tamanho desse título, então vamos escolher o H4. Adicionado a informação relacionada. Notem que, no bloco de coluna, o ícone para adicionar um novo bloco fica no canto inferior direito do meu bloco. Então, aqui a gente tem os três passos necessários para você fazer a doação online de um cão ou de um gato. Agora que a gente definiu o conteúdo desse bloco coluna, eu posso selecionar todo o bloco e fazer pequenas estilizações nesse item. Então, posso escolher a cor de fundo. Posso também escolher a cor de texto. E define a largura total deste bloco. Então assim, a gente dá mais espaçamento ao nosso conteúdo. Então vamos considerar que essa página está pronta. Vou clicar em Publicar, uma vez que meu conteúdo é salvo. Agora vamos dar uma olhada. Como é que a gente consegue editar páginas utilizando o editor de blocos? Então, aqui estamos dentro da edição de páginas. Como podemos ver o editor para páginas e post. Ele é bem similar para essa página. Particularmente, nós vamos falar do que você deve saber antes de você adotar um cão ou um gato.
Speaker1: Vamos aqui adicionar um título para essa página. Então, antes de adotar? Podemos incluir um parágrafo de introdução. Para essa página. Particularmente, eu gostaria de trabalhar um pouco mais com imagens. Então vou adicionar um bloco de cobertura. Esse bloco ele vai dar uma estilização especial para as imagens. Então já tenho dentro da minha biblioteca de mídia as imagens que eu gostaria de trabalhar. Então, vou selecionar uma biblioteca ou selecionar uma imagem dentro da minha biblioteca de mídia e selecionar uma imagem particular. Este bloco, particularmente, a gente vai ter a combinação de imagem e texto a que o editor está sugerindo. Escrevi um título mais para esse bloco, particularmente um título. Ele pode ser opcional. Então vou visualizar como é que a imagem está se comportando. Temos também algumas opções de mudar a largura desse elemento, particularmente. Então, vou escolher a opção de largura total. Assim, o conteúdo preencherá toda a minha tela. Outra opção referente ao bloco de cobertura é posicionar a imagem de background que na barra lateral de configurações do bloco, eu posso modificar o ponto focal da imagem e escolher o melhor ângulo para aquela imagem. Além disso, nós podemos definir a opacidade da minha sobreposição. Então, se eu não quiser essa sobreposição escura sobre a minha imagem, eu posso definir a opacidade como zero. Se eu quiser reduzir um pouco do destaque para dar mais relevância ao título dessa imagem, eu posso aumentar a opacidade da minha cor de sobreposição. Mas para essa imagem, particularmente, vamos manter a imagem original.
Speaker1: Geralmente, quando trabalhamos com mídia, nós temos a opção de substituir as imagens de mídia dentro do nosso conteúdo. Para isso, não precisamos criar um novo bloco. Vamos simplesmente selecionar o nosso bloco e clicar em Substituí, abrir a nossa biblioteca de mídia e escolher uma nova imagem. Então aqui, nós temos a nossa nova imagem substituindo a imagem anterior. Então, vamos aqui continuar a adicionar o conteúdo na nossa página, adicionar mais um título. Pense no seu bolso, então e esse é um item que você deve considerar quando adotar o animalzinho. Você também irá precisar de tempo. Então pense quando adotar o animalzinho que ele vai fazer parte da sua família, então vai ser um novo membro da família. Então vamos considerar que eu quero modificar o posicionamento dos meus títulos. Então posso selecionar esse item particularmente e na opção de configuração e alinhar esse item ao centro. Realizar a mesma tarefa para o título de tempo. É a mesma tarefa para o título. Pense no seu bolso, então agora estamos com o nosso conteúdo pronto. Vamos publicar a nossa página e visualizar. Então, aqui chegamos ao fim do nosso vídeo, onde temos o resultado final. Então temos o título, o texto de introdução, a imagem de capa e o conteúdo da nossa página. Espero que esse vídeo tenha ajudado você a ter um entendimento melhor sobre o editor de blocos. Visite o Learn WordPress para mais treinamentos com esse. O meu nome é Fellyph. Obrigado por assistir esse vídeo até o final e até o próximo treinamento.