Category: wordpress page-builder

Saiba quais são as vantagens do Elementor Pro para construção de websites

12 de novembro de 2022

Saiba quais são as vantagens do Elementor Pro para construção de websites

d

Você sabe quais são as vantagens do Elementor Pro para construção de páginas Web?

Nesse artigo você verá para que serve esse plugin e se realmente vale a pena assinar a opção PRO para ajudar no desenvolvimento do seu site.

Caso você não saiba o Elementor é um plugin utilizado para a criação de páginas para a internet. Ele é um plugin WordPress com a função de Page Builder, que traduzido, significa construtor de páginas.

Esse plugin permite você a criar sites dentro do WordPress, mesmo que você não seja um programador e não entenda muito bem sobre o assunto. Isso porque ele conta com uma grande quantidade de recursos, como por exemplo os Widgets para facilitar essa atividade.

Por meio dele, se torna possível criar páginas com o famoso clica e arrasta, facilitando os seus projetos e principalmente otimizando grande parte do seu tempo.

Visto que o plugin é oficial do WordPress, é importante ressaltar que mais de 30% dos sites que existem no mundo, são feitos com WordPress. E como o Elementor é um dos plugins mais utilizados neste gerenciador dá para concluir que é comum encontrar sites desenvolvidos com esse PageBuilder.

Leia mais: O que é Elementor WordPress page builder?

Mas o fato é que Elementor conta com duas possibilidades de aquisição, a opção FREE em que o usuário não paga nada e pode fazer o download e ativação dentro do painel do WordPress, e a versão PRO, essa conta com uma grande opção ferramentas.

Ainda neste artigo vamos comparar as versões Pro e Free do Elementor e também entenderemos:

Como funciona o Elementor Free?

Como funciona o Elementor Pro?

Quais são as vantagens do Elementor Pro?

Entenda os planos oferecidos

Vale a pena comprar o Elementor Pro?

Como funciona o Elementor Free?

Com o Elementor Free, você também pode realizar a criação de suas página web. No entanto, esse opção oferece um número menor de possibilidades quando comparado com o Elementor PRO. Ou seja, em muitos casos você não terá acesso para utilizar algumas opções e recursos importantes.

Sabendo disso é importante que antes de começar seu projeto você já conheça quais são as funcionalidades que seu site irá fornecer aos usuários e se a versão Free do Elementor é o suficiente para desenvolve-las.

Entre as possibilidades que você encontra no Elementor Free se destacam:

Design Responsivo;

50 Widgets básicos;

Mais de 30 modelos básicos;

5 Kits de modelos de sites;

É possível ainda incrementar uma instalação WordPress que utiliza a Elementor FREE com a utilização de alguns addons que a Comunidade WordPress disponibiliza através de plugins específicos para em conjunto com o Elementor.

Mas mesmo assim as possibilidades ficam nem abaixo se comparando com o Elementor PRO. Então se você está disposto investir para poder ter em mãos os recursos da versão paga no próximo tópico você entenderá como funciona o Elementor PRO.

Como funciona o Elementor Pro?

Para que você trabalhe o Elementor PRO você precisa já ter a versão FREE instalada no seu site WordPress.

Como já dito a versão paga do Elementor possibilita trabalhar com um maior número de funcionalidades além dos widgets encontrados na versão FREE.

Só para você entender, os widgets são os recursos que quando arrastados para a tela de edição do Elementor caracterizam a funcionalidade para determinado elemento da tela e também possibilita configurar o aspecto visual que o elemento terá.

Com o Elementor PRO você terá acesso a widgets mais avançados que possibilitam a criar elementos de interfaces para páginas web, que você não conseguiria na versão gratuita e que demoraria muito tempo para desenvolver sem o uso deste widgets.

Você também terá acesso a construtor de temas widgets que possibilitam criar páginas de forma dinâmicas com partes do layout (headers, footers, 404 page, global archives, etc) que podem ser reutilizados conforme conteúdo a ser exibido. Exemplos de uso: blogs e lojas WooCommerce.

