Ir para o conteúdo Guia Sítios Ir para o menu Guia Sítios Ir para a busca no site Guia Sítios Ir para o rodapé Guia Sítios
  • Acessibilidade
  • Sítios da UFSM
  • Área restrita

Aviso de Conectividade Saber Mais

Início do conteúdo

Inserindo Banner no seu Site

Surgem muitas dúvidas de como inserir um Banner da forma correta no site e estamos aqui para te mostrar duas maneiras diferentes de fazer isso. 

Uma das formas é pelas Notícias Vinculadas e a outra pelo Widget “Site Origin Slider” no Elementor. Usamos o recurso de Widget de Notícias Vinculadas quando nossa notícia tem texto e você quer adicionar um Banner linkado a ela. Caso você queira deixar o Banner sem vincular com uma notícia, linkando a um site externo ou até mesmo o deixando somente como imagem, utilize o Widget “Site Origin Slider”.

Inserindo Banner com Widget de Notícias

Criação da categoria Banner

Aqui vamos iniciar pelas Notícias Vinculadas. O Widget de notícias é um meio que utilizamos para adicionar um Banner a uma notícia vinculada, ou seja esse Banner levar à notícia vinculada quando clicarmos nele.

Caso você não saiba como criar uma notícia, acesse o Tutorial Notícias e, além de aprender como criar uma nova, você vai entender como criar uma categoria de notícia para filtrá-la e vinculá-la a um banner. Você vai precisar saber disso, pois caso você ache necessário, poderá criar uma categoria denominada “BANNER” para melhor organização de seu site.

Vamos ensinar agora o passo a passo para você inserir seu BANNER desta forma.

Imagem 1
Imagem 2

Você não precisa adicionar texto em sua notícia, caso seja essa sua escolha, mas caso você queira vinculá-la não tem problema.

Inserindo Imagem Destacada

Em seguida, vamos colocar a imagem que desejamos que seja nosso BANNER em Imagem Destacada, logo abaixo de Tags, como mostra a imagem 3:

Lembre-se sempre de conferir as dimensões corretas do BANNER em Padronização Geral de Layouts  para que ele não fique desproporcional ou sem qualidade.

Imagem 3

Utilização do Elementor

Agora que já utilizamos o WordPress para filtrar nossa notícia e adicionar a Imagem do BANNER, iremos utilizar o Elementor. 

Nessa parte, utilizamos o Elementor para que nossa Imagem Destacada apareça em formato de BANNER, não apenas em forma de notícias em lista. 

Se atente agora para os atalhos. Para configurar seu Banner, você irá na página que deseja inseri-lo, podendo ser a Inicial ou não. Após, clique em Editar com o Elementor. 

Caso você não saiba como editar com o Elementor, siga esse Tutorial: O que é o Elementor e como usá-lo.

Após entrar no Elementor, você irá inserir um Widget, escolher quantas estruturas deseja e arratar o bloco de Notícias e Páginas, como mostram as Imagens 4 e 5:

Imagem 4
Imagem 5

Agora que você já inseriu e visualizou as configurações do Widget de Notícias e Páginas, você vai configurar a categoria de Notícias somente para aparecer “Categoria Banner” e  alterar a forma de exibição para Slider, como mostram as Imagens 6 e 7:

Imagem 6
Imagem 7

Seu banner deve ficar como na imagem 8:

Imagem 8

Nesse mesmo bloco, você tem a opção de linkar a imagem com o item (notícia), ocultar título e entre outras configurações que você pode fazer.

Quando você já fez toda essa configuração do Elementor, para adicionar um novo banner, apenas vá em notícia, crie uma nova, vincule a categoria Banner, acrescente a Imagem Destacada e pronto. Você não precisa fazer esse processo no Elementor se já configurou sua notícia ou página uma primeira vez.

Toda esse processo que fizemos pelas notícias também pode ser feito igualmente pelas páginas, ou seja, ao invés de criar notícias com Banners, pode-se criar Páginas. Porém, sempre recomendamos que sejam criadas notícias, pois elas tem um intuito mais temporário que páginas.

Inserindo Banner pelo Widget "Site Origin Slider"

Inserção do Bloco "Site Origin Slider"

A segunda forma que temos de adicionar Banners é pelo Widget “Site Origin Slider”. Ele nos permite adicionar link às imagens, diferente da primeira forma, que só conseguimos linkar diretamente com notícias vinculadas.

Esse método é feito diretamente pelo Elementor, sem precisar de um primeiro contato com o WordPress. A primeira coisa que você deve fazer é selecionar o Widget “Site Origin Slider” e arrastar para sua estrutura, conforme imagem 9:

Imagem 9

Configurando a Estrutura do "Site Origin Slider"

Depois que inserimos o nosso Widget do Site Origin Slider basta configurá-lo. Localize no canto esquerdo “Frames do Slider” e vá em adicionar > moldura e configurar, como mostram as Imagens 10 e 11:

Imagem 10
Imagem 11

Após esse processo, adicione uma mídia, e se quiser, também adicione um URL DE DESTINO de sua preferência. A imagem 12 ilustra melhor:

Imagem 12

Após esse processo, você está apto para adicionar Banners sozinho em seu Site!