{"id":893,"date":"2021-05-03T13:44:03","date_gmt":"2021-05-03T16:44:03","guid":{"rendered":"https:\/\/www.ufsm.br\/orgaos-suplementares\/cpd\/sitios\/?page_id=893"},"modified":"2025-07-22T15:57:11","modified_gmt":"2025-07-22T18:57:11","slug":"inserindo-banner-no-seu-site","status":"publish","type":"page","link":"https:\/\/www.ufsm.br\/orgaos-suplementares\/cpd\/sitios\/inserindo-banner-no-seu-site","title":{"rendered":"Inserindo Banner no seu Site"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Surgem muitas d\u00favidas de como inserir um Banner da forma correta no site e estamos aqui para te mostrar duas maneiras diferentes de fazer isso.\u00a0<\/p>

Uma das formas \u00e9 pelas Not\u00edcias Vinculadas<\/strong> e a outra pelo Widget “UFSM – Slider de Imagens”<\/strong> no Elementor. Usamos o recurso de Widget de Not\u00edcias Vinculadas quando nossa not\u00edcia tem texto e voc\u00ea quer adicionar um Banner linkado a ela. Caso voc\u00ea queira deixar o Banner sem vincular com uma not\u00edcia, linkando a um site externo ou at\u00e9 mesmo o deixando somente como imagem, utilize o Widget “UFSM – Slider de Imagens”.<\/strong><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Inserindo Banner com Widget de Not\u00edcias<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Cria\u00e7\u00e3o da categoria Banner<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Aqui vamos iniciar pelas Not\u00edcias Vinculadas.\u00a0<\/strong>O Widget de not\u00edcias \u00e9 um meio que utilizamos para adicionar um Banner a uma not\u00edcia vinculada, ou seja esse Banner levar \u00e0 not\u00edcia vinculada quando clicarmos nele.<\/p>

Caso voc\u00ea n\u00e3o saiba como criar uma not\u00edcia, acesse o Tutorial\u00a0Not\u00edcias <\/a>e, al\u00e9m de aprender como criar uma nova, voc\u00ea vai entender como criar uma categoria de not\u00edcia para filtr\u00e1-la e vincul\u00e1-la a um banner. Voc\u00ea vai precisar saber disso, pois caso voc\u00ea ache necess\u00e1rio, poder\u00e1 criar uma categoria denominada “BANNER” para melhor organiza\u00e7\u00e3o de seu site.<\/p>

Vamos ensinar agora o passo a passo para voc\u00ea inserir seu BANNER desta forma.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t
Imagem 1<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t
Imagem 2<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Voc\u00ea n\u00e3o precisa adicionar texto em sua not\u00edcia, caso seja essa sua escolha, mas caso voc\u00ea queira vincul\u00e1-la n\u00e3o tem problema.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Inserindo Imagem Destacada<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Em seguida, vamos colocar a imagem que desejamos que seja nosso BANNER em Imagem Destacada, logo abaixo de Tags, como mostra a imagem 3:<\/strong><\/p>

Lembre-se sempre de conferir as dimens\u00f5es corretas do BANNER em Padroniza\u00e7\u00e3o Geral de Layouts <\/a>\u00a0para que ele n\u00e3o fique desproporcional ou sem qualidade.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t
Imagem 3<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Utiliza\u00e7\u00e3o do Elementor<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Agora que j\u00e1 utilizamos o WordPress para filtrar nossa not\u00edcia e adicionar a Imagem do BANNER, iremos utilizar o Elementor.\u00a0<\/strong><\/p>

Nessa parte, utilizamos o Elementor para que nossa Imagem Destacada apare\u00e7a em formato de BANNER, n\u00e3o apenas em forma de not\u00edcias em lista.\u00a0<\/p>

Se atente agora para os atalhos. Para configurar seu Banner, voc\u00ea ir\u00e1 na p\u00e1gina que deseja inseri-lo, podendo ser a Inicial ou n\u00e3o. Ap\u00f3s, clique em Editar com o Elementor.\u00a0<\/p>

Caso voc\u00ea n\u00e3o saiba como editar com o Elementor, siga esse Tutorial:\u00a0O que \u00e9 o Elementor e como us\u00e1-lo<\/a>.<\/p>

Ap\u00f3s entrar no Elementor, voc\u00ea ir\u00e1 inserir um Widget, escolher quantas estruturas deseja e arratar o bloco de Not\u00edcias e P\u00e1ginas, como mostram as Imagens 4 e 5:<\/strong><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t
Imagem 4<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t
Imagem 5<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Agora que voc\u00ea j\u00e1 inseriu e visualizou as configura\u00e7\u00f5es do Widget de Not\u00edcias e P\u00e1ginas, voc\u00ea vai configurar a categoria de Not\u00edcias somente para aparecer “Categoria Banner” e\u00a0 alterar a forma de exibi\u00e7\u00e3o para Slider, como mostram as Imagens 6 e 7:<\/strong><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t
Imagem 6<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t
Imagem 7<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Seu banner deve ficar c<\/b>omo na imagem 8:<\/strong><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t
Imagem 8<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Nesse mesmo bloco, voc\u00ea tem a op\u00e7\u00e3o de linkar a imagem com o item (not\u00edcia), ocultar t\u00edtulo e entre outras configura\u00e7\u00f5es que voc\u00ea pode fazer.<\/p>

Quando voc\u00ea j\u00e1 fez toda essa configura\u00e7\u00e3o do Elementor, para adicionar um novo banner, apenas v\u00e1 em not\u00edcia, crie uma nova, vincule a categoria Banner, acrescente a Imagem Destacada e pronto. Voc\u00ea n\u00e3o precisa fazer esse processo no Elementor se j\u00e1 configurou sua not\u00edcia ou p\u00e1gina uma primeira vez.<\/strong><\/p>

Toda esse processo que fizemos pelas not\u00edcias tamb\u00e9m pode ser feito igualmente pelas p\u00e1ginas, ou seja, ao inv\u00e9s de criar not\u00edcias com Banners, pode-se criar P\u00e1ginas. Por\u00e9m, sempre recomendamos que sejam criadas not\u00edcias, pois elas tem um intuito mais tempor\u00e1rio que p\u00e1ginas.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Inserindo Banner com Widget UFSM - Slider de Imagens<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

\u00a0<\/h2>

Veja como \u00e9 f\u00e1cil inserir um slider de imagens usando o widget UFSM – Slider de Imagens<\/strong> no Elementor:<\/p>

  1. \u00a0 \u00a0 Abra a p\u00e1gina desejada no Elementor.<\/strong>

    \u00a0 \u00a0 Clique em Editar com Elementor<\/em> na p\u00e1gina onde deseja adicionar o slider.\u00a0<\/p><\/li>

  2. \u00a0 \u00a0 Procure pelo widget “UFSM – Slider de Imagens”.<\/strong>

    \u00a0 \u00a0 No painel lateral do Elementor, digite slider<\/em> ou UFSM<\/em> na busca de widgets.\u00a0<\/p><\/li>

  3. \u00a0 \u00a0 Arraste o widget para o local desejado.<\/strong>

    \u00a0 \u00a0 Arraste o widget UFSM – Slider de Imagens<\/strong> para a \u00e1rea da p\u00e1gina onde quer exibir o slider.\u00a0<\/p><\/li>

  4. \u00a0 \u00a0 Adicione as imagens do slider.<\/strong>
    • Clique em + Adicionar Imagem<\/strong> para inserir uma nova imagem.<\/li>
    • Voc\u00ea pode selecionar uma imagem da biblioteca<\/strong> do WordPress ou colar a URL<\/strong> da imagem.<\/li>
    • Preencha, se desejar, o link<\/strong> (para onde o usu\u00e1rio ser\u00e1 levado ao clicar), o t\u00edtulo<\/strong> e o texto alternativo<\/strong> (acessibilidade).<\/li>
    • Use os bot\u00f5es \u2191<\/strong> e \u2193<\/strong> para mudar a ordem das imagens.<\/li>
    • Para remover uma imagem, clique no X<\/strong>.<\/li><\/ul><\/li><\/ol>
      \"\"<\/div>
      1. \u00a0 \u00a0 Configure o slider.<\/strong>
        • Defina o tempo de exibi\u00e7\u00e3o<\/strong> de cada imagem (em segundos).<\/li>
        • Escolha se deseja exibir os t\u00edtulos<\/strong> das imagens.<\/li>
        • Defina a altura m\u00e1xima<\/strong> das imagens, se desejar.<\/li><\/ul><\/li>
        • \u00a0 \u00a0 Salve e visualize.<\/strong>

          \u00a0 \u00a0 Clique em Atualizar<\/strong> ou Publicar<\/strong> para salvar a p\u00e1gina. Pronto! O slider aparecer\u00e1 no local escolhido.\u00a0<\/p><\/li><\/ol>

          Dica:<\/strong> Para melhores resultados, use imagens no tamanho recomendado de 1162x280px<\/strong>.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

          \n\t\t\t\t\t\t
          \n\t\t\t\t\t
          \n\t\t\t
          \n\t\t\t\t\t\t
          \n\t\t\t\t
          \n\t\t\t\t\t\t\t

          Ap\u00f3s esse processo, voc\u00ea est\u00e1 apto para adicionar Banners sozinho em seu Site!<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

          Surgem muitas d\u00favidas de como inserir um Banner da forma correta no site e estamos aqui para te mostrar duas maneiras diferentes de fazer isso.\u00a0 Uma das formas \u00e9 pelas Not\u00edcias Vinculadas e a outra pelo Widget “UFSM – Slider de Imagens” no Elementor. Usamos o recurso de Widget de Not\u00edcias Vinculadas quando nossa not\u00edcia […]<\/p>\n","protected":false},"author":867,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-893","page","type-page","status-publish","hentry","category-tutoriais"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.ufsm.br\/orgaos-suplementares\/cpd\/sitios\/wp-json\/wp\/v2\/pages\/893","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ufsm.br\/orgaos-suplementares\/cpd\/sitios\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ufsm.br\/orgaos-suplementares\/cpd\/sitios\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/orgaos-suplementares\/cpd\/sitios\/wp-json\/wp\/v2\/users\/867"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/orgaos-suplementares\/cpd\/sitios\/wp-json\/wp\/v2\/comments?post=893"}],"version-history":[{"count":0,"href":"https:\/\/www.ufsm.br\/orgaos-suplementares\/cpd\/sitios\/wp-json\/wp\/v2\/pages\/893\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.ufsm.br\/orgaos-suplementares\/cpd\/sitios\/wp-json\/wp\/v2\/media?parent=893"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ufsm.br\/orgaos-suplementares\/cpd\/sitios\/wp-json\/wp\/v2\/categories?post=893"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ufsm.br\/orgaos-suplementares\/cpd\/sitios\/wp-json\/wp\/v2\/tags?post=893"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}