Fixar menu no celular
Pra criar o efeito abaixo e manter a barra de menu fixa no celular ou tablet, add o código no seu CSS: @media only screen and ( max-width: 980px ){ #main-header{ position: fixed !important; } #et_menu_container, #main-header{ height:70px; margin-top: -13px } }...
Como usas as mais de 1080 paginas prontas do Divi
Após clicar em adicionar Nova Página (Usando o Construtor Divi)Escolha a opção: "Selecionar Layout" Cada layout tem seu próprio conjunto de páginas. Você pode selecionar páginas de diferentes layouts ou usar apenas módulos individuais de cada página para criar seus...
Texto no lugar da logo Divi
Adicione um texto comum ao invés de imagem no lugar da logo. Adicione o código no seu CSS: #logo{ display:none; } .logo_helper:before{ content: 'ESCREVA seu texto AQUI'!important; display:inline!important; white-space: nowrap; font-family:"Lato"!important;...
Texto no lugar do hamburger menu
Para adicionar um texto no lugar do menu no celular, adicione o seguinte código ao seu CSS: #et_mobile_nav_menu .mobile_menu_bar::before { font-size: 25px!important; content: 'menu'; font-family: Arial!important; border-radius:3px; } Para adicionar um X para...
Customização profissional do módulo de formulário Divi – Campos extras
Adicionar texto extra acima de qualquer campo do formulário de contato; nome checkboxes botões radiais mensagem... **Mantendo a label dentro dos campos por padrão. .et_pb_contact_form_0 .et_pb_contact_field_0 label { visibility: hidden; display:block}...
Menu Celular Divi – Deslizar da direita para esquerda
Por padrão, o menu do Divi no celular abre para baixo; Para fazer com que ele deslize da direita para a esquerda adicione o código a seguir no CSS principal. #main-header .et_mobile_menu li ul.sub-menu.hide { display: none !important; visibility: hidden !important;...
Mudar o ícone do menu para celular – Hamburger Menu
Adicione o código no CSS principal para alterar o ícone de abrir e fechar o menu no celular: /*abrir*/ #et_mobile_nav_menu .mobile_menu_bar::before { font-size: 25px!important; content: 'ADICIONE AQUI O CODIGO DO ICONE'; border-radius:3px; } /*fechar*/...
Logo diferente no celular
Você pode ter uma logo específica para tablet e celular ou apenas para celular, adicione o código no CSS principal: @media only screen and (max-width:680px){ #logo { content: url("ADICIONE AQUI A URL DA SUA LOGO PARA CELULAR"); } }
Tamanho da Logo no celular
Dependendo da dimensão da sua logo ela pode ficar bem pequena no celular. Esse código aumenta seu tamanho e controla as margens e paddings para celular. @media only screen and (max-width: 981px){ #logo{ margin-top:0px; margin-left:-10px; max-height:80%; max-width:80%}...
Logo diferente no menu fixo
Adicione esse código no CSS principal: .et-fixed-header #logo { content: url("COLE AQUI A URL DO SEU LOGO PARA MENU FIXO"); }
Formulário Divi – Mostrar ícone ao passar o mouse sobre os campos
passe o mouse sobre os campos do formulário...Para obter esse efeito você vai precisar adicionar a classe icone ao formulário em:Configurações de Módulo / Avançado / Classes & ID do CSS / Classes CSS Em seguida adicione o código abaixo no CSS principal *Ainda...
Menu com efeitos ao passar o mouse
O menu abaixo não está funcional, foi criado apenas para que você possa ver os efeitos ao passar o mouse sobre cada botão. Esse é um menu nativo do WordPress Cada botão tem uma classe única, você pode escolher um e adicionar a todo o menu ou usar sua imaginação para...
Inverter a ordem das colunas no celular ou tablet
Para inverter a ordem das colunas do Divi no "Celular" e/ou "Tablet" basta adicionar uma classe a Linha e um código ao CSS principal. Adicione em: Configurações da Linha / Avançado / Classes & ID do CSS / Classe CSS: inverter_colunas Adicione o código no CSS principal...
Personalizando largura das colunas
Para personalizar a largura das colunas do Divi "builder" basta adicionar um simples código CSS e atingir qualquer tamanho desejado.Por padrão, uma linha com 4 colunas é dividida igualmente em 4x 25% Você pode usar qualquer porcentagem até atingir 100% criando um...
Adicionar qualquer ícone social no rodapé
Botão do WhatsApp no site sem plugin Para conferir o link no site do WhatsApp, acesse: https://www.whatsapp.com/ (que é a página Oficial do WhatsApp) Clique no menu: Faq e no campo de busca digite: Conversa em um clique Nesse tópico você encontra esse link:...
“Checkbox” ou Botões Radiais na mesma linha
Caixa de seleção e Botões Radiais em linha ( Checkboxes ou Radio Buttons inline ) Para obter o resultado abaixo, adicione no CSS:checkbox .et_pb_contact_field_checkbox {display: inline-block!important; padding-right: 8px} radio buttons .et_pb_contact_field_radio...
Titulo do Sinopse acima do ícone ou imagem
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.Your content goes here. Edit...
Abrir ícones do rodapé em uma nova aba
para fazer com que os ícones de redes sociais no rodapé do tema Divi abram em uma nova aba mantendo seu site aberto, insira o código a seguir em: Divi / Opções de Temas / Integração / Adicionar código para o < body ><script type="text/javascript">...
Mascara de Celular Telefone CPF CNPJ
para adicionar máscara de numeros no formulário Divi, serão utilizados 2 codigos:(insira esse abaixo em Divi / Opções de Temas / Integração / Adicionar código para a < head > do seu blog...) <script type="text/javascript" src="ADD o caminho para seu...
Remover margens, Seção/Linha Divi Builder – Full width
para remover as margens da linha e tornar a seção fullwidth (insira em "Configurações de linha / Avançado / Customize CSS / Elemento Principal): min-width: 100%;
Editar mensagem no formulário – Por favor, preencha os seguintes campos
para mover a mensagem para baixo do formulário, segue o código CSS: Veja que a classe: et_pb_contact_form_0 é a padrão, você pode adicionar uma nova classe e alterar o estilo dos formulários separadamente caso tenha vários estilos em seu site. .et_pb_contact_form_0{...
Exibir 2 ou mais colunas no celular
para exibir 2 colunas no celular, insira em "Configurações da página / Avançado / Customize CSS: @media only screen and (max-width:479px) { .et_pb_column{width:33%!important; padding:5px;} } *para exibir 2 colunas use 50%, para 3 colunas 33% e para 4 colunas 25% *para...
Imagem ao invés de ícone ao passar mouse sobre botão
Você pode utilizar uma classe para cada botão e duplicar o código caso queira um ícone diferente para cada, ex: bt_whats, bt_facebook... Esse código pode ser adicionado no CSS principal ou nas Configurações da página/Avançado/Customize CSS.bt_img:after...
Alinhamento-Vertical, imagem e texto
para alinhar imagem com texto na vertical:(insira antes de src="...) style="vertical-align:middle" esse é um bloco de texto com uma imagem. Facebook Facebook para alinhar colunas vertical(insira em "Configurações de linha / Avançado / Customize CSS /...