Ir para o conteúdo principal

Tutorial Divi: Como usar o módulo de carteira com filtro

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

O módulo do tema Portfólio de largura total Divifunciona como o módulo de carteira normal, exceto pelo fato de exibir seu projeto em um belo modo Fullwdth. Ele também vem com alguns novos recursos exclusivos: grade e carrossel. O módulo funciona exibindo uma lista dos seus projetos mais recentes e pode ser usado por designers e artistas que desejam exibir uma galeria de seus trabalhos mais recentes.

módulo de porfolio de largura total divi.png

Como adicionar um módulo de Portfólio Fullwidth à sua página

Antes de adicionar um módulo de portfólio completo à sua página, você deve primeiro entrar no Divi Builder. Quando o tema Divi estiver instalado no seu site, você notará um botão Use o Divi Builder acima do editor sempre que você criar uma nova página. Clique neste botão para ativar o Divi Builder e acessar todos os módulos do Divi Builder. Então clique no botão Use o Visual Builder para iniciar o gerador no modo visual. Você também pode clicar no botão Use o Visual Builder quando você navega no seu site em primeiro plano, se estiver conectado ao seu painel do WordPress.

construtor divi

Depois de inserir o Visual Builder, você pode clicar no botão cinza para adicionar um novo módulo à sua página. Novos módulos só podem ser adicionados dentro de linhas. Se você iniciar uma nova página, não se esqueça de adicionar uma linha à sua página primeiro. Temos excelente tutoriais sobre o uso de elementos de linha e seções de Divi.

filterable port.png

Localize o módulo de portfólio filtrável na lista de módulos e clique nele para adicioná-lo à sua página. A lista de módulos é pesquisável, o que significa que você também pode digitar a palavra "portfolio filtrável" e clicar em "Enter" para pesquisar automaticamente e adicionar o módulo de portfólio filtrável. Depois que o módulo for adicionado, você será saudado pela lista de opções do módulo. Essas opções são separadas em três grupos principais: Conteúdo , Projeto et avançado.

Exemplo de caso de uso: Adicionando um módulo de portfólio filtrável a uma página de portfólio

Para este exemplo, mostrarei como apresentar um portfólio em uma página de portfólio que cubra toda a largura da página.

portfólio em uma página inteira divi.jpg

Vamos começar.

Use o construtor visual para adicionar uma seção Fullwidth sob o cabeçalho da página. Em seguida, adicione um módulo de portfólio filtrável.

adicione um portfolio filtrável divi.jpg

Atualize as configurações do portfólio filtrável da seguinte forma:

Opções de conteúdo

Número de Mensagens: 8 Mostrar Paginação: NÃO

Opções de design

Layout: Grelha Zoom Ícone color: # 000000 recuperação cores Hover: Font título #ffffff: Por padrão, negrito, letras maiúsculas tamanho do título da letra: tamanho 14px Título espaçamento letras 1px Meta Fonte: 12px Meta Espaçamento letras: 1px

módulo de portfólio filtrável divi.png

É isso aí!

Opção de conteúdo do módulo de portfólio

Na aba de conteúdo, você encontrará todos os elementos de conteúdo do módulo, como texto, imagens e ícones. Tudo o que controla o que aparece no seu módulo será sempre encontrado nesta aba.

módulo de portfólio filtrável divi content section.png

Título da carteira

Digite um título exibido acima do portfólio ou deixe-o vazio para não usar um título.

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 554.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Incluir Categorias

Escolha as categorias que você deseja exibir. Projetos de categorias que não são selecionadas não aparecerão na lista de projetos.

Número de posts

Verifique o número de projetos exibidos Deixe em branco ou use 0 para evitar limitar o valor.

Mostrar título

Escolha se o título de cada projeto é exibido ou não quando você passa o mouse sobre o item do projeto.

Mostrar data

Escolha se a data de publicação de cada projeto é exibida ou não quando você passa o mouse sobre o item do projeto.

