Jump to content

Website Antharas Wordpress Elementor Template + Tutorial Completo


Kelvin

Recommended Posts

  • Kelvin changed the title to Website Antharas Wordpress Elementor Template + Tutorial Completo

864225892d3656609c1c7362adf220ee.jpg

esse ti tu liau, ta uma maravilhax.

 

Olá, Seja bem vindo, deixei de fazer videos faz tempo, mas ainda tenho canal! KKK Eram bons videos, muita coisa bacana, mas cansei! Agora só desenvolvo! KAKAK 
Se tiver dúvidas, mande uma mensagem!

▶️ youtube.com/allaanz1n
🌐 allanalc [Discord]

Link to comment
Share on other sites

13 horas atrás, Kelvin disse:

Salveeeeeee!

Rapaziada, trouxe mais um share fresquinho para vocês que precisam de um site de luxo!

This is the hidden content, please

Levei um tempinho preparando isso, então, aproveite!

Esse material será uma base All In One que após instalada vai te permitir importar outros modelos que estão por vir sem a necessidade de novas instalações.

Ao final do procedimento seu site ficará semelhante ao exemplo abaixo:

This is the hidden content, please

image.jpeg
Versão Desktop

image.jpeg
Versão Mobile (Smartphones)

O site foi construido com Wordpress + Elementor com todos os plugins 100% Free
Já falamos sobre wordpress e elementor em outra postagem aqui no forum.

VAMOS COMEÇAR ENTÃO?
FIZ ESSE GUIA COM MUITO CARINHO E ESPERO QUE AJUDE VOCÊS.
NÃO ESQUEÇA DE COMENTAR NA POSTAGEM CASO TENHA ALGUMA DIFICULDADE, OK?

🛠 GUIA DE INSTALAÇÃO

Antes de iniciar quero que você aprenda um pouco de como e onde o site pode ser instalado.


🌐 NOMES DE DOMÍNIOS

Para que as pessoas acessem um site é necessário que ele seja encontrado na internet de uma maneira fácil.
Imagine precisar acessar a L2JBrasil e ao invés de por o .com no final ter que digitar 196.88.214.75...
Seria complicado não acha?

Pois é, um nome de domínio vai ter possibiltar ser facilmente encontrado através de um nome+extensão:
L2JBrasil = nome, .com = extensão.


📂 HOSPEDAGEM PARA SITES

image.jpeg
Esse é um exemplo de painel de controle para hospedagem e ele será seu melhor amigo!


É um serviço indispensável para armazenar os arquivos de um site e é a responsável por processar e entregar o conteúdo para os usuários. 
Considere usar planos de hospedagem de empresas que te oferecam certificado SSL, backup, email e o mínimo de proteção incluso no plano.
E uma recomendação importante, use uma hospedagem com LITESPEED WEB SERVER o seu site irá voar!!!

This is the hidden content, please


Isso e muito mais você pode encontrar em qualquer

This is the hidden content, please
 🤑

 

Domínios precisam de tempo de vida para criarem autoridade e poderem aparecer no google por exemplo.
O quanto antes seu domínio for registrado e o conteúdo do site estiver público mais rápido você poderá começar a ser rankeado.

Uma hospedagem com domínio te possibilita usar certificados SSL e garantir aquele selo de:


🔒SITE SEGURO!
image.jpeg

VAMOS LÁ, RECORTEI OS VÍDEOS A SEGUIR PRA GARANTIR QUE VOCÊ CONSIGA INSTALAR SEU WORDPRESS RAPIDÍNHO...
 

Escolha um plano de hospedagem
 
 
 
 
Instale um certificado SSL
 
 
 
 
Instale o Wordpress
 
 
 
 


Se você chegou até aqui vamos partir para a importação do template!

Logue no painel admin do seu Wordpress através do seudominio.com/wp-admin, procure no menu lateral por Plugins -> Adicionar Novo.

Pesquise por All-In-One WP Migration, clique em Instalar agora e aguarde o processo de instalação ser concluído para cliquar em ativar.

image.jpeg
Caso o plugin mostre alguma mensagem de falha na instalação não se preocupe.
Apenas vá em Plugins instalados e ele estará lá, basta clicar em ATIVAR.


IMPORTE O TEMPLATE

Passei um tempão editando esse template para entregar um setup bem simples, então presta atenção!
Logue ou crie uma conta para poder baixar o arquivo em anexo, ele está em .zip precisa descompactar antes de enviar!



