Faalaê incuber beleza? Seja muito bem-vindo à mais um vídeo do Canal Nano Academy, eu sou o Paulo Felipe e nesse vídeo eu vou te ensinar Como Migrar Site WordPress Sem Plugin Para Hospedagem Umbler ou qualquer outra.

O processo ensinado nesse vídeo é o que eu chamo de "Bala de Prata" da migração de sites WordPress, pois a possibilidade de dar erros é muito pequena, falo isso com base nos mais de 80 sites que eu me envolvi no processo de publicação.

As etapas são:

1 - Se o seu site estiver online, você precisará baixar os arquivos para o seu computador via FTP, caso esteja no seu PC (localhost) ignore esse passo;

2 - Compacte todos os arquivos do site já no seu PC, compacte .ZIP;

3 - Substitua as URL's do banco de dados com o plugin WP Migrate DB;

4 - Faça o download do banco de dados com as novas URL's

5 - Coloque o ZIP do site na sua hospedagem;

6 - Descompacte o projeto;

7 - Importe o banco de dados para sua hospedagem (crie o banco se necessário);

8 - Mude os dados do Banco de Dados no arquivo wp-config.php do seu site;

9 - Atualize as URL's do site no painel administrativo;

10 - Faça o teste;

Link para você testar a Umbler gratuitamente por 7 dias e aprenda nessa série de vídeos Como Hospedar e Configurar o Seu Site WordPress em poucas horas.
https://academy.nanoincub.com.br/umbler

 

Código phpinfo();

<?php phpinfo(); ?>

 

E aqui finalizamos mais um tutorial meu parceiro(a).

Por último e não menos importante segue o fluxo do que é necessário fazer para sair dessa postagem com a consciência de que você fez o melhor que podia fazer para ajudar o blog a alcançar cada vez mais pessoas:

• Vá até o Canal e Larga o Like Nessa P#&%@ para que o Youtube mostre esse conteúdo para mais pessoas!
•  Me inscrever e conhecer o Canal!
• Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar nos comentários;
• Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;

TAMO JUNTO!

Faalaê incuber beleza? Seja muito bem-vindo à mais um vídeo do Canal Nano Academy, eu sou o Paulo Felipe e nesse vídeo eu vou te ensinar Como Apontar DNS do Seu Domínio Para Hospedagem Umbler.

Indico esse vídeo para quem está migrando o seu site para a Umbler, portanto o domínio está em outro lugar como por exemplo no registroBR e não sabe muito bem como prosseguir. O Primeiro passo depois de contratar a hospedagem é apontar os DNS's.

Vem comigo que vou te ensinar o caminho das flores =D

Link para você testar a Umbler gratuitamente por 7 dias e aprenda nessa série de vídeos Como Hospedar e Configurar o Seu Site WordPress em poucas horas.
https://academy.nanoincub.com.br/umbler

E aqui finalizamos mais um tutorial meu parceiro(a).

Por último e não menos importante segue o fluxo do que é necessário fazer para sair dessa postagem com a consciência de que você fez o melhor que podia fazer para ajudar o blog a alcançar cada vez mais pessoas:

• Vá até o Canal e Larga o Like Nessa P#&%@ para que o Youtube mostre esse conteúdo para mais pessoas!
•  Me inscrever e conhecer o Canal!
• Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar nos comentários;
• Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;

TAMO JUNTO!

Faalaê incuber beleza? Seja muito bem-vindo à mais um vídeo do Canal Nano Academy, eu sou o Paulo Felipe e nesse vídeo eu vou te ensinar Como Configurar Container na Umbler e Deixar o WordPress Instalado no seu novo domínio e hospedagem.

Link para você testar a Umbler gratuitamente por 7 dias e aprenda nessa série de vídeos Como Hospedar e Configurar o Seu Site WordPress em poucas horas.
https://academy.nanoincub.com.br/umbler

E aqui finalizamos mais um tutorial meu parceiro(a).

