Guias/Monetizar seu site/Estilizar botões de pagamento

Estilizar botões de pagamento

Depois de adicionar o bloco de botões de pagamentos ao seu site, é possível alterar a cor, o layout e muito mais. Aprenda a estilizar seus botões de pagamento neste guia.

Cor do texto e de fundo

Siga estas etapas para alterar a cor do texto e de fundo do botão de pagamento:

  1. Clique em um botão individual no bloco de pagamentos.
  2. Na barra lateral de configurações do bloco, localize a seção Cor de texto e plano de fundo.
  3. Clique na seção Cor do texto para alterar a cor do texto no botão.
  4. Clique na seção Plano de fundo para alterar a cor do botão.

Saiba mais sobre como aplicar cores aos seus botões.

Ajustar o raio do botão

Altere o arredondamento das bordas do botão mudando o raio. Siga estas etapas:

  1. Clique em um botão individual no bloco de pagamentos.
  2. Na barra lateral de configurações de bloco, encontre a seção Borda.
  3. Use o controle deslizante ou insira um número para alterar o raio do botão.
  4. Clique em Salvar ou Publicar na parte superior para salvar suas alterações.

Com um número mais baixo, o botão ficará mais quadrado. Com um mais alto, os cantos do botão ficarão arredondados.

Um exemplo de um raio de borda zero, deixando o botão quadrado.

Configurar largura do botão

Configure a largura do botão seguindo estas etapas:

  1. Clique em um botão individual no bloco de pagamentos.
  2. Na barra lateral de configurações de bloco, encontre a seção Configurações de largura.
  3. Selecione uma das predefinições (25%, 50%, 75% ou 100%) ou defina uma largura personalizada.
  4. Clique em Salvar ou Publicar na parte superior para salvar suas alterações.

Por exemplo, defina a largura de um botão como 100% para criar um botão de largura total. Ou defina cada botão como 50% para ter dois botões que ocupam toda a área de conteúdo, como neste exemplo:

Dois botões lado a lado, ambos definidos como 50%, ocupando toda a largura da área de conteúdo.

Ajustar alinhamento do botão

Siga estas etapas para alterar o alinhamento de botões de pagamento:

  1. Selecione Visualização em lista na parte superior esquerda do editor.
  2. Clique no item Bloco de botões de pagamento na visualização em lista.
  3. Na barra de ferramentas do bloco exibida, clique no botão Alterar alinhamento dos itens.
  4. Selecione uma das seguintes opções:
    • Justificar itens à esquerda: alinha todos os botões à esquerda.
    • Justificar itens ao centro: alinha todos os botões no centro.
    • Justificar itens à direita: alinha todos os botões à direita.
    • Espaço entre os itens: coloca os botões com a mesma distância entre si no bloco de botões de pagamentos.
  5. Clique em Salvar ou Publicar na parte superior para salvar suas alterações.

Aplicar estilos predefinidos

Selecione um estilo predefinido para o botão seguindo estas etapas:

  1. Clique em um botão individual no bloco de pagamentos.
  2. Na barra lateral de configurações de bloco, clique na guia Estilos.
  3. Escolha entre selecione Preenchimento ou Contorno para o estilo do botão.
  4. Clique em Salvar ou Publicar na parte superior para salvar suas alterações.

Personalizar tipografia

Altere o tamanho, tipo e letra da fonte no texto do seu botão seguindo estas etapas:

  1. Clique em um botão individual no bloco de botões de pagamentos.
  2. Na barra lateral de configurações de bloco, clique na guia Estilos.
  3. Role a tela até a seção Tipografia.
  4. Altere o tamanho do texto do botão ou clique nos três pontos () para ativar as opções de Fonte e Letra maiúscula/minúscula.
  5. Clique em Salvar ou Publicar na parte superior para salvar suas alterações.

Saiba mais sobre configurações de tipografia.

Formatar o texto

É possível adicionar formatação como negrito e itálico ao texto no botão de pagamento. Siga estas etapas para aplicar a formatação:

  1. Clique em um botão individual no bloco de pagamentos.
  2. No botão, selecione uma parte ou todo o texto.
  3. Aplique qualquer um dos seguintes estilos, usando a barra de ferramentas do bloco exibida:
    • Negrito
    • Itálico
    • O ícone Mais inclui:
      • Destaque: altere apenas a cor de fundo e do texto. Use estilos para alterar a cor do botão.
      • Código embutido
      • Imagem embutida
      • Estilo de entrada do teclado
      • Atributo de idioma
      • Tachado
      • Subescrito
      • Sobrescrito
  4. Clique em Salvar ou Publicar na parte superior para salvar suas alterações.
Um exemplo de texto destacado com formatação em itálico aplicada.
Copied to clipboard!