Configuração de Banners via WordPress e Elementor Pro

Funcionalidade disponível exclusivamente para usuários do Módulo de Personalização da Auryn.  

__________________________________________

Estas são as principais dicas que gostaríamos de trazer à vocês sobre os banners, de acordo com as dúvidas recorrentes que recebemos à respeito.

Lembramos que existe um material bastante rico sobre a edição com o Elementor Pro no site oficial deles e no youtube:

• Base de Conhecimento do Elementor Pro
• Canal do youtube com vídeos tutoriais

__________________________________________

Acesse o painel de elementos que fica no canto superior direito do menu do elementor. 

Componente usado para Banner

Nós sugerimos o elemento "slides" do Elementor Pro para ser utilizado como banner no seu site. Para utilizá-lo, basta acessar o painel de componentes clicando no botão superior direito do menu pink, como mostra na imagem.

 O slides é um componente Pro, por isso basta rolar até os elementos Pro para encontrá-lo. Outra opção é digitar no campo de busca:

Basta arrastar o componente para a área desejada do site e começar a configurá-lo.

__________________________________________

Caso não esteja vendo uma área vazia como esta abaixo, para inserir seu banner, siga os próximos passos dentro desta seção: 

Esta área acima aparece nos espaços vazios do seu site. Caso queira adicionar um elemento e não esteja vendo esta área vazia, você pode criá-la a partir de outra seção, clicando no botão "+" na parte superior dela:

A nova seção vazia aparecerá logo acima da seção onde você clicou:

__________________________________________

Conteúdo 

Antes de configurarmos o conteúdo, vamos primeiro pausar os banners para facilitar, senão eles ficarão passando e trocando durante a configuração, dificultando o seu trabalho.

Acesse Conteúdo > Slider Options e marque "não" na opção "autoplay"

Para configurar o conteúdo, clique sobre os slides inseridos no site e acesse a aba "conteúdo" no painel esquerdo.

Em "Slides" clique sobre o "slide 1 heading" para editar o primeiro banner.

A primeira opção que aparece para configurar é o background [fundo] onde você pode colocar a imagem do banner e uma cor de fundo.

Conteúdo > Slides > BACKGROUND

Imagem do Banner

Você pode definir o tamanho da imagem que desejar para o seu banner, o importante é que todos os banners deste slide fiquem do mesmo tamanho. Temos um material completo sobre tamanhos de banners para o site e sobre como salvar imagens para o site, para que fiquem mais leves e carreguem rápido:

Dimensões das Fotos Banners e Logo para a sua Loja Online

Como Exportar Imagens para Usar no seu Site

Ao clicar no botão "+" você verá uma janela com a biblioteca de imagens do Wordpress:

Clique em "Selecionar arquivos" e selecione as imagens dos seus banners.

Color

Definir a cor deste item fica a seu critério. Sugerimos que escolha uma cor parecida com a cor mais visível do seu banner, preferencialmente. Ela servirá para preencher o espaço da tela quando o monitor do usuário for muito maior do que a imagem do seu banner.

Exemplo: o ideal é que o seu banner tenha 1920px de largura. Mas existem monitores com resoluções maiores, então, falta imagem para ocupar o espaço, que será preenchido com a cor que você escolher nesta opção.

Conteúdo > Slides > CONTENT

Nesta aba definimos o conteúdo do banner, ou seja, seus textos e links.

Você pode optar por ter os textos escritos na própria imagem do banner, neste caso, basta deixar as caixas de Title & Description [título e descrição] vazias.

O "Button Text" [texto do botão] também é opcional. Se deixar vazio, o botão vai sumir do slide, ficando apenas a imagem. 

Em "Link" coloque o link para o produto ou para a página da campanha. 

Em Apply Link On [aplicar link em] você pode escolher Whole Slide [todo o slide] ou Button Only [apenas botão].

Conteúdo > Slides > STYLE 

Sobrepõe a opção "Estilo"

Isso significa que, caso você marque a opção "Custom" como "sim" na aba Style de um banner, estas configurações definidas para este banner vão se sobrepor às configurações que você utilizar na aba "Estilo" que é geral. Por isso, bastante atenção.

Na aba STYLE você poderá ajustar a posição horizontal e vertical do conteúdo do banner (textos e botão) e também o alinhamento, cor e sombra do texto.

Mas todos estes itens também podem ser definidos de forma geral para todos os slides na aba "Estilo". Deste modo, você não precisa definir separadamente para cada banner.

Como duplicar banners / slides

Ao lado do título do seu banner / slide, tem um botão para você duplica-lo.

Estilo

Na aba Estilo você poderá configurar os textos, o botão, cores, posicionamento dos elementos e o efeito Hover [efeito ao passar o mouse] e botões para a navegação dos slides / banners.

Avançado

Sugerimos que utilize o mínimo possível a aba Avançado, caso não tenha conhecimentos mais profundos em design de sites.

Caso você seja mais leigo no assunto, basta utilizar apenas as configurações que vamos sugerir aqui:

Como remover o espaço em branco ao redor do slide / banner

Por padrão as colunas adicionam um Padding [preenchimento] interno branco. Ou seja, fica uma borda branca por dentro de toda a área da coluna.

Para remover isso, basta selecionar a coluna clicando no ícone cinza que fica no canto superior esquerdo do componente de slide / banner.

No menu esquerdo, clique na opção "Avançado" basta zerar os valores do "Padding" [preenchimento].

Avançado > Responsivo

Como configurar os banners por tamanho de tela

Na aba "Responsivo" você pode definir se o componente será exibido ou não em cada tamanho de tela: Desktop (computador de mesa), Tablet e Mobile (smartphone).

Neste exemplo, o slide / banner ficará oculto para celulares, mas será exibido no desktop e no tablet.

Sugerimos que faça outro componente igual para ser exibido nos celulares, trocando apenas a imagem e reduzindo a quantidade de texto sempre que possível.

Duplique o componente clicando com o botão direito no ícone azul claro que aparece na parte superior direita (se preferir, pode duplicar a seção toda e não apenas o componente [Saiba mais sobre seções, colunas e componentes neste tutorial]).

Para editar da melhor forma possível, Selecione o modo de edição responsiva para celular, acessando o menu esquerdo inferior do Elementor:

Ao visualizar na versão Mobile, o slide / banner que foi configurado para não ser exibido neste tamanho de tela, ficará com listras cinzas sobre ele para indicar isso:

E o outro banner deverá estar marcado como SHOW [exibir] na aba Responsivo para que você possa editá-lo normalmente.