Ir para o conteúdo principal

Tutorial Divi: Como usar o módulo de conexão (Log in)

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 de login (login) exibe um formulário de login do WordPress, estilo Divi, em qualquer lugar da sua página. Se você usa o WordPress com um espaço de membro, adicionar um formulário de login diretamente a uma página pode ser muito útil (em vez de redirecionar as pessoas para o formulário de login do WordPress que usa um estilo diferente do seu tema).

página de login divi wordpress.png tutorial

Como adicionar um módulo de login à sua página

Antes de adicionar um módulo para se conectar à 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.

conecte o módulo divi.png

Localize o módulo de conexão na lista de módulos e clique para adicioná-lo à sua página. A lista de módulos está disponível, o que significa que você pode digitar a palavra "Connect", clique em "Enter" para encontrar e adicionar o plug automaticamente! 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: Adicione um formulário de login personalizado em uma página de login a uma área de membro

Como os sites de associação exigem que o usuário faça login em todo ou parte do conteúdo, o módulo de login facilita o acréscimo de um formulário de login ao seu. página de login. Além disso, você pode optar por redirecionar os usuários para este formulário em vez da página de login padrão do WordPress.

Aqui está uma página de login simples com o módulo de login. Vou mostrar a você como criar:

conecte-se a blogpascher.png

Usando o Visual Builder, adicione uma nova seção padrão à página de logon da associação com uma linha de largura total (coluna 1). Em seguida, insira o módulo de conexão na linha.

conecte o módulo divi.png

Atualize as configurações de conexão da seguinte maneira:

Opções de conteúdo

Título: Conexão
Conteúdo: [insira uma breve descrição do curso ou instruções para conectar]
Redirecionar para a página atual: SIM

Opções de design

cor de fundo do campo: # f0f0f0 Cor do texto: cabeçalho Police Dark: cor 35px do cabeçalho: # 888888 Font corpo size: 16px Border: Sim Cor da borda: # 0c71c3 largura da borda: 1px costume estofos: 50px Top, Right 50px, 50px Holanda, 50px deixou Use estilos personalizados para o botão: SIM texto do botão Tamanho: 26px cores botão de texto: cor do botão #ffffff: # 0c71c3 largura botão 0px Fonte:: botão por padrão, ícone botão superior Adicionar: SIM ícone do botão: Mostrar apenas o botão sobre o ícone: NÃO

exemplo de página de login divi.jpg

Isso é tudo. O site do espaço do membro agora tem um formulário de login customizado no qual os usuários serão redirecionados quando precisarem efetuar login no curso. Não há necessidade de se contentar com o formulário de login padrão do WordPress.

blogpascher login page.png

Opções de conteúdo do módulo de conexão

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.

content option module connection.png

Título

O título aparecerá na caixa de login, acima do formulário de login.

Conteúdo

O conteúdo será exibido na caixa de login, abaixo do título. Se você quiser adicionar uma descrição adicional, você pode usar o campo. Caso contrário, deixe em branco.

Redirecionar para a página atual

Aqui você pode escolher se o usuário deve ser redirecionado para a página atual.

Use a cor de fundo

Se você quer dar uma cor de fundo sólida para o seu formulário de login, selecione "sim" para esta opção e a cor de fundo que você selecionar na opção seguinte será usado.

Cor de fundo

Selecione uma cor de fundo para exibir no fundo da sua caixa de login. Se você optar por desativar as cores de fundo na opção anterior, essa cor não terá efeito.

Etiqueta administrativa

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.

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]

Opções de estilo para o módulo de login

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 de opção connection.png

Cor de fundo do campo de formulário

O formulário de login contém dois campos de entrada para o nome de usuário e senha. Você pode usar esse parâmetro para ajustar a cor de fundo desses campos.

Cor do texto do campo de formulário

O formulário de login contém dois campos de entrada para o nome de usuário e senha. Você pode usar esse parâmetro para ajustar a cor do texto desses campos. Se você ajustou a cor do plano de fundo do campo de formulário, também poderá ajustar a cor do texto para garantir um bom relacionamento de cores.

Cor de fundo

Quando um campo de entrada é focalizado com o mouse de um visitante, as cores mudam para indicar claramente qual campo está ativo. Aqui você pode definir a cor de fundo dos campos focados.

Cor de texto de foco

Quando um campo de entrada é focalizado com o mouse de um visitante, as cores mudam para indicar claramente qual campo está ativo. Aqui você pode definir a cor do texto dos campos focados.

Use a cor da borda do foco

Se você quiser adicionar uma borda aos campos de entrada quando eles estiverem em foco, você poderá ativar essa opção.

Cor da borda do foco

Ao usar essa configuração, você pode alterar a cor da borda que aparece nos campos de entrada de foco.

Cor do texto

Aqui você pode escolher se o texto deve ser claro ou escuro. Se você estiver trabalhando em um fundo escuro, seu texto deve estar claro. Se seu plano de fundo estiver claro, seu texto deve estar escuro.

Orientação de texto

Aqui você pode ajustar o alinhamento do seu texto.

Fonte de cabeçalho

Você pode alterar a fonte do texto do cabeçalho 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.

cabeçalho da seção divi.png

Tamanho da fonte do cabeçalho

Aqui você pode ajustar o tamanho do seu texto de cabeçalho. 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.

Cor do texto do cabeçalho

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

Espaçamento de papel timbrado

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 cabeçalho, 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 de cabeçalho

