{"id":54360,"date":"2019-02-22T07:00:00","date_gmt":"2019-02-22T15:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=54360"},"modified":"2025-05-26T13:12:53","modified_gmt":"2025-05-26T20:12:53","slug":"o-que-e-um-construtor-de-sites-click-to-edit","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/o-que-e-um-construtor-de-sites-click-to-edit\/","title":{"rendered":"O que \u00e9 um Construtor de Sites de Clique para Editar?"},"content":{"rendered":"\n

\u00c0 procura do construtor de sites perfeito? Agora oferecemos <\/i>Construtor de Sites WP<\/a><\/i>, um conjunto de ferramentas e plugins premium que tornam ainda mais f\u00e1cil (e r\u00e1pido) colocar seu site online!<\/i><\/p>\n\n\n\n

Construir um site costumava ser um desafio demorado. Era necess\u00e1rio ter experi\u00eancia e conhecimento de programa\u00e7\u00e3o em v\u00e1rias linguagens, e raramente se tinha uma vis\u00e3o geral de como o resultado final poderia parecer. Embora alguns ainda usem essa abordagem manual para constru\u00e7\u00e3o de sites, definitivamente n\u00e3o \u00e9 a \u00fanica op\u00e7\u00e3o.<\/p>\n\n\n\n

Na verdade, hoje praticamente qualquer pessoa pode projetar um site em minutos sem olhar para uma \u00fanica linha de c\u00f3digo. Isso se deve ao surgimento dos \u2018construtores de p\u00e1ginas\u2019, que permitem que voc\u00ea use uma interface intuitiva para editar o layout e o conte\u00fado do seu site diretamente. Ent\u00e3o, o que \u00e9 um construtor de sites de clique para editar? Que bom que voc\u00ea perguntou.<\/p>\n\n\n\n

Neste artigo, vamos olhar para os construtores de p\u00e1ginas de clicar-para-editar e por que eles podem ser \u00fateis. Tamb\u00e9m vamos apresentar a voc\u00ea o Remixer<\/a><\/span> e demonstrar como voc\u00ea pode us\u00e1-lo para criar seu pr\u00f3prio site em minutos.<\/p>\n\n\n\n

<\/span><\/p>\n\n\n\n\n\n

\"Ad<\/div>\n\n\n\n\n
\n \n Temos a Ferramenta de Design de Sites Definitiva\n <\/h2>\n \n Quando voc\u00ea se associa \u00e0 DreamHost, voc\u00ea obt\u00e9m acesso ao Construtor de Sites WP e mais de 200 sites iniciais espec\u00edficos para a ind\u00fastria gratuitamente!\n <\/p>\n\n \n Lance Seu Site <\/a>\n\n <\/div>\n<\/div>\n\n\n

O Que S\u00e3o Construtores de Sites Click-to-Edit (E Como Funcionam)<\/strong><\/h2>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n

Um construtor de p\u00e1ginas \u00e9 uma ferramenta usada para construir sites<\/a><\/span> sem a necessidade de escrever c\u00f3digo manualmente. Eles geralmente assumem a forma de editores visuais do tipo What-You-See-Is-What-You-Get (WYSIWYG), onde voc\u00ea pode editar o layout e o conte\u00fado diretamente na p\u00e1gina.<\/p>\n\n\n\n

Embora existam diferentes estilos de construtor de p\u00e1ginas, as solu\u00e7\u00f5es de clique-para-editar<\/a><\/span> usam uma interface onde voc\u00ea simplesmente precisa clicar em um elemento na p\u00e1gina para edit\u00e1-lo diretamente. Por exemplo, clicar em um peda\u00e7o de texto permite que voc\u00ea altere seu conte\u00fado, estilo, formata\u00e7\u00e3o e mais.<\/p>\n\n\n\n

Essas ferramentas oferecem um n\u00edvel de controle sobre o design e o layout do seu site nunca antes visto. No entanto, isso significa que elas s\u00e3o a ferramenta certa para voc\u00ea? Vamos descobrir!<\/p>\n\n\n\n

Por que voc\u00ea pode considerar usar um Construtor de Clique para Editar<\/strong><\/h2>\n\n\n\n

N\u00e3o h\u00e1 escassez de benef\u00edcios em usar um construtor de edi\u00e7\u00e3o por clique<\/a><\/span>, mas o mais importante \u00e9 o qu\u00e3o acess\u00edvel eles tornam o design de um site. Como n\u00e3o exigem nenhum c\u00f3digo, um construtor de edi\u00e7\u00e3o por clique permite at\u00e9 mesmo que iniciantes criem designs impressionantes em quest\u00e3o de minutos. Isso os torna ideais para designers iniciantes com pouca ou nenhuma experi\u00eancia em trabalhar com HTML e CSS<\/a><\/span>.<\/p>\n\n\n\n

A interface intuitiva e em tempo real tamb\u00e9m permite que voc\u00ea veja imediatamente como o resultado final aparecer\u00e1 uma vez publicado. Qualquer altera\u00e7\u00e3o que voc\u00ea fa\u00e7a ser\u00e1 instantaneamente vis\u00edvel no editor, assim voc\u00ea sempre saber\u00e1 exatamente como suas edi\u00e7\u00f5es afetam o site. Isso significa que \u00e9 f\u00e1cil fazer pequenas altera\u00e7\u00f5es rapidamente, sem precisar de ajuda externa.<\/p>\n\n\n\n

Finalmente, um bom construtor de edi\u00e7\u00e3o por clique tamb\u00e9m ajudar\u00e1 voc\u00ea a criar facilmente sites responsivos<\/a><\/span>. O design que voc\u00ea cria pode facilmente ser adaptado para funcionar em m\u00faltiplos dispositivos diferentes, como smartphones e tablets. Isso \u00e9 importante, pois o Google provavelmente penalizar\u00e1 seu site<\/a><\/span> se ele n\u00e3o for compat\u00edvel com dispositivos m\u00f3veis.<\/p>\n\n\n\n

Uma Vis\u00e3o R\u00e1pida das Solu\u00e7\u00f5es de Clique para Editar<\/strong><\/h2>\n\n\n\n

J\u00e1 cobrimos os benef\u00edcios de usar um construtor de clique-para-editar, ent\u00e3o vamos aprofundar em algumas aplica\u00e7\u00f5es reais. Existem muitas ferramentas dispon\u00edveis espec\u00edficas para WordPress. Algumas das op\u00e7\u00f5es mais populares incluem Divi<\/a><\/span>, Elementor<\/a><\/span> e Beaver Builder<\/a><\/span>.<\/p>\n\n\n\n

Todos esses oferecem sua pr\u00f3pria perspectiva sobre o conceito de construtor de p\u00e1ginas. Por exemplo, Elementor \u00e9 uma solu\u00e7\u00e3o completa para praticamente todos os aspectos da personaliza\u00e7\u00e3o de sites<\/a><\/span>. Embora isso o torne muito abrangente, tamb\u00e9m pode ser um pouco intimidador para um usu\u00e1rio iniciante.<\/p>\n\n\n\n

Enquanto isso, o Divi Builder oferece \u00f3timo desempenho e a capacidade de realizar testes A\/B<\/a><\/span> mas n\u00e3o possui uma vers\u00e3o gratuita. Como ele depende de shortcodes internamente, voc\u00ea tamb\u00e9m ter\u00e1 que lidar com o elemento de ‘bloqueio’ se desejar trocar de solu\u00e7\u00e3o no futuro.<\/p>\n\n\n\n

Em contraste, o Beaver Builder \u00e9 uma das ferramentas mais f\u00e1ceis de usar, mas tamb\u00e9m \u00e9 a mais cara. Ele tamb\u00e9m n\u00e3o possui a capacidade de editar diretamente no texto. Mesmo assim, \u00e9 popular entre muitos usu\u00e1rios do WordPress.<\/p>\n\n\n\n

At\u00e9 mesmo o pr\u00f3prio WordPress est\u00e1 entrando na a\u00e7\u00e3o com o editor Gutenberg<\/a><\/span>. Isso transformar\u00e1 o editor de conte\u00fado atual com uma interface inspirada nos construtores de p\u00e1ginas.<\/p>\n\n\n\n

Uma alternativa a essas solu\u00e7\u00f5es \u00e9 o construtor Remixer de clique para editar, que permite aos usu\u00e1rios configurar um site rapidamente e depois export\u00e1-lo facilmente para o WordPress<\/a><\/span> quando estiverem prontos para adicionar funcionalidades adicionais. Vamos dar uma olhada um pouco mais aprofundada neste construtor antes de passarmos para a parte divertida de criar um site.<\/p>\n\n\n\n

Introdu\u00e7\u00e3o ao Remixer<\/strong><\/h2>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n

Remixer<\/a><\/span> \u00e9 um construtor de clique para editar da DreamHost que foi lan\u00e7ado em 2017<\/a><\/span>. Seu objetivo \u00e9 oferecer uma maneira para os usu\u00e1rios criarem um site f\u00e1cil de manter<\/a><\/span> sem muitos gastos.<\/p>\n\n\n\n

Utilizando o Remixer, mesmo um iniciante completo pode criar um site profissional em poucos minutos. Isso se deve em grande parte \u00e0 sua interface intuitiva, mas tamb\u00e9m \u00e0 galeria de modelos pr\u00e9-constru\u00eddos<\/a> e imagens de stock que s\u00e3o gratuitas para uso.<\/p>\n\n\n\n

Se voc\u00ea deseja criar um site simples que seja f\u00e1cil de manter, o Remixer \u00e9 a escolha ideal. N\u00e3o requer conhecimento de programa\u00e7\u00e3o ou plugins adicionais. A ferramenta at\u00e9 possui um assistente de cria\u00e7\u00e3o de sites<\/a><\/span> para facilitar as coisas. Al\u00e9m disso, o Remixer tamb\u00e9m est\u00e1 inclu\u00eddo no plano de hospedagem compartilhada da DreamHost<\/a><\/span>. Al\u00e9m disso, o Remixer pode crescer de acordo com suas necessidades. Se voc\u00ea descobrir que precisa adicionar funcionalidades de ecommerce ou blog mais adiante, pode exportar seu site Remixer para o WordPress<\/a><\/span>.<\/p>\n\n\n\n

Como Criar um Site com o Construtor de P\u00e1ginas Remixer (Em 3 Passos)<\/strong><\/h2>\n\n\n\n

Vamos agora ver como construir um site usando Remixer<\/a><\/span>, que requer uma conta DreamHost<\/a><\/span>.<\/p>\n\n\n\n

Passo 1. Escolha um Modelo<\/strong><\/h3>\n\n\n\n

Quando voc\u00ea estiver logado, poder\u00e1 acessar o Remixer diretamente do seu painel de controle da DreamHost<\/a><\/span>. Simplesmente selecione Remixer<\/span> > Painel<\/span> no menu \u00e0 esquerda, depois selecione o bot\u00e3o Comece a usar o Remixer <\/span>.<\/span><\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Isso abre uma nova aba com a interface do Remixer. Aqui, seu primeiro passo \u00e9 selecionar um tema para usar como base para o seu site. Voc\u00ea poder\u00e1 editar isso extensivamente, ent\u00e3o considere apenas um ponto de partida.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Voc\u00ea pode passar o mouse sobre um tema e clicar em Selecionar Tema<\/span> para come\u00e7ar.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Entretanto, se voc\u00ea deseja personalizar o tema mais a fundo inicialmente, pode clicar na op\u00e7\u00e3o Criar<\/span> no menu superior direito. Isso abrir\u00e1 um pequeno assistente composto por algumas etapas onde voc\u00ea pode configurar o tema. Na primeira etapa (Layout<\/span>), voc\u00ea ter\u00e1 uma escolha entre tr\u00eas modelos.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Quando voc\u00ea selecionar um, ter\u00e1 a oportunidade de escolher um esquema de cores para o seu tema. Selecione um para ver como a pr\u00e9-visualiza\u00e7\u00e3o \u00e0 esquerda se atualiza.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Clique Choose Images<\/span> para prosseguir para o pr\u00f3ximo passo. Aqui voc\u00ea pode escolher um conjunto de imagens de stock para usar.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Claro, voc\u00ea n\u00e3o precisa usar essas imagens e poder\u00e1 importar as suas pr\u00f3prias mais tarde. No entanto, pode ser \u00fatil selecionar imagens substitutas adequadas que correspondam \u00e0 sua vis\u00e3o durante o processo de design.<\/p>\n\n\n\n

Selecione as imagens que deseja e depois Clique<\/span> em Escolher Fontes. Agora voc\u00ea poder\u00e1 selecionar um par de fontes para usar no seu site.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Uma vez que voc\u00ea escolheu um par que goste, voc\u00ea pode clicar em Visualizar Site<\/span> para ver o tema que voc\u00ea criou.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Como dissemos, este n\u00e3o \u00e9 necessariamente o design final, mas uma base s\u00f3lida. No entanto, voc\u00ea acaba<\/span> de fazer algumas das escolhas mais importantes no que diz respeito ao design geral e ao layout antes de ajustar sua cria\u00e7\u00e3o. Para fazer isso, clique Salvar e editar este site<\/span> para abrir o construtor Remixer.<\/p>\n\n\n\n

Etapa 2. Edite o Design e o Conte\u00fado<\/strong><\/h3>\n\n\n\n

J\u00e1 que o construtor Remixer utiliza uma interface de clique para editar, voc\u00ea provavelmente j\u00e1 descobriu como funciona. Tudo o que voc\u00ea precisa fazer \u00e9 simplesmente clicar em qualquer elemento da p\u00e1gina para edit\u00e1-lo.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Para experimentar isso, clique no subt\u00edtulo abaixo do texto do t\u00edtulo. Voc\u00ea ver\u00e1 que pode alterar o texto e aplicar v\u00e1rios estilos e formata\u00e7\u00f5es.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Quando terminar, clique em outro lugar e voc\u00ea ver\u00e1 como suas altera\u00e7\u00f5es s\u00e3o instantaneamente vis\u00edveis.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Certos elementos da p\u00e1gina t\u00eam configura\u00e7\u00f5es \u00fanicas, que aparecer\u00e3o dinamicamente quando o elemento for selecionado. Por exemplo, se voc\u00ea selecionar a imagem de cabe\u00e7alho, notar\u00e1 que o menu \u00e0 esquerda ser\u00e1 atualizado para exibir configura\u00e7\u00f5es relacionadas \u00e0 imagem.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Daqui, voc\u00ea pode facilmente alterar a imagem, cort\u00e1-la, ajustar seu tamanho ou gir\u00e1-la. Voc\u00ea pode escolher uma imagem de estoque existente ou substitu\u00ed-la por uma de sua pr\u00f3pria. O Remixer at\u00e9 permite que voc\u00ea aplique filtros \u00e0s imagens.<\/p>\n\n\n\n

Se voc\u00ea deseja adicionar um novo elemento, deve procurar os bot\u00f5es azuis Novo<\/span> posicionados entre os elementos existentes da p\u00e1gina.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Clicando em um destes, abre-se uma nova se\u00e7\u00e3o onde voc\u00ea pode selecionar o elemento que deseja adicionar. Selecione o que deseja, e ele aparecer\u00e1 instantaneamente na p\u00e1gina, onde voc\u00ea pode edit\u00e1-lo como qualquer outro elemento.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Voc\u00ea agora tem liberdade para projetar seu site como desejar, editando e adicionando novos elementos conforme necess\u00e1rio. Depois de concluir o design, \u00e9 hora de public\u00e1-lo.<\/p>\n\n\n\n

Etapa 3. Publique seu site com um clique<\/strong><\/h3>\n\n\n\n

Quando voc\u00ea tiver completado o seu site, tudo o que resta \u00e9 public\u00e1-lo. Felizmente, esse processo \u00e9 muito simples. Voc\u00ea pode publicar o site usando um dom\u00ednio gerado aleatoriamente, mas \u00e9 mais prov\u00e1vel que voc\u00ea queira usar um dom\u00ednio personalizado.<\/p>\n\n\n\n

Para fazer isso, voc\u00ea precisar\u00e1 garantir que nenhum elemento da p\u00e1gina esteja selecionado, para que a op\u00e7\u00e3o Diret\u00f3rio do Site<\/span> esteja dispon\u00edvel no menu.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Aqui voc\u00ea pode selecionar o dom\u00ednio que deseja usar para o seu novo site. Voc\u00ea pode selecionar um existente na lista ou clicar no link para comprar um novo dom\u00ednio.<\/p>\n\n\n\n

Se voc\u00ea selecionar um dom\u00ednio j\u00e1 atribu\u00eddo a um site, voc\u00ea ver\u00e1 uma mensagem de aviso. Voc\u00ea pode optar por substituir o site existente pelo que acabou de criar. Os arquivos do site antigo ainda ser\u00e3o salvos offline no seu servidor de hospedagem compartilhada, caso voc\u00ea queira voltar ao seu site anterior.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Quando voc\u00ea selecionar um dom\u00ednio, clique na op\u00e7\u00e3o Publicar<\/span> no canto superior direito.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Isso compilar\u00e1 seu site e o publicar\u00e1. Quando voc\u00ea terminar, o bot\u00e3o que voc\u00ea acabou de clicar mudar\u00e1 para dizer Visualizar<\/span>. Clique nisso para ver o site em uma nova aba, e seu site agora est\u00e1 ao vivo e pronto para uso! Voc\u00ea pode retornar ao Remixer para editar o site como desejar e publicar suas altera\u00e7\u00f5es ou criar um novo site completamente.<\/p>\n\n\n\n

Nota: Se voc\u00ea est\u00e1 publicando o Remixer em seu dom\u00ednio pela primeira vez, pode haver um atraso inicial para a propaga\u00e7\u00e3o do DNS<\/a><\/span> antes que seu novo site Remixer esteja vis\u00edvel publicamente.<\/p>\n\n\n\n

\n\n\n

Get Content Delivered Straight to Your Inbox<\/h2>

Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p>

<\/div>