Por último e não menos importante segue o fluxo do que é necessário fazer para sair dessa postagem com a consciência de que você fez o melhor que podia fazer para ajudar o blog a alcançar cada vez mais pessoas:

• Vá até o Canal e Larga o Like Nessa P#&%@ para que o Youtube mostre esse conteúdo para mais pessoas!
•  Me inscrever e conhecer o Canal!
• Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar nos comentários;
• Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;

TAMO JUNTO!

Faalaê incuber beleza? Seja muito bem-vindo à mais um vídeo do Canal Nano Academy, eu sou o Paulo Felipe e nesse vídeo eu vou te guiar em Como Configurar Sites Pro na Umbler e Deixar o WordPress Instalado no seu novo domínio e hospedagem.

Link para você testar a Umbler gratuitamente por 7 dias e aprenda nessa série de vídeos Como Hospedar e Configurar o Seu Site WordPress em poucas horas.
https://academy.nanoincub.com.br/umbler

E aqui finalizamos mais um tutorial meu parceiro(a).

Por último e não menos importante segue o fluxo do que é necessário fazer para sair dessa postagem com a consciência de que você fez o melhor que podia fazer para ajudar o blog a alcançar cada vez mais pessoas:

• Vá até o Canal e Larga o Like Nessa P#&%@ para que o Youtube mostre esse conteúdo para mais pessoas!
•  Clique aqui e se Inscreva no Canal!
• Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar nos comentários;
• Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;

TAMO JUNTO!

Faalaê incuber beleza? Seja muito bem-vindo à mais um vídeo do Canal Nano Academy, eu sou o Paulo Felipe e nesse vídeo você aprenderá como registrar um domínio para o seu site na Umbler mais barato do que no registroBR

Link para você testar a Umbler gratuitamente por 7 dias e aprenda nessa série de vídeos Como Hospedar e Configurar o Seu Site WordPress em poucas horas.
https://academy.nanoincub.com.br/umbler

E aqui finalizamos mais um tutorial meu parceiro(a).

Por último e não menos importante segue o fluxo do que é necessário fazer para sair dessa postagem com a consciência de que você fez o melhor que podia fazer para ajudar o blog a alcançar cada vez mais pessoas:

• Vá até o Canal e Larga o Like Nessa P#&%@ para que o Youtube mostre esse conteúdo para mais pessoas!
•  Clique aqui e se Inscreva no Canal!
• Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar nos comentários;
• Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;

TAMO JUNTO!

Faalaê incuber beleza? Seja muito bem-vindo à mais um vídeo do Canal Nano Academy, eu sou o Paulo Felipe e nesse vídeo você aprenderá como criar o seu cadastro na Umbler e testar a hospedagem.

Link para você testar a Umbler gratuitamente por 7 dias e aprenda nessa série de vídeos Como Hospedar e Configurar o Seu Site WordPress em poucas horas.
https://academy.nanoincub.com.br/umbler

E aqui finalizamos mais um tutorial meu parceiro(a).

Por último e não menos importante segue o fluxo do que é necessário fazer para sair dessa postagem com a consciência de que você fez o melhor que podia fazer para ajudar o blog a alcançar cada vez mais pessoas:

• Vá até o Canal e Larga o Like Nessa P#&%@
•  Clique aqui e se Inscreva no Canal!
• Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar nos comentários;
• Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;

TAMO JUNTO!

Faalaê incuber beleza? Seja muito bem-vindo à mais um vídeo do Canal Nano Academy, eu sou o Paulo Felipe e nesse vídeo Vamos começar uma série sobre a Hospedagem de Sites Umbler na qual eu vou algumas objeções como por exemplo:

• A hospedagem de sites Umbler é boa?
• Vale a pena migrar meu site pra lá?
• Como que funciona a dinâmica desse serviço de hospedagem que vem revolucionando o mercado de hospedagem de sites pensando de um jeito bem disruptivo?
• Como migrar meu site WordPress pra Umbler?
• Esse tal GoodByHost funciona mesmo?
• O que é a tecnologia de Container e como ela oferece escalabilidade para minha aplicação?