Cor de fundo

Defina uma cor de fundo personalizada para o seu módulo ou deixe em branco para usar a cor padrão.

Imagem de fundo

Se definida, esta imagem será usada como plano de fundo para este módulo. Para excluir uma imagem de plano de fundo, basta excluir o URL do campo de configurações. As imagens de plano de fundo aparecerão acima das cores do plano de fundo, o que significa que a cor do plano de fundo não ficará visível quando uma imagem de plano de fundo for aplicada.

Rótulo de administração

Isso mudará o rótulo do módulo no construtor para fácil identificação. Quando você usa a exibição WireFrame no Visual Builder, esses rótulos aparecem no bloco do módulo da interface do Divi Builder.

Opções de design de carteira com largura total

Na guia Design, você encontrará todas as opções de estilo do módulo, como fontes, cores, tamanho e espaçamento. Esta é a guia que você usará para alterar a aparência do seu módulo. Cada módulo Divi possui uma longa lista de parâmetros de design que você pode usar para alterar qualquer coisa.

módulo de design divi.png

Provisão

Escolha o layout que você deseja usar. "Grid" exibirá todos os seus elementos em um layout múltiplocolunas e multi-linhas. O carrossel exibe seus itens em uma única linha de imagens lado a lado que deslizam para revelar itens adicionais na lista.

Ícone de cor de zoom

Ao passar o mouse sobre um item no módulo de carteira, um ícone de sobreposição é exibido. Você pode ajustar a cor usada neste ícone usando o seletor de cores nessa configuração.

Sobreposição de cores suspensas

Quando você passa o mouse sobre um item no módulo de portfólio, uma cor de sobreposição aparece na parte superior da imagem e sob o ícone de texto e título do portfólio. Por padrão, uma cor branca semitransparente é usada. Se você quiser usar uma cor diferente, poderá ajustar a cor usando o seletor de cores nessa configuração

Seletor de ícone de focalização

Aqui você pode escolher um ícone personalizado para exibir quando um visitante passa sobre os itens do portfólio no módulo.

Cor do texto

Aqui você pode escolher se o texto deve ser claro ou escuro.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

módulo de portfólio filtrável de design de opção divi.png

Fonte de título

Você pode alterar a fonte do texto do título selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, maiúsculas e sublinhadas.

Tamanho da fonte do título

Aqui você pode ajustar o tamanho do texto do seu título. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor do tamanho de texto desejado diretamente no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Título da cor do texto

Por padrão, todas as cores de texto Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do texto do título, escolha a cor desejada no seletor de cores usando essa opção.

Espaçamento das letras do título

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra no texto do título, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Altura da linha do título

A altura da linha afeta o espaço entre cada linha do texto do título Se você quiser aumentar o espaço entre cada linha, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada localizado à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

portfolio filtrável divi module section metadonnee.png

Meta Font

Você pode alterar a fonte do seu texto meta selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, maiúsculas e sublinhadas.

Tamanho da fonte Metas

Aqui você pode ajustar o tamanho do seu meta-texto. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor do tamanho de texto desejado diretamente no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Meta cor do texto

Por padrão, todas as cores de texto Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do seu meta-texto, escolha a cor desejada no seletor de cores usando esta opção.

Espaçamento de letra Meta

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra da sua meta-texto, use o controle deslizante intervalo para ajustar o espaço ou digite o tamanho espaçamento desejado no campo de entrada à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Altura da Linha Meta

A altura da linha afeta o espaço entre cada linha de sua meta de texto Se você quiser aumentar o espaço entre cada linha, use o controle deslizante intervalo para ajustar o espaço ou digite o tamanho espaçamento desejado no campo de entrada localizado à direita do cursor. Os campos de entrada suportar diferentes unidades de medida, o que significa que você pode digitar "px" ou "em", dependendo do valor do seu tamanho para alterar o tipo de unidade.

