Category: elementor plugin para wordpress

Como adicionar ícones e imagens SVG no Elementor

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?

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