wordpress Website Antharas Wordpress Elementor Template + Tutorial Completo

[Kelvin]

Salveeeeeee!

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

 

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:

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

Versão Desktop

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

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

 

 

Isso e muito mais você pode encontrar em qualquer

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

 

 

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!

 

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.

 

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.

 

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.

 

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

 

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

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.
 

 

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.

 

 

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

 

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

 

 

 

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

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

, qualquer plano dispoe dessa tecnologia e você não precisará configurar nada .

Esse template possui uma performance de 100/100 no

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

 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!

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

 

[Allan Alcantara]

esse ti tu liau, ta uma maravilhax.

[EmersonBarreto]

13 horas atrás, Kelvin disse:

Salveeeeeee!

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

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

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:

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

Versão Desktop

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

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

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

Isso e muito mais você pode encontrar em qualquer

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

 

 

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!

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.

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.

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.

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

 

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

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.
 

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.

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

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

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

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

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

, qualquer plano dispoe dessa tecnologia e você não precisará configurar nada .

Esse template possui uma performance de 100/100 no

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

 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!

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

[-= JRGames =-]

@Kelvin os 3 vídeos são os iguais

[Kaol]

Este site foi trabalhado muito bem e utilizado por minha equipe, está de parabéns Kelvin

 

Editado Fevereiro 2, 2023 por Kaol

[Kelvin]

8 horas atrás, -= JRGames =- disse:

@Kelvin os 3 vídeos são os iguais

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

[-= JRGames =-]

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

São iguais o link deles 

[MarucaMetal]

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

mim referi a estes mano

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!

[Arthur Ferreira]

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

[Kelvin]

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?

[Arthur Ferreira]

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!

[Kelvin]

Em 09/02/2023 at 20:05, Arthur Ferreira disse:

exatamente, deixar ela pulsando!

@Arthur Ferreira

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

 

[Arthur Ferreira]

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! 

Editado Fevereiro 13, 2023 por Arthur Ferreira

[Kelvin]

@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: 

 

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.

 

 

[Arthur Ferreira]

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: 

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

[Arthur Ferreira]

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

[Kelvin]

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.

[Nattan Felipe]

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

[Pagedown]

@Kelvin Esse UCP do TOWN esta nesse template ?

[joaofbc]

Valeu!

[growlove]

Topico otimo, consegui fazer tudo!

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

[Kelvin]

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.

[Gordo.P]

RESOLVIDO. 

 

help me 

Editado Maio 8, 2023 por Gordo.P
RESOLVIDO

[Odin Borson]

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?

 

[Kelvin]

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: