{"id":236931,"date":"2021-12-15T13:36:00","date_gmt":"2021-12-15T10:36:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=236931"},"modified":"2022-05-16T14:09:10","modified_gmt":"2022-05-16T11:09:10","slug":"como-usar-o-plug-in-do-construtor-de-paginas-elementor","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-usar-o-plug-in-do-construtor-de-paginas-elementor\/","title":{"rendered":"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor"},"content":{"rendered":"<p>E se voc\u00ea pudesse controlar cada pixel do design do seu site sem escrever c\u00f3digo?<\/p>\n<p>Bem, essa \u00e9 a miss\u00e3o em que Elementor embarcou, e quer saber?<\/p>\n<p>Eles fizeram isto!<\/p>\n<p><a href=\"http:\/\/link.competethemes.com\/elementor-guide-cta1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Elementor<\/a> \u00e9 uma ferramenta de cria\u00e7\u00e3o de p\u00e1gina extremamente robusta que permite criar p\u00e1ginas personalizadas e at\u00e9 mesmo sites inteiros. E voc\u00ea n\u00e3o precisa nem mesmo olhar para uma linha de c\u00f3digo, muito menos escrever sua pr\u00f3pria linha.<\/p>\n<p>Neste tutorial do Elementor, voc\u00ea aprender\u00e1 como usar o construtor de p\u00e1ginas para criar designs de p\u00e1gina totalmente customizados.<\/p>\n<h2>Como usar o Elementor<\/h2>\n<p>Se voc\u00ea preferir assistir a um v\u00eddeo, este tutorial passo a passo cobre tudo:<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/www.youtube.com\/embed\/Up58uOqFiL8\" frameborder=\"0\"><\/iframe><\/div>\n<p><a href=\"http:\/\/link.competethemes.com\/subscribe\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Inscreva-se nos Temas do Compete no Youtube<\/a><\/p>\n<p>A primeira etapa para come\u00e7ar \u00e9 instalar o plugin Elementor.<\/p>\n<h2>Instalar Elementor<\/h2>\n<p>Elementor \u00e9 um plugin gratuito e pode ser instalado como qualquer outro plugin que voc\u00ea adicionou ao seu site.<\/p>\n<p>Visite o menu Plug-ins&gt; Adicionar novo e use a barra de pesquisa no canto superior direito para pesquisar &#8220;elementor&quot;.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b182e87cb.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-218484-6171b182e87cb.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>Clique no bot\u00e3o Instalar agora e, em seguida, clique em Ativar ap\u00f3s a conclus\u00e3o da instala\u00e7\u00e3o.<\/p>\n<p>Com o Elementor instalado, voc\u00ea ver\u00e1 dois novos menus adicionados ao seu site.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b1854049c.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-218484-6171b1854049c.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>O menu principal do Elementor tem algumas configura\u00e7\u00f5es globais, mas voc\u00ea honestamente n\u00e3o vai us\u00e1-las muito. Al\u00e9m disso, s\u00e3o principalmente links para recursos de suporte e recursos do Elementor Pro.<\/p>\n<p>O menu Modelos \u00e9 muito \u00fatil, e vamos dar uma olhada nele mais tarde no tutorial.<\/p>\n<h2>Como editar uma p\u00e1gina com Elementor<\/h2>\n<p>A maior parte do trabalho que voc\u00ea faz com o Elementor ser\u00e1 feito no editor do Elementor.<\/p>\n<p>Para chegar ao editor, voc\u00ea pode visitar o menu Postagens ou P\u00e1ginas e clicar na p\u00e1gina que deseja editar. Dentro do editor, voc\u00ea ver\u00e1 um novo bot\u00e3o &#8220;Editar com Elementor&#8221; que o levar\u00e1 ao editor Elementor.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b18718b88.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-218484-6171b18718b88.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>Embora voc\u00ea possa usar o editor Elementor e o conte\u00fado normal da p\u00e1gina juntos, ele tende a ficar confuso e confuso. Por esse motivo, eu recomendo colocar todo o seu conte\u00fado no Elementor para qualquer p\u00e1gina em que voc\u00ea o usar.<\/p>\n<p>Depois de clicar no bot\u00e3o azul de edi\u00e7\u00e3o, voc\u00ea ser\u00e1 levado ao editor.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b188ebd4e.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-218484-6171b188ebd4e.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>Como voc\u00ea pode ver, ele \u00e9 configurado como o Live Customizer. H\u00e1 uma pr\u00e9via \u00e0 direita e \u00e0 esquerda voc\u00ea pode ver os widgets.<\/p>\n<p>Os widgets s\u00e3o os blocos de constru\u00e7\u00e3o b\u00e1sicos das p\u00e1ginas do Elementor, portanto, aprender como us\u00e1-los \u00e9 fundamental.<\/p>\n<p>Dentro do menu de widgets, voc\u00ea encontrar\u00e1 algumas se\u00e7\u00f5es diferentes.<\/p>\n<p>A se\u00e7\u00e3o B\u00e1sica na parte superior inclui elementos pr\u00e1ticos, como os widgets Editor de Texto, T\u00edtulo e \u00cdcone.<\/p>\n<p>Se voc\u00ea continuar rolando, ver\u00e1 que existem mais algumas se\u00e7\u00f5es:<\/p>\n<ul>\n<li><strong>Pro:<\/strong> widgets mais avan\u00e7ados, como post-grids (apenas Elementor Pro)<\/li>\n<li><strong>Geral:<\/strong> widgets mais usados \u200b\u200b(gr\u00e1tis)<\/li>\n<li><strong>Site:<\/strong> para construir sites inteiros com Elementor (apenas Elementor Pro)<\/li>\n<li><strong>WooCommerce:<\/strong> para criar uma loja WC com Elementor (apenas Elementor Pro)<\/li>\n<li><strong>WordPress:<\/strong> todos os seus widgets WP normais<\/li>\n<\/ul>\n<p>A se\u00e7\u00e3o WordPress \u00e9 legal porque permite que voc\u00ea use todos os 17 widgets padr\u00e3o inclu\u00eddos no WordPress, al\u00e9m de quaisquer widgets adicionados por plug-ins.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b18aaf338.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-218484-6171b18aaf338.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>Para adicionar um widget \u00e0 p\u00e1gina, basta arrast\u00e1-lo e solt\u00e1-lo na caixa de contorno na visualiza\u00e7\u00e3o.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b18c91945.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-218484-6171b18c91945.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>Depois de adicionar o widget, voc\u00ea encontrar\u00e1 todos os tipos de op\u00e7\u00f5es de personaliza\u00e7\u00e3o dispon\u00edveis na barra lateral.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b18e40dfc.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-218484-6171b18e40dfc.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>Cada widget tem uma se\u00e7\u00e3o de Conte\u00fado, Estilo e Avan\u00e7ado. Aqui est\u00e1 uma r\u00e1pida olhada em algumas das op\u00e7\u00f5es de estilo dispon\u00edveis para um t\u00edtulo:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b190866c3.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-218484-6171b190866c3.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>Embora voc\u00ea possa editar o conte\u00fado de qualquer widget na guia Conte\u00fado na barra lateral, tamb\u00e9m pode edit\u00e1-lo diretamente na visualiza\u00e7\u00e3o.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b1933969a.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-218484-6171b1933969a.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>Isso deve lhe dar uma boa id\u00e9ia dos fundamentos dos widgets. Como voc\u00ea viu, h\u00e1 uma grande variedade de widgets. Al\u00e9m disso, existem at\u00e9 <a href=\"https:\/\/mightythemes.com\/products\/mighty-addons\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">add-ons dispon\u00edveis<\/a> que incluem widgets que normalmente n\u00e3o est\u00e3o dispon\u00edveis no Elementor.<\/p>\n<p>Agora, voc\u00ea provavelmente est\u00e1 animado com o que pode fazer com o Elementor, mas acredite em mim, h\u00e1 muito mais.<\/p>\n<h2>Crie layouts de p\u00e1gina personalizados<\/h2>\n<p>At\u00e9 agora, voc\u00ea s\u00f3 viu como arrastar e soltar widgets na p\u00e1gina, o que resulta em um design simples de coluna \u00fanica.<\/p>\n<p>Voc\u00ea tamb\u00e9m pode clicar no bot\u00e3o de adi\u00e7\u00e3o na visualiza\u00e7\u00e3o para criar uma nova estrutura de p\u00e1gina.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b19546ddd.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-218484-6171b19546ddd.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>Depois de clicar nele, voc\u00ea ver\u00e1 12 estruturas diferentes para escolher.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b196dea8e.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-218484-6171b196dea8e.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>Depois de escolher um, a se\u00e7\u00e3o da p\u00e1gina ser\u00e1 criada e voc\u00ea pode arrastar e soltar widgets em qualquer uma das colunas. Isso permite que voc\u00ea agrupe widgets em se\u00e7\u00f5es l\u00f3gicas e pode at\u00e9 estilizar a se\u00e7\u00e3o tamb\u00e9m.<\/p>\n<p>Se voc\u00ea clicar na al\u00e7a na parte superior da se\u00e7\u00e3o da p\u00e1gina, ver\u00e1 as atualiza\u00e7\u00f5es da barra lateral com novas op\u00e7\u00f5es.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b198af26d.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-218484-6171b198af26d.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>Dentro da guia Estilo, voc\u00ea encontrar\u00e1 muitas op\u00e7\u00f5es excelentes, incluindo a op\u00e7\u00e3o de plano de fundo que \u00e9 especialmente pr\u00e1tica.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b19ad8420.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-218484-6171b19ad8420.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>Voc\u00ea pode usar uma cor, gradiente, imagem, v\u00eddeo ou apresenta\u00e7\u00e3o de slides como plano de fundo de qualquer se\u00e7\u00e3o da p\u00e1gina.<\/p>\n<p>E como se isso n\u00e3o bastasse, voc\u00ea pode at\u00e9 mesmo alterar os planos de fundo e o estilo de colunas individuais na se\u00e7\u00e3o da p\u00e1gina.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b19d226c9.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-218484-6171b19d226c9.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>A capacidade de estilizar widgets, colunas e se\u00e7\u00f5es separadamente fornece uma quantidade imensa de controle.<\/p>\n<p>S\u00f3 existe um problema.<\/p>\n<p>Voc\u00ea notar\u00e1 rapidamente (se ainda n\u00e3o o fez) que os planos de fundo nas se\u00e7\u00f5es da p\u00e1gina parecem estranhos porque est\u00e3o restritos ao centro da p\u00e1gina. Veja como consertar isso.<\/p>\n<h2>Consertando o espa\u00e7o do layout<\/h2>\n<p>Estou usando o <a href=\"https:\/\/www.competethemes.com\/chosen\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tema Escolhido<\/a> em meu exemplo e, como voc\u00ea pode ver, o plano de fundo da se\u00e7\u00e3o da p\u00e1gina que fiz para abruptamente no meio da p\u00e1gina.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b19ee6197.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-218484-6171b19ee6197.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>Isso ocorre porque o conte\u00fado do Elementor ocupa o mesmo espa\u00e7o no tema que o conte\u00fado da postagem. Esta \u00e9 a apar\u00eancia de uma p\u00e1gina normal no tema escolhido:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b1a12d79a.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-218484-6171b1a12d79a.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>Para postagens e p\u00e1ginas padr\u00e3o, parece \u00f3timo, mas com Elementor, pode tornar o design estranho. A solu\u00e7\u00e3o \u00e9 usar um modelo de p\u00e1gina.<\/p>\n<p>Para alterar o modelo da p\u00e1gina, voc\u00ea pode visitar o editor, abrir a se\u00e7\u00e3o Atributos da p\u00e1gina e, em seguida, usar este menu suspenso do modelo:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b1a2d26e1.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-218484-6171b1a2d26e1.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>Embora muitos temas, como Chosen, incluam seus pr\u00f3prios modelos de p\u00e1gina, o Elementor sempre adicionar\u00e1 dois modelos ao seu site:<\/p>\n<ul>\n<li>Elementor Canvas: largura total sem cabe\u00e7alho ou rodap\u00e9<\/li>\n<li>Elementor Full Width: largura total com cabe\u00e7alho e rodap\u00e9<\/li>\n<\/ul>\n<p>Voc\u00ea tamb\u00e9m pode alterar o modelo de p\u00e1gina no editor Elementor clicando no \u00edcone Configura\u00e7\u00f5es de p\u00e1gina na parte inferior e, em seguida, usando esta op\u00e7\u00e3o de Layout de p\u00e1gina:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b1a4d24c1.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-218484-6171b1a4d24c1.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>Com isso resolvido, vamos mergulhar de volta na cria\u00e7\u00e3o de p\u00e1ginas lindas com o Elementor.<\/p>\n<h2>Adicionar blocos pr\u00e9-fabricados<\/h2>\n<p>O que voc\u00ea viu at\u00e9 agora de Elementor \u00e9 impressionante. Voc\u00ea pode criar qualquer coisa que imaginar usando as ferramentas que viu.<\/p>\n<p>Dito isso, o desafio \u00e9 assustador. Voc\u00ea realmente deseja criar uma p\u00e1gina da web inteira do zero? Se voc\u00ea n\u00e3o tem experi\u00eancia com web design, \u00e9 prov\u00e1vel que crie uma p\u00e1gina que pare\u00e7a amadora.<\/p>\n<p>Criar belas p\u00e1ginas \u00e9 um trabalho \u00e1rduo!<\/p>\n<p>Felizmente, Elementor tamb\u00e9m se preparou para essa situa\u00e7\u00e3o.<\/p>\n<p>Anteriormente, voc\u00ea aprendeu que pode clicar no bot\u00e3o de adi\u00e7\u00e3o para adicionar uma estrutura de p\u00e1gina, mas se clicar no \u00edcone de pasta, poder\u00e1 adicionar um novo bloco.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b1a6bdade.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-218484-6171b1a6bdade.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>Voc\u00ea ver\u00e1 esta janela pop-up com centenas de se\u00e7\u00f5es de p\u00e1gina pr\u00e9-projetadas:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b1a8a342c.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-218484-6171b1a8a342c.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>Voc\u00ea pode simplesmente clicar em qualquer um desses blocos para inseri-los em sua p\u00e1gina. \u00c9 aqui que o Elementor realmente come\u00e7a a brilhar.<\/p>\n<p>Em vez de construir uma p\u00e1gina inteira do zero, voc\u00ea pode simplesmente inserir blocos pr\u00e9-fabricados at\u00e9 ter o design e o layout corretos. Isso \u00e9 ainda mais f\u00e1cil com as op\u00e7\u00f5es de classifica\u00e7\u00e3o.<\/p>\n<p>Usando o menu suspenso Categoria, voc\u00ea pode filtrar blocos com base em seu uso espec\u00edfico.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b1ab41ed9.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-218484-6171b1ab41ed9.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>Veja como um dos blocos fica depois de inserido na minha p\u00e1gina:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b1ae0665c.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-218484-6171b1ae0665c.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>Como voc\u00ea pode ver, ele \u00e9 composto de widgets para que voc\u00ea possa editar cada aspecto do bloco, desde a estrutura da coluna at\u00e9 o texto.<\/p>\n<p>Os blocos s\u00e3o incr\u00edveis e tornam a constru\u00e7\u00e3o de p\u00e1ginas da web muito mais f\u00e1cil, mas o pr\u00f3ximo recurso os deixa boquiabertos.<\/p>\n<h2>Adicionar p\u00e1ginas pr\u00e9-fabricadas<\/h2>\n<p>Dentro da janela pop-up, tamb\u00e9m h\u00e1 uma guia P\u00e1ginas. Clique nele e voc\u00ea encontrar\u00e1 esta tela:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b1b058f86.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-218484-6171b1b058f86.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>O que voc\u00ea est\u00e1 vendo s\u00e3o centenas de p\u00e1ginas pr\u00e9-projetadas constru\u00eddas com Elementor. Voc\u00ea pode clicar em qualquer um deles para inseri-los imediatamente em sua p\u00e1gina.<\/p>\n<p>Isso \u00e9 incr\u00edvel?<\/p>\n<p>Claro, voc\u00ea pode criar seus pr\u00f3prios designs do zero, mas, honestamente, por que faria isso? A abordagem mais r\u00e1pida e f\u00e1cil \u00e9 encontrar um modelo existente que voc\u00ea goste e, em seguida, simplesmente inseri-lo em sua p\u00e1gina.<\/p>\n<p>Esse processo torna a constru\u00e7\u00e3o de p\u00e1ginas da web com o Elementor incrivelmente r\u00e1pida, f\u00e1cil e agrad\u00e1vel.<\/p>\n<p>Embora a vers\u00e3o gratuita do Elementor inclua apenas alguns modelos, voc\u00ea pode desbloquear todos os mais de 200 com o <a href=\"http:\/\/link.competethemes.com\/elementor-tutorial\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Elementor Pro<\/a>.<\/p>\n<p>Themeforest lan\u00e7ou recentemente <a href=\"http:\/\/link.competethemes.com\/elementor-template-kits-tutorial\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Elementor Template Kits<\/a> em seu site, e voc\u00ea pode encontrar muito mais modelos e blocos pr\u00e9-concebidos l\u00e1.<\/p>\n<p>Eu tamb\u00e9m reuni uma cole\u00e7\u00e3o dos <a href=\"https:\/\/themewp.inform.click\/pt-pt\/os-melhores-kits-de-modelos-elementor-para-2021\/\" title=\"melhores Kits de modelo Elementor\">melhores Kits de modelo Elementor<\/a> que voc\u00ea pode gostar.<\/p>\n<h2>Reutilize seus blocos e p\u00e1ginas<\/h2>\n<p>Agora voc\u00ea viu a maior parte do que o Elementor pode fazer, mas h\u00e1 mais um recurso a ser abordado.<\/p>\n<p>Voc\u00ea pode criar p\u00e1ginas personalizadas usando o que aprendeu at\u00e9 agora. No entanto, se voc\u00ea deseja construir um site inteiro com Elementor ou us\u00e1-lo para sites de clientes, voc\u00ea precisar\u00e1 de um fluxo de trabalho melhor. \u00c9 a\u00ed que entra o menu Modelos.<\/p>\n<p>Na parte inferior do editor, voc\u00ea ver\u00e1 o bot\u00e3o verde Atualizar que pode ser usado para salvar suas altera\u00e7\u00f5es.<\/p>\n<p>Se voc\u00ea clicar na seta ao lado dela, ver\u00e1 a op\u00e7\u00e3o de salvar a p\u00e1gina como um novo modelo.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b1b2c966d.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-218484-6171b1b2c966d.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>Tudo o que voc\u00ea precisa fazer \u00e9 dar um nome e clicar em &#8220;Salvar&#8221;.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b1b5183ae.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-218484-6171b1b5183ae.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>Ent\u00e3o, de volta ao painel do WordPress, voc\u00ea encontrar\u00e1 seu modelo listado aqui no menu Modelos:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b1b6e859a.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-218484-6171b1b6e859a.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>Voc\u00ea pode criar e editar modelos aqui sem editar as p\u00e1ginas em que est\u00e3o inseridos. Voc\u00ea pode at\u00e9 mesmo visitar a guia Se\u00e7\u00f5es e criar suas pr\u00f3prias se\u00e7\u00f5es de p\u00e1gina.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218484-6171b1b8c1468.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-218484-6171b1b8c1468.png\" alt=\"Como Usar o Plug-in do Construtor de P\u00e1ginas Elementor\"><\/a><\/p>\n<p>Ent\u00e3o, quando estiver trabalhando em uma p\u00e1gina, voc\u00ea pode inserir qualquer uma de suas p\u00e1ginas ou blocos pr\u00e9-concebidos da guia Meus modelos na janela pop-up.<\/p>\n<p>Embora voc\u00ea n\u00e3o precise dessa funcionalidade se estiver criando apenas uma ou duas <a href=\"https:\/\/themewp.inform.click\/pt-pt\/os-8-melhores-temas-de-pagina-de-destino-wordpress-para-altas-conversoes\/\" title=\"p\u00e1ginas de destino\">p\u00e1ginas de destino<\/a>, ela se torna indispens\u00e1vel ao criar sites para clientes.<\/p>\n<h2>Comece a usar o Elementor<\/h2>\n<p>Ufa!<\/p>\n<p>Foi um longo tutorial e incluiu muitas informa\u00e7\u00f5es novas, mas espero que tenham gostado.<\/p>\n<p>Com o Elementor, voc\u00ea pode:<\/p>\n<ul>\n<li>Fa\u00e7a p\u00e1ginas de vendas<\/li>\n<li>Crie belos modelos para p\u00e1ginas regulares<\/li>\n<li>Crie sites totalmente personalizados<\/li>\n<\/ul>\n<p>Embora seja uma ferramenta complicada, os desenvolvedores a tornaram intuitiva e acho que alcan\u00e7aram esse objetivo de &#8220;web design sem c\u00f3digo&#8221; de forma mais eficaz do que qualquer outro produto feito antes.<\/p>\n<p>Se voc\u00ea quiser ir mais longe, d\u00ea uma olhada no Elementor Pro e alguns dos recursos adicionais que ele inclui:<\/p>\n<p><a href=\"http:\/\/link.competethemes.com\/elementor-tutorial\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Confira Elementor Pro \u2192<\/a><\/p>\n<p>Existem pop-ups, mais widgets e at\u00e9 mesmo um recurso de &#8220;criador de temas&#8221; que ainda n\u00e3o falei aqui.<\/p>\n<p>Se voc\u00ea aprendeu muito, compartilhe este artigo com outra pessoa antes de ir. Muito obrigado pela leitura!<\/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>Adicione widgets, estruturas de p\u00e1gina personalizadas, modelos pr\u00e9-concebidos e muito mais ao seu site com o incr\u00edvel plugin de cria\u00e7\u00e3o de p\u00e1ginas Elementor.<\/p>\n","protected":false},"author":1,"featured_media":218485,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[553],"tags":[848],"class_list":["post-236931","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\/236931","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=236931"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/236931\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/218485"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=236931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=236931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=236931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}