{"id":13175,"date":"2018-11-13T12:04:37","date_gmt":"2018-11-13T14:04:37","guid":{"rendered":"https:\/\/blog.hostinger.io\/br-tutoriais\/?p=13175"},"modified":"2025-06-06T15:19:54","modified_gmt":"2025-06-06T18:19:54","slug":"como-fazer-o-layout-de-um-site","status":"publish","type":"post","link":"\/br\/tutoriais\/como-fazer-o-layout-de-um-site","title":{"rendered":"Como fazer o layout de um site em 6 passos"},"content":{"rendered":"<p><span style=\"font-weight: 400\">Existem dois fatores que bons sites possuem em comum: excelentes conte&uacute;dos e um layout de tirar o f&ocirc;lego. Se o design do seu site n&atilde;o &eacute; l&aacute; tudo aquilo, seu conte&uacute;do n&atilde;o vai se destacar e voc&ecirc; vai perder visitantes. Isso querc dizer que voc&ecirc; precisa come&ccedil;ar a pensar na apar&ecirc;ncia do site assim que iniciar o projeto.<\/span><\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Build-website-in-9-easy-steps-BR.pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Build-website-BR.png\/public\" alt=\"\" class=\"wp-image-30342\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Build-website-BR.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Build-website-BR.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Build-website-BR.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Build-website-BR.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Build-website-BR.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p><span style=\"font-weight: 400\">Neste artigo, vamos ensinar <strong>C<\/strong><\/span><b>omo Fazer o Layout de Um Site<\/b><span style=\"font-weight: 400\"> do zero. Vamos cobrir as 6 etapas mais essenciais:<\/span><\/p><ol class=\"wp-block-list\">\n<li><span style=\"font-weight: 400\">Encontrando um provedor de hospedagem confi&aacute;vel.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400\">Escolhendo a plataforma para cria&ccedil;&atilde;o do site.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400\">Configurando ferramentas que v&atilde;o ajudar na constru&ccedil;&atilde;o do layout.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400\">Criando um modelo de layout para seu site.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400\">Trabalhando no prot&oacute;tipo de um design.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400\">Verificando o resultado em dispositivos m&oacute;veis.<\/span><\/li>\n<\/ol><p><span style=\"font-weight: 400\">N&atilde;o se preocupe! Voc&ecirc; n&atilde;o precisa ser profissional para <a href=\"\/br\/tutoriais\/como-criar-um-site-passo-a-passo\">criar um site<\/a> estiloso e atraente aos leitores. Vamos come&ccedil;ar?<\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-por-que-o-web-design-e-importante\"><b>Por Que o Web Design &eacute; Importante?<\/b><\/h2><p><span style=\"font-weight: 400\">O <a href=\"\/br\/tutoriais\/exemplos-de-ecommerce\"><strong>web design<\/strong><\/a> &eacute; essencial porque ele pode determinar a primeira impress&atilde;o das pessoas sobre uma marca pessoal ou um neg&oacute;cio. Os usu&aacute;rios <\/span><a href=\"https:\/\/www.sweor.com\/firstimpressions\" target=\"_blank\" rel=\"noopener\"><b>decidem se v&atilde;o ou n&atilde;o se engajar<\/b><\/a><span style=\"font-weight: 400\"> com um site em menos de 0,05 segundo, geralmente com base no aspecto visual.<\/span><\/p><p><span style=\"font-weight: 400\">Mais do que isso, o <\/span><a href=\"https:\/\/www.webfx.com\/blog\/marketing\/user-experience-matters-marketing\/\" target=\"_blank\" rel=\"noopener\"><b>web design<\/b><\/a><span style=\"font-weight: 400\"> tamb&eacute;m contribui em cerca de <\/span><b>75%<\/b><span style=\"font-weight: 400\"> para o julgamento de um visitante sobre a credibilidade de uma pessoa ou de uma empresa. Portanto, se um site parece mal feito, as pessoas podem achar que se trata de um golpe.<\/span><\/p><p><span style=\"font-weight: 400\">Al&eacute;m disso, o layout de um site pode ter um impacto significativo na <\/span><a href=\"https:\/\/www.conductor.com\/learning-center\/what-is-the-buyers-journey\/\" target=\"_blank\" rel=\"noopener\"><b>jornada de compra<\/b><\/a><span style=\"font-weight: 400\"> de um cliente.<\/span><\/p><p><span style=\"font-weight: 400\">O Toptal aponta que <\/span><b>88%<\/b><span style=\"font-weight: 400\"> das pessoas que fazem compras online n&atilde;o v&atilde;o utilizar o mesmo site se tiverem uma <\/span><a href=\"https:\/\/www.toptal.com\/designers\/ux\/ux-statistics-insights-infographic\" target=\"_blank\" rel=\"noopener\"><b>experi&ecirc;ncia de usu&aacute;rio<\/b><\/a><span style=\"font-weight: 400\"> ruim. Sem contar que usu&aacute;rios mobile t&ecirc;m cinco vezes mais chances de sa&iacute;rem de um site se ele n&atilde;o funcionar corretamente em seus celulares ou tablets.<\/span><\/p><p><span style=\"font-weight: 400\">O web design tamb&eacute;m tem um papel significativo no reconhecimento da sua marca. Manter consist&ecirc;ncia visual atrav&eacute;s de todos os canais de marketing pode fazer com que seja mais f&aacute;cil do seu p&uacute;blico-alvo identificar a identidade visual da sua empresa.<\/span><\/p><p><span style=\"font-weight: 400\">Finalmente, o design do site importa para <a href=\"\/br\/tutoriais\/o-que-e-seo\"><strong>SEO<\/strong><\/a>. Se os visitantes acharem o seu site dif&iacute;cil de se navegar, os motores de busca provavelmente v&atilde;o v&ecirc;-lo do mesmo jeito. Deste modo, os bots podem ter dificuldade no processo de <\/span><i><span style=\"font-weight: 400\">crawling<\/span><\/i><span style=\"font-weight: 400\"> do conte&uacute;do com o objetivo de indexa&ccedil;&atilde;o e ranqueamento.<\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-1&ordm;-passo-encontrar-um-provedor-de-hospedagem-confiavel\"><b>1&ordm; Passo: Encontrar um Provedor de Hospedagem Confi&aacute;vel<\/b><\/h2><p><span style=\"font-weight: 400\">Antes de come&ccedil;ar a falar da apar&ecirc;ncia do site em si, precisamos cuidar de alguns aspectos t&eacute;cnicos. Antes de mais nada, precisamos encontrar uma hospedagem de qualidade para seu site.<\/span><\/p><p><span style=\"font-weight: 400\">Muitas pessoas procuram pela hospedagem baseando apenas no valor e se contentam com a mais barata, o que &eacute; um erro. Nem todo provedor de hospedagem oferece um bom servi&ccedil;o, por isso &eacute; importante pesquisar bem antes de contratar.<\/span><\/p><p><span style=\"font-weight: 400\">Alguns dos elementos mais importantes para procurar em um provedor de hospedagem s&atilde;o:<\/span><\/p><ul class=\"wp-block-list\">\n<li>Suporte de qualidade.<\/li>\n\n\n\n<li>&Oacute;tima performance de velocidade.<\/li>\n\n\n\n<li>Recursos adicionais para tornar sua vida mais f&aacute;cil, como backups di&aacute;rios.<\/li>\n\n\n\n<li>Bons materiais de pesquisa para encontrar solu&ccedil;&otilde;es para qualquer tipo de problema.<\/li>\n\n\n\n<li>Compatibilidade com qualquer tipo de plataforma que voc&ecirc; escolher.<\/li>\n<\/ul><p><span style=\"font-weight: 400\">Como &eacute; de se esperar, todos os provedores dizem cumprir com todos esses pr&eacute;-requisitos. Ent&atilde;o, voc&ecirc; precisa fazer uma pesquisa minuciosa. A melhor maneira de chegar a uma conclus&atilde;o &eacute; procurando em sites de <\/span><span style=\"font-weight: 400\">avalia&ccedil;&otilde;es independentes<\/span><span style=\"font-weight: 400\">.<\/span><\/p><p><span style=\"font-weight: 400\">Por estar no nosso blog, voc&ecirc; j&aacute; deve estar ciente que oferecemos planos com a <\/span><a href=\"\/br\/hospedagem-de-sites\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">melhor hospedagem de site<\/span><\/a><span style=\"font-weight: 400\">&nbsp;de alto n&iacute;vel com os melhores pre&ccedil;os. O mesmo vale para a <a href=\"\/br\/hospedagem-wordpress\" target=\"_blank\" rel=\"noopener\">hospedagem WordPress<\/a>.&nbsp;<\/span><\/p><p><span style=\"font-weight: 400\">Al&eacute;m de uma <strong><a href=\"\/br\/hospedagem-de-site-barata\">hospedagem de sites barata<\/a><\/strong> e de qualidade, ainda oferecemos um <a href=\"\/br\/dominio-gratis\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>dom&iacute;nio web gr&aacute;tis<\/strong><\/a> na aquisi&ccedil;&atilde;o anual de um plano de host <\/span><i><span style=\"font-weight: 400\">Business<\/span><\/i><span style=\"font-weight: 400\"> ou <\/span><i><span style=\"font-weight: 400\">Premium<\/span><\/i><span style=\"font-weight: 400\">.<\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-2&ordm;-passo-escolha-a-plataforma-de-criacao-do-site\"><b>2&ordm; Passo: Escolha a Plataforma de Cria&ccedil;&atilde;o do Site<\/b><\/h2><p><span style=\"font-weight: 400\">Depois de escolher a hospedagem, &eacute; hora de decidir a plataforma em que seu site vai ser criado. Voc&ecirc; pode at&eacute; criar um site do zero, mas essa op&ccedil;&atilde;o &eacute; melhor para quem j&aacute; &eacute; um desenvolvedor experiente.<\/span><\/p><p><span style=\"font-weight: 400\">Quanto &agrave;s plataformas, somos grandes f&atilde;s dos CMS &ndash; Sistemas de Gerenciamento de Conte&uacute;do. Essas plataformas permitem a cria&ccedil;&atilde;o de sites profissionais e o gerenciamento de grandes bibliotecas de conte&uacute;do e ainda s&atilde;o f&aacute;ceis de aprender.<\/span><\/p><p><span style=\"font-weight: 400\">Existem diversas op&ccedil;&otilde;es de CMS, como o <\/span><span style=\"font-weight: 400\">WordPress<\/span><span style=\"font-weight: 400\">.<\/span><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/11\/wordpress-org-p%C3%A1gina-inicial.png\/public\" alt=\"p&aacute;gina inicial do WordPress.org \" class=\"wp-image-13181\"><\/figure><\/div><p><span style=\"font-weight: 400\">Essa plataforma ocupa mais de <\/span><a href=\"https:\/\/w3techs.com\/technologies\/overview\/content_management\/all\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">30% da internet<\/span><\/a><span style=\"font-weight: 400\">, ent&atilde;o sabemos que &eacute; confi&aacute;vel. Al&eacute;m de ser f&aacute;cil de usar, o WordPress oferece uma gigantesca cole&ccedil;&atilde;o de temas e plugins para personalizar seu site.<\/span><\/p><p><span style=\"font-weight: 400\">Outra op&ccedil;&atilde;o &eacute; o <\/span><a href=\"\/br\/hospedagem-joomla\"><span style=\"font-weight: 400\">Joomla<\/span>!<\/a><span style=\"font-weight: 400\">.<\/span><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/11\/p%C3%A1gina-inicial-Joomla.jpg\/public\" alt=\"p&aacute;gina inicial do Joomla\" class=\"wp-image-13182\"><\/figure><\/div><p><span style=\"font-weight: 400\">Esta plataforma tem um n&iacute;vel de complexidade maior do que o WordPress, mas o trabalho extra compensa com a ferramenta de <\/span><a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/30-tecnicas-de-seo-para-wordpress\/\"><span style=\"font-weight: 400\">Otimiza&ccedil;&atilde;o SEO<\/span><\/a><span style=\"font-weight: 400\"> e configura&ccedil;&otilde;es de seguran&ccedil;a avan&ccedil;adas. O Joomla tamb&eacute;m faz um bom trabalho no gerenciamento de diferentes tipos de conte&uacute;do, &aacute;rea em que o WordPress deixa a desejar.<\/span><\/p><p><span style=\"font-weight: 400\">Al&eacute;m dos CMS voc&ecirc; tamb&eacute;m pode utilizar um construtor de sites. N&oacute;s mesmo aqui da Hostinger disponibilizamos um. Essas solu&ccedil;&otilde;es <\/span>permitem a <a href=\"\/br\/criador-de-sites\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>cria&ccedil;&atilde;o de sites<\/strong><\/a> com ferramentas<span style=\"font-weight: 400\"> de edi&ccedil;&atilde;o visual de &ldquo;arrastar e soltar&rdquo;, juntamente com outros elementos, incluindo <strong><a href=\"\/br\/templates-de-sites\">templates para site<\/a><\/strong> totalmente personaliz&aacute;veis e responsivos. <\/span><\/p><p>Com ele, voc&ecirc; tamb&eacute;m pode <a href=\"\/br\/criador-de-sites-com-ia\">criar site IA<\/a> em alguns minutos. A pr&oacute;pria ferramenta cria textos, define o visual das p&aacute;ginas e organiza elementos visuais para voc&ecirc; baseado nas escolhas que voc&ecirc; faz durante a configura&ccedil;&atilde;o. Tem at&eacute; op&ccedil;&otilde;es por nicho de atua&ccedil;&atilde;o.<\/p><p><span style=\"font-weight: 400\">Para o restante do tutorial, vamos estar focando no WordPress. O motivo &eacute; simples: &eacute; a plataforma de constru&ccedil;&atilde;o de sites mais popular do mundo e ainda oferece diversas ferramentas para voc&ecirc; saber como criar um layout se um site.<\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-3-passo-configure-as-ferramentas-necessarias\"><b>3&deg; Passo: Configure as Ferramentas Necess&aacute;rias<\/b><\/h2><p><span style=\"font-weight: 400\">Depois de <\/span><a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/como-instalar-o-wordpress\/\"><span style=\"font-weight: 400\">instalar o WordPress<\/span><\/a><span style=\"font-weight: 400\">, voc&ecirc; precisa instalar algumas ferramentas para come&ccedil;ar a dar vida &agrave;s suas ideias. Antes de mais nada, &eacute; preciso escolher um tema que corresponda ao layout que voc&ecirc; tem em mente.<\/span><\/p><p><span style=\"font-weight: 400\">Existem milhares de <\/span><a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/temas-wordpress-gratis\"><span style=\"font-weight: 400\">temas WordPress<\/span><\/a><span style=\"font-weight: 400\"> a sua disposi&ccedil;&atilde;o. Mas recomendamos que voc&ecirc; utilize um tema gr&aacute;tis enquanto se ajusta &agrave; plataforma. Visite a <a href=\"https:\/\/wordpress.org\/themes\/\" target=\"_blank\" rel=\"noopener noreferrer\">biblioteca de temas oficiais<\/a> do <em>WordPress.org<\/em> e escolha o que mais encaixa com a tem&aacute;tica do seu site.&nbsp;<\/span><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/11\/biblioteca-de-temas.png\/public\" alt=\"biblioteca de temas wordpress.org\" class=\"wp-image-13184\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/11\/biblioteca-de-temas.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/11\/biblioteca-de-temas.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/11\/biblioteca-de-temas.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/11\/biblioteca-de-temas.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/11\/biblioteca-de-temas.png\/w=990,fit=scale-down 990w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p><span style=\"font-weight: 400\">Pesquise entre as diferentes op&ccedil;&otilde;es de tema sempre olhando a quantidade de avalia&ccedil;&otilde;es e atualiza&ccedil;&otilde;es que possui. Se o tema n&atilde;o tiver nenhum dos dois &eacute; bom ficar longe, pois provavelmente vai ser dor de cabe&ccedil;a na certa. Depois de escolher o tema, basta <\/span><a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/como-instalar-temas-do-wordpress\/\"><span style=\"font-weight: 400\">instalar e ativar<\/span><\/a><span style=\"font-weight: 400\">.<\/span><\/p><p><span style=\"font-weight: 400\">Vamos recomendar que voc&ecirc; utilize um plugin de <\/span><a href=\"https:\/\/athemes.com\/reviews\/best-wordpress-page-builder-plugins-compared\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">constru&ccedil;&atilde;o de sites do WordPress<\/span><\/a><span style=\"font-weight: 400\">. Essas ferramentas permitem a cria&ccedil;&atilde;o de sites estilosos facilmente. <\/span><\/p><p><span style=\"font-weight: 400\">O WordPress &eacute; at&eacute; considerado uma plataforma simples de usar, mas deixar o site com a apar&ecirc;ncia exata que voc&ecirc; deseja requer um pouco de esfor&ccedil;o e conhecimento. Com um construtor de sites, voc&ecirc; tem mais liberdade para mexer no layout do seu site.<\/span><\/p><p><span style=\"font-weight: 400\">Como voc&ecirc; j&aacute; deve imaginar existem muitos e muitos plugins de constru&ccedil;&atilde;o de sites no WordPress. Mas n&oacute;s somos inclinados ao <\/span><a href=\"https:\/\/wordpress.org\/plugins\/beaver-builder-lite-version\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">Beaver Builder<\/span><\/a><span style=\"font-weight: 400\"> devido &agrave; facilidade de uso e quantidade de ferramentas que possui.<\/span><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"892\" height=\"291\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/11\/beaver-builder.jpg\/public\" alt=\"construtor beaver builder para WordPress\" class=\"wp-image-13185\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/11\/beaver-builder.jpg\/w=892,fit=scale-down 892w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/11\/beaver-builder.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/11\/beaver-builder.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/11\/beaver-builder.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 892px) 100vw, 892px\" \/><\/figure><\/div><p><span style=\"font-weight: 400\">Aprender a <\/span><a href=\"https:\/\/kb.wpbeaverbuilder.com\/article\/393-i-installed-beaver-themer-now-what\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">fazer o layout de um site com esse plugin<\/span><\/a><span style=\"font-weight: 400\"> &eacute; bastante intuitivo. Com o Beaver Builder, voc&ecirc; tem acesso a uma grande cole&ccedil;&atilde;o de elementos que podem ser adicionados em suas p&aacute;ginas, basta arrastar at&eacute; o local desejado. Ent&atilde;o, voc&ecirc; pode editar cada elemento da maneira que preferir.<\/span><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"462\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/11\/construtor-de-sites-Beaver-Builder.jpg\/public\" alt=\"construtor de sites Beaver Builder\" class=\"wp-image-13186\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/11\/construtor-de-sites-Beaver-Builder.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/11\/construtor-de-sites-Beaver-Builder.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/11\/construtor-de-sites-Beaver-Builder.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/11\/construtor-de-sites-Beaver-Builder.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p><span style=\"font-weight: 400\">Se voc&ecirc; n&atilde;o &eacute; muito f&atilde; do Beaver Builder, n&atilde;o se preocupe. Existem diversas outras op&ccedil;&otilde;es dispon&iacute;veis. Depois de encontrar o plugin que mais se adequa &agrave;s suas necessidades, &eacute; hora de ir para a pr&oacute;xima etapa.<\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-4&ordm;-passo-saber-como-fazer-o-layout-de-um-site\"><b>4&ordm; Passo: Saber Como Fazer o Layout de um Site<\/b><\/h2><p><span style=\"font-weight: 400\">At&eacute; agora, cobrimos a parte mais t&eacute;cnica necess&aacute;ria sobre como fazer layout de um site. Agora, &eacute; hora que a criatividade entra em cena.<\/span><\/p><p><span style=\"font-weight: 400\">Neste momento, voc&ecirc; j&aacute; tem um site WordPress com um tema e construtor de sites instalados. O pr&oacute;ximo passo &eacute; pegar um papel e l&aacute;pis (sim, bem &ldquo;old school&rdquo;), que vamos utilizar para criar um esbo&ccedil;o do design do site.<\/span><\/p><p><span style=\"font-weight: 400\">Isso &eacute; chamado de &lsquo;mockup&rsquo;, ou um modelo, e n&atilde;o precisa ser algo muito detalhado. A parte importante &eacute; conter todos os elementos que voc&ecirc; quer ter no site. Claro que voc&ecirc; pode adicionar quantos detalhes desejar. O seu modelo vai servir como referencial no momento que for construir de fato seu site.<\/span><\/p><p><span style=\"font-weight: 400\">Se voc&ecirc; n&atilde;o &eacute; do tipo que cria com papel e l&aacute;pis, existem ferramentas <\/span><a href=\"https:\/\/blog.prototypr.io\/4-best-web-ui-mockup-tools-for-free-89a1513c3fcd\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">de cria&ccedil;&atilde;o de modelos no computador<\/span><\/a><span style=\"font-weight: 400\">. O ponto negativo &eacute; que essas ferramentas s&atilde;o um pouco complexas de se aprender.<\/span><\/p><p><span style=\"font-weight: 400\">De qualquer forma, revise seu modelo quantas vezes for necess&aacute;rio at&eacute; que voc&ecirc; esteja satisfeito com o resultado.&nbsp;<\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-5&ordm;-passo-trabalhe-no-prototipo-de-um-design\"><b>5&ordm; Passo: Trabalhe no Prot&oacute;tipo de um Design<\/b><\/h2><p><span style=\"font-weight: 400\">Depois do modelo estar pronto, &eacute; hora de come&ccedil;ar o site. Em outras palavras, vamos criar um prot&oacute;tipo.<\/span><\/p><p><span style=\"font-weight: 400\">Agora que voc&ecirc; tem um construtor de sites instalado, o pr&oacute;ximo passo &eacute; abri-lo com o editor do WordPress. Ent&atilde;o, voc&ecirc; vai poder adicionar elementos &agrave;s suas p&aacute;ginas da maneira que planejou no modelo.<\/span><\/p><p><span style=\"font-weight: 400\">&Eacute; claro que o processo varia de acordo com o plugin de constru&ccedil;&atilde;o de sites que voc&ecirc; escolheu. Entretanto, recomendamos que voc&ecirc; n&atilde;o se apegue muito aos detalhes neste momento, como fontes e cores. Mais tarde, voc&ecirc; vai poder refinar ainda mais o projeto.<\/span><\/p><p><span style=\"font-weight: 400\">A parte importante agora &eacute; construir um site com todos os elementos que voc&ecirc; planejou no momento. Com o prot&oacute;tipo pronto, voc&ecirc; vai poder tomar decis&otilde;es sobre elementos que n&atilde;o combinem com o seu layout. Esse &eacute; o momento de cuidar dos detalhes.<\/span><\/p><p><span style=\"font-weight: 400\">&Eacute; bastante comum o modelo sofrer diversas altera&ccedil;&otilde;es ao ser transformado em prot&oacute;tipo, mas isso &eacute; esperado. Da mesma maneira, &eacute; prov&aacute;vel que o primeiro prot&oacute;tipo n&atilde;o se pare&ccedil;a muito com o site conclu&iacute;do. <\/span><\/p><p><span style=\"font-weight: 400\">Al&eacute;m de que, o tempo que voc&ecirc; para terminar o site depende de qu&atilde;o perfeccionista voc&ecirc; &eacute;. Voc&ecirc; deve ter dezenas de elementos para mexer no momento. Ent&atilde;o, n&atilde;o tenha pressa.<\/span><\/p><p><span style=\"font-weight: 400\">Uma dica agora &eacute; n&atilde;o se preocupar muito com o conte&uacute;do do site. Para que seu prot&oacute;tipo fique pronto o quanto antes, utilize ferramentas como <\/span><a href=\"https:\/\/www.lipsum.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">text placeholders<\/span><\/a><span style=\"font-weight: 400\"> e <\/span><a href=\"https:\/\/blog.snappa.com\/free-stock-photos\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">stock images<\/span><\/a><span style=\"font-weight: 400\">. Depois que o layout estiver pronto, &eacute; s&oacute; substituir esses elementos pelos conte&uacute;dos reais do seu site.<\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-6&ordm;-passo-verifique-o-resultado-em-dispositivos-moveis\"><b>6&ordm; Passo: Verifique o Resultado em Dispositivos M&oacute;veis<\/b><\/h2><p><span style=\"font-weight: 400\">A essa altura, voc&ecirc; j&aacute; aprendeu a criar o design de um site. Mas ainda h&aacute; um &uacute;ltimo passo antes de podermos dizer que o seu layout &eacute; de qualidade. Ele &eacute;: verificar como o design ficou adaptado aos dispositivos m&oacute;veis.<\/span><\/p><p><span style=\"font-weight: 400\">Atualmente, o tr&aacute;fego de dispositivos m&oacute;veis <\/span><a href=\"https:\/\/www.stonetemple.com\/mobile-vs-desktop-usage-study\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">est&aacute; dominando a internet<\/span><\/a><span style=\"font-weight: 400\">, ent&atilde;o &eacute; essencial que seu site seja responsivo para mobile. Se o layout do site n&atilde;o carregar corretamente em um celular, muitos dos seus visitantes ficar frustrados frustrados e a <\/span><a href=\"https:\/\/support.google.com\/analytics\/answer\/1009409?hl=pt-BR\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">taxa de rejei&ccedil;&atilde;o<\/span><\/a><span style=\"font-weight: 400\"> vai s&oacute; aumentar, o que &eacute; algo a ser evitado.<\/span><\/p><p><span style=\"font-weight: 400\">A boa not&iacute;cia &eacute; que grande parte dos construtores de sites do WordPress (como o Beaver Builder) s&atilde;o compat&iacute;veis com dispositivos m&oacute;veis. Ou seja, os designs que voc&ecirc; criar neles v&atilde;o ser compat&iacute;veis com dispositivos m&oacute;veis sem precisar de muito esfor&ccedil;o.<\/span><\/p><p><span style=\"font-weight: 400\">Mas, ainda assim, &eacute; bom conferir manualmente como ficou o site em seu celular. Outra boa alternativa &eacute; utilizar o <\/span><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">Chrome&rsquo;s Dev Tools<\/span><\/a><span style=\"font-weight: 400\">, que permite a visualiza&ccedil;&atilde;o do seu site em diferentes resolu&ccedil;&otilde;es.<\/span><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"512\" height=\"356\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/11\/dev-tool-chrome.png\/public\" alt=\"ferramenta de desenvolvimento do Chrome\" class=\"wp-image-13188\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/11\/dev-tool-chrome.png\/w=512,fit=scale-down 512w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/11\/dev-tool-chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/11\/dev-tool-chrome.png\/w=300,fit=scale-down 300w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/figure><\/div><p><span style=\"font-weight: 400\">Para acessar o Dev Tools de seu navegador, clique com o bot&atilde;o direito do mouse na tela e clique no bot&atilde;o <\/span><b>Inspecionar<\/b><span style=\"font-weight: 400\">. No topo da p&aacute;gina voc&ecirc; vai ver a op&ccedil;&atilde;o de colocar uma resolu&ccedil;&atilde;o personalizada:<\/span><\/p><p><span style=\"font-weight: 400\">Se voc&ecirc; quer ser minucioso &ndash; e recomendamos que seja &ndash; verifique em diversas resolu&ccedil;&otilde;es para ter certeza que seu site vai funcionar corretamente em todas elas. <\/span><\/p><p><span style=\"font-weight: 400\">Se encontrar algum problema retorne ao construtor de sites e fa&ccedil;a as devidas altera&ccedil;&otilde;es. Depois de as altera&ccedil;&otilde;es terem sido feitas seu site vai estar pronto para o p&uacute;blico.<\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-o-que-faz-com-que-um-design-de-site-seja-efetivo\"><b>O Que Faz com Que um Design de Site Seja Efetivo?<\/b><\/h2><p><span style=\"font-weight: 400\">Um design de site &eacute; efetivo quando ele garante que a sua p&aacute;gina est&aacute; atingindo o seu prop&oacute;sito. Por exemplo, se voc&ecirc; possui um blog, o web design deve trabalhar para fazer com que a entrega do conte&uacute;do e a experi&ecirc;ncia de leitura seja mais agrad&aacute;vel para os seus leitores.<\/span><\/p><p><span style=\"font-weight: 400\">Contudo, todo site requer diferentes elementos para fazer com que o seu design seja mais efetivo. Aqui est&aacute; um resumo dos recursos que todos os sites devem ter:<\/span><\/p><ul class=\"wp-block-list\">\n<li><strong>Facilidade de uso<\/strong>. Todos os recursos e elementos devem ser acess&iacute;veis e f&aacute;ceis de usar.<\/li>\n\n\n\n<li><strong>Estrutura organizada<\/strong>. A organiza&ccedil;&atilde;o das p&aacute;ginas precisa ser l&oacute;gica para facilitar que o usu&aacute;rio localize a informa&ccedil;&atilde;o correta.<\/li>\n\n\n\n<li><strong>Legibilidade<\/strong>. As fontes, cores e o layout devem fazer com que o conte&uacute;do seja agrad&aacute;vel para um escaneamento r&aacute;pido.<\/li>\n\n\n\n<li><strong>Consist&ecirc;ncia est&eacute;tica<\/strong>. Todas as p&aacute;ginas da web deve empregar os mesmos elementos de design para manter harmonia visual, identidade de marca e facilidade de uso.<\/li>\n\n\n\n<li><strong>Otimiza&ccedil;&atilde;o de velocidade<\/strong>. Todo recurso de design deve ter uma fun&ccedil;&atilde;o que beneficia o usu&aacute;rio e o prop&oacute;sito do site. N&atilde;o pode haver redund&acirc;ncias que podem impactar a velocidade de carregamento.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-que-ferramentas-voce-pode-usar-para-melhorar-o-design-do-seu-site\"><b>Que Ferramentas Voc&ecirc; pode Usar para Melhorar o Design do seu Site?<\/b><\/h2><p><span style=\"font-weight: 400\">Agora que voc&ecirc; sabe como fazer o layout de um site, vamos discutir algumas ferramentas adicionais que podem levar o seu site ao pr&oacute;ximo n&iacute;vel:<\/span><\/p><ul class=\"wp-block-list\">\n<li><strong>Pacotes de &iacute;cones ou ilustra&ccedil;&otilde;es<\/strong>. Eles s&atilde;o &oacute;timos para fazer com que qualquer site se torne mais visualmente atraente. O <a href=\"https:\/\/www.drawkit.com\/\" target=\"_blank\" rel=\"noopener\">DrawKit<\/a> possui v&aacute;rias op&ccedil;&otilde;es gratuitas para diversas categorias da ind&uacute;stria. Muitos artistas tamb&eacute;m est&atilde;o dispon&iacute;veis para serem contratados em marketplaces de design, como o <a href=\"https:\/\/br.fiverr.com\/\" target=\"_blank\" rel=\"noopener\">Fiverr<\/a> ou o <a href=\"https:\/\/www.upwork.com\/\" target=\"_blank\" rel=\"noopener\">Upwork<\/a>.<\/li>\n\n\n\n<li><strong>Stock Photos<\/strong>. Escolha fotos que mostram <a href=\"https:\/\/vwo.com\/blog\/human-landing-page-increase-conversion-rate\/\" target=\"_blank\" rel=\"noopener\">rostos humanos<\/a> (link em ingl&ecirc;s), pois elas podem criar confian&ccedil;a quando usadas do jeito adequado. O <a href=\"https:\/\/unsplash.com\/\" target=\"_blank\" rel=\"noopener\">Unsplash<\/a> &eacute; um excelente lugar para procurar por esse tipo de imagem de gra&ccedil;a. N&atilde;o se esque&ccedil;a de escolher apenas fotos de alta qualidade para manter a credibilidade.<\/li>\n\n\n\n<li><strong><a href=\"\/br\/tutoriais\/construtor-de-paginas-wordpress\">Plugins de cria&ccedil;&atilde;o de p&aacute;ginas<\/a><\/strong>. Este tipo de ferramenta &eacute; para os usu&aacute;rios do WordPress que querem incorporar ao CMS a experi&ecirc;ncia de usar um construtor de sites de arrastar e soltar. Um exemplo conhecido &eacute; o Beaver Builder, que j&aacute; citamos aqui neste artigo.<\/li>\n\n\n\n<li><strong>Criador de Logos<\/strong>. Considere esta ferramenta se voc&ecirc; n&atilde;o possui um branding para o seu neg&oacute;cio ainda, e n&atilde;o est&aacute; pensando em contratar um designer. Ele pode gerar um logo profissional em minutos. Use o <a href=\"\/br\/criador-de-logo\">criador de logo da Hostinger<\/a> para criar uma logomarca profissional e impactante para seu layout de site.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/www.canva.com\/pt_br\/\" target=\"_blank\" rel=\"noopener\">Canva<\/a><\/strong>. Este software de design freemium &eacute; excelente para criar banners para sites e imagens de destaque para posts de blogs. Tamb&eacute;m &eacute; &oacute;timo para edi&ccedil;&otilde;es de fotos de &uacute;ltima hora.<\/li>\n<\/ul><figure class=\"wp-block-image size-large\"><a href=\"\/br\/criador-de-sites\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-32917\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><b>Conclus&atilde;o<\/b><\/h2><p><span style=\"font-weight: 400\">Se voc&ecirc; possui um site com apar&ecirc;ncia profissional, ent&atilde;o j&aacute; venceu metade da batalha. Com um bom design, as pessoas tendem a prestar mais aten&ccedil;&atilde;o ao que voc&ecirc; tem a dizer, aumentando a probabilidade de convers&otilde;es. <\/span><\/p><p><span style=\"font-weight: 400\">A boa not&iacute;cia &eacute; que voc&ecirc; n&atilde;o precisa ser profissional para fazer um site fant&aacute;stico. Voc&ecirc; s&oacute; precisa seguir algumas dicas, usar as ferramentas corretas e estar disposto a investir em tempo e esfor&ccedil;o.<\/span><\/p><p><em><span style=\"font-weight: 400\">Ficou com alguma d&uacute;vida sobre como fazer o design de um site? Pergunte na se&ccedil;&atilde;o de coment&aacute;rios logo abaixo! <\/span><\/em><span style=\"font-weight: 400\">\ud83d\ude09<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Existem dois fatores que bons sites possuem em comum: excelentes conte&uacute;dos e um layout de tirar o f&ocirc;lego. Se o design do seu site n&atilde;o &eacute; l&aacute; tudo aquilo, seu conte&uacute;do n&atilde;o vai se destacar e voc&ecirc; vai perder visitantes. Isso querc dizer que voc&ecirc; precisa come&ccedil;ar a pensar na apar&ecirc;ncia do site assim que [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/br\/tutoriais\/como-fazer-o-layout-de-um-site\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":92,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Como Fazer o Layout de Um Site (em 6 Passos)","rank_math_description":"Vai come\u00e7ar um site novo, mas n\u00e3o tem ideia de como fazer o design dele? Veja como fazer o layout de um site agora mesmo! S\u00e3o 6 etapas!","rank_math_focus_keyword":"como fazer o layout de um site","footnotes":""},"categories":[4941],"tags":[6039,6028,6029,6038,6030,6027,6026,6037],"class_list":["post-13175","post","type-post","status-publish","format-standard","hentry","category-desenvolvimento-web","tag-criar-design-de-site","tag-criar-layout-para-site","tag-design-de-site","tag-design-para-site","tag-fazer-design-de-site","tag-fazer-layout-de-site","tag-layout-de-site","tag-layout-para-site"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-design-a-website","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-fazer-o-layout-de-um-site","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/comment-concevoir-un-site-web","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/desain-website","default":0},{"locale":"de-DE","link":"https:\/\/www.hostinger.com\/de\/tutorials\/website-neu-gestalten","default":0},{"locale":"it-IT","link":"https:\/\/www.hostinger.com\/it\/tutorial\/come-progettare-un-sito-web","default":0},{"locale":"nl-NL","link":"https:\/\/www.hostinger.com\/nl\/tutorials\/website-ontwerpen","default":0},{"locale":"pl-PL","link":"https:\/\/www.hostinger.com\/pl\/tutoriale\/jak-zaprojektowac-strone-internetowa","default":0},{"locale":"ar-AE","link":"https:\/\/www.hostinger.com\/ae\/tutorials\/how-to-design-a-website","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-design-a-website","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-design-a-website","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-design-a-website","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-fazer-o-layout-de-um-site","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-design-a-website","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-design-a-website","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-design-a-website","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-design-a-website","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/13175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/92"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=13175"}],"version-history":[{"count":40,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/13175\/revisions"}],"predecessor-version":[{"id":50359,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/13175\/revisions\/50359"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=13175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=13175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=13175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}