Use a fronteira

Ativar esta opção colocará uma borda ao redor do seu módulo. Essa borda pode ser personalizada usando os seguintes parâmetros condicionais.

Cor da fronteira

Esta opção afeta a cor da sua borda. Selecione uma cor personalizada no seletor de cores para aplicá-la à sua borda.

Largura da fronteira

Por padrão, as bordas têm uma largura de 1 pixel. Você pode aumentar esse valor arrastando o controle deslizante de intervalo ou inserindo um valor personalizado no campo de entrada à direita do controle deslizante. Unidades de medida personalizadas suportadas, o que significa que você pode alterar a unidade padrão de "px" para outra coisa, como em, vh, vw etc.

Estilo da Borda

Bordas suportam oito estilos diferentes: sólido, pontilhado, pontilhado, duplo, groove, crista, inlay e start. Selecione o estilo desejado no menu suspenso para aplicá-lo à sua borda.

Opções Avançadas de Portfólio Fullwidth

Na guia avançada, você encontrará opções que os designers da Web mais experientes podem achar úteis, como atributos CSS e HTML personalizados. Aqui você pode aplicar CSS personalizado a um dos muitos elementos do módulo. Você também pode aplicar classes personalizadas e IDs CSS ao módulo, que pode ser usado para personalizar o módulo no arquivo style.css de seu tema filho.

módulo de portfólio filtrável divi forward.png section

ID CSS

Digite um identificador CSS opcional para usar neste módulo. Um ID pode ser usado para criar um estilo CSS personalizado ou para criar links para seções específicas de sua página.

Classe CSS

Digite as classes CSS opcionais para usar neste módulo. Uma classe CSS pode ser usada para criar um estilo CSS personalizado. Você pode adicionar várias classes, separadas por um espaço. Essas classes podem ser usadas em seu tema filho Divi ou na folha de estilo CSS personalizada que você adiciona à sua página ou site usando as opções de tema Divi ou as configurações da página Divi Builder.

CSS personalizado

O CSS personalizado também pode ser aplicado ao módulo e a um dos elementos internos do módulo. Na seção CSS personalizado, você encontrará um campo de texto no qual é possível adicionar folhas de estilo CSS personalizadas diretamente a cada elemento. As entradas CSS nesses parâmetros já estão agrupadas nas tags de estilo. Então, basta inserir regras CSS separadas por ponto e vírgula.

Carrossel automático

Se a opção de layout carrossel é selecionado e você quer o carrossel desliza automaticamente, sem que o visitante deve clicar no botão seguinte, selecione essa opção e ajustar a velocidade abaixo, se desejar.

Velocidade de carrossel automática

Aqui você pode inserir a velocidade de rotação do carrossel, se a opção "Rotação automática do carrossel" estiver ativada acima. Quanto maior o número, maior a pausa entre cada rotação. (Ex. 1000 = 1 sec)

visibilidade

Esta opção permite controlar os dispositivos nos quais seu módulo aparece. Você pode optar por desativar seu módulo em tablets, smartphones ou desktops individualmente. Isso é útil se você quiser usar módulos diferentes em dispositivos diferentes ou se quiser simplificar o design móvel eliminando determinados elementos da página.

Outros tutoriais Divi

Este artigo contém comentários 4
  1. Bom Dia,

    Obrigado pelo seu artigo completo.
    Consigo exibir um portfólio porfiliado ou filtrável, mas com margens significativas.
    Você sabe se o divi pode exibir um portfólio filtrável de largura total?
    Ou para exibir um portfólio filtrável sem margens significativas?

    obrigado

  2. Olá, gostei do seu artigo mas quando tento reproduzir esse tipo de layout, tenho grandes espaços entre minhas imagens. Eu preferiria ter as imagens anexadas como no seu exemplo. Como configurar o módulo para isso?

    Obrigado!

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
11 ações
ação2
chilrear2
Enregistrer7
Whatsapp