Link para você testar a Umbler gratuitamente por 7 dias e aprenda nessa série de vídeos Como Hospedar e Configurar o Seu Site WordPress em poucas horas.
https://academy.nanoincub.com.br/umbler

E aqui finalizamos mais um tutorial meu parceiro(a).

Por último e não menos importante segue o fluxo do que é necessário fazer para sair dessa postagem com a consciência de que você fez o melhor que podia fazer para ajudar o blog a alcançar cada vez mais pessoas:

• Vá até o canal e Larga o Like nessa P#&%@
•  Clique aqui e se Inscreva no Canal!
• Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar nos comentários;
• Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;

Espero que esse tutorial tenha te ajudado a ter mais clareza antes de contratar a hospedagem de sites da Umbler.

TAMO JUNTO!

FalaÊ Incuber beleza? Seja muito bem-vindo à mais um tutorial do Blog Nano Academy.
Aqui é o Paulo Felipe e nesse tutorial eu vou te ensinar Como Importar Arquivos CSS e JS Corretamente no WordPress, utilizando um Hook do WordPress no arquivo functions.php.

É muito importante conhecer como que o WordPress pode nos ajudar a fazer tarefas mais rápidas, melhores e com as práticas corretas. Aqui você vai conhecer como que o WordPress nos ajuda a importar arquivos externos corretamente.

Pegue o seu café, retire as distrações ao seu redor, coloque o seu fone e "vamo que vamo" com foco total!

Acompanhe o procedimento em vídeo e continue rolando a página para encontrar os Snipets de código que eu utilizei no exemplo para facilitar sua vida e você pode apenas copiar e colá-los em seu site fazendo as alterações necessárias conforme explicado no vídeo.

Código de exemplo para importar arquivos css e js no WordPress

Segue modelo para ser inserido no arquivo functions.php do seu tema. *Lembre-se de alterar os caminhos dos arquivos.

function importar_arquivos_customizados() {
        //Arquivos CSS exemplo
	wp_enqueue_style('CSS-Form', get_template_directory_uri() . '/css/SEU-ARQUIVO.css');

	//Arquivos JS exemplo
	wp_enqueue_script( 'js-customizado-nano-academy', get_template_directory_uri() . '/js/custom-js/SEU-ARQUIVO.js');
 }
 add_action('wp_enqueue_scripts', 'importar_arquivos_customizados');

 

E aqui finalizamos mais um tutorial meu parceiro(a).

Por último e não menos importante segue o fluxo do que é necessário fazer para sair dessa postagem com a consciência de que você fez o melhor que podia fazer para ajudar o blog a alcançar cada vez mais pessoas:

• Vá até o canal e Larga o Like nessa P#&%@
• Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar nos comentários;
• Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;
• Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????

Espero que esse tutorial tenha te ajudado a ter mais clareza sobre importar arquivos css e js no WordPress

Salve Salve Incuber beleza? Aqui é o Paulo Felipe trazendo mais uma dica rápida pra você sobre o plugin de WordPress Contact Form 7, nesse tutorial você aprenderá como fazer um redirecionamento de página com base na opção que o usuário escolheu no select.

Para contextualizar melhor, imagine que temos um formulário no qual há um select com as opções "Startups", "WordPress" e "Desenvolvimento" e cada opção dessa levará o usuário após enviar o formulário para uma página de obrigado diferente, assim você tem a liberdade de levar o seu usuário para uma página de obrigado específica para cada serviço ou produto.

Pegue o seu café, retire as distrações ao seu redor, coloque o seu fone e "vamo que vamo" com foco total!

Acompanhe o procedimento em vídeo e continue rolando a página para encontrar os Snipets de código que eu utilizei no exemplo para facilitar sua vida e você pode apenas copiar e colá-los em seu site fazendo as alterações necessárias conforme explicado no vídeo.

Snipets utilizados para realizar o processo de redirecionamento de página com base na opção do select no Contact Form 7.