👇🏽👇🏽👇🏽👇🏽👇🏽
L2JBrasil_Antharas_Layout_WordPress_Elementor_TemplateSet.zip 
☝☝☝☝☝
 

Com o arquivo em anexo no seu computador, procure no MENU lateral do painel admin do wordpress o plugin
All-In One WP Migration -> Importar -> Importar a partir de -> Arquivo.

image.jpeg


O envio e preparação do backup pode levar alguns minutos dependendo do seu plano de hospedagem então paciência!

Após o upload ser finalizado, clique em continuar.

image.jpeg


Se tudo ocorrer bem uma mensagem de sucesso será mostrada e você poderá clicar em finalizar.

image.jpeg


 

ATENÇÃO!!!

Após clicar em finalizar e navegar para qualquer página o Wordpress ira recarregar e solicitar que você logue novamente. 
Suas redenciais de admin anteriores serão perdidas, use o usuário e senha abaixo:

Login: admin
Senha: 2jEiCss76PtkB%zx18cE3xIE

image.jpeg

Mude essa senha imediatamente! Caso contrário algum espertinho, desocupado tentará logar com esses dados e bagunçar o teu rolé!
Sério, MUDE A SENHA ASSIM QUE LOGAR, vou te mostrar como:

Vá no menu lateral do painel admin do Wordpress, procure por Usuários -> Perfil -> Nova senha -> Definir nova senha e escolha uma senha mais complexa que 123mudar ok? Clique em Atualizar perfil e sua senha será alterada.
 

image.jpeg



Top! Agora vamos instalar alguns plugins para que o site funcione 100%!!!

Volte ao menu lateral do Wordpress, procure por:
Plugins -> Adicionar Novo -> Pesquisar Plugins

Escreva na caixa de pesquisa o nome de cada um desses plugins e instale-os 1 a 1 sem ativa-los!

Elementor
Essentials Addons For Elementor
Elementor Header & Footer Builder
CookieYes |GDPR Cookie Consent
Polylang
Polylang Connect for Elementor
Really Simple SSL
Yoast SEO
LiteSpeed Cache

Tudo instalado? Volte ao menu lateral do painel admin do Wordpress e procure por
Plugins -> Plugins Instalados.
Ativar todos os plugins que listei acima.

image.jpeg

Se você chegou até aqui...
Parabéns!!!!!!!

This is the hidden content, please

Agora, acesse o seu domínio e veja o seu novo site instalando!

image.jpeg

CONTEÚDO EXTRA

Se você quer saber mais sobrer elementor e como editar o layout por favor veja minha outra postagem sobre o tema:
 

PERFORMANCE

O Wordpress apesar de ser levinho não recomendo usarem hospedagens grátis ou serviços como wamp, xampp etc.
Além de necessitar de uma série de ajustes, torna todo o processo mais complicado e provavelmente vai te fazer desistir.

E como a minha ideia é facilitar a tua vida! Todo esse site será restaurado por 1 único plugin 😗!

O Wordpress voa em hospedagem que usam LiteSpeed como motor web principal, lembre-se disso!

Poderá encontrar um plano ideal para seu site WordPress com LiteSpeed na

This is the hidden content, please
qualquer plano dispoe dessa tecnologia e você não precisará configurar nada 💗.

Esse template possui uma performance de 100/100 no

This is the hidden content, please
 utilizando um host com LiteSpeed + LiteSpeed Cache Plugin então cuidado para não forçar seus visitantes a baixarem imagens e gifs de 25mbps na sua home, não dá pra obrar milagre né? :P.
Sempre otimize dimensões e tamanhos das imagens pelo menos!

image.png

Por enquanto é isso, fica ligado na L2JBrasil que já já trago mais opções 😉

Excelente conteúdo, bem feito, bem explicado... muita dedicação envolvida... obrigado pelo apoio a comunidade irmão, sucesso sempre!!!

LOGO EB 600X150.png

Link to comment
Share on other sites

14 minutos atrás, Kelvin disse:

Somente a thumb o conteúdo dá play e pausa no momento que interessa deles.

mim referi a estes mano

image.png.dfac480bf5263a9ea959a9e0a04743ea.png

São iguais o link deles 

" Os homens tendem a acreditar sobretudo naquilo que menos compreendem. "

Link to comment
Share on other sites

34 minutos atrás, -= JRGames =- disse:

