Jump to content

Website Antharas Wordpress Elementor Template + Tutorial Completo


Kelvin

Recommended Posts

  • L2JBr ADM

Salveeeeeee!

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

giphy.gif

 

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:

CLIQUE PARA VER UMA DEMO ONLINE

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!!!

 

giphy.gif

 


Isso e muito mais você pode encontrar em qualquer
plano de hospedagem da L2JCenter. 🤑


 

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!!!!!!!
giphy.gif?cid=790b76113d6e0021c73706f5ef

 

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 L2JCenter.comqualquer plano dispoe dessa tecnologia e você não precisará configurar nada 💗.

Esse template possui uma performance de 100/100 no Google PageSpeed 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 😉

 

  • Like 13
  • I love it 4
Link to comment
Share on other sites

  • 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: youtube.com/allaanz1n
Contato: allan.deh [Skype]

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!

giphy.gif

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:

CLIQUE PARA VER UMA DEMO ONLINE

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!!!

giphy.gif


Isso e muito mais você pode encontrar em qualquer
plano de hospedagem da L2JCenter. 🤑


 

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!!!!!!!
giphy.gif?cid=790b76113d6e0021c73706f5ef

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 L2JCenter.comqualquer plano dispoe dessa tecnologia e você não precisará configurar nada 💗.

Esse template possui uma performance de 100/100 no Google PageSpeed 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!!!

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

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

Possui alguma dúvida em relação à configurações comuns de servidores de Lineage II? Consulte nossa área de Principais Dúvidas Resolvidas.

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

L2JBRASIL - 14 anos vendendo SS em Giran! (Trade / Adena)

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...
  • Join now

    Be part of the largest and oldest communities about Lineage2 in Latin America.






×
×
  • 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.