Isso mesmo, a opção paga oferece uma grande quantidade de funcionalidades e principalmente diversas ferramentas que a opção gratuita não possui. Entenda a seguir quais são as vantagens do Elementor PRO.

Quais são as vantagens do Elementor PRO?

No final ao adquirir o Elementor Pro oferece você terá muitas vantagens além da facilidade de uso que já uma característica deste PageBuilder. Pensando nisso, veja a seguir quais benefícios você pode contar ao utilizar esse plugin pago:

Possibilidade de integração com plataformas de Marketing Digital e capturas de e-mails, como Mailchimp, por exemplo;

Construção de formulários avançados;

Ampla biblioteca de templates para criação de uma página de captura;

Possibilidade de criação de blogs e fornecimento de Layouts para páginas de posts e conteúdos dinâmicos;

Integração com o WooCommerce para criação e estilização de Lojas Virtuais;

Construção de temas com o Theme Builder;

Licença de 1 ano de atualização;

Suporte aos compradores.

Quais os planos oferecidos do Elementor PRO?

Agora que você já sabe as principais vantagens do Elementor PRO, é importante ressaltar que você pode contar com determinados planos. Esses são desde a opção mais simples, até a mais profissional, que conta com uma grande quantidade de funcionalidades. São eles:

Essencial, uso ilimitado em 1 site;

Avançado, esse pode ser usado em até 3 sites.

Especialista, uso ilimitado para até 25 sites.

E o plano para Agências, com possibilidade de ativação em até 1000 sites.

Em todas as opções de plano, você conta com até 30 dias de garantia e 1 ano de suporte e também atualizações. Ao pagar uma vez, você conquista a licença perpétua, ou seja, pode usar para sempre.

Vale a pena comprar o Elementor PRO?

Afinal, vale a pena comprar o Elementor PRO?

Sim, vale a pena adquirir essa opção. Pois facilita ainda mais a construção das suas páginas, característica que já é padrão na versão FREE.

Esse construtor é definitivamente uma mão na roda tanto para projetos próprios, quanto para você poder criar os sites dos seus clientes.

Podemos concluir então que o Elementor é um ótimo plugin, podendo ser considerado até mesmo como um dos melhores Page Builders encontrados, por oferecer uma grande quantidade funcionalidades, pela facilidade de uso e pelo ganho de tempo no desenvolvimento.

E você já usou a versão PRO do Elementor? Deixe então seu comentário sobre a utilização desta ferramenta.
The post Saiba quais são as vantagens do Elementor Pro para construção de websites appeared first on Chief of Design.

Saiba quais são as vantagens do Elementor Pro para construção de websites
Fonte: Chef of Design

Como adicionar ícones e imagens SVG no Elementor

30 de agosto de 2019

Como adicionar ícones e imagens SVG no Elementor

Hoje, neste artigo, você vai aprender a adicionar arquivos SVG no WordPress especificamente usando Elementor.

O que você acha de utilizar imagens que podem ser redimensionadas infinitamente sem perder qualidade ou nitidez? Você consegue imaginar como isso é útil para o design responsivo? Isso é o que o SVG tem de melhor podemos implementar este recurso dentro do WordPress.

Olá! Ed Francisco aqui e mostrarei a você como utilizar a biblioteca de arquivos SVG do Elementor para inserir ícones e gráficos SVG no WordPress contrapondo ao uso das tradicionais imagens bitmap na web.

Mais antes de qualquer coisa vamos entender o que é SVG.

O que é SVG?

O Scalable Vector Graphics (SVG) é um formato de imagem vetorial baseado em XML para gráficos bidimensionais formados através de expressões matemáticas cuja as instruções inseridas produzem formas preenchidas e que oferece suporte para interatividade e animação.

Se você trabalha com Adobe Illustrator, Inkscape ou Corel Draw você sabe que eles geram arquivos do tipo vetor e o SVG é um deles.