O shortcode abaixo será utilizado para criar o campo de select no seu formulário. Esse cara é inserido no corpo do seu form, basta copiar e adequar os nomes para a sua realidade.

[select* interesse id:op-interesse include_blank "Startups" "WordPress" "Desenvolvimento"]

Maravilha, antes de continuarmos, faça o teste para ver se está tudo funcionando como deveria em seu site, você deve obter um resultado parecido com o da imagem abaixo:

Segue abaixo o snipet para ser inserido dentro do arquivo main.js ou footer.php, basta apenas seguir um dos processos ensinados no vídeo.

//Se for colocar o códio no main.js, lembre-se de retirar as tags <script>
<script>
    document.addEventListener('wpcf7mailsent', function (Event) {
        // Altere o 136 pelo ID do seu formulário.
        if ('136' == event.detail.contactFormId) {
            
            // se for mudar o nome da variável 'opinteresse' lembre-se de mudar em todos os lugares que ela aparece
            var opinteresse = document.getElementById("op-interesse").value;

            // Mude os nomes dos values para os nomes que estão no seu select.
            // Mude o link para qual cada opção levará o usuário após enviar o formulário.
            if (opinteresse == "Startups") {
                location = 'https://www.youtube.com/channel/UChy3qxl2x92wkBJxJ2n895A';

            } else if (opinteresse == "WordPress") {
                location = 'https://academy.nanoincub.com.br';

            } else if (opinteresse == "Desenvolvimento") {
                location = 'http://nanoincub.com.br';
            }
        }
    }, false)
</script>

Depois de seguir o que foi ensinado no tutorial, basta você testar e ver se tudo deu certo como deveria.

E aqui finalizamos mais um tutorial meu parceiro(a).

Por último e não menos importante segue o fluxo do que é necessário fazer para sair dessa postagem com a consciência de que você fez o melhor que podia fazer para ajudar o blog a alcançar cada vez mais pessoas:

• Vá até o canal e Larga o Like nessa P#&%@
• Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar nos comentários;
• Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;
• Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????

Faça como o Thiago Salgueiro e interaja com a gente, gostamos que de ajudar! Compartilhe suas dúvidas, experiências e resultados.

Espero que esse tutorial tenha te ajudado a ter mais clareza sobre como deixar o layout de um formulário com Contact Form 7 em duas colunas.

Quer aprender mais sobre Contact Form 7?

Veja outros tutoriais sobre o assunto:
Como instalar e configurar o Contact form 7 – PT 1/2
Como instalar e configurar o Contact form 7 – PT 2/2 – Configurando SMTP
Salvar contatos enviados pelo Contact form 7
Como inserir Google reCAPTCHA no Contact Form 7
Criar redirecionamento de página no Contact Form 7 após envio
Escolher destinatário com base na opção do select Contact Form 7
Inserir e Editar Placeholder no Contact Form 7
Como deixar Contact Form 7 em duas colunas

Salve Salve Incuber beleza? Aqui é o Paulo Felipe trazendo mais uma dica rápida pra você sobre o plugin de WordPress Contact Form 7, dessa vez iremos sanar a dúvida do Thiago Salgueiro um dos Incubers que nos acompanha que é a seguinte "Como deixar Contact Form 7 em duas colunas".

O Processo é bem tranquilo e envolve HTML e CSS, mas não se assuste por não ter conhecimento sobre essas linguagens, eu vou te ajudar do começo ao fim para garantir que tudo sairá como deve ser. Vale ressaltar também que esse post é pra resolver uma dúvida pontual e não explicar detalhadamente sobre HTML e CSS, caso esse conhecimento lhe interesse deixe nos comentários que o seu pedido pode ser atendido e a gente comece uma série de vídeos sobre o assunto.

Todo o procedimento pode ser realizado através do painel do WordPress a partir da versão 5 que conta com um editor CSS maneiro para fazer pequenas alterações nos estilos do seu tema ou se você já conhece do assunto pode utilizar a sua IDE favorita.

Veja o resultado que iremos obter ao final do tutorial

