{"id":694,"date":"2020-07-17T11:03:53","date_gmt":"2020-07-17T14:03:53","guid":{"rendered":"https:\/\/www.ufsm.br\/orgaos-suplementares\/cpd\/sitios\/?p=694"},"modified":"2021-03-29T14:49:39","modified_gmt":"2021-03-29T17:49:39","slug":"utilizacao-basica-do-carrossel-de-imagens","status":"publish","type":"post","link":"https:\/\/www.ufsm.br\/orgaos-suplementares\/cpd\/sitios\/2020\/07\/17\/utilizacao-basica-do-carrossel-de-imagens","title":{"rendered":"Utiliza\u00e7\u00e3o b\u00e1sica do Carrossel de Imagens"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"694\" class=\"elementor elementor-694\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6be5937 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6be5937\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4e20a55\" data-id=\"4e20a55\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a9f5331 elementor-widget elementor-widget-text-editor\" data-id=\"a9f5331\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Um recurso que pode ser explorado e \u00e9 bastante \u00fatil \u00e9 o Carrossel de Imagens dispon\u00edvel no Editor Elementor.<\/p><p>Ele serve para que suas imagens, assim como o banner, fiquem em troca constante de uma imagem para outra. A grande diferen\u00e7a do banner para o Carrossel de Imagens \u00e9 a quantidade de fotos que voc\u00ea pode inserir no seu site: para Banner s\u00f3 podem ser disponibilizadas cinco imagens na rota\u00e7\u00e3o, no Carrossel quantas voc\u00ea quiser.<\/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<section class=\"elementor-section elementor-top-section elementor-element elementor-element-16c5abe elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"16c5abe\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-91afb25\" data-id=\"91afb25\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d7581ca elementor-widget elementor-widget-text-editor\" data-id=\"d7581ca\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Abaixo, mostraremos 3 passos de como trabalhar com o Carrossel de Imagens:<\/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<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e64bd14 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e64bd14\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9f3c615\" data-id=\"9f3c615\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7670881 elementor-widget elementor-widget-text-editor\" data-id=\"7670881\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h5>Passo 1: Inser\u00e7\u00e3o da Imagem no Carrosel<\/h5><p>Depois que voc\u00ea selecionou o Widget Carrossel de Imagens dispon\u00edvel no Editor Elementor, clique em &#8220;Adicionar&#8221; nas configura\u00e7\u00f5es dispon\u00edveis no lado esquerdo da sua tela.<\/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<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a78f61b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a78f61b\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5cab04d\" data-id=\"5cab04d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-88c1127 elementor-widget elementor-widget-image\" data-id=\"88c1127\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"694\" height=\"904\" src=\"https:\/\/www.ufsm.br\/app\/uploads\/sites\/415\/2020\/07\/passo_1.jpeg\" class=\"attachment-large size-large wp-image-696\" alt=\"\" srcset=\"https:\/\/www.ufsm.br\/app\/uploads\/sites\/415\/2020\/07\/passo_1.jpeg 694w, https:\/\/www.ufsm.br\/app\/uploads\/sites\/415\/2020\/07\/passo_1-230x300.jpeg 230w\" sizes=\"(max-width: 694px) 100vw, 694px\" \/>\t\t\t\t\t\t\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<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3a8d4bf elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3a8d4bf\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-aeb82d4\" data-id=\"aeb82d4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\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<section class=\"elementor-section elementor-top-section elementor-element elementor-element-02edd5a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"02edd5a\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-08587d4\" data-id=\"08587d4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-cc57619 elementor-widget elementor-widget-text-editor\" data-id=\"cc57619\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h5>Passo 2: Ordena\u00e7\u00e3o de Imagens<\/h5><p>Depois que voc\u00ea adicionou as imagens desejadas, elas podem n\u00e3o ficar no lugar imaginado por voc\u00ea, por\u00e9m a ordem das imagens pode ser alterada. Basta clicar no &#8220;L\u00e1pis&#8221; localizado no canto superior direito, assim como mostra na imagem acima.<\/p><p>Ap\u00f3s clicar, ir\u00e1 aparecer uma tela, onde voc\u00ea pode alterar a ordem das imagens, adicionar e excluir novas imagens e adicionar legendas \u00e0 elas, caso for necess\u00e1rio.<\/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<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2d46cf0 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2d46cf0\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-50fba14\" data-id=\"50fba14\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f74e005 elementor-widget elementor-widget-image\" data-id=\"f74e005\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1024\" height=\"716\" src=\"https:\/\/www.ufsm.br\/app\/uploads\/sites\/415\/2020\/07\/passo_2-1-1024x716.jpeg\" class=\"attachment-large size-large wp-image-697\" alt=\"\" srcset=\"https:\/\/www.ufsm.br\/app\/uploads\/sites\/415\/2020\/07\/passo_2-1-1024x716.jpeg 1024w, https:\/\/www.ufsm.br\/app\/uploads\/sites\/415\/2020\/07\/passo_2-1-300x210.jpeg 300w, https:\/\/www.ufsm.br\/app\/uploads\/sites\/415\/2020\/07\/passo_2-1-768x537.jpeg 768w, https:\/\/www.ufsm.br\/app\/uploads\/sites\/415\/2020\/07\/passo_2-1.jpeg 1146w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\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<section class=\"elementor-section elementor-top-section elementor-element elementor-element-15afbcc elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"15afbcc\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5fa3ea7\" data-id=\"5fa3ea7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-08e7a5e elementor-widget elementor-widget-text-editor\" data-id=\"08e7a5e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h5>Passo 3: Configura\u00e7\u00f5es de anima\u00e7\u00e3o<\/h5>\n<p>Nessa configura\u00e7\u00e3o voc\u00ea pode alterar uma s\u00e9rie de coisas na forma de como suas imagens ir\u00e3o aparecer, como por exemplo, a reprodu\u00e7\u00e3o das imagens automaticamente, pausar quando passar o mouse, pausar com intera\u00e7\u00e3o, velocidade da execu\u00e7\u00e3o, repeti\u00e7\u00e3o infinita, velocidade da anima\u00e7\u00e3o e dire\u00e7\u00e3o.<\/p>\n<p>As duas op\u00e7\u00f5es que valem \u00e0 pena ressaltar \u00e9 a Velocidade de Execu\u00e7\u00e3o e a de Anima\u00e7\u00e3o.<\/p>\n<p>Essas configura\u00e7\u00f5es est\u00e3o localizadas em &#8220;Mais Op\u00e7\u00f5es&#8221; logo abaixo das configura\u00e7\u00f5es pertencentes \u00e0s imagens selecionadas.<\/p>\n<p><strong>Velocidade de Execu\u00e7\u00e3o:<\/strong> velocidade em que ele passa os slides em milissegundos (ms).<\/p>\n<p><strong>Velocidade de Anima\u00e7\u00e3o<\/strong>: \u00e9 a velocidade que ele troca as imagens.<\/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<section class=\"elementor-section elementor-top-section elementor-element elementor-element-05c51ad elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"05c51ad\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-99f54cc\" data-id=\"99f54cc\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1db4f30 elementor-widget elementor-widget-image\" data-id=\"1db4f30\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"548\" height=\"575\" src=\"https:\/\/www.ufsm.br\/app\/uploads\/sites\/415\/2020\/07\/Screenshot_6-2.png\" class=\"attachment-large size-large wp-image-701\" alt=\"\" srcset=\"https:\/\/www.ufsm.br\/app\/uploads\/sites\/415\/2020\/07\/Screenshot_6-2.png 548w, https:\/\/www.ufsm.br\/app\/uploads\/sites\/415\/2020\/07\/Screenshot_6-2-286x300.png 286w\" sizes=\"(max-width: 548px) 100vw, 548px\" \/>\t\t\t\t\t\t\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<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Um recurso que pode ser explorado e \u00e9 bastante \u00fatil \u00e9 o Carrossel de Imagens dispon\u00edvel no Editor Elementor. Ele serve para que suas imagens, assim como o banner, fiquem em troca constante de uma imagem para outra. A grande diferen\u00e7a do banner para o Carrossel de Imagens \u00e9 a quantidade de fotos que voc\u00ea [&hellip;]<\/p>\n","protected":false},"author":867,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[42,43],"class_list":["post-694","post","type-post","status-publish","format-standard","hentry","category-tutoriais","tag-carrossel","tag-imagens"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.ufsm.br\/orgaos-suplementares\/cpd\/sitios\/wp-json\/wp\/v2\/posts\/694","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ufsm.br\/orgaos-suplementares\/cpd\/sitios\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ufsm.br\/orgaos-suplementares\/cpd\/sitios\/wp-json\/wp\/v2\/types\/post"}],"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=694"}],"version-history":[{"count":0,"href":"https:\/\/www.ufsm.br\/orgaos-suplementares\/cpd\/sitios\/wp-json\/wp\/v2\/posts\/694\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.ufsm.br\/orgaos-suplementares\/cpd\/sitios\/wp-json\/wp\/v2\/media?parent=694"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ufsm.br\/orgaos-suplementares\/cpd\/sitios\/wp-json\/wp\/v2\/categories?post=694"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ufsm.br\/orgaos-suplementares\/cpd\/sitios\/wp-json\/wp\/v2\/tags?post=694"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}