Diferentemente dos arquivos de imagens bitmap (como JPG, PNG, GIF, etc) os vetores não são formados por pixels. O pixel, como tem dimensão física, perde a nitidez quando redimensionado. Coisa que não acontece com o SVG e arquivos vetoriais. Você pode aumentar ou diminuir o tamanho sem perda de resolução ou desfocagem. Eles são extremamente leves e mantêm suas páginas enxutas.

Diferença entre imagem Bitmap e Vetor – Por Wikipédia

As imagens SVG poder ser usadas em logotipos, como ícones até como background e podem ser modificados através de CSS e Javascript.

Inserindo gráficos SVG através do Controles do Widgets de ícones do Elementor

A partir da versão 2.6 do Elementor se tornou nativo o suporte para inserção de gráficos vetoriais sem a necessidade da utilização de plugins para isso.

Com isso você pode usar qualquer widget para inserção de ícones que através de seus controles você poderá inserir em seu site Elementor dois tipos de recursos SVG:

ícones;imagens SVG.

Vou mostrar como proceder começando com as imagens.

Inserindo imagens SVG no Elementor

Para inserir uma imagem SVG no Elementor você pode utilizar qualquer dos widgets nativos de ícones da plataforma (ícones, lista de ícones, ícones sociais), mas se for a primeira que você for inserir será necessário habilitar o upload. Veja como proceder.

1 – No campo de busca de widget digite “ícone” depois escolha qual widget você quer escolher arrastando-o para a interface da página.

2 – Depois coloque o Mouse em cima do símbolo do ícone na área de edição do ícone e clique na opção “Upload SVG”.

3 – Aparecerá uma mensagem de alerta sobre os riscos de usar arquivos SVG mesmo o Elementor executando processos para eliminação de códigos maliciosos (falarei mais sobre segurança mais a frente). Você deve clicar em Ativar.

4 – Você será redirecionado para a biblioteca de mídia, onde poderá escolher entre as imagens que estão lá presente ou fazer upload de uma imagem em seu computador.

5 – A imagem então será inserida no bloco que você arrastou o widget.

Estilizando imagem inserida

Depois que você insere a imagem o widget oferece, na aba conteúdo, de inserção de link, alinhamento e modo de visualização (default, empilhado e emoldurado) e na aba de estilização opções onde você pode definir a cor do elemento, e com controles deslizantes, o tamanho, se deseja rotacioná-la e efeitos hover.

Questões de segurança envolvendo arquivos SVG

Você já sabe que o Elementor irá tentar proteger o sistema caso identifique arquivos SVG com códigos maliciosos. Isso porque o WordPress não suporta uploads de arquivos SVG por padrão por questão de segurança.

Os arquivos SVG contêm código na linguagem de marcação XML, semelhante ao HTML. Seu navegador analisa a linguagem de marcação XML para exibir a imagem. No entanto, isso abre seu site para possíveis vulnerabilidades XML como obter acesso não autorizado a dados do usuário, disparar ataques de força bruta entre outros ataques.

Com isso pode ocorrer o seguinte erro quando você for fazer o upload de uma imagem SVG.

“Invalid SVG Format, file not uploaded for security reasons” (Formato SVG inválido, arquivo não enviado por motivos de segurança).

Solução 1 para o arquivo não enviado – Otimização

Não que isso influencie diretamente na segurança, mas é indicado que você salve os arquivos SVG de aplicativos como o Illustrator, sem os estilos embutidos, para permitir que o Elementor crie um estilo para o ícone.

Para isso na guia de salvamento “SVG Options” em CSS Properties escolha a opção “Presentation Attributes”.

Após isso você pode fazer uma otimização online através do site SVGOMG que poderá “limpar” seu arquivo de modo a ser aceito no upload na biblioteca de mídia.

Você pode tanto fazer o upload do seu SVG usando a opção “Open SVG” ou a opção “Paste Markup” para colocar o código XML fornecido pelo Illustrator conforme vídeo que deixarei a seguir.

Vá até a aba Markup e faça os ajustes conforme o vídeo. Depois clique no botão azul para fazer o download do arquivo SVG otimizado.

Após esse processo faça novamente o upload do arquivo.

Solução 2 para o arquivo não enviado – Sanitização com plugin

Apesar que em todos os casos práticos que eu precisei o método 1 foi o suficiente existe um plugin que promete que faça o upload de SVG de forma segura. Se trata do Save SVG. 

A função deste plugin é certificar de que as imagens SVG estão higienizados para impedir que as vulnerabilidades do arquivo afetem seu site.

O seu uso é simples. Basta fazer a instalação e ativação. A versão gratuita não necessita fazer configurações.

Onde encontrar boa fontes de imagens SVG

Caso você não tenha tempo para criar suas próprias imagens SVG um bom recurso é visitar o site Flaticon que é um dos maiores bancos de imagens vetorizadas da internet.

Inserindo ícones SVG no Elementor

Para inserir um ícone SVG no Elementor você pode utilizar qualquer dos widgets nativos de ícones da plataforma (ícones, lista de ícones, ícones sociais).

1 – No campo de busca de widget digite “ícone” depois escolha qual widget você quer escolher arrastando-o para a interface da página.

2 – Depois coloque o mouse em cima do símbolo do ícone na área de edição do ícone e clique na opção “Icon library” (Biblioteca de ícones).

3 – Você terá acesso a biblioteca de fontes SVG Font Awesome 5 adicionada nesta versão do Elementor, que está com um desempenho para carregamento das páginas. Navegue pelas diferentes opções na Biblioteca de ícones.e selecione o ícone de sua preferência e clique em Insert.

Estilizando o ícone inserido

Depois que você insere o ícone o widget oferece, na aba conteúdo, de inserção de link, alinhamento e modo de visualização (default, empilhado e emoldurado) e na aba de estilização opções onde você pode definir a cor do elemento, e com controles deslizantes, o tamanho, se deseja rotacioná-la e efeitos hover.

Inserindo ícones personalizados

Talvez você não tenha encontrado na Icon Library o ícone que você deseja. Então você inserir um ícone de uma fonte externa na biblioteca. O processo é simples basta que você clique na opção “Upload”. 

Único problema que este recurso é só para quem tem a versão PRO do Elementor instalada no WordPress. Mas ainda sim é possível fazer upload dos ícones através do plugin Custom Icons for Elementor.

Faça instalação do plugin. Para saber como instalar plugins leia este artigo.

Você terá acesso a interface de upload do ícone acesso o menu Custom Icons. E você pode personalizar seus ícones usando o site Flaticon em conjunto com o site Fontello.

Processo de construção do ícone personalizado

1 – Vá até o site Flaticon e escolha uma imagem que você seja transformar em ícone e faça o download da imagem.

2 – Depois vá até a pasta onde está o arquivo baixado e o arraste para dentro do site Fontello no campo Custom Icons.

3 – A imagem aparecer neste campo em forma de miniatura. Clique nela para selecionar.

4 – Depois vá no botão Download Webfont e clique para baixá-la.

5 – Vá até a interface de upload do Custom Icons e execute o upload do arquivo baixado.

6 – Retorne até a página que está editando o Elementor recarregue-a e executa o processo de inserir um ícone através de um widget como já mostrado nesse artigo.

7 – Você verá que a Icon Library mostra acesso para inserção que você criou no Fontello. Selecione o ícone e clique em Inserir.

8  – O ícone será inserido na área desejada.

Conclusão

Procurei passar as formas que a partir da versão do Elementor você te permita inserir arquivos SVG em seus sites WordPress. Esses arquivos serão cada vez mais usados onde pode ser mais compensador a aplicação que a aplicação de imagens bitmaps. Lógico que sempre haverá espaço para tanto imagens vetoriais quanto bitmaps. A necessidade do projeto é que vai definir o uso.

Caso a escolha seja SVG é importante estar sempre atento às questões de segurança sanitização os arquivos e verificando a procedência.