mim referi a estes mano

image.png.dfac480bf5263a9ea959a9e0a04743ea.png

São iguais o link deles 

é o mesmo vídeo porém ele postou com a minutagem sobre o assunto que ele aborda, pode notar que se você der play em cada um deles você vai iniciar em uma parte diferente do vídeo!

Link to comment
Share on other sites

Consegui finalizar com sucesso a criação do site..

 

Gostaria de agradecer imensamente a paciencia do @Kelvin em ajudar os membros da comunidade. 

 

Estou muito feliz com os resultados.

 

Obs: Se eu consegui voces conseguem!

Uma observação que ficou faltando, foi a animação da logo no site,  pra ficar meio que pulsando! @Kelvin

Link to comment
Share on other sites

  • L2JBr ADM
22 horas atrás, Arthur Ferreira disse:

Consegui finalizar com sucesso a criação do site..

Gostaria de agradecer imensamente a paciencia do @Kelvin em ajudar os membros da comunidade. 

Estou muito feliz com os resultados.

Obs: Se eu consegui voces conseguem!

Uma observação que ficou faltando, foi a animação da logo no site,  pra ficar meio que pulsando! @Kelvin

Parabéns meu brother, fico muito feliz de ler isso!

Pra ativar animações você precisa do Elementor Pro. Mas tem uns macetes que dá pra fazer com o free e ter o mesmo resultado xD.

Você fala por a logo no centro da pagina inicial e deixar ela pulsando automático?

Link to comment
Share on other sites

Em 06/02/2023 at 17:54, Kelvin disse:

Parabéns meu brother, fico muito feliz de ler isso!

Pra ativar animações você precisa do Elementor Pro. Mas tem uns macetes que dá pra fazer com o free e ter o mesmo resultado xD.

Você fala por a logo no centro da pagina inicial e deixar ela pulsando automático?

exatamente, deixar ela pulsando!

Link to comment
Share on other sites

9 horas atrás, Kelvin disse:

@Arthur Ferreira

Tá na mão o conteúdo que você pediu meu querido:

Mais uma vez salvando a janta kkk

 

Uma coisa que eu gostaria de lembrar voce é postar algo sobre resoluções de monitores diferentes. Está tendo diferenças

 

Obs: mais uma video aula que acompanhando eu consegui fazer. Obrigado! 

Edited by Arthur Ferreira
Link to comment
Share on other sites

  • L2JBr ADM

@Arthur Ferreira o elementor usa diversas medidas de CSS como o modelo tem alguns em PX e outros em EM causa isso, realmente é algo que preciso melhor, vou atualizar o template e corrigir isso. Mas você pode tentar, vou te explicar por cima como cada medida funciona: 

image.png

 

Quando se trata de unidades de medida em CSS, as principais unidades utilizadas são px, em, rem e vh. Cada uma dessas unidades possui uma finalidade específica e pode ser utilizada em diferentes situações. 

px (pixels): é a unidade de medida mais comum em CSS. Um pixel é uma unidade de medida fixa que não se altera independentemente do tamanho da tela ou do dispositivo. É uma unidade útil para definir tamanhos precisos, como bordas ou espaçamentos entre os elementos no editor.

em: é uma unidade de medida relativa que é baseada no tamanho da fonte do elemento pai. 1em é igual ao tamanho da fonte do elemento pai. Se a fonte do elemento pai for 16px, um elemento com um tamanho de fonte de 1em terá um tamanho de fonte de 16px. É uma unidade útil para definir tamanhos de fonte escaláveis.

rem: é uma unidade de medida relativa que é baseada no tamanho da fonte do elemento raiz (<html>). Um rem é igual ao tamanho da fonte do elemento raiz. Se a fonte do elemento raiz for 16px, um elemento com um tamanho de fonte de 1rem terá um tamanho de fonte de 16px. É uma unidade útil para definir tamanhos de fonte escaláveis e também para definir tamanhos de layout escaláveis.

vh: é uma unidade de medida relativa que é baseada na altura da janela do navegador. 1 vh é igual a 1% da altura da janela do navegador. É uma unidade útil para definir tamanhos escaláveis que se ajustam à altura da tela.

Em resumo, a principal diferença entre px, em, rem e vh é que px é uma unidade de medida fixa, enquanto em, rem e vh são unidades de medida relativas que se ajustam ao contexto em que são utilizadas. O uso de cada uma delas vai depender do tipo de elemento que está sendo estilizado e do efeito desejado.

 

 

