{"id":4231,"date":"2018-02-08T13:03:50","date_gmt":"2018-02-08T16:03:50","guid":{"rendered":"https:\/\/www.brasilwebhost.com.br\/blog\/?p=4231"},"modified":"2020-10-23T09:13:51","modified_gmt":"2020-10-23T12:13:51","slug":"a-maneira-mais-simples-de-criar-um-modal-em-seu-blog-wp","status":"publish","type":"post","link":"https:\/\/www.brasilwebhost.com.br\/blog\/a-maneira-mais-simples-de-criar-um-modal-em-seu-blog-wp\/","title":{"rendered":"A maneira mais simples de criar um modal em seu blog WP"},"content":{"rendered":"<p>A internet mudou um pouco a forma de abordar seu cliente ou assinante do seu site, muitos geradores de conte\u00fado utilizam do uso de <strong>Modal<\/strong> que s\u00e3o nada mais nada menos que aquelas janelinhas que aparecem por cima do site quando voc\u00ea acessa, geralmente \u00e9 colocado nele algum aviso ou um campo de e-mail para o usu\u00e1rio estar preenchendo e recebendo noticias de conte\u00fados publicados pelo administrador. Hoje vamos ensinar uma forma muito <strong>SIMPLES E F\u00c1CIL<\/strong> de criar esse modal e o melhor sem ter nenhum conhecimento de programa\u00e7\u00e3o.<!--more--><\/p>\n<p>Vamos l\u00e1, m\u00e3os na massa \ud83d\ude42<\/p>\n<p>1- Primeiro passo \u00e9 acessar o instalador de Plugins de seu WordPress como mostrado abaixo<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-4233\" src=\"https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2018\/02\/modal0.png\" alt=\"\" width=\"213\" height=\"214\" srcset=\"https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2018\/02\/modal0.png 213w, https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2018\/02\/modal0-150x150.png 150w\" sizes=\"(max-width: 213px) 100vw, 213px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>2- Agora vamos procurar no campo de busca o plugin: <strong>Ultimate Modal<\/strong> ao localizar clique em <strong>Instalar Agora<\/strong><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-4232\" src=\"https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2018\/02\/modal1.png\" alt=\"\" width=\"575\" height=\"291\" srcset=\"https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2018\/02\/modal1.png 575w, https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2018\/02\/modal1-300x152.png 300w\" sizes=\"(max-width: 575px) 100vw, 575px\" \/><\/p>\n<p>3- Efetuamos a instala\u00e7\u00e3o do plugin, mas \u00e9 <strong>necess\u00e1rio ativar<\/strong> ele antes de usarmos, para isso basta clicar no bot\u00e3o: <strong>Ativar<\/strong><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-4234\" src=\"https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2018\/02\/modal2.png\" alt=\"\" width=\"576\" height=\"255\" srcset=\"https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2018\/02\/modal2.png 576w, https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2018\/02\/modal2-300x133.png 300w\" sizes=\"(max-width: 576px) 100vw, 576px\" \/><\/p>\n<p>4- Pronto, est\u00e1 feito, vamos agora acessar o plugin e configurar ele conforme suas necessidades, para isso clique na lateral esquerda do WP em &gt;&gt; <strong>Configura\u00e7\u00f5es<\/strong> &gt;&gt; <strong>Ultimate Modal<\/strong><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-4235\" src=\"https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2018\/02\/modal3.png\" alt=\"\" width=\"332\" height=\"340\" srcset=\"https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2018\/02\/modal3.png 332w, https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2018\/02\/modal3-293x300.png 293w\" sizes=\"(max-width: 332px) 100vw, 332px\" \/><\/p>\n<p>5- Basta colocar os par\u00e2metros que desejar e est\u00e1 pronto seu <strong>Modal<\/strong>. O plugin tem op\u00e7\u00e3o de mostrar em todas as p\u00e1ginas ou apenas na p\u00e1gina inicial do seu site.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-4238\" src=\"https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2018\/02\/modal4.png\" alt=\"\" width=\"843\" height=\"237\" srcset=\"https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2018\/02\/modal4.png 843w, https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2018\/02\/modal4-300x84.png 300w, https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2018\/02\/modal4-768x216.png 768w\" sizes=\"(max-width: 843px) 100vw, 843px\" \/><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-4237\" src=\"https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2018\/02\/modal5.png\" alt=\"\" width=\"851\" height=\"725\" srcset=\"https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2018\/02\/modal5.png 851w, https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2018\/02\/modal5-300x256.png 300w, https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2018\/02\/modal5-768x654.png 768w\" sizes=\"(max-width: 851px) 100vw, 851px\" \/><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-4236\" src=\"https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2018\/02\/modal6.png\" alt=\"\" width=\"802\" height=\"401\" srcset=\"https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2018\/02\/modal6.png 802w, https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2018\/02\/modal6-300x150.png 300w, https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2018\/02\/modal6-768x384.png 768w\" sizes=\"(max-width: 802px) 100vw, 802px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>Espero que tenha ajudado, at\u00e9 a pr\u00f3xima e se gostou dessa dica r\u00e1pida n\u00e3o deixe de compartilhar esse conte\u00fado em suas redes sociais.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A internet mudou um pouco a forma de abordar seu cliente ou assinante do seu site, muitos geradores de conte\u00fado utilizam do uso de Modal que s\u00e3o nada mais nada menos que aquelas janelinhas que aparecem por cima do site quando voc\u00ea acessa, geralmente \u00e9 colocado nele algum aviso ou&hellip;<\/p>\n","protected":false},"author":3,"featured_media":4236,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[10],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>A maneira mais simples de criar um modal em seu blog WP | Blog - Brasil Web Host<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.brasilwebhost.com.br\/blog\/a-maneira-mais-simples-de-criar-um-modal-em-seu-blog-wp\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A maneira mais simples de criar um modal em seu blog WP | Blog - Brasil Web Host\" \/>\n<meta property=\"og:description\" content=\"A internet mudou um pouco a forma de abordar seu cliente ou assinante do seu site, muitos geradores de conte\u00fado utilizam do uso de Modal que s\u00e3o nada mais nada menos que aquelas janelinhas que aparecem por cima do site quando voc\u00ea acessa, geralmente \u00e9 colocado nele algum aviso ou&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.brasilwebhost.com.br\/blog\/a-maneira-mais-simples-de-criar-um-modal-em-seu-blog-wp\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Brasil Web Host\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/brasilwebhost\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-02-08T16:03:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-23T12:13:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2018\/02\/modal6.png\" \/>\n\t<meta property=\"og:image:width\" content=\"802\" \/>\n\t<meta property=\"og:image:height\" content=\"401\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@brasilwebhost\" \/>\n<meta name=\"twitter:site\" content=\"@brasilwebhost\" \/>\n<meta name=\"twitter:label1\" value=\"Written by\">\n\t<meta name=\"twitter:data1\" value=\"Gabriel Benato\">\n\t<meta name=\"twitter:label2\" value=\"Est. reading time\">\n\t<meta name=\"twitter:data2\" value=\"1 minuto\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.brasilwebhost.com.br\/blog\/#organization\",\"name\":\"Brasil Web Host\",\"url\":\"https:\/\/www.brasilwebhost.com.br\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/brasilwebhost\/\",\"https:\/\/www.instagram.com\/brasilwebhost\/\",\"https:\/\/www.linkedin.com\/company\/35638258\/admin\/\",\"https:\/\/www.youtube.com\/user\/brasilwebhost\",\"https:\/\/br.pinterest.com\/empresabwh\/\",\"https:\/\/twitter.com\/brasilwebhost\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.brasilwebhost.com.br\/blog\/#logo\",\"inLanguage\":\"pt-BR\",\"url\":\"https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2019\/09\/logo.png\",\"width\":330,\"height\":54,\"caption\":\"Brasil Web Host\"},\"image\":{\"@id\":\"https:\/\/www.brasilwebhost.com.br\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.brasilwebhost.com.br\/blog\/#website\",\"url\":\"https:\/\/www.brasilwebhost.com.br\/blog\/\",\"name\":\"Blog - Brasil Web Host\",\"description\":\"Conhe\\u00e7a as vantagens de ser nosso cliente e usufruir do melhor atendimento.\",\"publisher\":{\"@id\":\"https:\/\/www.brasilwebhost.com.br\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.brasilwebhost.com.br\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.brasilwebhost.com.br\/blog\/a-maneira-mais-simples-de-criar-um-modal-em-seu-blog-wp\/#primaryimage\",\"inLanguage\":\"pt-BR\",\"url\":\"https:\/\/www.brasilwebhost.com.br\/blog\/wp-content\/uploads\/2018\/02\/modal6.png\",\"width\":802,\"height\":401},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.brasilwebhost.com.br\/blog\/a-maneira-mais-simples-de-criar-um-modal-em-seu-blog-wp\/#webpage\",\"url\":\"https:\/\/www.brasilwebhost.com.br\/blog\/a-maneira-mais-simples-de-criar-um-modal-em-seu-blog-wp\/\",\"name\":\"A maneira mais simples de criar um modal em seu blog WP | Blog - Brasil Web Host\",\"isPartOf\":{\"@id\":\"https:\/\/www.brasilwebhost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.brasilwebhost.com.br\/blog\/a-maneira-mais-simples-de-criar-um-modal-em-seu-blog-wp\/#primaryimage\"},\"datePublished\":\"2018-02-08T16:03:50+00:00\",\"dateModified\":\"2020-10-23T12:13:51+00:00\",\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.brasilwebhost.com.br\/blog\/a-maneira-mais-simples-de-criar-um-modal-em-seu-blog-wp\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.brasilwebhost.com.br\/blog\/a-maneira-mais-simples-de-criar-um-modal-em-seu-blog-wp\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.brasilwebhost.com.br\/blog\/a-maneira-mais-simples-de-criar-um-modal-em-seu-blog-wp\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.brasilwebhost.com.br\/blog\/#\/schema\/person\/f2a0b8c85be379997ea055e0a1877eec\"},\"headline\":\"A maneira mais simples de criar um modal em seu blog WP\",\"datePublished\":\"2018-02-08T16:03:50+00:00\",\"dateModified\":\"2020-10-23T12:13:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.brasilwebhost.com.br\/blog\/a-maneira-mais-simples-de-criar-um-modal-em-seu-blog-wp\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.brasilwebhost.com.br\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.brasilwebhost.com.br\/blog\/a-maneira-mais-simples-de-criar-um-modal-em-seu-blog-wp\/#primaryimage\"},\"articleSection\":\"Dicas\",\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.brasilwebhost.com.br\/blog\/a-maneira-mais-simples-de-criar-um-modal-em-seu-blog-wp\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.brasilwebhost.com.br\/blog\/#\/schema\/person\/f2a0b8c85be379997ea055e0a1877eec\",\"name\":\"Gabriel Benato\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.brasilwebhost.com.br\/blog\/#personlogo\",\"inLanguage\":\"pt-BR\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a49431593a7e9427c17943cd2bd0712b?s=96&d=mm&r=g\",\"caption\":\"Gabriel Benato\"},\"description\":\"Suporte t\\u00e9cnico Brasil Web Host\",\"sameAs\":[\"https:\/\/www.brasilwebhost.com.br\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.brasilwebhost.com.br\/blog\/wp-json\/wp\/v2\/posts\/4231"}],"collection":[{"href":"https:\/\/www.brasilwebhost.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.brasilwebhost.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.brasilwebhost.com.br\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.brasilwebhost.com.br\/blog\/wp-json\/wp\/v2\/comments?post=4231"}],"version-history":[{"count":3,"href":"https:\/\/www.brasilwebhost.com.br\/blog\/wp-json\/wp\/v2\/posts\/4231\/revisions"}],"predecessor-version":[{"id":5614,"href":"https:\/\/www.brasilwebhost.com.br\/blog\/wp-json\/wp\/v2\/posts\/4231\/revisions\/5614"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.brasilwebhost.com.br\/blog\/wp-json\/wp\/v2\/media\/4236"}],"wp:attachment":[{"href":"https:\/\/www.brasilwebhost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=4231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.brasilwebhost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=4231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.brasilwebhost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=4231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}