Acredito que muito ainda irá evoluir esta relação entre Design Responsivo, SVG, Elementor e WordPress a ponto de nos forçar a sempre estar atualizando este artigo. E isso será sinal de mais funcionalidades e facilidades para o usuário WordPress. 

E você o que achou do recurso para habilitação de arquivos SVG no Elementor? Dê sua opinião nos comentários!

Aproveite e compartilhe este artigo com os amigos.

Abraço!
The post Como adicionar ícones e imagens SVG no Elementor appeared first on Chief of Design.

Como adicionar ícones e imagens SVG no Elementor
Fonte: Chef of Design

O que é Elementor WordPress page builder?

29 de agosto de 2019

O que é Elementor WordPress page builder?

Eae, tudo bele?

Este artigo é para você está procurando por Elementor WordPress. Aqui eu vou te mostrar o que é esse page builder e como você pode utilizar o WordPress Elementor Page Builder em seus sites.

O Elementor é uma ferramenta do WordPress, CMS do mundo. CMS é o acrônimo de Content Management System — que traduzindo significa, sistema de gerenciamento de conteúdo, existem vários no mercado, porém nada supera o WordPress em termos de possibilidades, suporte e ferramentas.

Os gerenciados de conteúdo permitem criar sites mesmo sem saber programar, eles contam com templates, plugins e outras ferramentas que nos possibilitam tal facilidade. E no caso específico do WordPress, temos milhares de possibilidades de criação, desde blogs até lojas virtuais e grandes sites. Aqui no Brasil, temos alguns exemplos como o site da Toyota, da editora Abril, do Rock in Rio, da Gisele Bündchen e até mesmo o blog do Wix (vejam só hehehe) é feito em WordPress.Só para você ter uma ideia, mais de 30% dos sites em todo o mundo são feitos com o WordPress. E o Elementor é o plugin mais utilizado (ou um dos mais, depende de quando você estiver lendo esse artigo) e baixados e utilizados de toda a plataforma.

Então neste artigo você verá como utilizar esse page builder e começar a criar os seus próprios sites de forma simples e intuitiva.

O que é o Elementor WordPress?

Caso você não saiba Elementor WordPress é plugin de page-builder para o CMS WordPress. Com ele é possível criar páginas de sites em uma interface real-time e do tipo “drag&drop”, ou seja, clicando e arrastando.

O plugin Elementor é um dos mais populares na comunidade WordPress, se tornando o principal page-builder da plataforma. Para utilizar o Elementor, basta ter um site em WordPress. Caso você não saiba instalar o WordPress ou nem sabe do que se trata, sugiro que leia esse outro artigo.

Abaixo você pode conferir uma live que fiz utilizando a ferramenta e como em pouco menos de 1 hora eu criei um site sem mexer em código, praticamente apena “clicando e arrastando”.

Quais os benefícios do Elementor WordPress?

O principal benefício é poder criar páginas de modo rápido, simples (clicando e arrastando) e sem precisar mexer em código. Podemos listar como alguns, dos vários benefícios que o Elementor pode proporcionar para você que precisa criar páginas web, como:

A curva de aprendizagem é relativamente rápida e simples;
você não precisa comprar a versão pro (mas é muito bom se puder);
existem vários produtores de temas, plugins e addons;
é um dos plugins mais utilizados pela comunidade do WordPress;
não precisa de conhecimentos em programação (mas é bom se souber);
não precisa de conhecimentos em HTML e CSS (mas é muito bom se souber);
ele funciona independente do tema que estiver utilizando, permitindo adicionar e deletar elemento em páginas e posts.

Como instalar o Elementor WordPress?

A instalação é bem simples. Basta você acessar o site diretório de plugin do wordpress, procurar pelo Elementor e depois clicar na opção “download”.

Você também tem a opção de acessar o próprio painel de controle do seu site em WordPress, depois ir em: Plugins> Adicionar Novo. NO campo de pesquisa você deve procurar por “Elementor“.

