{"id":14736,"date":"2025-08-19T19:01:36","date_gmt":"2025-08-19T22:01:36","guid":{"rendered":"https:\/\/www.homehost.com.br\/blog\/?p=14736"},"modified":"2025-08-16T06:31:11","modified_gmt":"2025-08-16T09:31:11","slug":"framer","status":"publish","type":"post","link":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/","title":{"rendered":"Framer: site completo sem c\u00f3digo"},"content":{"rendered":"\n<p>Framer \u00e9 uma ferramenta de design para produ\u00e7\u00e3o de sites e outras aplica\u00e7\u00f5es, focada em responsividade e drop down (o famoso &#8220;arrastar e soltar&#8221;)<strong>.<\/strong> No Framer, voc\u00ea consegue criar layouts que se adaptam a diferentes tamanhos de tela com facilidade, usando as ferramentas j\u00e1 dispon\u00edveis na pr\u00f3pria plataforma. Bem semelhante ao <a href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/figma-conceitos-iniciais\/\">Figma<\/a>.<\/p>\n\n\n\n<p>Se\u00e7\u00f5es, p\u00e1ginas, templates: tudo \u00e9 pensado para funcionar bem no desktop, no tablet e no celular, assim, voc\u00ea n\u00e3o precisa fazer mil configura\u00e7\u00f5es para conseguir o que quer.<\/p>\n\n\n\n<p><strong>A proposta do Framer \u00e9 traduzir a liberdade do design visual na pot\u00eancia do c\u00f3digo real.<\/strong> Seja para montar uma landing page interativa, testar varia\u00e7\u00f5es de layout ou criar um site inteiro com movimento e performance, o Framer atende \u00e0s expectativas.<\/p>\n\n\n\n<p>Assim, vamos ao artigo.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_72 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Conte\u00fado<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#O_que_e_o_Framer\" title=\"O que \u00e9 o Framer?\">O que \u00e9 o Framer?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#Insert\" title=\"Insert\">Insert<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#Menu_de_Layout_Grade_e_estrutura_da_pagina\" title=\"Menu de Layout: Grade e estrutura da p\u00e1gina\">Menu de Layout: Grade e estrutura da p\u00e1gina<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#Text\" title=\"Text\">Text<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#Vector\" title=\"Vector\">Vector<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#Menu_CMS\" title=\"Menu CMS\">Menu CMS<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#Como_usar_o_Framer_Comecando_pela_IA\" title=\"Como usar o Framer? Come\u00e7ando pela IA\">Como usar o Framer? Come\u00e7ando pela IA<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#Usando_modelos_prontos\" title=\"Usando modelos prontos\">Usando modelos prontos<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#Partindo_do_zero\" title=\"Partindo do zero\">Partindo do zero<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#1_Menu_de_navegacao\" title=\"1. Menu de navega\u00e7\u00e3o\">1. Menu de navega\u00e7\u00e3o<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#2_Secoes\" title=\"2. Se\u00e7\u00f5es\">2. Se\u00e7\u00f5es<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#Secoes_do_zero\" title=\"Se\u00e7\u00f5es do zero\">Se\u00e7\u00f5es do zero<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#3_Insira_imagens\" title=\"3. Insira imagens\">3. Insira imagens<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#Explicando_as_configuracoes_de_imagens\" title=\"Explicando as configura\u00e7\u00f5es de imagens\">Explicando as configura\u00e7\u00f5es de imagens<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#4_Edite_textos_e_estilos\" title=\"4. Edite textos e estilos\">4. Edite textos e estilos<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#5_Crie_o_botao_e_aplique_efeitos\" title=\"5. Crie o bot\u00e3o e aplique efeitos\">5. Crie o bot\u00e3o e aplique efeitos<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#Alternativas_ao_Framer\" title=\"Alternativas ao Framer\">Alternativas ao Framer<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#Webflow\" title=\"Webflow\">Webflow<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#Wix_Studio_Editor_X\" title=\"Wix Studio (Editor X)\">Wix Studio (Editor X)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#Figma\" title=\"Figma\">Figma<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#Conclusao\" title=\"Conclus\u00e3o\">Conclus\u00e3o<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"O_que_e_o_Framer\"><\/span>O que \u00e9 o Framer?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>O <strong>Framer<\/strong> \u00e9 uma ferramenta de <strong>design + desenvolvimento visual de sites<\/strong>. Ele permite criar sites responsivos, interativos e at\u00e9 com conte\u00fado din\u00e2mico, <strong>sem precisar codar muito<\/strong>. Como dito anteriormente, ele \u00e9 tipo o Figma, mas com elementos de site pronto: d\u00e1 para publicar, conectar banco de dados (<a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/o-que-e-cms\/\">CMS<\/a>), testar intera\u00e7\u00f5es e criar tudo visualmente.<\/p>\n\n\n\n<p>Voc\u00ea pode, por exemplo, usar o menu superior para alternar entre modos e o lateral esquerdo para <strong>inserir tudo o que quiser no seu site<\/strong>, de um simples bot\u00e3o at\u00e9 uma lista din\u00e2mica de posts vindos de um CMS.<\/p>\n\n\n\n<p>Vamos detalhar as fun\u00e7\u00f5es dos seus menus.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-26.png\" alt=\"\" class=\"wp-image-14738\" width=\"495\" height=\"55\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-26.png 495w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-26-300x33.png 300w\" sizes=\"(max-width: 495px) 100vw, 495px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Insert\"><\/span>Insert<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-33.png\" alt=\"\" class=\"wp-image-14747\" width=\"251\" height=\"885\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-33.png 251w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-33-85x300.png 85w\" sizes=\"(max-width: 251px) 100vw, 251px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Aqui voc\u00ea encontra todos os blocos e componentes: <strong>componentes prontos (tipo carross\u00e9is, headers etc)<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Menu_de_Layout_Grade_e_estrutura_da_pagina\"><\/span>Menu de Layout: Grade e estrutura da p\u00e1gina<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-34.png\" alt=\"\" class=\"wp-image-14748\" width=\"158\" height=\"262\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Usado para definir colunas, espa\u00e7amentos, grids e alinhamentos.<\/li>\n\n\n\n<li>Ideal pra deixar tudo milimetricamente organizado.<\/li>\n\n\n\n<li>Aqui voc\u00ea cria <em>containers responsivos<\/em> que se adaptam ao tamanho da tela.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Text\"><\/span>Text<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Adicionar texto<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Insere caixas de texto simples, que voc\u00ea pode estilizar (fonte, tamanho, peso, cor).<\/li>\n\n\n\n<li>\u00c9 o atalho direto para trabalhar com palavras, t\u00edtulos, par\u00e1grafos e afins.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Vector\"><\/span>Vector<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-35.png\" alt=\"\" class=\"wp-image-14749\" width=\"127\" height=\"213\" \/><\/figure>\n\n\n\n<p>Ferramenta para criar formas personalizadas, como por exemplo: linhas, curvas, \u00edcones pr\u00f3prios, detalhes gr\u00e1ficos<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Menu_CMS\"><\/span>Menu CMS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Sistema de Gerenciamento de Conte\u00fado<\/strong><\/li>\n\n\n\n<li>Permite criar <strong>bancos de dados internos<\/strong> para o seu site. Por exemplo: blog com posts din\u00e2micos, cat\u00e1logo de produtos, p\u00e1ginas de equipe.<\/li>\n<\/ul>\n\n\n\n<p>Voc\u00ea cadastra os dados no CMS e o site puxa isso automaticamente.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_usar_o_Framer_Comecando_pela_IA\"><\/span>Como usar o Framer? Come\u00e7ando pela IA<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>H\u00e1 diversas formas de come\u00e7ar a usar o Framer: pedindo \u00e0 IA para criar o <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/criar-layout-site-figma\/\">wireframe<\/a>, usando um modelo pronto ou come\u00e7ando do 0. Vamos come\u00e7ar explicando sobre o Wireframer.<\/p>\n\n\n\n<p>\u00c9 poss\u00edvel utilizar o recurso de Wireframer que est\u00e1 dispon\u00edvel dentro do menu <em>Insert<\/em>. Voc\u00ea pode dar um prompt para a IA criar a sua landing page. Aqui, por exemplo, utilizamos o seguinte prompt:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-36.png\" alt=\"\" class=\"wp-image-14750\" width=\"252\" height=\"480\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-36.png 252w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-36-158x300.png 158w\" sizes=\"(max-width: 252px) 100vw, 252px\" \/><figcaption class=\"wp-element-caption\">Prompt de exemplo para o wireframer entender a base do que voc\u00ea precisa<\/figcaption><\/figure>\n\n\n\n<p>Depois disso, a IA vai gerar a landing page conforme detalhes do prompt.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-37-1024x617.png\" alt=\"\" class=\"wp-image-14751\" width=\"1024\" height=\"617\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-37-1024x617.png 1024w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-37-300x181.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-37-768x463.png 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-37.png 1349w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Resultado do wireframer: 3 breakpoints criados<\/figcaption><\/figure>\n\n\n\n<p>D\u00e1 para, por exemplo, detalhar as se\u00e7\u00f5es, pedir apenas uma parte do site ou solicitar um layout completo.<\/p>\n\n\n\n<p>O Wireframer funciona como uma base de design para personaliza\u00e7\u00e3o. <strong>Ele n\u00e3o vai entregar algo pronto e definitivo, e sim uma estrutura que voc\u00ea pode alterar como quiser.<\/strong> <strong>\u00c9 ideal como ponto de partida<\/strong>. A partir dele, voc\u00ea pode adaptar tudo com mais liberdade.<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#ff6a0030\">Na vers\u00e3o gerada pelo Wireframer, voc\u00ea recebe tr\u00eas breakpoints prontos:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Desktop<\/li>\n\n\n\n<li>Tablet<\/li>\n\n\n\n<li>Celular (Phone)<\/li>\n<\/ol>\n\n\n\n<p><strong>Isso significa que esses tr\u00eas layouts j\u00e1 v\u00eam prontos para testes de responsividade.<\/strong> Quando voc\u00ea modifica algo no desktop, por exemplo, o conte\u00fado se ajusta automaticamente nos outros tamanhos.<\/p>\n\n\n\n<p>As se\u00e7\u00f5es criadas pelo Wireframer ficam dispon\u00edveis nas abas <em>Pages<\/em> e <em>Layers<\/em>. Basta acess\u00e1-las para modificar os elementos como quiser. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-38.png\" alt=\"\" class=\"wp-image-14752\" width=\"248\" height=\"129\" \/><figcaption class=\"wp-element-caption\">Lista de pages do seu projeto<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-39.png\" alt=\"\" class=\"wp-image-14753\" width=\"242\" height=\"667\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-39.png 242w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-39-109x300.png 109w\" sizes=\"(max-width: 242px) 100vw, 242px\" \/><figcaption class=\"wp-element-caption\">Lista de layers do seu projeto<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Usando_modelos_prontos\"><\/span>Usando modelos prontos<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>O Framer \u00e9 uma ferramenta freemium, ou seja, <strong>possui uma vers\u00e3o gratuita e uma paga, na p\u00e1gina de modelos voc\u00ea encontra uma categoria exclusiva para os gratuitos<\/strong>. Por exemplo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-40-1024x334.png\" alt=\"\" class=\"wp-image-14754\" width=\"1024\" height=\"334\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-40-1024x334.png 1024w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-40-300x98.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-40-768x250.png 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-40.png 1270w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Lista de alguns modelos dispon\u00edveis no site do Framer<\/figcaption><\/figure>\n\n\n\n<p><strong>Os templates gratuitos dispon\u00edveis s\u00e3o \u00f3timos e funcionais. Eles j\u00e1 v\u00eam otimizados.<\/strong> Alterar imagens, fontes e textos \u00e9 simples e r\u00e1pido, facilitando muito o processo de personaliza\u00e7\u00e3o, voc\u00ea pode duplicar elementos, modificar cores e dar a cara que precisa para seu site. Por exemplo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-41.png\" alt=\"\" class=\"wp-image-14755\" width=\"430\" height=\"447\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-41.png 430w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-41-289x300.png 289w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-41-24x24.png 24w\" sizes=\"(max-width: 430px) 100vw, 430px\" \/><figcaption class=\"wp-element-caption\">Modelo criado e inserido ao design<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Partindo_do_zero\"><\/span>Partindo do zero<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Caso deseje criar o design completamente do zero, <strong>comece acessando o menu lateral esquerdo e clicando em <em>Insert<\/em>. A primeira etapa ser\u00e1 adicionar um menu de navega\u00e7\u00e3o.<\/strong> Por padr\u00e3o, o Framer come\u00e7a no breakpoint Desktop, mas voc\u00ea pode adicionar Tablet ou Phone depois, se desejar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Menu_de_navegacao\"><\/span>1. Menu de navega\u00e7\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Selecione <em>Navigation<\/em> e escolha o estilo de menu<\/strong> que melhor funciona para o seu projeto.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-42.png\" alt=\"\" class=\"wp-image-14756\" width=\"520\" height=\"493\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-42.png 520w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-42-300x284.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-42-24x24.png 24w\" sizes=\"(max-width: 520px) 100vw, 520px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-30-1024x363.png\" alt=\"\" class=\"wp-image-14742\" width=\"1024\" height=\"363\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-30-1024x363.png 1024w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-30-300x106.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-30-768x272.png 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-30.png 1446w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Secoes\"><\/span>2. Se\u00e7\u00f5es<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Depois, insira as se\u00e7\u00f5es.<\/strong> Clique em <em>Section<\/em> e selecione aquelas que fazem sentido para a sua landing page. Avalie quais \u00e1reas o site precisa e v\u00e1 compondo conforme a necessidade.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-43.png\" alt=\"\" class=\"wp-image-14757\" width=\"504\" height=\"526\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-43.png 504w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-43-287x300.png 287w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-43-24x24.png 24w\" sizes=\"(max-width: 504px) 100vw, 504px\" \/><\/figure>\n\n\n\n<p>Voc\u00ea tamb\u00e9m pode usar o menu superior esquerdo para criar as suas pr\u00f3prias se\u00e7\u00f5es, <strong>em <em>Layout<\/em>, para adicionar <em>Frame<\/em>, <em>Rows<\/em>, <em>Columns<\/em> ou <em>Grid<\/em>.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-31.png\" alt=\"\" class=\"wp-image-14743\" width=\"166\" height=\"265\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Secoes_do_zero\"><\/span>Se\u00e7\u00f5es do zero<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Vamos come\u00e7ar com colunas. Crie duas colunas: uma ser\u00e1 para texto (com H1, par\u00e1grafo e bot\u00e3o) e a outra para imagem.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-32.png\" alt=\"\" class=\"wp-image-14744\" width=\"923\" height=\"466\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-32.png 923w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-32-300x151.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-32-768x388.png 768w\" sizes=\"(max-width: 923px) 100vw, 923px\" \/><\/figure>\n\n\n\n<p>Ao inserir esses elementos, eles s\u00e3o geralmente posicionados com estilo <em>relative<\/em>. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-45-1024x362.png\" alt=\"\" class=\"wp-image-14759\" width=\"1024\" height=\"362\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-45-1024x362.png 1024w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-45-300x106.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-45-768x272.png 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-45-1536x543.png 1536w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-45.png 1550w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Isso significa que a posi\u00e7\u00e3o deles ser\u00e1 ajustada conforme o dispositivo usado para visualizar o site. Isso garante um layout mais adapt\u00e1vel e responsivo.<\/strong> Mas mais do que isso: como um cont\u00eainer pai, ele vai influenciar a posi\u00e7\u00e3o dos que vier dentro dele.<\/p>\n\n\n\n<p>Na coluna da esquerda, selecione <em>Text<\/em>, crie um texto H1, par\u00e1grafo e depois o texto do bot\u00e3o (voc\u00ea modifica cada um depois, vamos ensinar em se\u00e7\u00f5es mais abaixo).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-57.png\" alt=\"\" class=\"wp-image-14776\" width=\"636\" height=\"520\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-57.png 636w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-57-300x245.png 300w\" sizes=\"(max-width: 636px) 100vw, 636px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Insira_imagens\"><\/span>3. Insira imagens<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Agora, vamos adicionar uma imagem na coluna da direita. V\u00e1 at\u00e9 o menu <em>Insert<\/em>, depois em <em>Elements<\/em> e selecione <em>M\u00eddia &gt; Imagem<\/em>. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-48.png\" alt=\"\" class=\"wp-image-14762\" width=\"439\" height=\"905\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-48.png 439w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-48-146x300.png 146w\" sizes=\"(max-width: 439px) 100vw, 439px\" \/><\/figure>\n\n\n\n<p><strong>Arraste a imagem para dentro da coluna, posicione como desejar. <\/strong>Em seguida, aumente o tamanho dela para preencher bem o espa\u00e7o e manter o alinhamento centralizado.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-47.png\" alt=\"\" class=\"wp-image-14761\" width=\"871\" height=\"456\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-47.png 871w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-47-300x157.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-47-768x402.png 768w\" sizes=\"(max-width: 871px) 100vw, 871px\" \/><\/figure>\n\n\n\n<p><strong>Para inserir a imagem do seu computador,<\/strong> <strong>basta clicar duas vezes sobre o bloco da imagem.<\/strong> No painel lateral direito, ser\u00e1 aberta a op\u00e7\u00e3o de upload. Recomendamos usar resolu\u00e7\u00e3o m\u00e9dia para evitar lentid\u00e3o no carregamento da p\u00e1gina.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-54-1024x349.png\" alt=\"\" class=\"wp-image-14770\" width=\"1024\" height=\"349\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-54-1024x349.png 1024w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-54-300x102.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-54-768x262.png 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-54-1536x523.png 1536w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-54.png 1615w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-background\" style=\"background-color:#ff6a0030\">Imagens muito pesadas podem impactar o desempenho do site. Mantenha isso em mente ao construir suas p\u00e1ginas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Explicando_as_configuracoes_de_imagens\"><\/span>Explicando as configura\u00e7\u00f5es de imagens<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Position Absolute<\/strong>: define que o elemento (nesse caso, a imagem) est\u00e1 posicionado de forma <strong>absoluta<\/strong> dentro do cont\u00eainer pai. Isso permite mover ele livremente pelos eixos X e Y, mas <strong>ele n\u00e3o se adapta automaticamente ao layout<\/strong>. Voc\u00ea precisa ajustar manualmente em cada breakpoint se quiser responsividade;<\/li>\n\n\n\n<li><strong>Top \/ Right \/ Bottom \/ Left<\/strong>: esses campos controlam a <strong>dist\u00e2ncia em pixels<\/strong> da imagem em rela\u00e7\u00e3o \u00e0s bordas do cont\u00eainer. Aqui, por exemplo, ela est\u00e1 51px do topo e 332px da esquerda. \u00datil para posicionamento fino, mas n\u00e3o ideal para layouts flex\u00edveis;<\/li>\n\n\n\n<li><strong>Width e Height em \u201cFr\u201d<\/strong>: o \u201cFr\u201d significa <strong>fra\u00e7\u00e3o de espa\u00e7o<\/strong>. Se a largura est\u00e1 como <code>1fr<\/code>, isso quer dizer que ela ocupa 1 parte proporcional do espa\u00e7o dispon\u00edvel, dentro de uma grid ou coluna. Essa unidade \u00e9 \u00f3tima para manter <strong>propor\u00e7\u00e3o e responsividade<\/strong> em qualquer tela;<\/li>\n\n\n\n<li><strong>Grow ativado<\/strong>: esse bot\u00e3o faz o elemento \u201ccrescer\u201d para preencher <strong>todo o espa\u00e7o dispon\u00edvel<\/strong> dentro do cont\u00eainer pai. \u00c9 comum em layouts flex (flexbox) e ajuda a evitar espa\u00e7os em branco desnecess\u00e1rios;<\/li>\n\n\n\n<li><strong>Max Width: 100% (Rel)<\/strong>: limita a <strong>largura m\u00e1xima<\/strong> do elemento a 100% do cont\u00eainer. Isso evita que ele \u201cexploda\u201d o layout em telas menores. Mesmo que o conte\u00fado interno seja maior, ele respeita esse limite.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Edite_textos_e_estilos\"><\/span>4. Edite textos e estilos<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Todos os estilos de texto podem ser editados. Basta passar o mouse sobre o heading, par\u00e1grafo ou qualquer elemento de texto. Depois, clique em <em>Text &gt; Styles<\/em> e selecione o tipo desejado: <em>Body<\/em>, <em>Heading<\/em>, <em>Subheading<\/em>, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-51.png\" alt=\"\" class=\"wp-image-14765\" width=\"538\" height=\"482\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-51.png 538w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-51-300x269.png 300w\" sizes=\"(max-width: 538px) 100vw, 538px\" \/><\/figure>\n\n\n\n<p>Digite o conte\u00fado e, caso n\u00e3o goste do estilo aplicado, clique em <em>Edit Style<\/em>. Voc\u00ea poder\u00e1 personalizar, por exemplo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-52.png\" alt=\"\" class=\"wp-image-14766\" width=\"277\" height=\"824\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-52.png 277w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-52-101x300.png 101w\" sizes=\"(max-width: 277px) 100vw, 277px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Crie_o_botao_e_aplique_efeitos\"><\/span>5. Crie o bot\u00e3o e aplique efeitos<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>O seu bot\u00e3o ser\u00e1 um Frame (F, ou<em> Layout &gt; Frame<\/em>) + texto.<\/p>\n\n\n\n<p>O que o tornar\u00e1 um bot\u00e3o \u00e9 o efeito e o link que voc\u00ea adicionar\u00e1 no frame criado, assim:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-56.png\" alt=\"\" class=\"wp-image-14772\" width=\"259\" height=\"338\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-56.png 259w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-56-230x300.png 230w\" sizes=\"(max-width: 259px) 100vw, 259px\" \/><figcaption class=\"wp-element-caption\">Linkagem que todos os elementos podem ter, aqui ser\u00e1 aplicado ao frame criado<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-55.png\" alt=\"\" class=\"wp-image-14771\" width=\"254\" height=\"344\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-55.png 254w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/image-55-222x300.png 222w\" sizes=\"(max-width: 254px) 100vw, 254px\" \/><figcaption class=\"wp-element-caption\">Lista de efeitos que voc\u00ea pode usar no design inteiro, mas comumente adicionado em bot\u00f5es<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Appear<\/strong>: anima quando o elemento <strong>entra na tela<\/strong> (ex: fade-in ao rolar);<\/li>\n\n\n\n<li><strong>Hover<\/strong>: ativa ao <strong>passar o mouse por cima<\/strong> (ex: bot\u00e3o muda de cor);<\/li>\n\n\n\n<li><strong>Loop<\/strong>: cria <strong>anima\u00e7\u00f5es cont\u00ednuas<\/strong> (ex: \u00edcone que pisca ou gira);<\/li>\n\n\n\n<li><strong>Drag<\/strong>: permite <strong>arrastar o elemento<\/strong> na tela (ex: carrossel interativo);<\/li>\n\n\n\n<li><strong>Scroll Animation<\/strong>: elemento <strong>se move ou anima conforme o usu\u00e1rio rola<\/strong> a p\u00e1gina;<\/li>\n\n\n\n<li><strong>Scroll Speed<\/strong>: altera a <strong>velocidade do movimento<\/strong> no scroll (ex: efeito parallax);<\/li>\n\n\n\n<li><strong>Scroll Transform<\/strong>: transforma o elemento com o scroll: <strong>move, gira ou aumenta<\/strong> dinamicamente;<\/li>\n\n\n\n<li><strong>Scroll Variant<\/strong> <em>(desativado se n\u00e3o for componente)<\/em>: troca de estado do elemento <strong>conforme o scroll<\/strong> (ex: muda de cor ao chegar em certa altura).<\/li>\n<\/ul>\n\n\n\n<p class=\"has-background\" style=\"background-color:#ff6a002e\">Clique no bot\u00e3o de Play para rodar o site e testar as anima\u00e7\u00f5es.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Alternativas_ao_Framer\"><\/span>Alternativas ao Framer<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Das v\u00e1rias alternativas ao Framer, podemos citar, por exemplo:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Webflow\"><\/span>Webflow<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Editor visual com controle total sobre c\u00f3digo, ideal para projetos mais t\u00e9cnicos e detalhados.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Destaque: liberdade criativa + poder t\u00e9cnico.<\/li>\n\n\n\n<li>Para quem: designers avan\u00e7ados ou devs visuais.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Wix_Studio_Editor_X\"><\/span>Wix Studio (Editor X)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Plataforma focada em ag\u00eancias e criadores que querem agilidade com controle visual.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Destaque: facilidade + responsividade autom\u00e1tica.<\/li>\n\n\n\n<li>Para quem: quem quer montar r\u00e1pido com visual profissional.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Figma\"><\/span>Figma<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Ferramenta de design colaborativo, muito usada para prototipar antes de exportar para plataformas como Framer ou Webflow.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Destaque: colabora\u00e7\u00e3o em tempo real.<\/li>\n\n\n\n<li>Para quem: times de design e quem precisa prototipar ou testar ideias.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusao\"><\/span>Conclus\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>O Framer \u00e9, portanto, um ambiente completo para <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/criar-site-profissional\/\">criar sites<\/a> modernos, responsivos e interativos, sem a necessidade de escrever uma \u00fanica linha de c\u00f3digo (mas voc\u00ea pode, se quiser). Com interface intuitiva e simples, integra\u00e7\u00e3o com IA, recursos visuais e suporte \u00e0 responsividade nativa, ele permite que qualquer pessoa, ainda que sem grandes conhecimentos t\u00e9cnicos, coloque projetos profissionais no ar.<\/p>\n\n\n\n<p>Gostou do conte\u00fado? Leia mais em nosso <a href=\"https:\/\/www.homehost.com.br\/blog\/\">blog<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Framer \u00e9 uma ferramenta de design para produ\u00e7\u00e3o de sites e outras aplica\u00e7\u00f5es, focada em responsividade e drop down (o famoso &#8220;arrastar e soltar&#8221;). No Framer, voc\u00ea consegue criar layouts que se adaptam a diferentes tamanhos de tela com facilidade, usando as ferramentas j\u00e1 dispon\u00edveis na pr\u00f3pria plataforma. Bem semelhante ao Figma. Se\u00e7\u00f5es, p\u00e1ginas, templates: [&hellip;]<\/p>\n","protected":false},"author":31,"featured_media":14775,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_helpful_status":1,"_lmt_disableupdate":"","_lmt_disable":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-14736","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-criar-sites"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Framer: site completo sem c\u00f3digo | Homehost<\/title>\n<meta name=\"description\" content=\"Saiba tudo sobre como usar o Framer para criar seus sites com (quase) nenhum c\u00f3digo. Montamos um tutorial simples e r\u00e1pido!\" \/>\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.homehost.com.br\/blog\/criar-sites\/framer\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Framer: site completo sem c\u00f3digo | Homehost\" \/>\n<meta property=\"og:description\" content=\"Saiba tudo sobre como usar o Framer para criar seus sites com (quase) nenhum c\u00f3digo. Montamos um tutorial simples e r\u00e1pido!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/\" \/>\n<meta property=\"og:site_name\" content=\"Homehost\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Homehost\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-19T22:01:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/Designs-de-artigos.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1260\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Daiana S\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Homehost\" \/>\n<meta name=\"twitter:site\" content=\"@Homehost\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Daiana S\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/\",\"name\":\"Framer: site completo sem c\u00f3digo | Homehost\",\"isPartOf\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/Designs-de-artigos.png\",\"datePublished\":\"2025-08-19T22:01:36+00:00\",\"author\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/eb90cb369d7098d6d85fa96c78ea1689\"},\"description\":\"Saiba tudo sobre como usar o Framer para criar seus sites com (quase) nenhum c\u00f3digo. Montamos um tutorial simples e r\u00e1pido!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#primaryimage\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/Designs-de-artigos.png\",\"contentUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/Designs-de-artigos.png\",\"width\":1260,\"height\":630,\"caption\":\"Framer: do design para o c\u00f3digo\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.homehost.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Framer: site completo sem c\u00f3digo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/\",\"name\":\"Homehost\",\"description\":\"Hospedagem De Sites\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/eb90cb369d7098d6d85fa96c78ea1689\",\"name\":\"Daiana S\",\"description\":\"Graduada em Letras pelo Instituto Federal da Para\u00edba e especializada em reda\u00e7\u00e3o geral. Gosto de escrever sobre tudo e me dedico em v\u00e1rios n\u00edveis de expressividade. No geral, todos os meus hobbies giram em torno de escrever alguma coisa e fazer isso bem. Contato: daiana.blog@homehost.com.br\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Framer: site completo sem c\u00f3digo | Homehost","description":"Saiba tudo sobre como usar o Framer para criar seus sites com (quase) nenhum c\u00f3digo. Montamos um tutorial simples e r\u00e1pido!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/","og_locale":"pt_BR","og_type":"article","og_title":"Framer: site completo sem c\u00f3digo | Homehost","og_description":"Saiba tudo sobre como usar o Framer para criar seus sites com (quase) nenhum c\u00f3digo. Montamos um tutorial simples e r\u00e1pido!","og_url":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/","og_site_name":"Homehost","article_publisher":"https:\/\/www.facebook.com\/Homehost\/","article_published_time":"2025-08-19T22:01:36+00:00","og_image":[{"width":1260,"height":630,"url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/Designs-de-artigos.png","type":"image\/png"}],"author":"Daiana S","twitter_card":"summary_large_image","twitter_creator":"@Homehost","twitter_site":"@Homehost","twitter_misc":{"Escrito por":"Daiana S","Est. tempo de leitura":"15 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/","url":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/","name":"Framer: site completo sem c\u00f3digo | Homehost","isPartOf":{"@id":"https:\/\/www.homehost.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#primaryimage"},"image":{"@id":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#primaryimage"},"thumbnailUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/Designs-de-artigos.png","datePublished":"2025-08-19T22:01:36+00:00","author":{"@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/eb90cb369d7098d6d85fa96c78ea1689"},"description":"Saiba tudo sobre como usar o Framer para criar seus sites com (quase) nenhum c\u00f3digo. Montamos um tutorial simples e r\u00e1pido!","breadcrumb":{"@id":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#primaryimage","url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/Designs-de-artigos.png","contentUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/Designs-de-artigos.png","width":1260,"height":630,"caption":"Framer: do design para o c\u00f3digo"},{"@type":"BreadcrumbList","@id":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/framer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.homehost.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Framer: site completo sem c\u00f3digo"}]},{"@type":"WebSite","@id":"https:\/\/www.homehost.com.br\/blog\/#website","url":"https:\/\/www.homehost.com.br\/blog\/","name":"Homehost","description":"Hospedagem De Sites","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/eb90cb369d7098d6d85fa96c78ea1689","name":"Daiana S","description":"Graduada em Letras pelo Instituto Federal da Para\u00edba e especializada em reda\u00e7\u00e3o geral. Gosto de escrever sobre tudo e me dedico em v\u00e1rios n\u00edveis de expressividade. No geral, todos os meus hobbies giram em torno de escrever alguma coisa e fazer isso bem. Contato: daiana.blog@homehost.com.br"}]}},"modified_by":"ad_hmhst","jetpack_featured_media_url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2025\/07\/Designs-de-artigos.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/14736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/comments?post=14736"}],"version-history":[{"count":9,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/14736\/revisions"}],"predecessor-version":[{"id":14791,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/14736\/revisions\/14791"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media\/14775"}],"wp:attachment":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=14736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=14736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=14736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}