Em um tutorial anterior, nós você apresentou o Divi. Para quem não sabe, o Divi é um tema WordPress premium projetado pela equipe temas elegantes que oferece vários serviços no WordPress e cria plugins e temas.
Divi é um tema responsivo e este último é compatível com vários outros plugins entre outros que temos WooCommerce. Hoje vamos mostrar como dar uma animação diferente aos seus produtos WooCommerce.
Às vezes o estilo de WooCommerce pode ser um pouco inadequado, especialmente se o seu estilo CSS for um pouco diferente. Este tutorial, que será um pouco técnico (um pouco de CSS e nada mais), permitirá que você corrija isso.
Outros tutoriais sobre o tema Divi
- sites 5 para uso restaurante Divi tema
- Como adicionar texto em um Divi produto WooCommerce
- Como alterar a cor do menu entre as páginas no Divi
- Recursos que você não conhece sobre o Divi
- Como criar um controle deslizante no Divi
- Como editar uma função de usuário no Divi
Vamos começar.
Modificando um ícone para texto sobre o mouse
Por padrão, quando você usa WooCommerce com Divi e passa o mouse sobre um produto, você vê um pequeno ícone '+' que é uma fonte (tornar-icon) proposto pela Divi e que é o seguinte:
É muito fácil mudar isso para um ícone diferente nas configurações, mas se você quiser adicionar algum texto, é outra coisa? Mostrarei como fazer isso com os snippets CSS de hoje e também incluirei código opcional para adicionar ao seu site.
Aqui está o que teremos concluído uma vez:
Por que usar texto em vez de um ícone?
Eu posso pensar em alguns motivos que podem fazer você fazer isso:
Para definir, dê uma aparência única à sua loja: Qualquer coisa que você possa fazer para distinguir o seu site Divi / WooCommerce de outro é sempre uma boa coisa.
Usar uma palavra como "Visualizar" ou "Comprar" pode resultar em mais conversão: Todos precisam fazer o melhor para o site deles, e você pode tirar proveito dos testes A / B integrados no Divi para ajudar nisso.
Fonte de inspiração
Recentemente, naveguei em um site que tinha um texto sobre o produto pairando. É claro que vi outros sites de comércio eletrônico que têm palavras em vez de ícones no produto pairando, então esse não era um conceito novo. Eu nunca tive que fazer isso em um Tema Divi, e quando eu vi isso, eu me lancei um desafio e percebi que é realmente fácil de implementar isso. Com muito pouco código necessário, você certamente não afetará o desempenho do seu blog.
Implementando o mouse sobre o texto
Etapa 1: a sobreposição de cores
Vamos mudar a cor da sobreposição ao pairar primeiro. Isso é extremamente fácil de fazer no Divi. No módulo da sua loja, vá para " parâmetros avançados avançados de design E selecione sua cor.
Etapa 2: Adicionando CSS
O seguinte código CSS em " Opções de tema> CSS personalizado Ou na folha de estilos do seu tema infantil.
.woocommerce .et_overlay: antes de {left: 0; margem esquerda: 0; conteúdo: 'ver'; / *** Seu texto aqui *** / font-family: 'Fonte sem profissional', Arial! / *** Escolha sua fonte *** / text-transform: uppercase; tamanho da fonte: 24px; cor: #fff; / *** Defina a cor do texto *** / font-weight: bold; alinhamento de texto: centro; largura: 100%; preenchimento: 5px 0; }
Se você deseja que seus produtos sejam bastante redondos, você pode adicionar este código opcional:
.woocommerce ul.products li.product um img, .et_overlay {fronteira de raio: 50%; }
É isso aí!
Agora você pode visitar sua loja e ver como suas alterações são levadas em consideração.
[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expandido "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] BAIXE O TEMA DIVI [/ vcex_button] [/ width_column] [»vc_column] »1/2 ″] [vcex_button url =" https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials "target =" em branco "layout =" expandido "alinhar =" centro " font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] BAIXAR MODELOS DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
Outros tutoriais Divi
- sites 5 para uso restaurante Divi tema
- Como adicionar texto em um produto Divi WooCommerce
- Como alterar a cor do menu entre as páginas Divi
- Como personalizar as grades de um blog com Divi
- Como usar o editor Divi papel em WordPress
- Como criar um controle deslizante Divi em tela cheia
- Como mudar a cor dos menus entre as páginas Divi
- Recursos que você provavelmente não conhece sobre o Divi
- Como usar o Divi Builder no WordPress
- Como usar o módulo de rolagem de vídeo Divi
- Como usar o módulo Divi Builder Flip
- Como adicionar um módulo de depoimento no Divi Builder
- Como usar o módulo de texto Divi
- Como criar um controle deslizante no Divi
- Como editar uma função de usuário Divi
- Como usar o módulo Divi Social Media
- Como usar o módulo de loja no tema WordPress Divi
- Como usar o módulo da barra lateral Divi
- Como usar o módulo Divi Price Table
- Como usar o módulo de título das publicações Divi
- Como adicionar um módulo de vídeo do Divi
- Como usar o módulo de navegação do artigo
- Como usar o módulo de pesquisa Divi
- Como usar o módulo de carteira Divi
- Como usar o módulo person no Divi Builder
- Como usar o módulo de carteira com filtro Divi
- Como usar o módulo deslizante de largura total
- Como usar o módulo de imagem do Divi Builder
- Como usar o módulo de navegação de largura total do Divi Builder
- Como usar o módulo da galeria de imagens
- Como usar o módulo de placa de largura total do Divi Builder
- Como usar o módulo de portfólio de largura total Divi
- Como usar o módulo de cabeçalho Divi de largura total
- Como usar o módulo do contador Divi
- Como usar o controle deslizante de artigos no Divi Builder
- Como usar o módulo Divi Email Optin
Texto diferente por produto? você diz para adicioná-lo a novos produtos? Como e onde?
Super artigo, obrigado por esta dica. E se queremos um texto diferente por produto, como?
Olá Brice,
Neste caso, você adiciona um texto diferente no novo produto WooCommerce.
Super !! Obrigado por esta dica.
de nada.