{"id":125299,"date":"2022-04-05T11:50:46","date_gmt":"2022-04-05T11:50:46","guid":{"rendered":"https:\/\/elementor.com\/blog\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/"},"modified":"2025-12-28T10:30:59","modified_gmt":"2025-12-28T08:30:59","slug":"apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/","title":{"rendered":"Apresentando o Elementor 3.6: Aproveite os Cont\u00eaineres Flexbox para Criar Designs de Alto Desempenho e Responsivos"},"content":{"rendered":"\n

No Elementor 3.6, introduzimos os Cont\u00eaineres Flexbox, uma nova estrutura de layout otimizada que traz o CSS<\/a> Flexbox para o Editor. Esta estrutura permite-lhe alcan\u00e7ar designs responsivos<\/a> perfeitamente precisos e layouts altamente avan\u00e7ados rapidamente, e com uma marca\u00e7\u00e3o muito mais enxuta, o que melhora significativamente o desempenho. Esta funcionalidade marca uma mudan\u00e7a transformadora na forma como os websites s\u00e3o constru\u00eddos utilizando o construtor do Elementor e \u00e9 a base para uma variedade de capacidades adicionais e avan\u00e7adas. <\/p>\n\n

Os Cont\u00eaineres Flexbox s\u00e3o um novo bloco de constru\u00e7\u00e3o no Elementor que lhe permitem dispor, alinhar e distribuir itens em um Cont\u00eainer de maneira eficiente, leve e responsiva. Com os Cont\u00eaineres Flexbox, voc\u00ea pode colocar widgets<\/a> diretamente dentro do Cont\u00eainer, bem como aninhar Cont\u00eaineres infinitamente. Em seguida, voc\u00ea pode controlar o layout e a distribui\u00e7\u00e3o dos widgets dentro do Cont\u00eainer, e ajustar seu conte\u00fado para cada tamanho de tela, resultando em maior responsividade, sem comprometer a velocidade, e sem escrever uma \u00fanica linha de c\u00f3digo. <\/p>\n\n

Ap\u00f3s v\u00e1rios meses na Edi\u00e7\u00e3o de Desenvolvimento, e tendo implementado muitos feedbacks da comunidade, introduzimos os Cont\u00eaineres Flexbox como um Experimento Alpha.<\/p>\n\n

Quando o experimento estiver ativado, voc\u00ea poder\u00e1 adicionar novos Cont\u00eaineres a uma p\u00e1gina em vez de Se\u00e7\u00f5es, Colunas e Se\u00e7\u00f5es Internas. Voc\u00ea tamb\u00e9m poder\u00e1 adicionar Cont\u00eaineres a uma p\u00e1gina existente que foi previamente constru\u00edda com o layout de Se\u00e7\u00e3o-Coluna. Com o experimento ativado, voc\u00ea n\u00e3o poder\u00e1 adicionar novas Se\u00e7\u00f5es ou Colunas \u00e0s suas p\u00e1ginas. <\/p>\n\n

Experimente Primeiro no Playground de Cont\u00eaineres Flexbox<\/h2>\n\n

Como os Cont\u00eaineres s\u00e3o uma nova forma de construir estruturas de websites no Elementor, esta vers\u00e3o \u00e9 acompanhada por material educacional adicional, incluindo o Playground de Cont\u00eaineres Flexbox<\/a>. Este playground inclui 10 li\u00e7\u00f5es para ajud\u00e1-lo a se familiarizar com o design de layouts usando Cont\u00eaineres Flexbox. <\/p>\n\n

Por favor, note<\/strong>: Os experimentos devem ser usados com cautela \u2014 as funcionalidades s\u00e3o introduzidas como Experimentos quando incluem mudan\u00e7as infraestruturais que podem impactar seu website de maneiras imprevistas. Saiba mais sobre experimentos aqui<\/a>. <\/p>\n\n

Se voc\u00ea desativar o experimento, cada Cont\u00eainer que voc\u00ea criar ser\u00e1 removido do seu website, mas voc\u00ea poder\u00e1 restaur\u00e1-los se reativar o experimento e reverter para uma revis\u00e3o anterior. <\/p>\n\n

Nota Importante Sobre a Vers\u00e3o 3.6 do Elementor<\/strong><\/p>\n\n

Quando o Elementor 3.6 foi lan\u00e7ado inicialmente em 22 de mar\u00e7o, alguns usu\u00e1rios encontraram problemas t\u00e9cnicos devido \u00e0 incompatibilidade com plugins de terceiros. Imediatamente lan\u00e7amos um patch com o Elementor 3.6.1, que deve resolver a maioria das ocorr\u00eancias deste problema reduzindo as regras de aplica\u00e7\u00e3o de erros, e permitir\u00e1 que o Editor carregue.<\/p>\n\n

Qual \u00e9 a Diferen\u00e7a Entre Cont\u00eaineres e Se\u00e7\u00f5es?<\/h2>\n\n
\"\"<\/figure>\n\n

Quando voc\u00ea ativar o experimento de Cont\u00eaineres, poder\u00e1 adicionar Cont\u00eaineres \u00e0 sua p\u00e1gina, bem como arrastar Cont\u00eaineres para a Tela, ou para dentro de outro Cont\u00eainer usando o widget do Painel do Editor. Vossa Senhoria tamb\u00e9m notar\u00e1 que as bordas do Container apresentam uma tonalidade de azul mais escura do que as bordas da Se\u00e7\u00e3o. <\/p>\n\n

Abaixo, encontram-se algumas diferen\u00e7as t\u00e9cnicas adicionais entre Containers e Se\u00e7\u00f5es. <\/p>\n\n

<\/td>Estrutura de Containers Flexbox<\/strong><\/td>Estrutura de Se\u00e7\u00e3o-Coluna<\/strong><\/td><\/tr>
Adicionando-o \u00e0 sua p\u00e1gina<\/strong><\/td>Adicione um Container no Editor utilizando o s\u00edmbolo ‘+’, ou arraste o widget Container para o Editor<\/td>Adicione uma se\u00e7\u00e3o no editor utilizando o s\u00edmbolo ‘+’<\/td><\/tr>
Localiza\u00e7\u00e3o do widget <\/strong><\/td>Diretamente dentro de um Container<\/td>Em uma Coluna, dentro de uma Se\u00e7\u00e3o<\/td><\/tr>
Largura do widget<\/strong><\/td>Em linha por padr\u00e3o <\/td>Largura total por padr\u00e3o <\/td><\/tr>
Aninhamento<\/strong><\/td>Aninhamento Infinito <\/td>Uma Se\u00e7\u00e3o Interna <\/td><\/tr>
Dire\u00e7\u00e3o do widget <\/strong><\/td>Coluna, Linha, Coluna Reversa ou Linha Reversa<\/td>Coluna ou Posicionamento em Linha<\/td><\/tr>
Design responsivo<\/strong><\/td>Ordem personalizada de widgets ou Containers para cada dispositivo<\/td>Coluna Reversa ou Duplica\u00e7\u00e3o de Se\u00e7\u00f5es<\/td><\/tr>
Alinhamento <\/strong><\/td>Flex-Start, Flex-Center, Flex-End<\/td>Esquerda, Centro, Direita<\/td><\/tr>
Hiperliga\u00e7\u00e3o<\/strong><\/td>Envolva o container para criar uma hiperliga\u00e7\u00e3o<\/td>Crie uma hiperliga\u00e7\u00e3o para um widget, n\u00e3o para uma se\u00e7\u00e3o ou coluna<\/td><\/tr><\/tbody><\/table><\/figure>\n\n

Os Containers Flexbox Transformar\u00e3o a Forma Como Vossa Senhoria Constr\u00f3i Websites<\/h2>\n\n

Com os Containers Flexbox, Vossa Senhoria pode criar layouts simples e avan\u00e7ados rapidamente, al\u00e9m de melhorar a experi\u00eancia do usu\u00e1rio e o desempenho. Abaixo est\u00e3o alguns exemplos de como:<\/p>\n\n

Criar Layouts Perfeitos em Pixels Com uma Marca\u00e7\u00e3o Enxuta, Rapidamente<\/h3>\n\n
\"\"<\/figure>\n\n

Anteriormente, se Vossa Senhoria desejasse criar um layout de website<\/a> que inclu\u00edsse v\u00e1rios widgets em uma linha, seria necess\u00e1rio definir a largura de cada widget como em linha, o que cria um fluxo de trabalho redundante, ou criar uma se\u00e7\u00e3o com v\u00e1rias colunas dentro dela, o que prejudica o desempenho. Por exemplo, se Vossa Senhoria desejasse criar uma se\u00e7\u00e3o de logotipos com 4 logotipos em uma linha, com se\u00e7\u00f5es e colunas, seria necess\u00e1rio definir a largura de cada logotipo como em linha ou criar uma se\u00e7\u00e3o com 4 colunas e colocar um logotipo em cada uma. <\/p>\n\n

Com os Containers Flexbox, Vossa Senhoria pode utilizar um \u00fanico container, adicionar todos os logotipos desejados e alterar a dire\u00e7\u00e3o do Container de coluna para linha, para visualizar todos os logotipos em uma \u00fanica linha, com apenas um clique. Vossa Senhoria tamb\u00e9m pode aproveitar o controle Justify Content para distribuir os logotipos como desejar dentro do Container. <\/p>\n\n

Personalize Completamente Seu Design para Cada Breakpoint<\/h3>\n\n
\"\"<\/figure>\n\n

Ao projetar seu website, \u00e9 importante considerar como ele se apresentar\u00e1 em diferentes dispositivos. Um design que funciona em desktop pode n\u00e3o proporcionar a mesma experi\u00eancia de usu\u00e1rio em uma tela menor, como a de um dispositivo m\u00f3vel. Aproveitando o poder do CSS Flexbox, Vossa Senhoria pode personalizar o design de seu website para cada dispositivo. \u00c9 poss\u00edvel alterar a dire\u00e7\u00e3o, ordem, alinhamento e distribui\u00e7\u00e3o dos itens dentro do Container para cada dispositivo, sem a necessidade de criar Containers duplicados. Isso resulta em uma experi\u00eancia de usu\u00e1rio aprimorada, sem afetar o desempenho do seu website. <\/p>\n\n

Facilite Experi\u00eancias de Usu\u00e1rio Intuitivas Com Containers Clic\u00e1veis<\/h3>\n\n

Alguns designs levam os visitantes a pensar que toda a \u00e1rea de conte\u00fado ser\u00e1 clic\u00e1vel – como em um cart\u00e3o. No entanto, ao tentar clicar, eles t\u00eam dificuldade em encontrar a \u00e1rea do cart\u00e3o que \u00e9 realmente clic\u00e1vel. Com os Containers, Vossa Senhoria pode envolver todo o Container e adicionar um link a ele, tornando o Container inteiro clic\u00e1vel, o que cria uma experi\u00eancia altamente intuitiva para seus visitantes. <\/p>\n\n

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

Aninhamento Infinito de Containers para Criar Layouts Avan\u00e7ados<\/h3>\n\n

Os Containers Flexbox capacitam Vossa Senhoria a criar layouts avan\u00e7ados mais rapidamente. Enquanto com o layout de Se\u00e7\u00e3o-coluna seria poss\u00edvel colocar apenas uma \u00fanica Se\u00e7\u00e3o interna dentro de uma Coluna, com os Containers Flexbox Vossa Senhoria pode aninhar Containers infinitamente. O aninhamento de Containers permitir\u00e1 que Vossa Senhoria defina diferentes dire\u00e7\u00f5es e alinhamentos para cada um, criando rapidamente layouts altamente avan\u00e7ados. <\/p>\n\n

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

Aproveite o Poder do CSS Flexbox no Editor do Elementor<\/h2>\n\n

Os Containers Flexbox, introduzidos como um experimento, representam um salto qu\u00e2ntico em flexibilidade de design. Com o experimento ativado, Vossa Senhoria poder\u00e1 aproveitar todos os benef\u00edcios do CSS Flexbox no Editor do Elementor, o que lhe permitir\u00e1 criar designs sofisticados muito mais rapidamente e com muito menos sa\u00edda DOM. Al\u00e9m dos benef\u00edcios imediatos de flexibilidade de design, os Containers tamb\u00e9m s\u00e3o a base de diversos recursos empolgantes que est\u00e3o por vir, portanto, fique atento e experimente-os primeiramente no Playground<\/a>. <\/p>\n","protected":false},"excerpt":{"rendered":"

O Elementor 3.6 marca o primeiro passo em uma s\u00e9rie de atualiza\u00e7\u00f5es infraestruturais que transformar\u00e3o a maneira como voc\u00ea constr\u00f3i websites. <\/p>\n","protected":false},"author":2024207,"featured_media":125300,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[292,324],"tags":[432],"marketing_persona":[],"marketing_intent":[49],"class_list":["post-125299","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor-pt","category-new-features-pt","tag-video"],"acf":[],"yoast_head":"\nApresentando o Elementor 3.6: Aproveite os Cont\u00eaineres Flexbox para Criar Designs de Alto Desempenho e Responsivos<\/title>\n<meta name=\"description\" content=\"O Elementor 3.6 marca o primeiro passo em uma s\u00e9rie de atualiza\u00e7\u00f5es infraestruturais que transformar\u00e3o a maneira como voc\u00ea constr\u00f3i websites, come\u00e7ando com os Cont\u00eaineres Flexbox. A utiliza\u00e7\u00e3o desta funcionalidade permitir-lhe-\u00e1 criar designs perfeitamente precisos, responsivos e otimizados.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Apresentando o Elementor 3.6: Aproveite os Cont\u00eaineres Flexbox para Criar Designs de Alto Desempenho e Responsivos\" \/>\n<meta property=\"og:description\" content=\"O Elementor 3.6 marca o primeiro passo em uma s\u00e9rie de atualiza\u00e7\u00f5es infraestruturais que transformar\u00e3o a maneira como voc\u00ea constr\u00f3i websites, come\u00e7ando com os Cont\u00eaineres Flexbox. A utiliza\u00e7\u00e3o desta funcionalidade permitir-lhe-\u00e1 criar designs perfeitamente precisos, responsivos e otimizados.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-05T11:50:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-28T08:30:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Introducing-Flexbox-Containers_BLOG-COVER.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2400\" \/>\n\t<meta property=\"og:image:height\" content=\"1256\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Gabriella Laster\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gabriella Laster\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/\"},\"author\":{\"name\":\"Gabriella Laster\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/840e05baf69a34292aefbd48f3372a2a\"},\"headline\":\"Apresentando o Elementor 3.6: Aproveite os Cont\u00eaineres Flexbox para Criar Designs de Alto Desempenho e Responsivos\",\"datePublished\":\"2022-04-05T11:50:46+00:00\",\"dateModified\":\"2025-12-28T08:30:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/\"},\"wordCount\":1293,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Introducing-Flexbox-Containers_BLOG-COVER.png\",\"keywords\":[\"V\u00eddeo\"],\"articleSection\":[\"Elementor\",\"Novos recursos\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/\",\"name\":\"Apresentando o Elementor 3.6: Aproveite os Cont\u00eaineres Flexbox para Criar Designs de Alto Desempenho e Responsivos\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Introducing-Flexbox-Containers_BLOG-COVER.png\",\"datePublished\":\"2022-04-05T11:50:46+00:00\",\"dateModified\":\"2025-12-28T08:30:59+00:00\",\"description\":\"O Elementor 3.6 marca o primeiro passo em uma s\u00e9rie de atualiza\u00e7\u00f5es infraestruturais que transformar\u00e3o a maneira como voc\u00ea constr\u00f3i websites, come\u00e7ando com os Cont\u00eaineres Flexbox. A utiliza\u00e7\u00e3o desta funcionalidade permitir-lhe-\u00e1 criar designs perfeitamente precisos, responsivos e otimizados.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Introducing-Flexbox-Containers_BLOG-COVER.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Introducing-Flexbox-Containers_BLOG-COVER.png\",\"width\":2400,\"height\":1256},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/pt-br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Novos recursos\",\"item\":\"https:\/\/elementor.com\/blog\/pt-br\/category\/new-features-pt\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Apresentando o Elementor 3.6: Aproveite os Cont\u00eaineres Flexbox para Criar Designs de Alto Desempenho e Responsivos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/pt-br\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/840e05baf69a34292aefbd48f3372a2a\",\"name\":\"Gabriella Laster\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d05a13ed44651430b9565d128ead6845482cddcafc9c725e89ecf083b78288e9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d05a13ed44651430b9565d128ead6845482cddcafc9c725e89ecf083b78288e9?s=96&d=mm&r=g\",\"caption\":\"Gabriella Laster\"},\"description\":\"Gabriella is a Product Marketing Director at Elementor, where she helps bridge the gap between complex web technology and seamless user experiences. With a decade of experience in marketing and entrepreneurship, she\u2019s passionate about empowering creators to build their digital dreams.\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/author\/gabriellal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Apresentando o Elementor 3.6: Aproveite os Cont\u00eaineres Flexbox para Criar Designs de Alto Desempenho e Responsivos","description":"O Elementor 3.6 marca o primeiro passo em uma s\u00e9rie de atualiza\u00e7\u00f5es infraestruturais que transformar\u00e3o a maneira como voc\u00ea constr\u00f3i websites, come\u00e7ando com os Cont\u00eaineres Flexbox. A utiliza\u00e7\u00e3o desta funcionalidade permitir-lhe-\u00e1 criar designs perfeitamente precisos, responsivos e otimizados.","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:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/","og_locale":"pt_BR","og_type":"article","og_title":"Apresentando o Elementor 3.6: Aproveite os Cont\u00eaineres Flexbox para Criar Designs de Alto Desempenho e Responsivos","og_description":"O Elementor 3.6 marca o primeiro passo em uma s\u00e9rie de atualiza\u00e7\u00f5es infraestruturais que transformar\u00e3o a maneira como voc\u00ea constr\u00f3i websites, come\u00e7ando com os Cont\u00eaineres Flexbox. A utiliza\u00e7\u00e3o desta funcionalidade permitir-lhe-\u00e1 criar designs perfeitamente precisos, responsivos e otimizados.","og_url":"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2022-04-05T11:50:46+00:00","article_modified_time":"2025-12-28T08:30:59+00:00","og_image":[{"width":2400,"height":1256,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Introducing-Flexbox-Containers_BLOG-COVER.png","type":"image\/png"}],"author":"Gabriella Laster","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Escrito por":"Gabriella Laster","Est. tempo de leitura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/"},"author":{"name":"Gabriella Laster","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/840e05baf69a34292aefbd48f3372a2a"},"headline":"Apresentando o Elementor 3.6: Aproveite os Cont\u00eaineres Flexbox para Criar Designs de Alto Desempenho e Responsivos","datePublished":"2022-04-05T11:50:46+00:00","dateModified":"2025-12-28T08:30:59+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/"},"wordCount":1293,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Introducing-Flexbox-Containers_BLOG-COVER.png","keywords":["V\u00eddeo"],"articleSection":["Elementor","Novos recursos"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/","url":"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/","name":"Apresentando o Elementor 3.6: Aproveite os Cont\u00eaineres Flexbox para Criar Designs de Alto Desempenho e Responsivos","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Introducing-Flexbox-Containers_BLOG-COVER.png","datePublished":"2022-04-05T11:50:46+00:00","dateModified":"2025-12-28T08:30:59+00:00","description":"O Elementor 3.6 marca o primeiro passo em uma s\u00e9rie de atualiza\u00e7\u00f5es infraestruturais que transformar\u00e3o a maneira como voc\u00ea constr\u00f3i websites, come\u00e7ando com os Cont\u00eaineres Flexbox. A utiliza\u00e7\u00e3o desta funcionalidade permitir-lhe-\u00e1 criar designs perfeitamente precisos, responsivos e otimizados.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Introducing-Flexbox-Containers_BLOG-COVER.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Introducing-Flexbox-Containers_BLOG-COVER.png","width":2400,"height":1256},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-6-aproveite-os-conteineres-flexbox-para-criar-designs-de-alto-desempenho-e-responsivos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/pt-br\/"},{"@type":"ListItem","position":2,"name":"Novos recursos","item":"https:\/\/elementor.com\/blog\/pt-br\/category\/new-features-pt\/"},{"@type":"ListItem","position":3,"name":"Apresentando o Elementor 3.6: Aproveite os Cont\u00eaineres Flexbox para Criar Designs de Alto Desempenho e Responsivos"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/pt-br\/#website","url":"https:\/\/elementor.com\/blog\/pt-br\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/pt-br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/pt-br\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/840e05baf69a34292aefbd48f3372a2a","name":"Gabriella Laster","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d05a13ed44651430b9565d128ead6845482cddcafc9c725e89ecf083b78288e9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d05a13ed44651430b9565d128ead6845482cddcafc9c725e89ecf083b78288e9?s=96&d=mm&r=g","caption":"Gabriella Laster"},"description":"Gabriella is a Product Marketing Director at Elementor, where she helps bridge the gap between complex web technology and seamless user experiences. With a decade of experience in marketing and entrepreneurship, she\u2019s passionate about empowering creators to build their digital dreams.","url":"https:\/\/elementor.com\/blog\/pt-br\/author\/gabriellal\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/125299","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/users\/2024207"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/comments?post=125299"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/125299\/revisions"}],"predecessor-version":[{"id":125301,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/125299\/revisions\/125301"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media\/125300"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media?parent=125299"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/categories?post=125299"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/tags?post=125299"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/marketing_persona?post=125299"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/marketing_intent?post=125299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}