Gerador de Background Online Automático

Neste artigo vou te mostrar um gerador de background online automático.

De quebra, vou entregar um BÔNUS te ensinando a usar apenas o código do SVG como fundo.

Já te adiantando: você não vai precisar fazer o download e depois upload da imagem! Vamos copiar e colar um código.

Nada de arquivo pra lá e pra cá!!

Em outras palavras: o gerador de fundo online não vai nem precisar baixar a imagem para o seu computador.

É copiar e colar!!

Passo1 – Gerador de Background Online: link e dicas

O primeiro passo para acessar é ir até o link: https://superdesigner.co

Veja que existem outras ferramentas além do gerador de background online.

Clique em “Start Creating”

Na próxima tela você verá uma lista com algumas ferramentas.

Desça e clique em “Generate background”

Na próxima tela você verá as seguintes opções

• Background type
• Canvas size
• Background
• Colors
• Layout
• Type
• Layers
• Peaks

Agora basta escolher o tipo de fundo (background) que vai usar, e começar a brincar com as opções.

Você pode ir combinando todas estas variáveis para chegar a infinitos fundos para seu site.

Passo 2 – Usando o código SVG como fundo

Agora para usar somente o código SVG como background, vamos precisar converter este código.

É muito simples.

Passo 2.1 – Exportar o código do gerador de background online

Após criar o seu fundo, basta exportar.

Existem 4 oções:

• SVG
• PNG
• JPG
• Copy SVG

… e nós vamos usar a última: Copy SVG!

Basta clicar no botão que ele vai copiar o código para a área de transferência.

Passo 2.2 – Converter o código do SVG

Para usar o código do SVG como fundo, vamos precisar transformá-lo…

… mas é simples demais

Vá até este link: https://yoksel.github.io/url-encoder/

Lá você verá esta tela

Você precisará colar o seu código que foi copiado.

Cole no campo “Insert SVG:”

E agora basta copiar o CSS que foi gerado automaticamente!

No campo “Ready for CSS” clique em “Copy”

Passo 3 – Colando o código na seção do Elementor

Crie uma página nova ou use uma que você já tenha.

Agora basta editar com Elementor, criar uma seção no Elementor e…

ir… até a aba “Avançado”

Desça até “CSS personalizado” e cole o CSS que foi copiado.

E pronto. Temos aqui nosso container (ou seção) com o fundo.

Veja que você não precisa mais salvar a imagem no seu computador.

Você deixa o site mais leve e mais fácil de alterar.

Se gostou desse artigo, me conta no WhatsApp.

Se ficou com alguma dúvida, tb pode perguntar no WhatsApp

Landing Page

Se você é corretor de imóveis, conheça minha Landing Page para Corretor de Imóveis aqui.