{"id":19118,"date":"2018-04-14T10:31:15","date_gmt":"2018-04-14T13:31:15","guid":{"rendered":"https:\/\/powertic.com\/?p=19118"},"modified":"2019-10-09T16:59:32","modified_gmt":"2019-10-09T19:59:32","slug":"grapejs-editor","status":"publish","type":"post","link":"https:\/\/powertic.com\/pt-br\/grapejs-editor\/","title":{"rendered":"GrapeJS \u00e9 um promissor editor de e-mails OpenSource"},"content":{"rendered":"

GrapeJS \u00e9 um projeto Open Source dispon\u00edvel no Github<\/a> que estamos acompanhando h\u00e1 algum tempo em alternativa ao Topol.io (que atualmente \u00e9 nosso editor favorito) e re\u00fane todos os benef\u00edcios do Open Source, desenvolvimento de componentes customizados, suporte ao MJML e \u00e9 bem f\u00e1cil de implementar dentro de qualquer sistema. Vale a pena investir seu tempo neste projeto!<\/p>\n\n\n\n

Editor HTML Visual com GrapeJS<\/h2>\n\n\n\n

O GrapeJS \u00e9 um editor de HTML visual f\u00e1cil de utilizar e que facilita muito a composi\u00e7\u00e3o de e-mails em HTML com uma interface amig\u00e1vel onde voc\u00ea pode formatar fontes, criar layouts com tabelas e inserir imagens rapidamente.<\/p>\n\n\n\n

Voc\u00ea pode utilizar o GrapeJS em websites, newsletters e apps.<\/p>\n\n\n\n

\"GrapleJS<\/a>
GrapeJS Editor<\/figcaption><\/figure><\/div>\n\n\n\n


GrapeJS no Github
<\/a><\/p>\n\n\n\n

De um modo geral o GrapeJS l\u00ea uma \u00e1rea de uma p\u00e1gina e transforma essa \u00e1rea em um editor visual de HTML e CSS. Voc\u00ea pode desenvolver seus pr\u00f3prios templates e componentes utilizando apenas HTML e Javascript. Empresas de todos os tipos podem incorporar o GrapeJS em seus apps ou sistemas para que os usu\u00e1rios utilizem uma interface incr\u00edvel para criar conte\u00fado.<\/p>\n\n\n\n

Componentes simples com Arraste e Solte na tela<\/h2>\n\n\n\n

GrapeJS oferece uma s\u00e9rie de componentes iniciais que voc\u00ea pode utilizar facilmente em seus projetos e voc\u00ea poder\u00e1 criar seus pr\u00f3prios blocos de conte\u00fado facilmente utilizando estes componentes iniciais.<\/p>\n\n\n\n

A interface do GrapeJS \u00e9 f\u00e1cil de utilizar e foi pensada no usu\u00e1rio final oferecendo \u00edcones e op\u00e7\u00f5es consistentes para que a curva de aprendizado seja m\u00ednima e a produtividade seja ainda maior.<\/p>\n\n\n\n

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

Ajustes finos de Largura e Altura<\/h2>\n\n\n\n

Um dos principais pontos do GrapeJS \u00e9 a facilidade em ajustar propriedades complexas do HTML e aplicar CSS atrav\u00e9s de propriedades simples e f\u00e1ceis de entender.  Voc\u00ea pode ajustar altura, largura, padding e margin com apenas alguns cliques.<\/p>\n\n\n\n

Tipografia com GrapeJS<\/h2>\n\n\n\n

Ajuste todas as op\u00e7\u00f5es de tipografia como fam\u00edlia de fontes, tamanho, peso, altura, cor e altura da linha.<\/p>\n\n\n\n

O Alinhamento vertical e horizontal tamb\u00e9m \u00e9 f\u00e1cil de ser ajustado e voc\u00ea ainda pode aplicar sombras para facilitar a leitura.<\/p>\n\n\n\n

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


<\/a>

<\/a><\/p>\n\n\n\n

Cores, Bordas e Background<\/h2>\n\n\n\n

As cores de fundo de elementos e as bordas poder\u00e3o melhorar o aspecto visual dos seus blocos de conte\u00fado. Com o GrapeJS voc\u00ea pode arrendondar bordas, ajustar largura e cor e tamb\u00e9m a posi\u00e7\u00e3o interna dos elementos.<\/p>\n\n\n\n

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


<\/a><\/p>\n\n\n\n

Design Responsivo<\/h2>\n\n\n\n

O GrapleJS oferece todas as ferramentas necess\u00e1rias para que voc\u00ea possa otimizar o fluxo de trabalho na composi\u00e7\u00e3o de e-mails e landing pages e tamb\u00e9m permite que voc\u00ea crie componentes para acelerar seus preocessos. Voc\u00ea poder\u00e1 realizar ajustes finos em templates e p\u00e1ginas para Desktop, Tablet e Mobile.<\/p>\n\n\n\n

O c\u00f3digo \u00e9 seu!<\/h2>\n\n\n\n

Ao final da edi\u00e7\u00e3o da sua p\u00e1gina ou e-mail voc\u00ea poder\u00e1 capturar todo o HTML necess\u00e1rio para colocar seu projeto nos trilhos. Se voc\u00ea montar uma newsletter o c\u00f3digo gerado j\u00e1 est\u00e1 com o CSS inline e compactado para que voc\u00ea tenha o trabalho apenas de enviar seu e-mail no Mautic<\/a>.<\/p>\n\n\n\n

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


<\/a><\/p>\n\n\n\n

Come\u00e7e a utilizar o GrapleJS hoje mesmo!<\/h2>\n\n\n\n

Voc\u00ea poder\u00e1 baixar o GrapleJS atrav\u00e9s do website oficial<\/a> ou no reposit\u00f3rio do Github<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"

GrapeJS \u00e9 um projeto Open Source dispon\u00edvel no Github que estamos acompanhando h\u00e1 algum tempo em alternativa ao Topol.io com desenvolvimento de componentes customizados, suporte ao MJML e \u00e9 bem f\u00e1cil de implementar dentro de qualquer sistema.<\/p>","protected":false},"author":4,"featured_media":41908,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[62],"tags":[],"class_list":["post-19118","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-open-source"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/powertic.com\/pt-br\/wp-json\/wp\/v2\/posts\/19118","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/powertic.com\/pt-br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/powertic.com\/pt-br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/powertic.com\/pt-br\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/powertic.com\/pt-br\/wp-json\/wp\/v2\/comments?post=19118"}],"version-history":[{"count":0,"href":"https:\/\/powertic.com\/pt-br\/wp-json\/wp\/v2\/posts\/19118\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/powertic.com\/pt-br\/wp-json\/wp\/v2\/media\/41908"}],"wp:attachment":[{"href":"https:\/\/powertic.com\/pt-br\/wp-json\/wp\/v2\/media?parent=19118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/powertic.com\/pt-br\/wp-json\/wp\/v2\/categories?post=19118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/powertic.com\/pt-br\/wp-json\/wp\/v2\/tags?post=19118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}