{"id":243231,"date":"2022-03-15T11:55:00","date_gmt":"2022-03-15T08:55:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=243231"},"modified":"2022-05-16T14:20:11","modified_gmt":"2022-05-16T11:20:11","slug":"como-adicionar-um-controle-deslizante-de-imagem-a-sua-pagina-inicial","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-adicionar-um-controle-deslizante-de-imagem-a-sua-pagina-inicial\/","title":{"rendered":"Como adicionar um controle deslizante de imagem \u00e0 sua p\u00e1gina inicial"},"content":{"rendered":"<p>Quer adicionar um controle deslizante \u00e0 sua p\u00e1gina inicial?<\/p>\n<p>Nesta postagem, voc\u00ea aprender\u00e1:<\/p>\n<ul>\n<li>Como criar controles deslizantes no WordPress<\/li>\n<li>Como adicionar um controle deslizante de imagem a qualquer p\u00e1gina<\/li>\n<li>Como incluir um controle deslizante apenas na sua p\u00e1gina inicial<\/li>\n<\/ul>\n<p>O controle deslizante funcionar\u00e1 em seu site independentemente do tema instalado.<\/p>\n<h2>Como adicionar um controle deslizante \u00e0 sua p\u00e1gina inicial<\/h2>\n<p>Vamos abordar como adicionar um controle deslizante \u00e0 sua p\u00e1gina inicial, passo a passo, come\u00e7ando pela adi\u00e7\u00e3o do plug-in de que voc\u00ea precisa.<\/p>\n<h3>Instalar e ativar o Meta Slider<\/h3>\n<p>Primeiro, instale e ative o excelente plugin <a href=\"https:\/\/wordpress.org\/plugins\/ml-slider\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Meta Slider<\/a> em seu site.<\/p>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/ml-slider\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-617023eb9feb0.png\" alt=\"Como adicionar um controle deslizante de imagem \u00e0 sua p\u00e1gina inicial\" \/><\/a><\/p>\n<p>Meta Slider \u00e9 o plugin de controle deslizante mais bem cotado no wordpress.org e \u00e9 o primeiro na <a href=\"https:\/\/themewp.inform.click\/pt-pt\/os-9-melhores-plug-ins-para-wordpress-slider-para-2021\/\" title=\"minha lista de controles deslizantes recomendados\">minha lista de controles deslizantes recomendados<\/a> (gratuitos e pagos).<\/p>\n<p><strong>Go Pro:<\/strong> a vers\u00e3o gratuita do Meta Slider \u00e9 fant\u00e1stica e rica em recursos, mas tamb\u00e9m h\u00e1 uma <a href=\"http:\/\/link.competethemes.com\/meta-slider-post\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">vers\u00e3o Pro<\/a> com controles deslizantes de v\u00eddeo, navega\u00e7\u00e3o em miniaturas e muito mais.<\/p>\n<h3>Crie um controle deslizante<\/h3>\n<p>Uma vez ativado, voc\u00ea encontrar\u00e1 um novo menu de configura\u00e7\u00f5es do Meta Slider em seu painel. O menu ficar\u00e1 inicialmente em branco, solicitando que voc\u00ea crie seu primeiro controle deslizante.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-617023ef0e96e.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-617023ef0e96e.png\" alt=\"Como adicionar um controle deslizante de imagem \u00e0 sua p\u00e1gina inicial\"><\/a><\/p>\n<p>Clicar no bot\u00e3o de adi\u00e7\u00e3o criar\u00e1 sua primeira apresenta\u00e7\u00e3o de slides. Depois de criar um controle deslizante, voc\u00ea est\u00e1 pronto para come\u00e7ar a adicionar imagens.<\/p>\n<h3>Adicione imagens ao seu controle deslizante<\/h3>\n<p>Clique no bot\u00e3o Adicionar slide para revelar a biblioteca de m\u00eddia. Voc\u00ea pode carregar uma nova imagem ou selecionar qualquer uma das imagens existentes.<\/p>\n<p>Adicione algumas imagens agora. Elas n\u00e3o precisam ser suas imagens finais. Basta adicionar alguns slides para que voc\u00ea possa acompanhar o restante do tutorial.<\/p>\n<h3>Escolha o seu controle deslizante<\/h3>\n<p>Meta Slider inclui quatro controles deslizantes diferentes. Os quatro controles deslizantes s\u00e3o:<\/p>\n<ul>\n<li>Flex Slider<\/li>\n<li>Slides responsivos<\/li>\n<li>N\u00edvel do controle deslizante<\/li>\n<li>Coin Slider<\/li>\n<\/ul>\n<p>O \u00fanico controle deslizante que eu n\u00e3o recomendaria \u00e9 o Coin Slider, pois ele n\u00e3o responde. Os outros tr\u00eas s\u00e3o \u00f3timos.<\/p>\n<p>Voc\u00ea pode selecionar o controle deslizante que deseja usar na barra lateral direita.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-617023f2a7b1a.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-617023f2a7b1a.png\" alt=\"Como adicionar um controle deslizante de imagem \u00e0 sua p\u00e1gina inicial\"><\/a><\/p>\n<h3>Personalize o controle deslizante<\/h3>\n<p>Depois de adicionar algumas imagens e escolher o controle deslizante, a pr\u00f3xima etapa \u00e9 personalizar a apar\u00eancia e a funcionalidade da apresenta\u00e7\u00e3o de slides.<\/p>\n<p>Meta Slider inclui op\u00e7\u00f5es de configura\u00e7\u00e3o b\u00e1sicas e tamb\u00e9m algumas configura\u00e7\u00f5es avan\u00e7adas. Deixarei que voc\u00ea decida como deseja que seu controle deslizante seja exibido, mas aqui est\u00e1 uma pr\u00e9via das op\u00e7\u00f5es dispon\u00edveis:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-617023f918c8a.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-617023f918c8a.png\" alt=\"Como adicionar um controle deslizante de imagem \u00e0 sua p\u00e1gina inicial\"><\/a><\/p>\n<p>Uma dica: usar o alongamento para 100% da largura geralmente \u00e9 uma boa ideia porque far\u00e1 com que o controle deslizante se adapte \u00e0 largura da tela.<\/p>\n<p>A vers\u00e3o gratuita do Meta Slider inclui um n\u00famero limitado de efeitos de transi\u00e7\u00e3o de slides, mas o <a href=\"http:\/\/link.competethemes.com\/meta-slider\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Meta Slider Pro<\/a> adiciona muitos novos efeitos interessantes.<\/p>\n<h3>Crie uma p\u00e1gina para sua p\u00e1gina inicial<\/h3>\n<p>No momento, seu site est\u00e1 exibindo uma p\u00e1gina ou suas \u00faltimas postagens.<\/p>\n<p>Se voc\u00ea est\u00e1 mostrando suas postagens mais recentes e n\u00e3o sabe como mudar para uma p\u00e1gina normal, <a href=\"https:\/\/themewp.inform.click\/pt-pt\/como-mudar-sua-pagina-inicial-no-wordpress-para-um-design-personalizado\/\" title=\"siga este tutorial para aprender\">siga este tutorial para aprender<\/a> primeiro.<\/p>\n<p>Depois de exibir uma p\u00e1gina em sua p\u00e1gina inicial, passe para a pr\u00f3xima etapa.<\/p>\n<h3>Adicione o controle deslizante \u00e0 sua p\u00e1gina inicial<\/h3>\n<p>A etapa final \u00e9 adicionar o controle deslizante que voc\u00ea criou \u00e0 p\u00e1gina que est\u00e1 exibindo em sua p\u00e1gina inicial. Felizmente para n\u00f3s, o Meta Slider torna isso muito f\u00e1cil.<\/p>\n<p>Navegue at\u00e9 o editor de p\u00e1gina e voc\u00ea notar\u00e1 que h\u00e1 um novo bot\u00e3o Adicionar controle deslizante acima do editor.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-617023fce2fa8.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-617023fce2fa8.png\" alt=\"Como adicionar um controle deslizante de imagem \u00e0 sua p\u00e1gina inicial\"><\/a><\/p>\n<p>Coloque o cursor onde deseja que o controle deslizante seja incorporado e pressione o bot\u00e3o Adicionar controle deslizante para abrir o menu de sele\u00e7\u00e3o do controle deslizante.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-61702400027af.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-61702400027af.png\" alt=\"Como adicionar um controle deslizante de imagem \u00e0 sua p\u00e1gina inicial\"><\/a><\/p>\n<p>Selecione seu controle deslizante rec\u00e9m-criado.<\/p>\n<p>Depois de pressionar o bot\u00e3o Inserir apresenta\u00e7\u00e3o de slides, voc\u00ea ver\u00e1 um c\u00f3digo de acesso adicionado ao editor, como este:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-61702403184fa.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-61702403184fa.png\" alt=\"Como adicionar um controle deslizante de imagem \u00e0 sua p\u00e1gina inicial\"><\/a><\/p>\n<p>O shortcode n\u00e3o parece muito no editor, mas uma vez visualizado no site, ele exibe o controle deslizante que voc\u00ea criou com o Meta Slider.<\/p>\n<p>Se voc\u00ea n\u00e3o est\u00e1 familiarizado com c\u00f3digos de acesso, pode revisar nosso <a href=\"https:\/\/themewp.inform.click\/pt-pt\/como-adicionar-conteudo-dinamico-com-codigos-de-acesso\/\" title=\"tutorial de c\u00f3digos de acesso aqui\">tutorial de c\u00f3digos de acesso aqui<\/a>.<\/p>\n<p>Visualize a p\u00e1gina agora, e voc\u00ea ver\u00e1 seu controle deslizante embutido em sua p\u00e1gina inicial.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-617024064b0a1.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-617024064b0a1.png\" alt=\"Como adicionar um controle deslizante de imagem \u00e0 sua p\u00e1gina inicial\"><\/a><\/p>\n<p>Slider incorporado com o tema <a href=\"https:\/\/www.competethemes.com\/founder\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Founder<\/a><\/p>\n<p>Como o Meta Slider permite que voc\u00ea insira controles deslizantes com um c\u00f3digo de acesso, voc\u00ea pode adicionar facilmente qualquer controle deslizante que criar a qualquer p\u00e1gina. Nesse caso, adicionamos um controle deslizante apenas \u00e0 p\u00e1gina inicial.<\/p>\n<p>Meta Slider tamb\u00e9m inclui um widget para que voc\u00ea possa colocar os controles deslizantes nas barras laterais e em outras \u00e1reas de widgets.<\/p>\n<h2>Mostre a apresenta\u00e7\u00e3o de slides da sua p\u00e1gina inicial<\/h2>\n<p>Como foi? Voc\u00ea est\u00e1 pronto para mostrar seu novo controle deslizante?<\/p>\n<p>Embora existam muitos plug-ins de controle deslizante dispon\u00edveis, acredito que o Meta Slider seja o melhor.<\/p>\n<p>Se voc\u00ea nunca usou c\u00f3digos de acesso antes, espero que este guia tenha aberto seus olhos para as possibilidades dispon\u00edveis. Os c\u00f3digos de acesso do Meta Slider permitem que voc\u00ea insira controles deslizantes em qualquer lugar do seu site.<\/p>\n<p>Se voc\u00ea tiver uma pergunta sobre como adicionar controles deslizantes de imagem ou usar plug-ins de apresenta\u00e7\u00e3o de slides com o WordPress, poste um coment\u00e1rio abaixo.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/www.competethemes.com\" class=\"external external_icon\">www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aprenda a criar um controle deslizante e adicion\u00e1-lo \u00e0 sua p\u00e1gina inicial. Voc\u00ea descobrir\u00e1 um plugin gratuito que possui quatro tipos de controles deslizantes e dezenas de personaliza\u00e7\u00f5es.<\/p>\n","protected":false},"author":1,"featured_media":186584,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[553],"tags":[848],"class_list":["post-243231","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-personalizar-wordpress-2","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/243231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/comments?post=243231"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/243231\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/186584"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=243231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=243231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=243231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}