Link to comment
Share on other sites

6 horas atrás, Kelvin disse:

@Arthur Ferreira o elementor usa diversas medidas de CSS como o modelo tem alguns em PX e outros em EM causa isso, realmente é algo que preciso melhor, vou atualizar o template e corrigir isso. Mas você pode tentar, vou te explicar por cima como cada medida funciona: 

image.png

Quando se trata de unidades de medida em CSS, as principais unidades utilizadas são px, em, rem e vh. Cada uma dessas unidades possui uma finalidade específica e pode ser utilizada em diferentes situações. 

px (pixels): é a unidade de medida mais comum em CSS. Um pixel é uma unidade de medida fixa que não se altera independentemente do tamanho da tela ou do dispositivo. É uma unidade útil para definir tamanhos precisos, como bordas ou espaçamentos entre os elementos no editor.

em: é uma unidade de medida relativa que é baseada no tamanho da fonte do elemento pai. 1em é igual ao tamanho da fonte do elemento pai. Se a fonte do elemento pai for 16px, um elemento com um tamanho de fonte de 1em terá um tamanho de fonte de 16px. É uma unidade útil para definir tamanhos de fonte escaláveis.

rem: é uma unidade de medida relativa que é baseada no tamanho da fonte do elemento raiz (<html>). Um rem é igual ao tamanho da fonte do elemento raiz. Se a fonte do elemento raiz for 16px, um elemento com um tamanho de fonte de 1rem terá um tamanho de fonte de 16px. É uma unidade útil para definir tamanhos de fonte escaláveis e também para definir tamanhos de layout escaláveis.

vh: é uma unidade de medida relativa que é baseada na altura da janela do navegador. 1 vh é igual a 1% da altura da janela do navegador. É uma unidade útil para definir tamanhos escaláveis que se ajustam à altura da tela.

Em resumo, a principal diferença entre px, em, rem e vh é que px é uma unidade de medida fixa, enquanto em, rem e vh são unidades de medida relativas que se ajustam ao contexto em que são utilizadas. O uso de cada uma delas vai depender do tipo de elemento que está sendo estilizado e do efeito desejado.

Isso ainda to sentindo dificuldade

Link to comment
Share on other sites

  • L2JBr ADM
Em 15/02/2023 at 18:59, Arthur Ferreira disse:

Isso ainda to sentindo dificuldade

Elabore mais sua dúvida que talvez eu possa ajudar.

1 hora atrás, Arthur Ferreira disse:

@Kelvin o proximo video comentando sobre a responsividade com aparelhos celular e tablets, pretende fazer?

Sim, provavelmente o proximo template será o mesmo mas melhor adaptado para isso e com mais homes alternativas.

Link to comment
Share on other sites

  • L2JBr ADM

Bom demais ver a evolução das pessoas, hein @Kelvin? Parabéns pelo conteúdo, meu caro, ficou maravilhoso!

Você sabia que a L2JBrasil tem uma empresa de Hosting Oficial?
Conheça a L2JCenter.com

L2JBRASIL - 15 anos vendendo SS e flechas em Giran! (Trade / Adena)

Link to comment
Share on other sites

  • 1 month later...
  • 2 weeks later...
  • L2JBr ADM
Em 26/04/2023 at 12:09, growlove disse:

Topico otimo, consegui fazer tudo! 👏🏻

Minha duvida é a seguinte, como faço pro meu site wordpress trabalhar junto com o ICPNetwork V3?

Você vai precisar ter um conhecimento em php para fazer integrações em formulários.

Pode puxar via iframe tmb o conteudo inteiro mas as vezes não fica muito bom.

O ideal é se for por em produção linkar diretamente para o painel para evitar problemas.

Link to comment
Share on other sites

  • 1 month later...
  • L2JBr ADM
8 horas atrás, Odin Borson disse:

Esse plugin só aceita 2MB no maximo @Kelvin e o arquivo de backup é maior que isso, consegue talvez usar um novo plugin tipo o WPvivid Backup Plugin?

Você tem que se ligar que 2MB pode ser o limite configurado do upload do seu PHP, no cPanel -> PHP -> Max PHP Upload altere para um valor maior que o backup. Também pode editar o .htaccess para um valor maior, clica nesse botão:

 

image.png

Link to comment
Share on other sites

Join the conversation

You are posting as a guest. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...




×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.