A altura da linha afeta o espaço entre cada linha do seu texto do cabeçalho Se você quiser aumentar o espaço entre cada linha, use o controle deslizante intervalo para ajustar o espaço ou digite o tamanho desejado no espaçamento campo de entrada à 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.

Fonte do corpo

Você pode alterar a fonte do seu corpo 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 corpo

Aqui você pode ajustar o tamanho do texto do seu corpo. Você pode arrastar o controle deslizante de gama para aumentar ou diminuir o tamanho do texto ou insira o valor do tamanho do texto 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.

Cor do texto do corpo

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

Espaçamento de letras do corpo

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra em seu 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 do corpo

A altura da linha afeta o espaço entre cada linha de texto em seu corpo 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 do espaço 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.

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.

módulo de área de fronteira divi.png

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]

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 beira

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.

Margem personalizada

Margem é o espaço adicionado ao exterior do seu módulo, entre o módulo e o próximo elemento acima, abaixo ou à esquerda e à direita dele. Você pode adicionar valores de margem personalizados a um dos quatro lados do módulo. Para remover a margem personalizada, remova o valor adicionado do campo de entrada. Por padrão, esses valores são medidos em pixels, mas você pode inserir unidades de medida personalizadas nos campos de entrada.

custom margin.png

Preenchimento personalizado

Fill é o espaço adicionado dentro do seu módulo, entre a borda do módulo e seus elementos internos. Você pode adicionar valores de preenchimento personalizados a um dos quatro lados do módulo. Para remover a margem personalizada, remova o valor adicionado do campo de entrada. Por padrão, esses valores são medidos em pixels, mas você pode inserir unidades de medida personalizadas nos campos de entrada.

Use estilos personalizados para o botão

A ativação dessa opção revela diferentes configurações de personalização para os botões que você pode usar para alterar a aparência do botão no seu módulo.

Tamanho do texto do botão

Essa configuração pode ser usada para aumentar ou diminuir o tamanho do texto no botão. O botão muda conforme o tamanho do texto aumenta e diminui.

Cor do texto do botão

Por padrão, os botões adotam a cor de destaque do tema, conforme definido no personalizador do tema. Esta opção permite atribuir uma cor de texto personalizada ao botão neste módulo. Selecione sua cor personalizada usando o seletor de cores para alterar a cor do botão.

Cor de fundo do botão

Por padrão, os botões têm uma cor de plano de fundo transparente. Isso pode ser alterado selecionando a cor de fundo desejada no seletor de cores.

usando os botões divi module connection.png

Botão Largura da Borda

Todos os botões Divi possuem uma borda 2px padrão. Essa borda pode ser aumentada ou diminuída usando esse parâmetro. As bordas podem ser excluídas inserindo um valor de 0.

Cor da borda do botão

Por padrão, as bordas dos botões mudam para a cor de destaque do tema, conforme definido no personalizador do tema. Essa opção permite atribuir uma cor de borda personalizada ao botão neste módulo. Selecione sua cor personalizada usando o seletor de cores para alterar a cor da borda do botão.

Raio da borda do botão

O raio da borda afeta a redondeza dos cantos dos seus botões. Por padrão, os botões em Divi têm um pequeno raio de borda que arredonda os cantos dos 3 pixels. Você pode reduzir esse valor para 0 para criar um botão quadrado ou aumentá-lo significativamente para criar botões com bordas circulares.

Espaçamento de letras de botão

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 botão, 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.

Fonte do botão

Você pode alterar a fonte do texto do botão 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.

Adicionar um ícone de botão

Desabilitado, essa configuração removerá os ícones do seu botão. Por padrão, todos os botões Divi exibem um ícone de seta no foco.

Ícone de botão

Se os ícones estiverem ativados, você poderá usar essa configuração para escolher o ícone a ser usado no seu botão. Divi tem ícones diferentes para escolher.

Botão do ícone de cor

Definir essa configuração mudará a cor do ícone que aparece no seu botão. Por padrão, a cor do ícone é igual à cor do texto de seus botões, mas essa configuração permite ajustar a cor de forma independente.

Botão de colocação de ícone

Você pode optar por exibir o ícone do seu botão à esquerda ou à direita do seu botão.

Mostrar apenas o ícone quando o botão rola

Por padrão, os ícones de botão são exibidos apenas durante a rolagem. Se você quiser que o ícone apareça sempre, desative essa configuração.

Cor do texto do botão suspenso

Quando o botão é passado pelo mouse de um visitante, essa cor será usada. A cor mudará da cor base definida nas configurações anteriores.

Cor do plano de fundo do botão suspenso

Quando o botão é passado pelo mouse de um visitante, essa cor será usada. A cor mudará da cor base definida nas configurações anteriores.

Botão de limite de cores em cores

Quando o botão é passado pelo mouse de um visitante, essa cor será usada. A cor mudará da cor base definida nas configurações anteriores.

Crie facilmente seu blog com o SiteGround

SiteGround permite que você crie seu blog WordPress em apenas alguns cliques. Nome de domínio grátis, hospedagem segura, SSL, transferência e muito mais ... [Recomendado]

Botão do raio da beira do pairo

Quando o botão é passado pelo mouse de um visitante, esse valor será usado. O valor será alterado a partir do valor base definido nos parâmetros anteriores.

Botão de espaçamento de notas pontiagudas

Quando o botão é passado pelo mouse de um visitante, esse valor será usado. O valor será alterado a partir do valor base definido nos parâmetros anteriores.

Opções Avançadas do Módulo de Login

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 login

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.

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

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
17 ações
ação12
chilrear1
Enregistrer4
Whatsapp