Suporte » Ajustando o WordPress » Adicionar botão no header (cabeçalho)

  • Resolvido h14g00d3inger

    (@h14g00d3inger)


    Boa tarde pessoal

    me chamo Thiago e sou novo em desenvolvimento de sites.

    Atualmente estou com um problema, no meu tema (Zerif lite)
    as informações do Header (cabeçalho) são muito simples com apenas palavras sem botão e sem um design mais interessante.

    Gostaria de saber se há alguma forma de adicionar botões personalizados no cabeçalho, exemplo:

    Botão azul (home) botão vermelho (nossa história)

Visualizando 11 respostas - 1 até 11 (de um total de 11)
  • Moderador Leo Baiano

    (@leobaiano)

    Sua dúvida não é sobre WordPress e sim sobre CSS. Você entende algo de HTML + CSS? Se sim, seguinte, da uma olhada no código HTML gerado para o menu, cada item do menu tem classes e id que servem para identifica-los de forma unica, você vai pegar essa identificação e criar um estilo CSS para transforma-lo em um botão, seguindo seu exemplo, seria algo assim.

    Digamos que o link para a home possui um id="home" (isso é um exemplo, você precisa olhar no seu site qual o id correto de cada item.

    No CSS ficaria assim:

    #home { display:inline-block; background-color:red; padding:5px 10px; }

    Criador do tópico h14g00d3inger

    (@h14g00d3inger)

    Bom dia Leo Baiano

    Não entendo nada de HTML 🙁

    mas é isso mesmo que você descreveu, gostaria de adicionar botões na home da página.

    Não tem nenhum widget que faça mais facilmente ?

    Moderador Leo Baiano

    (@leobaiano)

    O que você precisa é estilizar o seu botão para que fique da forma que você deseja, acho um pouco complicado alguém ter desenvolvido um widget que sirva para o que você deseja sem ter conversado contigo para saber como você quer os botões. Até porque nem é função de um widget estilizar itens do template.

    Qual a URL do seu site e como você quer que fique o link para a home? Vou tentar montar o CSS para você de um dos botões e explicar o que fiz e ai você tenta fazer para os outros.

    Criador do tópico h14g00d3inger

    (@h14g00d3inger)

    http://teste.centroculturalitavuvu.com.br/

    SEGUE o URL

    estava tentando colar o CSS do header mas não consegui

    esses links como: Home, faça sua matricula

    são páginas criadas no tema

    Moderador Leo Baiano

    (@leobaiano)

    Veja esse print, para gerar este efeito usei o CSS abaixo:

    .menu-item-194 {
        padding: 0 20px;
        background-color: red;
        border-radius: 5px;
        box-shadow: -3px 3px 3px pink;
    }
    Criador do tópico h14g00d3inger

    (@h14g00d3inger)

    Ficou perfeito, Leo

    mas onde eu colo esse CSS para conseguir esse efeito ?

    Moderador Leo Baiano

    (@leobaiano)

    Você vai colocar esse CSS na folha de estilo do seu tema, procure pelo arquivo style.css dentro da pasta do seu tema.

    Criador do tópico h14g00d3inger

    (@h14g00d3inger)

    Funcionou certinho

    ai é só alterar a cor e o numero do item né ?

    Moderador Leo Baiano

    (@leobaiano)

    Para estilizar os outros itens você tem que olhar qual a classe unica dele, olha pelo inspetor de código do chrome ou então pelo código fonte da página, mas basicamente é isso, muda o número para o número de cada link.

    Criador do tópico h14g00d3inger

    (@h14g00d3inger)

    Muito obrigado funcionou direitinho

    valeu mesmo 🙂

    Moderador Leo Baiano

    (@leobaiano)

    Tranquilão, precisando vem aqui no fórum!

Visualizando 11 respostas - 1 até 11 (de um total de 11)
  • O tópico ‘Adicionar botão no header (cabeçalho)’ está fechado para novas respostas.