Como Customizar Botões no WordPress Gutenberg

Curso Completo

Olá pessoal tudo bem com vocês eu sou o Léo é ser mais mala do nosso conseguiu hoje para as graças e 21 espero que vocês estejam gostando do curso deixe nos comentários pessoal que que vocês
estão achando porque eu vou publicando
mais aulas naqueles cursos que as
pessoas têm mais interesse tá então caso
você queira que continue o curso e que
nós vamos avançando cada vez mais vão
deixando aí o comentário de vocês tá bom
então vamos lá nessa aula nós vamos
customizar aqui esses botões do nosso
template tá lembrando que nós temos essa
opção porque nós importamos um site e
ele já veio com todos esses recursos
Então vamos lá antes de explicar aqui o
a customização é fácil nós vamos clicar
aqui alterar o texto e tudo mais mas
antes disso eu vou ensinar como que foi
inserido esse botão porque se ele meio
esse elemento ele tem uma peculiaridade
tá então aqui no final da página
e eu vou clicar aqui fora e vou clicar
aqui eu posso clicar em adicionar o
bloco aqui embaixo ou aqui em cima tá
tanto faz vou clicar aqui em cima e aqui
ó no nosso barra de pesquisa vocês podem
pesquisar por multi botões é esse
elemento que está inserido aqui em cima
tá então eu vou pegar multi botões O que
que significa pessoal multi botões é uma
forma fácil de você trabalhar aqui no
Gutemberg para colocar vários botões um
ao lado do outro então o que eu tenho
dois botões que nós podemos customizar
não é totalmente para ficar com esse
design aqui mas você pode customizar do
jeito que você quiser tá Por quê que é
chamado o Multi botões porque aqui fora
você clicando fora tá vendo aqui ó que
tem a opção multi botões essa esse bloco
de multi botões tem algumas
customizações específica só por exemplo
onde os botões vão ficar isso é no
centro posse é na esquerda se é na
direita se eles vão pegar ao todo o
e da tela está todo a largura né do
conteúdo tá bom Aqui eu vou deixar
Centralizado você também pode customizar
o espaço entre os dois botões então aqui
está 10 10 na Provavelmente 10 pixels
Mas você pode colocar mais aumentar
certo você pode também mudar a fonte do
seu botão então caso você queira colocar
uma fonte diferente aqui ó é pegar
qualquer uma aqui tá pessoa que são
todas parecidas pegar é só pegar essa
apenas para deixar diferente tá então
aqui você pode escolher e pode escolher
aqui não tem né na verdade como editar
tá então são poucas customizações aqui
nessa parte porque que eu estou
mostrando isso pessoal porque aqui são
as customizações do nosso bloco de multi
botões se você clica no botão você tem o
customização a do botão do botão tá bom
são dois elementos diferentes beleza e
aí você clicando no botão aí sim a cor
do fundo verde acordar
a Branca tá E aí você vai trabalhar na
customização do botão Beleza então vamos
lá vamos remover esse bloco e vamos
trabalhar com o bloco que nós já temos
então aqui eu você já sabe que clicando
fora é a customização de multi botões
certo E clicando no botão é a
customização de Botão Beleza então vamos
lá primeira coisa que vamos fazer aqui
eu vou manter esse design porque eu já
acho que ficou bonito mas eu vou ensinar
a como vocês podem formatar tá E outra
forma então eu clico dois cliques para
selecionar todo o texto e a primeira
coisa que eu vou fazer é colocar o texto
que eu quero então por exemplo aqui eu
vou colocar Acessar agora
ó e aqui nesse outro botão três cliques
na verdade para selecionar tudo eu vou
colocar todos os cursos por exemplo
todos os cursos então a pessoa vai
clicar boa atualizar aqui ó e atualiza o
meu site a pessoa vai ficar em Acessar
agora já vai ser direcionado para alguma
parte do meu site onde a pessoa já vai
poder assistir às vídeo-aulas direto e
se ela clicar em todos os cursos vai ser
direcionado para alguma parte onde eu
vou apresentar outros cursos disponíveis
no site ou no projeto né hoje o prazo
definitivo tá então o meu design vai
ficar desse jeito eu já acho que ficou
bonito mas caso você queira mudar as
cores você vai fazer o seguinte o clica
no botão e aqui você vai ter as opções
de formatação do bloco e se essa
primeira opção pessoal deixa
desabilitado tá habilitado E caso você
queira utilizar o padrão do Goten Berg E
aí você não vai ter possibilidade de
customização Então você deixa
desabilitado para que seja customizado
totalmente por você Então como que foi
custa
e aqui no nosso modelo de sagge a cor de
fundo Ó ficou esse azul mas caso você
queira você pode colocar aí ó outra
cortar eu vou manter tudo o padrão a que
você Altera a cor de texto a cor de
texto vermelho certo e aqui é a cor da
borda no caso é só o segundo botão que
tem embora então vou clicar aqui no
segundo border color vermelho então a
cor da borda vai ficar vermelha caso
você trabalho com borda aqui embaixo tem
mais algumas opções Ó você pode aumentar
a espessura da borda e pode mudar também
o estilo ela está estilo sólidos pode
colocar Gumball pode colocar é traços é
pontos traços Tá mas eu prefiro sólido e
o normal então eu vou voltar aqui deixar
do jeito que estava porque eu vou deixar
assim o design mas o aqui que você muda
a customização de Bora e aqui também é o
arredondamento da borda então está em 50
se você deixa 0
e fica quadrado tá se você deixa 15 vai
ficando assim eu também vou deixar 50
Beleza então aqui você trabalha
customização e aqui embaixo clica no
botão aqui embaixo tem um fonte sai sai
16 pixels o tamanho da fonte Se eu
colocar aqui 20 vai ficar desse jeito
todos os cursos quando você for alterar
essas informações pessoa recomendo que
vocês veem dois cliques para selecionar
tudo tá porque às vezes você quer deixar
zero e ele não fica aí você vai digitar
um número e ele coloca o número aqui no
texto Então sempre Ó selecione tá
selecionei o 16 E aí eu coloco a fonte
que eu quiser tá bom vou manter aqui 16
certo Então essas são as customizações
de Botão não entanto existe uma
configuração bem legal que é a
configuração Rover você clica aqui ó na
aba Rover isso daqui é o que acontece
quando a pessoa coloca o mouse em cima
bom Então olha esse meu segundo botão eu
coloco o mouse em cima o fundo fica
branco e a Fonte fica azul porque assim
que está configurado ó a o recurso Rover
do meu botão certo então por exemplo são
invés ó vamos pegar aqui text of color
né é a cor do texto no efeito Hover Se
eu colocar aqui verde quando eu coloco
Mouse a fonte vai ficar verde background
do botão Rosa eu coloco Mouse o fundo
ficou Rosa Só quando eu coloco o mouse
em cima do botão tá eu vou voltar ao
padrão então quando eu coloco Mouse o
fundo fica branco e a Fonte fica azul
mas esse é um efeito bem legal também
apenas se atentem a isso normal você vai
alterar a cor normal do botão como ele
vai aparecer da forma Inicial e Rover é
o que vai acontecer quando a pessoa
colocar o mouse em cima do botão tá bom
eu ia por último um recurso vou
atualizado aqui o recurso mais
importante do nosso botão é o que
acontece quando a pessoa clica nesse
botão né então clique em Acessar agora o
que que vai acontecer clicou em todos os
cursos o que que vai acontecer mas aí eu
vou abordar isso na próxima aula que
será uma aula somente sobre link está
para quem não sabe trabalhar com links
eu vou dar diversas dicas bem legais mas
para você colocar um link no botão basta
clicar no botão clica aqui e aqui você
vai colocar o endereço nesse caso aqui
ela até veio para essa parte né ele tem
esse endereço o hashtag que é para botar
o não funcionar para você clica e não
acontece nada então na próxima aula nós
vamos falar exclusivamente sobre links
no WordPress e também aqui no Gutemberg
beleza aí antes de acabar claro né acaso
você não queira um botão você clica nele
vem aqui mais opções e remove o botão
E aí você vai ter apenas um botão no seu
site E caso você queira inserir outros
eu recomendo que você pode fazer de duas
formas o aplica aqui no multi botões e
clica aqui no botãozinho de adicionar
botão e pronto já tenho só que aí ele
veio nesse formado nessa customização
Inicial se vai ter que customizar do
zero o que que acontece vou clicar no
botão vou remover o remover o botão
remover’ bloco eu vou clicar no primeiro
mais opções e duplicar E aí agora sim eu
formato esse botão do jeito que eu
quiser porque assim você aproveita uma
parte da customização do botão tá bom
Agora deixa eu voltar tudo aqui até do
jeito que estava Ok para voltar assim
utiliza control Z Mas você pode desfazer
aqui e refazer clicando aqui nessa e
setas Tá bom então aí só atualizar
atualizar o meu site
já está terminado aqui a parte de design
da sessão de destaque e na próxima aula
vamos falar exclusivamente sobre eles
Beleza então agora sim nos vemos na
próxima aula pessoal o grande abraço e
tchau

Quer conversar sobre WordPress com outros membros?

Acesse nosso Fórum de Discussão.

Seja o primeiro a avaliar essa aula.

Por favor, entre na sua conta para deixar sua avaliação.
Adicionar aos favoritos
WORDPRESS DEFINITIVO PRO (1) (1)