Abaixo deixo um vídeo tutorial que gravei mostrando como você instala o Elementor em seu site WordPress.

O vídeo acima faz parte de um curso de Elementor WordPress que gravei aqui para os seguidores do Chief of Design. Caso queira aprender mais, clique aqui.

Como usar o Elementor WordPress?

Após instalar o Elementor, basta você criar uma nova página ou post. Depois, clique em “Editar com o Elementor” e pronto. A partir disso você será redirecionado para a tela de criação da página, onde você poderá configurar e construir a página sua maneira.

Como já dito, o Elementor é um construtor de páginas to tipo “clica e arrasta”.Para você começar a criar a página, você vai adicionando elementos e literalmente construindo a sua página dessa maneira.

Em meu canal no Youtube eu tenho uma playlist onde mostro o passo a passo para você começar a trabalhar com o Elementor. Caso queira aprender mais, clique aqui.

O Elementor WordPress é pago?

Sim e não. Você pode usar tanto a verão free quanto a paga. Existem essas duas versões, gratuita e paga, do software, porém em ambas você consegue as suas páginas. É isso mesmo que você leu! Caso você não tenha dinheiro para comprar o plugin, é possível instalá-lo e utilizá-lo.

Também é possível, mesmo na versão free, instalar “addons” e outros plugins que atuam em conjunto com Elementor WordPress, potencializando as funcionalidades e possibilidades de criação de páginas.

A grande diferença entre a versão paga, chamada de Elementor PRO, e a gratuita está nas funcionalidades da ferramenta.

A versão paga do Elementor é muito mais completa, pois contém várias funcionalidades que a verão gratuita não tem. Para conhecer a versão PRO e todos os seus benefícios, clique aqui.

Quanto custa a versão paga do Elementor WordPress?

A versão paga do Elementor está disponível atualmente em três planos.

O plano “Personal” para uso ilimitado em 1 site, está por $49.
O plano “Plus” para uso ilimitado em até 3 sites, está por $99.
O plano “Expert” para uso ilimitado em até 1000 sites, está por $199.

Em todos os planos você tem 30 dias de garantia e 1 ano de suporte e atualizações. A licença é perpetua e você pode utilizá-la para sempre.

O preço sempre é aplicado em dólar americano, então dependendo do câmbio do momento, o valor pode ser maior ou menor.
Para conhecer a versão PRO e todos os seus benefícios, clique aqui.

Vale a pena comprar a versão paga do Elementor WordPress?

Sim, super vale a pena. O Elementor facilita de mais a construção de páginas web e sites completos. E o mais legal que você pode criar os sites dos seus clientes com ele. Não tem problema algum. Por isso, o investimento tende a se pegar ao longo do tempo, caso você atue como freelancer.

Caso você não trabalhe com sites, mesmo assim a versão Elementor PRO vai te ajudar, pois vai te ajudar a poupar muito tempo e com as funcionalidades exclusivas da versão paga você terá mais agilidade e controle sobre o seu projeto.
Você pode conhecer a versão PRO e todos os seus benefícios, clique aqui neste link.

Considerações

O Elementor WordPress com certeza está entre os melhores page-builders da atualidade,na minha opinião é o melhor e mais completo que existe.

A facilidade que o Elementor nos dá na hora de criar páginas, a sua versão free com bastante recursos e mais todo o suporte da comunidade com a criação de novas ferramentas e resoluções de bugs é muito grande.

Se você deseja aprender a utilizar essa ferramenta, eu tenho uma boa notícia para você.

Em meu canal no Youtube eu tenho uma série de vídeos onde mostro como você pode começar a criar os seus próprios sites com o Elementor. Clique aqui para conferir.

E você já utiliza o Elementor? Deixe abaixo a sua opinião, relato ou dica sobre esse plugin.

Forte abraço.

Até mais.
The post O que é Elementor WordPress page builder? appeared first on Chief of Design.

O que é Elementor WordPress page builder?
Fonte: Chef of Design