Como deixar contact form 7 em duas colunas

Acompanhe o procedimento em vídeo e continue rolando a página para encontrar os Snipets de código que eu utilizei no exemplo para facilitar sua vida e você pode apenas copiar e colá-los em seu site fazendo as alterações necessárias conforme explicado no vídeo.

Snipets utilizados no processo para deixar formulário CF7 em 2 colunas

O pedaço de código abaixo é a estrutura do formulário, você tem total liberdade para alterar os textos e os campos do Formulário que ficam entre colchetes [].

As DIV's com a classe "formulario-item-50" deixará o campo com 50% de largura e a classe "formulario-item-100" deixará o campo com 100% de largura e isso será configurado via CSS posteriormente.

<div class="envelopa-formulario">
    <div class="formulario-item-50 item-esquerda">
        Seu nome (obrigatório)
        [text* your-name]
    </div>

    <div class="formulario-item-50">
        Seu e-mail (obrigatório)
        [email* your-email]
    </div>

   <div class="clearfix"></div>

<div class="formulario-item-50 item-esquerda">
        Seu nome (obrigatório)
        [text* your-name]
    </div>

    <div class="formulario-item-50">
        Seu e-mail (obrigatório)
        [email* your-email]
    </div>

   <div class="clearfix"></div>

    <div class="formulario-item-100">
        Assunto
        [text your-subject]
    </div>

    <div class="formulario-item-100">
        Sua mensagem
        [textarea your-message]
    </div>

[submit "Enviar"]

</div>

Depois criar a estrutura HTML do seu formulário é hora de inserirmos o CSS da "bagaça".

O pedaço de código abaixo será inserido no editor de CSS do WordPress que fica em Aparência > CSS adicional.

//Estilizando a classe para deixar os campos com 50% de largura
.formulario-item-50 {
  float: left;
  width: 50%;
  margin-bottom: 20px;
}
//Estilizando os campos que vão receber o conteúdo (inputs)
.formulario-item-50 input {
  width: 100%;
  float: left;
}

//Estilizando a classe item-esquerda para dar um espaço na direita entre os campos
.formulario-item-50.item-esquerda {
  padding-right: 15px;
}

//Configurando o comportamento dos campos no mobile
@media only screen and (max-width: 767px) {
  .formulario-item-50 {
    width: 100%
  }

  //Retirando o espaçamento da direita no mobile para alinhar os campos
  .formulario-item-50.item-esquerda {
    padding-right: 0;
  }
}

.formulario-item-100 {
  width: 100%;
  margin-bottom: 20px;
}

.formulario-item-100 input {
  width: 100%;
}

.formulario-item-100 textarea {
  width: 100%;
}

Agora é só acompanhar o procedimento ensinado no vídeo e testar!

E aqui finalizamos mais um tutorial que dessa vez foi a pedido de um Incuber. Por último e não menos importante segue o fluxo do que é necessário fazer para sair dessa postagem com a consciência de que você fez o melhor que podia fazer para ajudar o blog a alcançar cada vez mais pessoas:

• Vá até o canal e Larga o Like nessa P#&%@
• Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar nos comentários;
• Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;
• Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????

Faça como o Thiago Salgueiro e interaja com a gente, gostamos que de ajudar! Compartilhe suas dúvidas, experiências e resultados.

Espero que esse tutorial tenha te ajudado a ter mais clareza sobre como deixar o layout de um formulário com Contact Form 7 em duas colunas.

Quer aprender mais sobre Contact Form 7?

Veja outros tutoriais sobre o assunto:
Como instalar e configurar o Contact form 7 – PT 1/2
Como instalar e configurar o Contact form 7 – PT 2/2 – Configurando SMTP
Salvar contatos enviados pelo Contact form 7
Como inserir Google reCAPTCHA no Contact Form 7
Criar redirecionamento de página no Contact Form 7 após envio
Escolher destinatário com base na opção do select Contact Form 7
Inserir e Editar Placeholder no Contact Form 7