Como Criar Uma Loja Virtual WordPress

Atualizado em Fevereiro de 2019, por Tiago Dantas

Como Criar Uma Loja Virtual WordPress

Atualizado em Fevereiro de 2019, por Tiago Dantas

Neste tutorial vais aprender como criar uma loja virtual no WordPress usando o construtor de páginas Elementor e o tema de WordPress OceanWP –  as melhores ferramentas gratuitas para criar uma loja virtual super profissional no WordPress.

» Obtém a Hospedagem no Hostgator

» Baixa as imagens que usei no tutorial

Neste tutorial vais aprender como criar uma loja virtual no WordPress usando o construtor de páginas Elementor e o tema de WordPress OceanWP –  as melhores ferramentas gratuitas para criar uma loja virtual super profissional no WordPress.

» Obtém a Hospedagem no Hostgator

» Baixa as imagens que usei no tutorial

Neste tutorial vais aprender como criar uma loja virtual no WordPress usando o construtor de páginas Elementor e o tema de WordPress OceanWP –  as melhores ferramentas gratuitas para criar uma loja virtual super profissional no WordPress.

O que precisas

1.) Algum tempo (para seguires o tutorial do Youtube e fazeres a tua loja no WordPress)

2.) Um domínio (ex: www.atualoja.com)

3.) Uma Hospedagem (o servidor que permite guardares os textos e as imagens do teu site na Internet, acessível a todo o mundo 24h por dia e livre de publicidade)

4.) O tema de WordPress OceanWP e o constutor de páginas Elementor (a melhor combinação gratuita para criar uma loja virtual no WordPress!)

Para hospedarmos o nosso site recomendo a versão norte-americana do Hostgator. A versão norte-americana é mais barata, mais rápida e mais simples de usar do que a versão .com.br

Além disso o governo não tem acesso aos nossos dados pela versão norte-americana, ao contrário da versão .com.br onde temos de fornecer o CNP J e preencher mais papelada.

Também podes usar o Hostgator para obter o nome de domínio. Se queres usar outra empresa como a GoDaddy para obter o domínio – vê este vídeo para instruções passo a passo.

Porquê o Hostgator?

1.) Rápido, confiável, barato e excelente suporte

2.) Uso o Hostgador desde sempre e não tenho queixas

Desconto no Hostgator

Por favor usa o seguinte cupão de desconto na tua compra do Hostgatorplanoeconomico – desconto até 60% (o mais alto possível)

Muito bem, agora que já sabes o que precisas, vamos começar a criar no nosso site!

Passo 1: Registrar o Domínio e a Hospedagem

O domínio é o nosso endereço (o que as pessoas escrevem na barra de endereços para encontrá-lo). Isto é OBRIGATÓRIO.

Precisas também da Hospedagem de forma a guardar todo o conteúdo do teu site no ar (textos, imagens, vídeos).

Todos os sites precisam de hospedagem, por isso certifica-te que tens uma hospedagem profissional, caso contrário não consegues construir o teu site livre de publicidade e spam como ensino no tutorial. Isto é OBRIGATÓRIO.

Vai até à versão norte-americana do Hostgator (por aqui)

1.) Clica no menu Web Hosting – Escolhe um plano (recomendo o Hatchling para começar)

2.) Clica em Sign Up Now

> Recomendo o Hostgator norte-americano porque é mais barato e fácil começar um site. Tem um excelente suporte – Gosto muito deles! (mas podes escolher qualquer serviço que preferires!)

Escreve o nome de domínio que queres na barra de pesquisa e clica em Enter para ver se está disponível. Se encontraste um domínio disponível vamos aos próximos passos! 😀

> Usa o cupão de desconto: planoeconomico para poupares até 60%

> (é um link afiliado, recebo uma comissão do Hostgator por te ajudar)

Os principais benefícios da hospedagem do Hostgator

1.) Barata e rápida

2.) Bom atendimento ao cliente com chat ao vivo 24h por dia

3.) Fácil de instalar o WordPress – tudo o que precisas para criar a tua loja

1.) Decide qual é o plano ideal para ti (se só queres criar um site – escolhe o Hatchling Plan, se achas que precisas de mais do que um site – escolhe o Baby Plan)

2.) Preenche toda a informação (sugiro que escolhas um ciclo de pagamento de 12 meses)

3.) Retira a seleção de todos os serviços extra dos quadradinhos (são desnecessários nesta fase inicial e poupas mais dinheiro)

4.) Coloca o cupão “planoeconomico” para um desconto de até 60% (o nosso código promocional especial!)

5.) Aceita os termos e condições e clica em “Check Out Now”

Passo 2: Abrir a Caixa de Email

Vais receber um email do Hostgator com os teus dados de login – o assunto do email diz “Your Account Info” e é muito importante! Guarda-o bem!

Usa essa informação para o passo 3.

Passo 3: Login no Cpanel

1.) Usa os dados que recebeste do Hostgator para fazer login no Cpanel

2.) Clica no link que diz “Your Control Panel”

3.) Faz login com o username e a password que estão no email

Agora começa a parte divertida, criar a loja virtual!

Passo 4: Instalar o WordPress

Agora precisamos de instalar a plataforma que vamos usar para criar o nosso site. Esta plataforma chama-se WordPress – é um sistema de gestão de conteúdo super popular e com uma grande comunidade de utilizadores.

1.) Agora que estamos loggados no cpanel

2.) Rola até à secção da primeira página que diz Software/Services

3.) Clica no ícone que diz “QuickInstall”

4.) Clica em WordPress

5.) Clica em Continue

6.) Introduz um email de administrador (o teu melhor email), título do blog (podes mudar isto mais tarde), nome de utilizador e outros detalhes.

7.) Clica em “Install Now!”

Ótimo! Agora temos o WordPress instalado! Podes visitar o teu domínio e ver que já existe um site (vamos tratar dele e colocá-lo bonito – não te preocupes!)

Passo 5: Fazer Login no Painel do WordPress

Podes ter de esperar 5-15 minutos antes que seja possível fazer login no teu site. Aproveita para fazer uma pausa.

Há duas formas de entrar no teu site

1.) Podes clicar no link que o Hostgator forneceu logo após a instalação e usar o nome de utilizador e a password

2.) Podes ir até à tua caixa de email e abrir o novo email que recebeste com os detalhes para entrares no teu site (mesma informação acima)

Para personalizar e adicionar conteúdo ao teu site vais sempre ter de entrar no teu site através este link: www.OTeuSite.com/wp-admin

Por isso força, faz login!

Passo 6: Alterar a Password no WordPress

A próxima coisa que vamos fazer é alterar aquela password complicada do WordPress para a nossa própria password.

Segue os seguintes passos

1.) No menu do lado esquerdo clica em Usuários

2.) Seleciona a opção Seu Perfil

3.) Rola um pouco até encontrares a opção Gerenciamento da Conta

4.) Clica em Gerar Senha

5.) Define uma nova senha (no mínimo com um nível de dificuldade médio)

6.) Rola até baixo e clica em Atualizar Perfil

7.) Volta a fazer login no WordPress usando a nova senha

Passo 7: Colocar o WordPress em Português

1.) No menu do lado esquerdo clica em “Settings”

2.) Clica em “General”

3.) Rola um pouco para baixo até encontrares a opção “Site Language”

4.) Altera o WordPress para Português / Português do Brasil

Neste tutorial vou usar o Português de Brasil pois 9 em cada 10 pessoas que assistem aos meus vídeos são do Brasil. Oi galera!

Passo 8: Limpar os Plugins Pré-instalados do WordPress

Os plugins estão para o WordPress como as apps estão para os telemóveis. Eles permitem adicionar características extra ao design do nosso site.

Mas não vamos usar nenhum dos plugins que já vêm pré-instalados com o WordPress, por isso vamos desinstalá-los e assim libertar algum espaço no nosso site.

1.) Clica em Plugins no menu do lado esquerdo do painel

2.) Seleciona a opção Plugins Instalados

3.) Acima da lista de plugins na setinha que diz “Ações em massa” seleciona a opção “Desativar”

4.) Clica no quadradinho Plugin em cima para selecionar todos

5.) De seguida clica em Aplicar

6.) Volta a clicar em “Ações em massa” e desta vez seleciona a opção “Excluir”

7.) Clica no quadradinho Plugin em cima para selecionar todos

5.) Para excluir todos clica em Aplicar

Muito bem, o nosso WordPress ficou bem mais leve!

Passo 9: Instalar o tema OceanWP e os Plugins Recomendados

Para criar a nossa loja virtual vamos usar o tema OceanWP porque:

1.) É grátis, leve e rápido

2.) Tem boa integração com o Woo-Commerce (plugin que permite configurar os produtos da nossa loja)

Para instalar o tema:

1.) Vai até ao site do OceanWP

2.) Coloca os teus dados e clica em “Get it Now”

2.) Abre a caixa de email e clica no link para baixar tema

3.) Guardar o ficheiro ZIP no ambiente de trabalho

3.) Entra no painel do WordPress

4.) Clica no menu Aparência > Temas > Adicionar Novo > Enviar Tema

5.) Escolhe o ficheiro ZIP que está no ambiente de trabalho

6.) Clica em Instalar Agora e ativa o tema.

Após a instalação do tema vais reparar no texto acima a dizer que o tema recomenda os seguintes plugins: Ocean Extra e o Elementor.

Vamos clicar no link que diz “Comece a instalar plugins” para instalar os plugins sugeridos.

Excelente! Já temos o nosso tema e os plugins recomendados instalados! Agora podemos ver como está o nosso site passando com o rato no ícone da casinha no canto superior esquerdo e clicando em Visitar site.

Vais reparar que o design padrão do OceanWP é bem simples. Isso é uma vantagem. Queremos que o tema seja simples e leve para podermos personalizar à vontade!

Passo 10: Adicionar Páginas à Loja Virtual

Vamos adicionar as páginas Início, Sobre Nós, Blog e Contato à loja virtual.

Para criar uma página é muito simples:

1.) Clica no menu páginas do lado esquerdo

2.) Clica em Adicionar Nova

3.) Escolhe o título para a página

4.) Clica em Publicar

5.) Repete o processo descrito acima para todas as páginas

Claro que falta adicionar as páginas da Loja, onde vamos promover os nossos produtos. Essas página vão ser adicionadas de uma outra forma, no próximo passo.

Passo 11: Instalar WooCommerce + Páginas da Loja Virtual

O plugin WooCommerce é a aplicação grátis que nos vai permitir configurar a loja virtual no WordPress (adicionar produtos, definir preços, gerir stocks, etc)

Para instalar o WooCommerce

1.) Clica no menu Plugins > Adicionar Novo

2.) Procura por “woocommerce” e instala o plugin

3.) Clica em ativar e pronto!

Depois de instalado somos redirecionados para o assistente de configuração do WooCommerce, rolamos até baixo e clicamos em “Agora não”.

Este plugin também vai-nos fornecer 3 páginas extra que faltam no nosso site: Carrinho, Loja e Finalizar Compra.

Para instalar essas páginas vamos ao menu “Woo-Commerce” > clicamos em Status > Ferramentas > Procuramos pela opção “Criar as páginas padrões do WooCommerce” > clicamos em “Criar Páginas”

Podemos confirmar que as páginas padrão do WooCommerce foram instaladas. Vamos até ao menu Páginas e lá podemos ver que as novas páginas foram adicionadas com sucesso! Fantástico 🙂

Passo 12: Definir Página Início Como Página Principal

Já deves ter reparado que por padrão o WordPress mostra os últimos posts na página principal do nosso site. Mas nós criámos uma página Início e queremos defini-la como a página principal estática para o nosso site!

Então vamos tratar disso:

1.) Vamos ao menu Configurações

2.) Clicamos em Leitura

3.) Na primeira opção, onde diz “Sua página inicial exibe”, seleciona “Uma página estática”

4.) Abaixo seleciona a página Início para página incial

5.) Para a página de posts escolhe o nome da página de blog, ou deixa em branco se não quiseres ter um blog

6.) Rola até abaixo e clica em Salvar alterações.

Passo 13 (opcional): Baixar as Imagens da Loja Virtual Demo

Clica aqui para baixares todas as imagens que usei no tutorial do YouTube da loja demo.

Melhores bancos de imagens grátis:

Pixabay – Boas imagens de alta resolução, assim como vetores. Centenas de milhares de opções!

FreeImages – Mais de 400.000 imagens online que podes usar livremente nos teus sites, com uma qualidade de razoável a boa.

Flickr – Imagens de fotógrafos profissionais que optam por partilhar alguns dos seus trabalhos gratuitamente!

Melhores bancos de imagens pagos:

Shutterstock  – Neste site vais encontrar aquela imagem perfeita que tanto procuras, não falta nada e tudo com ótima qualidade!

iStockphoto – Site parecido com o Shutterstock, com uma gigante base de imagens de alta resolução.

GettyImages – Mais um banco de imagens incrível com fotos profissionais para todos os gostos!

Passo 14: Alterar os Links Permanentes

Este passo serve para tornar os links do nosso site mais bonitos e apelativos. Isto é bom não só para os nossos visitantes como para os motores de busca.

Para isso vamos até ao menu Configurações > Links Permanentes > Configurações comuns > Alterar para “Nome do post”

Desta forma quando criamos uma página ou um artigo no blog, esse link fica limpo. Exemplo: se criares uma página com o nome “artigo” o link dessa página será oteusite.com/artigo em vez de oteusite.com/2017/12/artigo

Passo 15 (opcional): Aumenta a Performance do Nosso Site

 

Nos meus tutoriais anteriores algumas pessoas diziam que não conseguiam ver logo as alterações que faziam no WordPress. Por isso neste tutorial vou recomendar um plugin que permite não só ver logo as alterações como aumentar a performance do nosso site!

Uso este plugin no vivedanet.com e gosto muito, funciona na perfeição!

Para instalá-lo vamos ao menu Plugins > Adicionar Novo > Pesquisar por “Autoptimize” > Instalar e Ativar o plugin

Agora vamos à lista de plugins, procuramos pelo Autoptimize e clicamos nas “configurações” > vamos selecionar os três quadradinhos para otimizar o site ao máximo!

Por fim clicamos em “Salvar mudanças e esvaziar a cache”.

Repara que no topo do nosso site temos um ícone chamado Autoptimize. Sempre que fizeres alguma alteração no teu WordPress e não conseguires ver de imediato podes limpar a cache passando com o rato por cima do ícone com o círculo verde e clicando em “Limpar Cache”

Passo 16: Personalizar o Cabeçalho

16.1) Identidade do Site

Para personalizarmos o cabeçalho vamos ao menu Aparência > Personalizar

Na primeira opção “Identidade do Site” podemos alterar o título do site e a descrição.

A descrição é muito importante pois é a frase que melhor descreve a nossa loja e aquilo que vendemos. Esta descrição vai ser vista pelos nossos visitantes e vai ser usada pelo Google para recomendar o nosso site, é muito importante!

Escolhe uma descrição rica em palavras-chave importantes relacionadas com o teu negócio.

16.2) Adicionar o Ícone (Favicon)

1.) Baixa o ficheiro ZIP com as imagens do Passo 13

2.) Aparência > Personalizar > Identidade do Site > Adicionar o Ícone > Enviar Aquivos > Adicionar o Favicon que está na pasta das imagens demo

16.3) Editar a barra superior

As definições que usei  foram as seguintes:

  • Cor de fundo: #00000
  • Cor da borda: #00000
  • Cor do texto: #ffffff

Conteúdo: Portes grátis para todas as compras a partir de 50€!

Redes sociais: Facebook, Pinterest, Instagram, YouTube

Cor dos ícones das redes sociais: #ffffff

Nota: Para desativar a barra superior vai ao menu Aparência > Personalizar > Barra Superior > Geral > Retirar a seleção do quadradinho

16.4) Definições de Cabeçalho

Clica em Cabeçalho > Geral e usar as seguintes definições:

  • Estilo: Transparente
  • Header border bottom: Retirar a seleção do quadradinho

Clicar em Cabeçalho > Logo

  • Adicionar o logo
  • Largura máxima: 0
  • Max Height (altura máxima): 42

Clicar em Cabeçalho > Menu

  • Cor do link: #ffffff
  • Cor do link hover: #a1a1a1
  • Cor do link item do menu atual: #ffffff
  • Estilo do ícone de pesquisa: Desativado

16.5) Criar Menu Principal

Para criar o menu principal clicar em Menus > Criar novo menu > Dar o nome de Menu principal > Definir como Menu principal

Clicar em Adicionar itens para adicionar as páginas ao Menu Principal e adicionar as seguintes páginas: Sobre Nós, Loja, Novas Tendências, Contato (vamos criar a página de FAQ mais à frente)

Passo 17: Tipografia (Estilo da Letra)

A próxima coisa que vamos fazer é alterar o estilo de letra da nossa loja virtual no menu Tipografia

Clica em Tipografia > Clica em Corpo e usa as seguintes definições:

  • Família da fonte: Yantramanav
  • Tamanho da fonte: 16

No menu Tipografia > Clica em Barra Superior e usa as seguintes definições:

  • Família da fonte: Yantramanav
  • Tamanho da fonte: 13

No menu Tipografia > Clica em Menu Principal e usa as seguintes definições:

  • Família da fonte: Poppins
  • Espessura da fonte: 700
  • Tamanho da fonte: 14

No menu Tipografia > Clica em Título da Página

  • Família da fonte: Poppins
  • Espessura da fonte: 600
  • Tamanho da fonte: 60

Passo 18: Opções Gerais

Nas opções gerais vamos alterar algumas coisas que nos vão permitir poupar algum tempo ao realizar o design.

Clica em Opções Gerais > Estilo Geral e usa as seguintes definições

  • Cor principal: #000000
  • Cor principal hover: #323232
  • Cor da borda principal: #000000

Clica em Opções Gerais > Configurações Gerais e usa as seguintes definições

  • Layout: Seleciona o rectângulo com largura completa

Clica em Opções Gerais > Título da Página

  • Estilo: centralizado
  • Cord de fundo: #ffffff
  • Cor do texto: #000000
  • Breadcrumbs: retirar a seleção do quadradinho

Clica em Opções Gerais > Role para Cima

  • Tamanho do botão: 45
  • Tamanho do ícone: 30
  • Border Radius: 100
  • Cor de fundo: #eb785b (transparência 22)
  • Cor de fundo hover: #eb785b
  • Cor: #bababa
  • Cor de fundo hover: #000000

Passo 19: Personalizar o WooCommerce

Como estamos a usar um tema compatível com o WooCommerce (OceanWP) podemos personalizar a aparência do WooCommerce através do menu Aparência > Personalizar > WooCommerce.

Clica em WooCommerce > Menu do Carrinho e usa as seguintes opções

  • Ícone do carrinho: (escolhi o ícone mais à direita)
  • Cor do link hover: #777777
  • Cor do preço: #ef6700

Passo 20: Widgets do Rodapé e Rodapé Inferior

1.) No menu Personalizar, clica em Widgets do Rodapé e retira a seleção do quadradinho

2.) No menu Personalizar, clicar em Rodapé Inferior e retira a seleção do quadradinho.

Passo 21: Criar a Página Início

A página início foi criada com o construtor de páginas gratuito Elementor e estes foram os passos seguidos:

1.) Clica em editar página

2.) Em OceanWP settings clica em “Title” e na opção “Display Page Title” seleciona “Disable”

3.) Clica em Atualizar e de seguida clica em Editar com Elementor

22.1 Primeira Seção (Imagem de fundo, título, sub-título, texto, botão e menu transparente)

22.11 Imagem de fundo

1.) Adiciona uma seção com 1 coluna

2.) Clica em Edit Seção > clica em estilo > background > clica no ícone do pincel para fundo clássico > seleciona a imagem “fundo_original.jpg” > clica em Inserir Mídia

3.) Configura a imagem em Layout > Em Stretch Section coloca “Sim” >  em Altura seleciona a opção Ajustar à tela

4.) Clica em Estilo > Define a Posição como “Centralizado” > Define o Tamanho para “Preenchimento completo”

22.12 Título

1.) Coloca a coluna de conteúdo no topo >  Layout > Define a Posição da coluna para “Superior”

2.) Clica no ícone dos elementos e arrasta o elemento “Cabeçalho” para a coluna do conteúdo

3.) Clica no elemento para abrir as definições do lado esquerdo. Cola o seguinte texto na caixa do conteúdo “O Estilo é Tudo”

4.) Clica no menu Estilo > Colocar Tipografia “On” e usa as seguintes definições:

  • Cor do texto: Preto (#000000)
  • Tamanho da fonte: 60
  • Família da fonte: Lato
  • Peso: 700
  • Altura da linha: 0,6
  • Espaçamento: 4

5.) Corrige a margem do Título no menu Avançado > Retira a seleção “link values together” > Coloca uma margem superior de 120

22.13 Sub-título

1.) Clica no ícone dos elementos e arrasta o elemento “Cabeçalho” para a coluna do conteúdo

2.) Clica no elemento para abrir as definições do lado esquerdo. Cola o seguinte texto na caixa do conteúdo “Vista-se Bem. Sinta-se Bem.”

3.) Clica no menu Estilo > Coloca a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: Cinza claro (#7a7a7a)
  • Tamanho da fonte: 20
  • Família da fonte: Lato
  • Peso: 300
  • Espaçamento: 1,7

5.) Corrige a margem do sub-título no menu Avançado > Retira a seleção “link values together” > Coloca uma margem esquerda de 5px

22.14 Texto

1.) Clica no ícone dos elementos e arrasta o elemento “Editor de Texto” para a coluna do conteúdo

2.) Clica no elemento para abrir as definições do lado esquerdo. Cola o seguinte texto na caixa do conteúdo “Vista-se Bem. Sinta-se Bem.”

3.) Clica no menu Estilo > Coloca a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: Preto (#000000)
  • Tamanho da fonte: 17
  • Família da fonte: Lato
  • Peso: 300
  • Altura da linha: 1,7
  • Espaçamento: 1,4

5.) Corrige a margem do texto no menu Avançado > Retira a seleção “link values together” > Coloca uma margem direita de 650 > Coloca uma margem esquerda de 5

22.15 Botão

1.) Clica no ícone dos elementos e arrasta o elemento “Botão” para a coluna do conteúdo abaixo do texto

2.) Cola o seguinte texto na caixa de texto “Explore a Nossa Loja”

3.) Coloca um link para a página da loja, ex: /loja (se for um link externo tens de colocar http://exemplosite.com)

4.) Clica no menu Estilo > Colocar a Tipografia “On” e usa as seguintes definições:

  • Tamanho da fonte: 13
  • Família da fonte: Roboto
  • Espaçamento: 1,2
  • Cor do texto: preto (#000000)
  • Cor do fundo: transparente

5.) Cria um borda sólida com a espessura de 1px em todos os lados

6.) Clica na opção Hover (quando o rato passa por cima) e usa as seguintes definições

  • Cor do texto: cinza escuro (#444444)
  • Cor da borda: cinza claro (#7a7a7a)

7.) Corrige a margem do botão no menu Avançado >  Coloca uma margem esquerda de 15

22.16 Menu transparente

1.) Clica no menu Personalizar do tema OceanWP

2.) Clica em Cabeçalho > Geral > Define Estilo: Transparente

3.) Rola até onde diz “Transparent Header Settings” e arrasta a barra da transparência toda para o lado esquerdo

4.) Volta para trás e clica na opção Menu

5.) Rola até onde diz cor do link > altera para branco (#ffffff)

4.) Clica em Publicar para salvar as alterações

22.2 Segunda Seção (Sub-título)

1.) Clica em editar com o Elementor para voltar ao editor

2.) Adiciona um nova seção com 1 coluna

3.) Arrasta o elemento “Cabeçalho” para a coluna

3.) Cola o seguinte texto na caixa do Título: “O estilo é algo que levamos a sério” e centraliza o texto

4.) Clica no menu Estilo > Coloca a Tipografia “On” e usa as seguintes definições:

  • Tamanho da fonte: 30
  • Família da fonte: Poppins
  • Cor do texto: preto (#000000)

5.) Clica no menu Avançado > retira a seleção dos “link values together” > Coloca uma margem superior de 40 > Coloca uma margem inferior de 20

22.3 Terceira Seção (3 Caixas)

1.) No editor do Elementor > Adiciona uma nova seção com 3 colunas

2.) Clica em “Edit Coluna” > Estilo > Tipo de fundo clássico > Adiciona o ficheiro com o nome botão_1.jpg que se encontra na pasta das imagens demo

3.) Clica nos ícones dos elementos e adiciona o elemento “Cabeçalho”

4.) Escreve “acessórios” no título

5.) Define o link para a página da Loja, ex: /loja

6.) Centraliza o título

7.) Clica no menu Estilo > Coloca a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: branco (#ffffff)
  • Tamanho da fonte: 23
  • Família da fonte: Poppins
  • Espessura da fonte: 600
  • Transformação: Maiúsculas

8.) Clica em Avançado > Retira a seleção dos “link values together” > Coloca uma margem superior de 30

9.) Clica nos ícones dos elementos, adiciona o elemento “Divisor” abaixo do título e usa as seguintes definições:

  • Estilo: Sólido
  • Peso: 2
  • Cor: branco (#ffffff)
  • Largura: 27
  • Espaçamento: 0

10.) Clica nos ícones dos elementos e adiciona o elemento “botão” abaixo do divisor

11.) Cola o seguinte texto: “COMPRAR AGORA” e centraliza o texto

12.) Define o link para a página da Loja, ex: /loja

13.) Clica no menu Estilo > Coloca a Tipografia “On” e usa as seguintes definições:

  • Tamanho da fonte: 16
  • Família da fonte: Yantramanav
  • Espessura da fonte: 400
  • Transformação: Maiúsculas
  • Cor de fundo do botão: preto + transparência (clara)

14.) Cria um borda sólida com a espessura de 1px em todos os lados

16.) Clica na opção Hover (quando o rato passa por cima) e usa as seguintes definições

  • Cor de fundo do botão: preto + transparência (escura)

17.) Clica no menu Avançado > retira a seleção dos “link values together” > Coloca uma margem inferior de 40

18.) Clica em Edit Coluna > Estilo > Define “Preenchimento Completo” em Tamanho da Imagem

19.) Em Edit Coluna > Clica em Avançado > Coloca uma margem de 10 em todos os lados

20.) Clica em Estilo > Background Overlay > Tipo de fundo clássico > Define a cor preta (#000000) > Define a Opacidade para 0,2

21.) Clica em duplicar coluna duas vezes

22.) Apaga as duas colunas extra

23.) Usa as seguintes definições nos outros botões

Botão 2:

  • Imagem de fundo: botão_2.jpg
  • Título: Conheça a Equipa
  • Texto do botão: Sobre Nós
  • Link: /sobre-nos

Botão 3:

  • Imagem de fundo: botão_3.jpg
  • Título: Novas Tendências
  • Texto do botão: Explorar
  • Link: /novas-tendencias

22.4 Quarta Seção (Divisor)

1.) Adiciona uma nova seção com 1 coluna

2.) Arrasta o elementor “Divisor” para dentro da coluna e usa as seguintes definições:

  • Estilo: Sólido
  • Peso: 4
  • Cor: #ebebeb
  • Espaçamento: 15

22.5 Quinta Seção (Título + Sub-título)

1.) Adiciona uma nova seção com 1 coluna

2.) Arrasta o elemento “Cabeçalho” para dentro da coluna

3.) Cola o seguinte texto na caixa Título: “Compre Estes Looks” e centraliza o texto

4.) Clica no menu Estilo > Colocar a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: preto (#000000)
  • Tamanho da fonte: 50
  • Família da fonte: Poppins
  • Espessura da fonte: 700

5.) Arrasta o elemento “Cabeçalho” para debaixo do elemento cabeçalho anterior

3.) Cola o seguinte texto na caixa Título: “Provavelmente não tem nada para vestir no armário” e centraliza o texto

4.) Clica no menu Estilo > Colocar a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: #999999
  • Tamanho da fonte: 18
  • Família da fonte: Yantramanav
  • Espessura da fonte: 400

5.) Clica no menu Avançado > retira a seleção dos “link values together” > Coloca uma margem inferior de 15

22.6 Sexta Seção (Chamado à Ação)

1.) Adiciona uma nova seção com 1 coluna

2.) Arrasta o elemento “Editor de Texto” para dentro da coluna

3.) Cola o seguinte texto na caixa de texto: “Quer ver mais produtos? COMPRE JÁ!” e centraliza o texto no próprio editor

4.) Define a cor da pergunta “Quer ver mais produtos?” para branco (#ffffff)

5.) Define a cor das palavras “COMPRE JÁ!” para laranja (#ff6600)

6.) Adiciona um link para a loja nas palavras “COMPRE JÁ!” selecionando as mesmas e clicando no ícone de link do editor de texto.

7.) Clica no menu Estilo > Coloca a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: #999999
  • Tamanho da fonte: 18
  • Família da fonte: Yantramanav
  • Espessura da fonte: 400

22.7 Sétima Seção (Rodapé personalizado)

1.) Adiciona uma nova seção com 1 coluna

2.) Arrasta o elemento “Social Icons” para dentro da coluna

3.) Apaga o ícone do Google Plus e adiciona os seguintes ícones: Pinterest, Instagram e Youtube

4.) Clica no menu Estilo > Em cor escolhe a opção Personalizar > Na Cor Primária > Arrasta a barra da transparência até baixo

5.) Arrasta o elemento “Editor de texto” para dentro da coluna abaixo do elemento “Social Icons”

6.) Coloca o seguinte texto na caixa de texto do Editor de texto: “FAQ    |    Política de Privacidade    |    Termos e Condições”

7.) Usa o editor de texto para colocar links para cada uma das páginas. Exemplo: /faq ; /politica-de-privacidade ; /termos-e-condicoes

8.) Usa o editor de texto para alterar a cor do texto para branca (#ffffff)

9.) Clica no menu Estilo e usa as seguintes definições de Tipografia:

  • Família da fonte: Yantramanav
  • Tamanho da fonte: 15
  • Peso da fonte: 400

10.) Duplica este último elemento do Editor de texto e coloca o seguinte texto na caixa do editor de texto: © 2018 – oteunegócio

11.) Arrasta o elemento “Espaçamento”, coloca 50px para adicionar um espaço superior e repete o processo para adicionar um espaço inferior.

12.) Clica em Update para salvar as alterações!

Passo 22. Criar Produtos Simples no WooCommerce

1.) No painel do WordPress vai ao menu Produtos e clica em Adicionar Novo

2.) Dá ao produto o título de “Vestido Branco Florido”

3.) No editor de texto coloca a descrição longa. Usei o seguinte texto:

“Este look marcou uma geração. Vista-o para um casamento, uma peça de teatro ou uma noite na cidade. Tudo o que você está procurando, esse look tem! Primavera, verão ou outono, não deixe este vestido escorrer de suas mãos. Feito a partir do tecido mais fino da Itália, esta roupa de designer foi feita para você. Forma adequada e elegante, conhecemos moda e sabemos que você vai adorar isso!”

4.) Nas OceanWP Settings usa as seguintes definições:

  • Main > Content Layout > Full Width (largura completa)
  • Title > Display Page Title > Disable

5.) Na opção Dados do produto seleciona “Produto Simples” e preenche os menus Geral, Inventário e Entrega com as informações particulares do produto

6.) Coloca uma breve descrição sobre o produto

7.) Na opção Categorias de produto cria uma categoria com o nome Vestidos

8.) Na opção Tags do produto cria uma tag com o nome vestidos

9.) Na Imagem do Produto define a imagem principal do produto. Usei a imagem “produto-1b-570×708”

10.) Na Galeria de imagens do produto define as imagens alternativas. Usei a imagem “produto-1a-570×708”

11.) Por fim clica em Publicar!

Passo 23. Criar Produtos Variáveis no WooCommerce

1.) Na página de produto simples, passa com o rato no separador superior que diz Novo e clica em Produto

2.)  Dá ao produto o título de “Vestido Preto Formal”

3.) No editor de texto coloca a descrição longa. Usei o seguinte texto:

“Este look marcou uma geração. Vista-o para um casamento, uma peça de teatro ou uma noite na cidade. Tudo o que você está procurando, esse look tem! Primavera, verão ou outono, não deixe este vestido escorrer de suas mãos. Feito a partir do tecido mais fino da Itália, esta roupa de designer foi feita para você. Forma adequada e elegante, conhecemos moda e sabemos que você vai adorar isso!”

4.) Nas OceanWP Settings usa as seguintes definições:

  • Main > Content Layout > Full Width (largura completa)
  • Title > Display Page Title > Disable

5.) Na opção Dados do produto seleciona “Produto Variável” e clica no menu Atributos

6.) No menu Atributos, onde diz Atributo personalizado do produto clica em Adicionar > Dá um nome ao atributo, ex: Tamanhos > Digita os valores separados por “|”, ex P | M | G > Clica na opção “Usado para Variações”

7.) Volta a Adicionar um atributo > Dá um nome ao atributo, ex: Cores > Digita os valores separados por “|”, ex Preto | Azul | Branco > Clicar na opção “Usado para Variações”

8.) Clica em Salvar atributos para guardar alterações

9.) Ainda na opção Dados do produto, clica no menu Variações para definir os preços dos atributos

10.) No menu Variações, clica no botão “Ir” para criar variações

11.) Cria uma variação para todas as cores (preto, azul e branco) colocando diferentes preços para cada uma delas 99, 75 e 49 respetivamente.

12.) Coloca uma breve descrição sobre o produto

13.) Na opção Categorias de produto, cria uma categoria com o nome Vestidos

8.) Na opção Tags do produto, cria uma tag com o nome vestidos

9.) Na Imagem do Produto define a imagem principal do produto. Usei a imagem “produto-2b-570×708”

10.) Na Galeria de imagens do produto define imagens alternativas. Usei a imagem “produto-2a-570×708”

11.) Por fim clicas em Publicar e vês como ficou o trabalho!

Passo 24. Adicionar Imagens dos Produtos à Página Inicial

Há duas formas de adicionar produtos à página inicial da loja, com o Elementor Pro (o meu método preferido) ou com a versão grátis.

Método com versão profissional do Elementor

1.) Na página Inicial clica em “Editar com Elementor”

2. Na lista dos elementos, em “Pro Elements” procura pelo elemento “Woo-Products” e arrasta para a seção onde desejas adicionar os produtos

3.) Nas definições do elemento podes escolher o número de colunas e produtos que aparecem na página inicial

Método com a versão gratuita do Elementor:

1.) Na lista dos elementos, procura pelo elemento “Shortcode” em General Elements

2.) Nas definições do elemento em conteúdo colocar o seguinte texto: [products]

Nota: A desvantagem do método gratuito é que não dá para escolher o número de colunas e o número de produtos a ser mostrados no catálogo.

Passo 25. Editar os Botões do WooCommerce

25.1 Alterar as cores dos botões dos produtos

1.) No painel do WordPress vai ao menu Aparência e clica em Personalizar

2.) No menu Personalizar clica na opção Custom CSS

3.) Cola este código na caixa de texto: .woocommerce ul.products li.product .button
{
background-color: #000000;
color: #fff!important;
text-transform: uppercase;
padding: 10px 20px;
border:0px;
}
.woocommerce ul.products li.product
.button:hover {
background-color: #323232;
color: #fff!important;
}

4.) Podes alterar as cores do botão, bastando para isso alterar os códigos das cores no código acima. Cuidado para não fazer mais nenhuma alteração ao código ou pode não funcionar!

5.) Clica em Publicar para salvar as alterações!

25.2 Alterar os textos dos botões dos produtos

1.) No painel do WordPress vai ao menu Plugins e clica em Adicionar Novo

2.) Na barra de pesquisa procura pelo plugin chamado “WC Custom Add to Cart Labels”

3.) Assim que o plugin aparecer clica em Instalar agora e depois Ativar

4.) A seguir, passa com o rato no menu do WooCommerce e clica em Configurações > Clica no separador Produtos > Clica no link Add to cart button labels

5.) Substitui todos os textos que dizem COMPRAR por ADICIONAR

6.) Por fim clica em Salvar as alterações!

PARABÉNS! Completaste com sucesso a página Inicial da loja virtual! 😀

Passo 26. Configurar a Página da Loja

26.1 Configurar a barra lateral da loja

1.) No painel do WordPress vai ao menu Aparência e clica em Widgets

2.) Adiciona os seguintes widgets à barra lateral do WooCommerce pela seguinte ordem: Procurar produto, Filtrar produtos por preço, Categorias de produto, Nuvem de tags do produtos

26.2 Alterar o título da página da loja

1.) No painel do WordPress vai ao menu Páginas e clica em Todas as páginas > Procura pela página da Loja > Clica em Editar

2.) Na página da Loja vai até às definições do tema (OceanWP Settings) e clica na aba que diz Title

3.) Na opção Custom Title (Título personalizado) coloca o texto: LOJA

26.3 Colocar links para as páginas das categorias

Para fazer este passo vamos usar o editor de texto do WordPress para criar linguagem HTML, é muito simples!

1.) No painel do WordPress vai ao menu Posts e clica em Adicionar novo post

2.) No modo visual escreve o seguinte texto: Acessórios   |   Casacos   |   Saias   |  T-Shirts   |   Vestidos

3. A seguir seleciona o texto e coloca a negrito (CTRL + B)

4. Coloca os links das categorias em cada uma das palavras. Para encontrares o link das categorias vai ao menu Produtos (do lado esquerdo) > Abre a opção Categorias num novo separador

5. Na página de Categorias consegues ver todas as categorias criadas, para veres os links basta clicar em “Ver” junto ao nome da categoria

6.) Copia o link > volta ao editor de texto > seleciona a palavra onde queres colocar o link > clica no ícone dos link do editor de texto > cola o link e clica em aplicar

7.) Repete os últimos dois passos para todas as categorias

8.) Agora tens de transformar o texto em linguagem HTML e para isso basta clicares na aba Texto no canto superior direito do editor e o WordPress coloca tudo em linguagem HTML por ti!

9.) Copia o código HTML da aba texto > volta à página de edição da Loja > OceanWP Settings > Title > Subheading > cola o código HTML

10.) Por fim clica em Atualizar e a seguir Ver página!

26.4 Alterar as cores dos links das categorias e dos elementos da barra lateral

1.) Vai ao menu Personalizar > Clica nas Opções Gerais > Estilo Geral > Na opção Cor Principal usa o seguinte código: #ef6700

2.) Clica em Publicar para salvar as alterações!

Passo 27: Criar a Página Sobre Nós

1.) No painel do WordPress vai ao menu Páginas > Clica em Todas as páginas > Procura pela página Sobre Nós > Clica em Editar

2.) Nas OceanWP Settings usa as seguintes definições:

  • Main > Margins > Disable
  • Title > Display Page Title > Disable

3.) Clica em Atualizar e de seguida em Ver página

27.1 Primeira Seção (Título, Espaçamento, Primeiro Divisor, Editor de texto, Segundo Divisor) 

27.11 Título

1.) Clica em Editar com Elementor > Adiciona uma seção com 1 coluna > Arrasta o elemento Cabeçalho para a seção

2.) Na caixa do título escreve: Sobre Nós > Centralizar o texto

3.) Clica no menu Estilo > Colocar a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: Preto (#000000)
  • Tamanho da fonte: 60
  • Família da fonte: Poppins

27.12 Espaçamento

1.) Clica no ícone dos elementos > procura pelo elemento Espaçamento > Arrasta o elemento para cima do cabeçalho > Coloca um espaçamento de 100

27.13 Primeiro Divisor

1.) Clica no ícone dos elementos > procura pelo elemento Divisor > Arrasta o elemento para debaixo do Cabeçalho > Usa as seguintes definições:

  • Peso: 3
  • Largura: 15
  • Cor: #f7be68
  • Alinhamento: centralizar

27.14 Editor de Texto

1.) Clica no ícone dos elementos > procura pelo elemento Editor de Texto > Arrasta o elemento para debaixo do Divisor

2.) Na caixa de texto usei o seguinte texto:

“A nossa paixão é criar peças únicas e elegantes. Não vamos parar até que todos usem as nossas roupas pois acreditamos no que fazemos e acreditamos que você vai adorar as nossas roupas. Ah, e espero que você goste muito deste design de loja virtual. Este é o melhor e mais completo tutorial de loja virtual do youtube. Vender on-line nunca foi tão fácil.

A nossa paixão é criar peças únicas e elegantes. Não vamos parar até que todos usem as nossas roupas pois acreditamos no que fazemos e acreditamos que você vai adorar as nossas roupas. Ah, e espero que você goste muito deste design de loja virtual. Este é o melhor e mais completo tutorial de loja virtual do youtube. Vender on-line nunca foi tão fácil.

A nossa paixão é criar peças únicas e elegantes. Não vamos parar até que todos usem as nossas roupas pois acreditamos no que fazemos e acreditamos que você vai adorar as nossas roupas. Ah, e espero que você goste muito deste design de loja virtual. Este é o melhor e mais completo tutorial de loja virtual do youtube. Vender on-line nunca foi tão fácil.”

3.) Clica no menu Estilo > Coloca a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: Cinzento escuro (#545454)
  • Tamanho da fonte: 18
  • Família da fonte: Yantramanav
  • Peso: 400

27.15 Segundo Divisor

1.) Clica no ícone dos elementos > procura pelo elemento Divisor > Arrasta o elemento para debaixo do Editor de texto > Usa as seguintes definições:

  • Peso: 1
  • Largura: 80
  • Cor: #dddddd
  • Alinhamento: centralizar

27.2 Segunda Seção (Título)

1.) Cria uma nova seção com 1 coluna

2.) Duplica o primeiro cabeçalho “Sobre Nós”

3.) Arrasta a cópia do elemento para a nova seção

4.) Altera o texto para: Nossa Equipa

5.) Clica no menu estilo > Altera o tamanho da fonte de 60 para 37

27.3 Terceira Seção (3 Caixas)

1.) Cria uma nova seção com 3 colunas

2.) Arrasta o elemento Imagem para a primeira coluna > Adiciona a imagem “botão_2.jpg”

3.) Arrasta o elemento Editor de texto para debaixo da imagem e coloca o seguinte texto:

Tiago Dantas
Desenvolvedor Web

4.) Clica no menu Estilo > Colocar a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: Cinzento escuro (#545454)
  • Tamanho da fonte: 17
  • Família da fonte: Yantramanav
  • Peso: 400

5.) Duplica a coluna duas vezes clicando em Duplicate coluna e apaga as duas colunas extra

6.) Clica em Update para salvar as alterações

27.4 Quarta Seção (Terceiro Divisor) 

1.) Cria uma nova seção com 1 coluna

2.) Duplica o segundo divisor clicando em Duplicate Widget

3.) Arrasta o elemento duplicado para a nova seção

27.5 Quinta Seção (Título)

 1.) Cria uma nova seção com 1 coluna

2.) Duplica o segundo cabeçalho “Nossa Equipa”

3.) Arrasta a cópia do elemento para a nova seção

4.) Altera o texto para: Ajudamos você a criar lojas incríveis

27.6 Sexta Seção (3 Caixas de Ícones)

 1.) Cria uma nova seção com 3 colunas

2.) Procura pelo elemento Ícone e arrasta para a primeira coluna

3.) Edita o elemento do lado esquerdo usando as seguintes definições

No conteúdo:

  • Nome do ícone: bullseye
  • Titulo: DESIGN
  • Descrição: Este design profissional vai ajudá-lo a conquistar a confiança dos seus visitantes e a vender mais

No menu Estilo:

  • Cor primária: (preto) #000000
  • Tamanho: 70

Menu Estilo > Conteúdo > Título:

  • Cor: (preto) #000000
  • Família da fonte: Poppins
  • Tamanho da fonte: 23
  • Peso: 600

Menu Estilo > Conteúdo > Descrição

  • Cor: (cinza) #808080
  • Família da fonte: Yantramanav
  • Tamanho: padrão
  • Peso: 400

4.) Para estreitar o texto clica no menu Avançado do elemento Ícone

5.) Na opção Margem retira a seleção dos “link values together” e cria uma margem direita de 20 e uma margem esquerda de 20

6.) Duplica duas vezes a coluna com o elemento Ícone clicando em Duplicate coluna

7.) Apaga as duas colunas extra

8.) Agora podes alterar as caixas bastando para isso clicar sobre elas e alterar as definições do lado esquerdo

9.) Como exemplo alterei apenas os nomes dos ícones que são “share-alt” e “envelope” respetivamente

27.7 Sétima Seção (Chamado à ação com botão)

1.) Cria uma nova seção com 1 coluna

2.) Clica em Edit seção > Em Layout coloca Stretch Section (Esticar a seção) > Sim

3.) Clica no menu Estilo > Tipo de fundo > Clica em Clássico > Seleciona a Cor > Usa esta cor: #efefef

4.) Duplica o cabeçalho da seção anterior e arrasta para a nova seção

5.) Altera o texto para: Quer trabalhar connosco?

6.) Clica no ícone dos elementos e arrasta o elemento Botão para debaixo do elemento cabeçalho

7.) No editar botão coloca o texto: Entre em Contato

8.) Na opção link, coloca um link interno para a página de contato: /contato

9.) Na opção alinhamento centraliza o botão

10.) Clica no menu Estilo e usa as seguintes definições para o botão

  • Cor de fundo: #ff9900
  • Cor de fundo Hover (quando o rato passa por cima): #df7213

11.) Clica em Edit seção > Vai ao menu Avançado > Retira a seleção dos “link values together” > Coloca um Padding de 50 inferior e superior

12.) Clica em Save seção para guardar um template desta seção com o nome de “chamado_ação”

27.8 Oitava Seção (Rodapé)

1.) Clica em Add Template > My Templates > Clica Insert em Rodapé_loja_virtual

2.) Clica no Edit seção do rodapé e em Stretch Section (Esticar a seção) diz que Sim

3.) Para terminar o design da página sobre clicas em UPDATE!

Passo 28: Criar a página de FAQ (Perguntas Frequentes)

1.) Volta ao painel do WordPress

2.) Vai ao menu Páginas do lado esquerdo e clica em Adicionar nova

3.) Dá o título “FAQ” à página ou “Perguntas Frequentes”

4.) Nas OceanWP Settings usa as seguintes definições:

  • Main > Margins > Disable
  • Title > Display Page Title > Disable

5.) Publica a página

6.) Clica em Editar com Elementor

28.1 Primeira Seção (Título, Espaçamento, Divisor)

28.11 Título

1.) Cria uma seção com 1 coluna

2.) Arrasta o elemento Cabeçalho para a seção

3.) No menu Conteúdo usa as seguintes definições:

  • Título: Perguntas Frequentes
  • Alinhamento: Centro

4.) Clica no menu Estilo e usa as seguintes definições:

  • Cor do texto: #000000
  • Família da fonte: Poppins
  • Tamanho: 60
  • Peso: 600

28.12 Espaçamento (podemos também usar as margens)

1.) Clica no ícone para abrir os elementos e arrasta o elemento Espaçamento para cima do elemento Cabeçalho

2.) Coloca um espaçamento de 100

28.13 Divisor

1.) Clica no ícone para abrir os elementos e arrasta o elemento Divisor para baixo do elemento Cabeçalho

2.) No menu Conteúdo do elemento Divisor coloca:

  • Peso: 3
  • Cor: #f7be68
  • Largura: 15
  • Alinhamento: Centro

28.2 Segunda Seção (Título, Alternar, Padding)

28.21 Título

1.) Cria uma nova seção com 1 coluna e arrasta o elemento Cabeçalho para dentro da seção

2.) No menu Conteúdo do elemento Cabeçalho coloca:

  • Título: Informações de Envio

3.) Clica no menu Estilo do elemento Cabeçalho e usa as seguintes definições:

  • Cor: #ff6600
  • Família da fonte: Poppins
  • Tamanho: 23
  • Peso: 600

4.) Clica no menu Avançado do elemento Cabeçalho > Retira a seleção dos “link values together” > Coloca uma margem esquerda de 15

5.) Clica em Save Seção e dá o nome de “titulo_paginas” porque vamos aproveitar esta seção para a página de Contato

28.22 Alternar

1.) Clica no ícone para abrir os elementos e procura pelo elemento Alternar (em General Elements)

2.) Arrasta o elemento Alternar para baixo do Cabeçalho anterior

3.) Nas abas coloquei as seguintes perguntas:

Quais métodos de envios estão disponíveis?
Enviam internacionalmente?

4.) Podemos duplicar as abas para criar mais perguntas e alterar a posição das abas arrastando com o rato

5.) Clica no menu Estilo do Elemento Alternar e usa as seguintes definições

Para o título:

  • Cor: #545454
  • Família da fonte: Yantramanav
  • Tamanho da fonte: 18
  • Peso: 700

Para o conteúdo:

  • Cor: #545454
  • Família da fonte: Yantramanav
  • Tamanho da fonte: 18
  • Peso: 400

28.23 Padding

1.) Clica no Edit seção da segunda seção

2.) Clica no menu Avançado

3.) Retira a seleção dos “link values together” na opção Padding

4.) Coloca um Padding superior e inferior de 30

28.3 Terceira Seção (Chamado a ação)

1.) Clica em Add Template > My Templates

2.) Insere o template com o nome “chamado_açao”

3.) Altera o texto para: Tem Mais Questões?

28.4 Quarta Seção (Rodapé)

1.) Clica em Add Template > My Templates

2.) Insere o template com o nome “rodapé_loja_virtual”

3.) Clica em Edit seção no rodapé e em “Stretch Section” clica Sim para esticar a seção

4.) Clica em UPDATE para salvar as alterações!

Passo 29: Criar a página de Contato

1.) No painel do WordPress vai ao menu Páginas e clica em Todas as páginas

2.) Procura pela página de Contato e clica em Editar

3.) Nas OceanWP Settings usa as seguintes definições:

  • Main > Margins > Disable
  • Title > Display Page Title > Disable

4.) Publica a página

5.) Clica em Editar com Elementor

29.1 Primeira Seção (Título e Editor de texto)

29.11 Título

1.) Clica em Add Template > My Templates > Insere o template “titulo_paginas”

2.) Altera o texto para: Vamos Falar!

29.12 Editor de texto

1.) Clica no ícone dos elementos e arrasta o elemento Editor de texto para baixo do elemento Divisor

2.) Coloca as informações sobre o teu negócio, ex:

VIVEDANET
Bangkok, Bkk 10110
T: 123.111.222.333 | E: tiago@vivedanet.com

3.) Usa o editor de texto do elemento Editor de texto para:

  • Centrar o texto
  • Colocar um link no email
  • Alterar a cor do email para laranja

4.) Clica no menu Estilo e usa as seguintes definições:

  • Família da fonte: Yantramanav
  • Tamanho: 18
  • Peso: 400

29.2 Segunda Seção (Google Mapas)

1.) Cria uma nova seção com 1 coluna

2.) Arrasta o elemento Google Mapas para dentro da seção

3.) Coloca o endereço no menu Conteúdo lado esquerdo, ex: 45/19 Khwaeng Phra Khanong Nuea, Khet Watthana, Krung Thep Maha Nakhon 10110

4.) Define a altura do mapa para 500

5.) Clica em Edit seção e no menu Layout usar as seguintes definições

  • Stretch Section: Sim
  • Largura do conteúdo: Largura total
  • Espaçamento da coluna: Sem espaçamento

29.3 Terceira Seção (Rodapé)

1.) Clica em Add Template > My Templates

2.) Insere o template com o nome “rodapé_loja_virtual”

3.) Clica em Edit seção no rodapé e em “Stretch Section” clica Sim para esticar a seção

4.) Clica em UPDATE para salvar as alterações!

Passo 30: Criar um Artigo (post) no Blog

Nota: Vou usar o Elementor Pro para criar os artigos do blog.

Segue estes passos para criares um artigo com design profissional!

1.) No painel do WordPress vai até ao menu Posts e clica em Adicionar novo

2.) Coloca o título: Temos o Que Precisa

3.) No lado direito, onde diz Atributos do post seleciona: Elementor Canvas

4.) Clica em Atualizar página

5.) Clica em Editar com Elementor

30.1 Primeira Seção (Logo e Menu)

30.11 Logo

1.) Cria uma seção com 2 colunas

2.) Na barra de pesquisa dos elementos, pesquisa pelo elemento com o nome “Custom Header Logo”

30.12 Menu

1.) Clica no ícone dos elementos e nos Pro Elements procura pelo elemento Nav Menu

2.) Arrasta o elemento Nav Menu para a coluna do lado direito

3.) Define 20% de proporção na coluna da esquerda e 80% na coluna da direita

4.) No menu conteúdo do elemento Nav Menu, em Layout alinha o menu à direita

5.) Clica no menu Estilo e usa as seguintes definições:

  • Cor do texto: #000000
  • Família da fonte: Poppins

Clica em Hover (quando o rato passa por cima):

  • Cor do texto (hover): #000000
  • Pointer Color (hover): #f57d5f

6.) Clica em UPDATE para guardar as alterações!

30.2 Segunda Seção (Imagem de fundo, Título do artigo, Escurecer o fundo, Colocar o fundo fixo)

30.21 Imagem de fundo

1.) Cria uma nova seção com 1 coluna

2.) Clica em Edit seção

3.) Clica no menu Estilo e em Background > Clica no pincel Clássico > Seleciona a imagem “imagem_artigo.jpg” > Clica em Inserir mídia

4.) Clica no menu Layout (estrutura) e define

  • Altura: Ajustar à tela
  • Espaçamento da coluna: Sem espaçamento

30.22 Título do artigo

1.) Na seção inferior clica em Add Template > Clica em My Templates

2.) Insere o template com o nome “titulo_paginas”

3.) Elimina o elemento Espaçamento do Template

4.) Arrasta o elemento Cabeçalho para a coluna do conteúdo da seção superior (onde está a imagem)

5.) Clica no widget para editar o elemento Cabeçalho e no menu conteúdo, em Tag HTML coloca H1 (este passo serve para informar o Google e outros motores de busca que este é o título mais importante do conteúdo)

6.) Arrasta o elemento Divisor para a coluna do conteúdo da seção superior (onde está a imagem) abaixo do elemento Cabeçalho

7.) Clica no widget do elemento Cabeçalho para editar

8.) Clica no menu Estilo do elemento Cabeçalho > altera a cor do texto para branco (#ffffff)

30.23 Escurecer o fundo (background overlay)

Para lermos bem o título do artigo temos de escurecer a imagem de fundo, para isso segue os seguintes passos:

1.) Clica em Edit Seção na seção da imagem de fundo

2.) Clica no menu Estilo e na opção Background Overlay > Tipo de fundo > Clássico > Cor: #000000 > Define a Opacidade: 0,4

30.24 Colocar o fundo fixo

1.) 1.) Clica em Edit Seção na seção da imagem de fundo

2.) Clica no menu Estilo e na opção Background > Em anexo > Escolhe a opção “Fixo”

3.) Clica em UPDATE para salvar as alterações

30.3 Terceira Seção (Editor de texto)

1.) Cria uma seção com 1 coluna

2.) Arrasta o elemento Editor de texto para a nova seção

3.) Adiciona este texto:

Para criar esta loja virtual usei as versões gratuitas do tema OceanWP e do construtor de páginas Elementor. Contudo, a página de blog foi criada com a versão profissional do Elementor. Era uma vez um construtor de páginas. O Plugin Elementor é sem dúvidas o melhor construtor de páginas que podes usar para editar tudo entre o cabeçalho e o rodapé do teu site.Ele permite-te criar um número ilimitado de colunas para cada página e controlar todas as opções de design do teu site. Como por exemplo as cores de fundo, mais de 600 tipos de letra, imagens, vídeos de fundo, transparências, margens, mais de 400 ícones e muito mais. Na versão Pro do Elementor ainda podes adicionar elementos mais profissionais como por exemplo tablelas de preço, títulos animados, cronómetros, etc. Visita o site do Elementor para ficares a conhecer todas as possibilidades de design que este construtor de páginas fantástico oferece. Eleva o teu design a outro nível com o OceanWP e o Elementor! Links úteis 1.) OceanWP 2.) Elementor

4.) Para editar o texto vamos usar o editor do elemento Editor de texto e as edições exemplificadas no tutorial são:

  • Dar espaço entre os parágrafos
  • Definir os sub-títulos
  • Colocar links
  • Adicionar Imagens

5.) Clica no menu Estilo e usa as seguintes definições:

  • Família da fonte: Yantramanav
  • Tamanho da fonte: 18
  • Peso: 400

6.) Clica no menu Avançado do Editor de Texto > Na Margem retira a seleção dos “link values together” > Coloca as seguintes margens:

  • Superior: 20
  • Direita: 150
  • Inferior: 20
  • Esquerda: 150

30.4 Quarta Seção (Caixa de autor)

1.) Cria uma seção com 1 coluna

2.) Arrasta o elemento Author Box para a seção

3.) No menu Conteúdo do elemento Author Box em Source seleciona: Personalizar

4.) Em Profile Picture (fotografia de perfil) adiciona uma fotografia de perfil redonda

5.) Ainda no menu Conteúdo, adiciona um Nome e Biografia

6.) Clica no menu Avançado> Na Margem retira a seleção dos “link values together” > Coloca as seguintes margens:

  • Direita: 150
  • Esquerda: 150

7.) No menu Avançado > Clica em Background > escolhe o tipo de fundo Clássico > usar a cor: #fcf7f7

8.) No menu Avançado > Clica em Borda e usa as seguintes definições

  • Tipo de borda: sólida
  • Largura da borda: 2 (em todos os lados)
  • Cor da borda: #e0e0e0
  • Arredondamento da borda: 45

9.) No menu Avançado, clica em Estilo do elemento e coloca um Padding de 20 em todas as direções

30.5 Quinta Seção (Comentários do Facebook)

1.) Cria uma seção com 1 coluna

2.) Arrasta o Elemento Facebook Comments (este elemento pertence aos Pro Elements) para a seção

3.) No menu Conteúdo define o target URL (a página do Facebook do teu negócio)

4.) Clica no menu Avançado> Na Margem retira a seleção dos “link values together” > Coloca as seguintes margens:

  • Direita: 150
  • Esquerda: 150

30.6 Sexta Seção (Rodapé)

1.) Clica em Add Template > My Templates

2.) Insere o template com o nome “rodapé_loja_virtual”

3.) Clica em UPDATE para salvar as alterações!

Passo 31. Criar a Página de Blog (Novas Tendências)

A página de blog vai ser criada com o Elementor Pro.

Antes de criarmos a página de blog temos de informar o WordPress que não queremos que este use o design padrão do tema OceanWP na página de blog  (pois queremos editar a página com o Elementor)

1.) Para isso vai ao menu Personalizar > Clica em Configurações da página inicial > Em Páginas de posts > NÃO seleciones nenhuma página

2.) Volta ao painel do WordPress, vai ao menu Páginas e clica em Todas as páginas

3.) Procura pela página Novas Tendências e clica em Editar

4.) Nas OceanWP Settings usa as seguintes definições:

  • Main > Margins > Disable
  • Title > Display Page Title > Disable

5.) Atualiza a página

6.) Clica em Editar com Elementor

31.1 Primeira Seção (Título)

1.) Clica em Add Template > Clica em My Templates

2.) Insere o template com o nome “titulo_paginas”

3.) Altera o título para: Blog

4.) Clica no menu Estilo e em Tipografia altera o tamanho da fonte para 100

5.) Clica no menu Avançado retira a seleção dos “link values together” e coloca uma margem inferior de 20

31.2 Segunda Seção (Posts)

1.) Adiciona uma nova seção com 1 coluna

2.) Clica no ícone dos elementos e arrastar o elemento Posts (Pro Element) para dentro da seção

3.) Na edição do elemento Posts, no menu Conteúdo, usa as seguintes definições:

  • Skin: Classic
  • Colunas: 3
  • Mansory: Sim
  • Tamanho da imagem: Tela cheia
  • Meta data: Author, Date, Time
  • Alterar “Read More” para “Leia mais”

4.) Clica no menu Estilo > e em Conteúdo usa as seguintes definições para o Título:

  • Cor: #000000
  • Família da fonte: Poppins
  • Tamanho: 30
  • Peso: 600

Para o Excerpt (Exerto)

  • C0r: #545454
  • Família da fonte: Yantramanav
  • Tamanho: 18
  • Peso: 400

Botão Read More (Leia mais)

  • Cor: #eb785b
  • Família da fonte: Yantramanav
  • Tamanho: 18
  • Peso: 700

31.3 Terceira Seção (Posts)

1.) Clica em Add Template > My Templates

2.) Insere o template com o nome “rodapé_loja_virtual”

3.) Clica no Edit seção e em Stretch Section diz Sim

4.) Clica en UPDATE para salvar as alterações!

Passo 32: Colocar um Menu Fixo (Sticky Menu)

1.) No painel do WordPress, vai ao menu Plugins e clica em Adicionar Novo

2.) Na barra de pesquisa de plugins introduz: mystickymenu

3.) Instala e ativa o plugin My Sticky Menu

4.) Vai ao menu Configurações e clica em myStickyMenu para abrir as definições do plugin

5.) Em General Settings, na Sticky Class coloca: #site-header

6.) Clica no menu Style e usa as seguintes definições:

  • Sticky Opacity: 100
  • Sticky Transition Time: 0

7.) Para colocar uma cor de fundo vai ao código que está no CSS style, apaga a palavra “none” que está em frente à palavra “background” e coloca o código hex desejado, ex (preto): #000000

8.) Clica em salvar as alterações e voilá! Já tens um menu fixo no site 🙂

Passo 33: Configurar o WooCommerce

1.) Volta ao painel do WordPress

2.) Passa com o rato no menu WooCommerce e clica em Configurações

3.) Clica no separador Geral e preenche com as informações necessárias sobre a tua empresa (Endereço da loja, Opções Gerais, Opções de Moeda)

4.) Clica no separador Produtos e clica no link Geral onde podemos editar as unidades de peso e de medida

5.) Clica no separador Produtos e clica no link Exibição (agora este passo é feito no menu Personalizar > WooCommerce (1ª opção) e usar as seguintes definições:

  • Página da loja: Loja
  • Exibir página da loja: Exibir produtos
  • Exibição de categoria padrão: Exibir produtos
  • Padrão de ordenação de produtos: Ordenar por mais recentes

6.) Clica no separador Taxa e clica no link Taxas padrões para inserir as taxas necessárias

7.) Clica no separador Entrega e nas Áreas de Entrega podes definir diferentes taxas (taxa fixa, frete grátis ou retirar no local) de acordo com cada local de entrega

8.) Clica no separador Finalizar compra e nas Opções de pagamento podes desabilitar o uso de cupões > Na opção Páginas de pagamento > Define uma página para Termos e condições

9.) No separador Finalizar compra clica no link cheque e desabilita a opção cheque > Clica em Salvar alterações

10.) No separador Finalizar compra clica no link PayPal e escolhe o email associado com a tua conta PayPal > Em Opções avançadas coloca o mesmo email no e-mail do destinatário > Em Credenciais da API coloca as credenciais API do PayPal para poderes enviar reembolsos pelo PayPal (mostro como fazer isso no vídeo)

11.) No separador Contas habilita a opção “Habilitar cadastro de clientes na página minha conta.”

12.) No separador Emails certifica-te que introduziste o email correto para receberes as notificações importantes da loja virtual

Passo 34: Personalizar o WooCommerce (Estilo Avançado)

No menu Personalizar, clica no segundo menu do WooCommerce > Clica em Estilo avançado e usa as seguintes opções

  • Fundo da venda: #ef6700
  • Entrada de produto > Cor do preço : #ef6700
  • Cor do adicionar ao carrinho hover: #777777
  • Cor da borda do adicionar ao carrinho hover: #000000
  • Add to Cart Border (Size): 5%
  • Add to Cart Border (Radius): 5%
  • Produto único > Cor do preço: #ef6700

Passo 35: Tornar o Site Responsivo (Página Inicial)

FIM!

Parabéns!!

Por favor subscreve ao canal do Youtube do VIVEDANET pois vou fazer mais vídeos no futuro sobre como personalizar a loja virtual.

EXTRA: Redimensionar as Imagens dos Produtos  – OPCIONAL

Se instalaste o tema OceanWP num site de WordPress existente, tens de certificar-te que as imagens dos produtos do WooCommerce ficam bem com o tema novo.

Para garantir que as imagens ficam perfeitas recomendo que instales o plugin Regenerate Thumbnails.

Após instalado e ativo podes aceder ao plugin através do menu Configurações.

Clica no botão “Regenerate Thumbnails” e aguarda uns minutos para que as imagens sejam redimensionadas.

O que precisas

1.) Algum tempo (para seguires o tutorial do Youtube e fazeres a tua loja no WordPress)

2.) Um domínio (ex: www.atualoja.com)

3.) Uma Hospedagem (o servidor que permite guardares os textos e as imagens do teu site na Internet, acessível a todo o mundo 24h por dia e livre de publicidade)

4.) O tema de WordPress OceanWP e o constutor de páginas Elementor (a melhor combinação gratuita para criar uma loja virtual no WordPress!)

Para hospedarmos o nosso site recomendo a versão norte-americana do Hostgator. A versão norte-americana é mais barata, mais rápida e mais simples de usar do que a versão .com.br

Além disso o governo não tem acesso aos nossos dados pela versão norte-americana, ao contrário da versão .com.br onde temos de fornecer o CNP J e preencher mais papelada.

Também podes usar o Hostgator para obter o nome de domínio. Se queres usar outra empresa como a GoDaddy para obter o domínio – vê este vídeo para instruções passo a passo.

Porquê o Hostgator?

1.) Rápido, confiável, barato e excelente suporte

2.) Uso o Hostgador desde sempre e não tenho queixas

Desconto no Hostgator

Por favor usa o seguinte cupão de desconto na tua compra do Hostgatorplanoeconomico – desconto até 60% (o mais alto possível)

Muito bem, agora que já sabes o que precisas, vamos começar a criar no nosso site!

Passo 1: Registrar o Domínio e a Hospedagem

O domínio é o nosso endereço (o que as pessoas escrevem na barra de endereços para encontrá-lo). Isto é OBRIGATÓRIO.

Precisas também da Hospedagem de forma a guardar todo o conteúdo do teu site no ar (textos, imagens, vídeos).

Todos os sites precisam de hospedagem, por isso certifica-te que tens uma hospedagem profissional, caso contrário não consegues construir o teu site livre de publicidade e spam como ensino no tutorial. Isto é OBRIGATÓRIO.

Vai até à versão norte-americana do Hostgator (por aqui)

1.) Clica no menu Web Hosting – Escolhe um plano (recomendo o Hatchling para começar)

2.) Clica em Sign Up Now

> Recomendo o Hostgator norte-americano porque é mais barato e fácil começar um site. Tem um excelente suporte – Gosto muito deles! (mas podes escolher qualquer serviço que preferires!)

Escreve o nome de domínio que queres na barra de pesquisa e clica em Enter para ver se está disponível. Se encontraste um domínio disponível vamos aos próximos passos! 😀

> Usa o cupão de desconto: planoeconomico para poupares até 60%

> (é um link afiliado, recebo uma comissão do Hostgator por te ajudar)

Os principais benefícios da hospedagem do Hostgator

1.) Barata e rápida

2.) Bom atendimento ao cliente com chat ao vivo 24h por dia

3.) Fácil de instalar o WordPress – tudo o que precisas para criar a tua loja

1.) Decide qual é o plano ideal para ti (se só queres criar um site – escolhe o Hatchling Plan, se achas que precisas de mais do que um site – escolhe o Baby Plan)

2.) Preenche toda a informação (sugiro que escolhas um ciclo de pagamento de 12 meses)

3.) Retira a seleção de todos os serviços extra dos quadradinhos (são desnecessários nesta fase inicial e poupas mais dinheiro)

4.) Coloca o cupão “planoeconomico” para um desconto de até 60% (o nosso código promocional especial!)

5.) Aceita os termos e condições e clica em “Check Out Now”

Passo 2: Abrir a Caixa de Email

Vais receber um email do Hostgator com os teus dados de login – o assunto do email diz “Your Account Info” e é muito importante! Guarda-o bem!

Usa essa informação para o passo 3.

Passo 3: Login no Cpanel

1.) Usa os dados que recebeste do Hostgator para fazer login no Cpanel

2.) Clica no link que diz “Your Control Panel”

3.) Faz login com o username e a password que estão no email

Agora começa a parte divertida, criar a loja virtual!

Passo 4: Instalar o WordPress

Agora precisamos de instalar a plataforma que vamos usar para criar o nosso site. Esta plataforma chama-se WordPress – é um sistema de gestão de conteúdo super popular e com uma grande comunidade de utilizadores.

1.) Agora que estamos loggados no cpanel

2.) Rola até à secção da primeira página que diz Software/Services

3.) Clica no ícone que diz “QuickInstall”

4.) Clica em WordPress

5.) Clica em Continue

6.) Introduz um email de administrador (o teu melhor email), título do blog (podes mudar isto mais tarde), nome de utilizador e outros detalhes.

7.) Clica em “Install Now!”

Ótimo! Agora temos o WordPress instalado! Podes visitar o teu domínio e ver que já existe um site (vamos tratar dele e colocá-lo bonito – não te preocupes!)

Passo 5: Fazer Login no Painel do WordPress

Podes ter de esperar 5-15 minutos antes que seja possível fazer login no teu site. Aproveita para fazer uma pausa.

Há duas formas de entrar no teu site

1.) Podes clicar no link que o Hostgator forneceu logo após a instalação e usar o nome de utilizador e a password

2.) Podes ir até à tua caixa de email e abrir o novo email que recebeste com os detalhes para entrares no teu site (mesma informação acima)

Para personalizar e adicionar conteúdo ao teu site vais sempre ter de entrar no teu site através este link: www.OTeuSite.com/wp-admin

Por isso força, faz login!

Passo 6: Alterar a Password no WordPress

A próxima coisa que vamos fazer é alterar aquela password complicada do WordPress para a nossa própria password.

Segue os seguintes passos

1.) No menu do lado esquerdo clica em Usuários

2.) Seleciona a opção Seu Perfil

3.) Rola um pouco até encontrares a opção Gerenciamento da Conta

4.) Clica em Gerar Senha

5.) Define uma nova senha (no mínimo com um nível de dificuldade médio)

6.) Rola até baixo e clica em Atualizar Perfil

7.) Volta a fazer login no WordPress usando a nova senha

Passo 7: Colocar o WordPress em Português

1.) No menu do lado esquerdo clica em “Settings”

2.) Clica em “General”

3.) Rola um pouco para baixo até encontrares a opção “Site Language”

4.) Altera o WordPress para Português / Português do Brasil

Neste tutorial vou usar o Português de Brasil pois 9 em cada 10 pessoas que assistem aos meus vídeos são do Brasil. Oi galera!

Passo 8: Limpar os Plugins Pré-instalados do WordPress

Os plugins estão para o WordPress como as apps estão para os telemóveis. Eles permitem adicionar características extra ao design do nosso site.

Mas não vamos usar nenhum dos plugins que já vêm pré-instalados com o WordPress, por isso vamos desinstalá-los e assim libertar algum espaço no nosso site.

1.) Clica em Plugins no menu do lado esquerdo do painel

2.) Seleciona a opção Plugins Instalados

3.) Acima da lista de plugins na setinha que diz “Ações em massa” seleciona a opção “Desativar”

4.) Clica no quadradinho Plugin em cima para selecionar todos

5.) De seguida clica em Aplicar

6.) Volta a clicar em “Ações em massa” e desta vez seleciona a opção “Excluir”

7.) Clica no quadradinho Plugin em cima para selecionar todos

5.) Para excluir todos clica em Aplicar

Muito bem, o nosso WordPress ficou bem mais leve!

Passo 9: Instalar o tema OceanWP e os Plugins Recomendados

Para criar a nossa loja virtual vamos usar o tema OceanWP porque:

1.) É grátis, leve e rápido

2.) Tem boa integração com o Woo-Commerce (plugin que permite configurar os produtos da nossa loja)

Para instalar o tema:

1.) Vai até ao site do OceanWP

2.) Coloca os teus dados e clica em “Get it Now”

2.) Abre a caixa de email e clica no link para baixar tema

3.) Guardar o ficheiro ZIP no ambiente de trabalho

3.) Entra no painel do WordPress

4.) Clica no menu Aparência > Temas > Adicionar Novo > Enviar Tema

5.) Escolhe o ficheiro ZIP que está no ambiente de trabalho

6.) Clica em Instalar Agora e ativa o tema.

Após a instalação do tema vais reparar no texto acima a dizer que o tema recomenda os seguintes plugins: Ocean Extra e o Elementor.

Vamos clicar no link que diz “Comece a instalar plugins” para instalar os plugins sugeridos.

Excelente! Já temos o nosso tema e os plugins recomendados instalados! Agora podemos ver como está o nosso site passando com o rato no ícone da casinha no canto superior esquerdo e clicando em Visitar site.

Vais reparar que o design padrão do OceanWP é bem simples. Isso é uma vantagem. Queremos que o tema seja simples e leve para podermos personalizar à vontade!

Passo 10: Adicionar Páginas à Loja Virtual

Vamos adicionar as páginas Início, Sobre Nós, Blog e Contato à loja virtual.

Para criar uma página é muito simples:

1.) Clica no menu páginas do lado esquerdo

2.) Clica em Adicionar Nova

3.) Escolhe o título para a página

4.) Clica em Publicar

5.) Repete o processo descrito acima para todas as páginas

Claro que falta adicionar as páginas da Loja, onde vamos promover os nossos produtos. Essas página vão ser adicionadas de uma outra forma, no próximo passo.

Passo 11: Instalar WooCommerce + Páginas da Loja Virtual

O plugin WooCommerce é a aplicação grátis que nos vai permitir configurar a loja virtual no WordPress (adicionar produtos, definir preços, gerir stocks, etc)

Para instalar o WooCommerce

1.) Clica no menu Plugins > Adicionar Novo

2.) Procura por “woocommerce” e instala o plugin

3.) Clica em ativar e pronto!

Depois de instalado somos redirecionados para o assistente de configuração do WooCommerce, rolamos até baixo e clicamos em “Agora não”.

Este plugin também vai-nos fornecer 3 páginas extra que faltam no nosso site: Carrinho, Loja e Finalizar Compra.

Para instalar essas páginas vamos ao menu “Woo-Commerce” > clicamos em Status > Ferramentas > Procuramos pela opção “Criar as páginas padrões do WooCommerce” > clicamos em “Criar Páginas”

Podemos confirmar que as páginas padrão do WooCommerce foram instaladas. Vamos até ao menu Páginas e lá podemos ver que as novas páginas foram adicionadas com sucesso! Fantástico 🙂

Passo 12: Definir Página Início Como Página Principal

Já deves ter reparado que por padrão o WordPress mostra os últimos posts na página principal do nosso site. Mas nós criámos uma página Início e queremos defini-la como a página principal estática para o nosso site!

Então vamos tratar disso:

1.) Vamos ao menu Configurações

2.) Clicamos em Leitura

3.) Na primeira opção, onde diz “Sua página inicial exibe”, seleciona “Uma página estática”

4.) Abaixo seleciona a página Início para página incial

5.) Para a página de posts escolhe o nome da página de blog, ou deixa em branco se não quiseres ter um blog

6.) Rola até abaixo e clica em Salvar alterações.

Passo 13 (opcional): Baixar as Imagens da Loja Virtual Demo

Clica aqui para baixares todas as imagens que usei no tutorial do YouTube da loja demo.

Melhores bancos de imagens grátis:

Pixabay – Boas imagens de alta resolução, assim como vetores. Centenas de milhares de opções!

FreeImages – Mais de 400.000 imagens online que podes usar livremente nos teus sites, com uma qualidade de razoável a boa.

Flickr – Imagens de fotógrafos profissionais que optam por partilhar alguns dos seus trabalhos gratuitamente!

Melhores bancos de imagens pagos:

Shutterstock  – Neste site vais encontrar aquela imagem perfeita que tanto procuras, não falta nada e tudo com ótima qualidade!

iStockphoto – Site parecido com o Shutterstock, com uma gigante base de imagens de alta resolução.

GettyImages – Mais um banco de imagens incrível com fotos profissionais para todos os gostos!

Passo 14: Alterar os Links Permanentes

Este passo serve para tornar os links do nosso site mais bonitos e apelativos. Isto é bom não só para os nossos visitantes como para os motores de busca.

Para isso vamos até ao menu Configurações > Links Permanentes > Configurações comuns > Alterar para “Nome do post”

Desta forma quando criamos uma página ou um artigo no blog, esse link fica limpo. Exemplo: se criares uma página com o nome “artigo” o link dessa página será oteusite.com/artigo em vez de oteusite.com/2017/12/artigo

Passo 15 (opcional): Aumenta a Performance do Nosso Site

 

Nos meus tutoriais anteriores algumas pessoas diziam que não conseguiam ver logo as alterações que faziam no WordPress. Por isso neste tutorial vou recomendar um plugin que permite não só ver logo as alterações como aumentar a performance do nosso site!

Uso este plugin no vivedanet.com e gosto muito, funciona na perfeição!

Para instalá-lo vamos ao menu Plugins > Adicionar Novo > Pesquisar por “Autoptimize” > Instalar e Ativar o plugin

Agora vamos à lista de plugins, procuramos pelo Autoptimize e clicamos nas “configurações” > vamos selecionar os três quadradinhos para otimizar o site ao máximo!

Por fim clicamos em “Salvar mudanças e esvaziar a cache”.

Repara que no topo do nosso site temos um ícone chamado Autoptimize. Sempre que fizeres alguma alteração no teu WordPress e não conseguires ver de imediato podes limpar a cache passando com o rato por cima do ícone com o círculo verde e clicando em “Limpar Cache”

Passo 16: Personalizar o Cabeçalho

16.1) Identidade do Site

Para personalizarmos o cabeçalho vamos ao menu Aparência > Personalizar

Na primeira opção “Identidade do Site” podemos alterar o título do site e a descrição.

A descrição é muito importante pois é a frase que melhor descreve a nossa loja e aquilo que vendemos. Esta descrição vai ser vista pelos nossos visitantes e vai ser usada pelo Google para recomendar o nosso site, é muito importante!

Escolhe uma descrição rica em palavras-chave importantes relacionadas com o teu negócio.

16.2) Adicionar o Ícone (Favicon)

1.) Baixa o ficheiro ZIP com as imagens do Passo 13

2.) Aparência > Personalizar > Identidade do Site > Adicionar o Ícone > Enviar Aquivos > Adicionar o Favicon que está na pasta das imagens demo

16.3) Editar a barra superior

As definições que usei  foram as seguintes:

  • Cor de fundo: #00000
  • Cor da borda: #00000
  • Cor do texto: #ffffff

Conteúdo: Portes grátis para todas as compras a partir de 50€!

Redes sociais: Facebook, Pinterest, Instagram, YouTube

Cor dos ícones das redes sociais: #ffffff

Nota: Para desativar a barra superior vai ao menu Aparência > Personalizar > Barra Superior > Geral > Retirar a seleção do quadradinho

16.4) Definições de Cabeçalho

Clica em Cabeçalho > Geral e usar as seguintes definições:

  • Estilo: Transparente
  • Header border bottom: Retirar a seleção do quadradinho

Clicar em Cabeçalho > Logo

  • Adicionar o logo
  • Largura máxima: 0
  • Max Height (altura máxima): 42

Clicar em Cabeçalho > Menu

  • Cor do link: #ffffff
  • Cor do link hover: #a1a1a1
  • Cor do link item do menu atual: #ffffff
  • Estilo do ícone de pesquisa: Desativado

16.5) Criar Menu Principal

Para criar o menu principal clicar em Menus > Criar novo menu > Dar o nome de Menu principal > Definir como Menu principal

Clicar em Adicionar itens para adicionar as páginas ao Menu Principal e adicionar as seguintes páginas: Sobre Nós, Loja, Novas Tendências, Contato (vamos criar a página de FAQ mais à frente)

Passo 17: Tipografia (Estilo da Letra)

A próxima coisa que vamos fazer é alterar o estilo de letra da nossa loja virtual no menu Tipografia

Clica em Tipografia > Clica em Corpo e usa as seguintes definições:

  • Família da fonte: Yantramanav
  • Tamanho da fonte: 16

No menu Tipografia > Clica em Barra Superior e usa as seguintes definições:

  • Família da fonte: Yantramanav
  • Tamanho da fonte: 13

No menu Tipografia > Clica em Menu Principal e usa as seguintes definições:

  • Família da fonte: Poppins
  • Espessura da fonte: 700
  • Tamanho da fonte: 14

No menu Tipografia > Clica em Título da Página

  • Família da fonte: Poppins
  • Espessura da fonte: 600
  • Tamanho da fonte: 60

Passo 18: Opções Gerais

Nas opções gerais vamos alterar algumas coisas que nos vão permitir poupar algum tempo ao realizar o design.

Clica em Opções Gerais > Estilo Geral e usa as seguintes definições

  • Cor principal: #000000
  • Cor principal hover: #323232
  • Cor da borda principal: #000000

Clica em Opções Gerais > Configurações Gerais e usa as seguintes definições

  • Layout: Seleciona o rectângulo com largura completa

Clica em Opções Gerais > Título da Página

  • Estilo: centralizado
  • Cord de fundo: #ffffff
  • Cor do texto: #000000
  • Breadcrumbs: retirar a seleção do quadradinho

Clica em Opções Gerais > Role para Cima

  • Tamanho do botão: 45
  • Tamanho do ícone: 30
  • Border Radius: 100
  • Cor de fundo: #eb785b (transparência 22)
  • Cor de fundo hover: #eb785b
  • Cor: #bababa
  • Cor de fundo hover: #000000

Passo 19: Personalizar o WooCommerce

Como estamos a usar um tema compatível com o WooCommerce (OceanWP) podemos personalizar a aparência do WooCommerce através do menu Aparência > Personalizar > WooCommerce.

Clica em WooCommerce > Menu do Carrinho e usa as seguintes opções

  • Ícone do carrinho: (escolhi o ícone mais à direita)
  • Cor do link hover: #777777
  • Cor do preço: #ef6700

Passo 20: Widgets do Rodapé e Rodapé Inferior

1.) No menu Personalizar, clica em Widgets do Rodapé e retira a seleção do quadradinho

2.) No menu Personalizar, clicar em Rodapé Inferior e retira a seleção do quadradinho.

Passo 21: Criar a Página Início

A página início foi criada com o construtor de páginas gratuito Elementor e estes foram os passos seguidos:

1.) Clica em editar página

2.) Em OceanWP settings clica em “Title” e na opção “Display Page Title” seleciona “Disable”

3.) Clica em Atualizar e de seguida clica em Editar com Elementor

22.1 Primeira Seção (Imagem de fundo, título, sub-título, texto, botão e menu transparente)

22.11 Imagem de fundo

1.) Adiciona uma seção com 1 coluna

2.) Clica em Edit Seção > clica em estilo > background > clica no ícone do pincel para fundo clássico > seleciona a imagem “fundo_original.jpg” > clica em Inserir Mídia

3.) Configura a imagem em Layout > Em Stretch Section coloca “Sim” >  em Altura seleciona a opção Ajustar à tela

4.) Clica em Estilo > Define a Posição como “Centralizado” > Define o Tamanho para “Preenchimento completo”

22.12 Título

1.) Coloca a coluna de conteúdo no topo >  Layout > Define a Posição da coluna para “Superior”

2.) Clica no ícone dos elementos e arrasta o elemento “Cabeçalho” para a coluna do conteúdo

3.) Clica no elemento para abrir as definições do lado esquerdo. Cola o seguinte texto na caixa do conteúdo “O Estilo é Tudo”

4.) Clica no menu Estilo > Colocar Tipografia “On” e usa as seguintes definições:

  • Cor do texto: Preto (#000000)
  • Tamanho da fonte: 60
  • Família da fonte: Lato
  • Peso: 700
  • Altura da linha: 0,6
  • Espaçamento: 4

5.) Corrige a margem do Título no menu Avançado > Retira a seleção “link values together” > Coloca uma margem superior de 120

22.13 Sub-título

1.) Clica no ícone dos elementos e arrasta o elemento “Cabeçalho” para a coluna do conteúdo

2.) Clica no elemento para abrir as definições do lado esquerdo. Cola o seguinte texto na caixa do conteúdo “Vista-se Bem. Sinta-se Bem.”

3.) Clica no menu Estilo > Coloca a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: Cinza claro (#7a7a7a)
  • Tamanho da fonte: 20
  • Família da fonte: Lato
  • Peso: 300
  • Espaçamento: 1,7

5.) Corrige a margem do sub-título no menu Avançado > Retira a seleção “link values together” > Coloca uma margem esquerda de 5px

22.14 Texto

1.) Clica no ícone dos elementos e arrasta o elemento “Editor de Texto” para a coluna do conteúdo

2.) Clica no elemento para abrir as definições do lado esquerdo. Cola o seguinte texto na caixa do conteúdo “Vista-se Bem. Sinta-se Bem.”

3.) Clica no menu Estilo > Coloca a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: Preto (#000000)
  • Tamanho da fonte: 17
  • Família da fonte: Lato
  • Peso: 300
  • Altura da linha: 1,7
  • Espaçamento: 1,4

5.) Corrige a margem do texto no menu Avançado > Retira a seleção “link values together” > Coloca uma margem direita de 650 > Coloca uma margem esquerda de 5

22.15 Botão

1.) Clica no ícone dos elementos e arrasta o elemento “Botão” para a coluna do conteúdo abaixo do texto

2.) Cola o seguinte texto na caixa de texto “Explore a Nossa Loja”

3.) Coloca um link para a página da loja, ex: /loja (se for um link externo tens de colocar http://exemplosite.com)

4.) Clica no menu Estilo > Colocar a Tipografia “On” e usa as seguintes definições:

  • Tamanho da fonte: 13
  • Família da fonte: Roboto
  • Espaçamento: 1,2
  • Cor do texto: preto (#000000)
  • Cor do fundo: transparente

5.) Cria um borda sólida com a espessura de 1px em todos os lados

6.) Clica na opção Hover (quando o rato passa por cima) e usa as seguintes definições

  • Cor do texto: cinza escuro (#444444)
  • Cor da borda: cinza claro (#7a7a7a)

7.) Corrige a margem do botão no menu Avançado >  Coloca uma margem esquerda de 15

22.16 Menu transparente

1.) Clica no menu Personalizar do tema OceanWP

2.) Clica em Cabeçalho > Geral > Define Estilo: Transparente

3.) Rola até onde diz “Transparent Header Settings” e arrasta a barra da transparência toda para o lado esquerdo

4.) Volta para trás e clica na opção Menu

5.) Rola até onde diz cor do link > altera para branco (#ffffff)

4.) Clica em Publicar para salvar as alterações

22.2 Segunda Seção (Sub-título)

1.) Clica em editar com o Elementor para voltar ao editor

2.) Adiciona um nova seção com 1 coluna

3.) Arrasta o elemento “Cabeçalho” para a coluna

3.) Cola o seguinte texto na caixa do Título: “O estilo é algo que levamos a sério” e centraliza o texto

4.) Clica no menu Estilo > Coloca a Tipografia “On” e usa as seguintes definições:

  • Tamanho da fonte: 30
  • Família da fonte: Poppins
  • Cor do texto: preto (#000000)

5.) Clica no menu Avançado > retira a seleção dos “link values together” > Coloca uma margem superior de 40 > Coloca uma margem inferior de 20

22.3 Terceira Seção (3 Caixas)

1.) No editor do Elementor > Adiciona uma nova seção com 3 colunas

2.) Clica em “Edit Coluna” > Estilo > Tipo de fundo clássico > Adiciona o ficheiro com o nome botão_1.jpg que se encontra na pasta das imagens demo

3.) Clica nos ícones dos elementos e adiciona o elemento “Cabeçalho”

4.) Escreve “acessórios” no título

5.) Define o link para a página da Loja, ex: /loja

6.) Centraliza o título

7.) Clica no menu Estilo > Coloca a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: branco (#ffffff)
  • Tamanho da fonte: 23
  • Família da fonte: Poppins
  • Espessura da fonte: 600
  • Transformação: Maiúsculas

8.) Clica em Avançado > Retira a seleção dos “link values together” > Coloca uma margem superior de 30

9.) Clica nos ícones dos elementos, adiciona o elemento “Divisor” abaixo do título e usa as seguintes definições:

  • Estilo: Sólido
  • Peso: 2
  • Cor: branco (#ffffff)
  • Largura: 27
  • Espaçamento: 0

10.) Clica nos ícones dos elementos e adiciona o elemento “botão” abaixo do divisor

11.) Cola o seguinte texto: “COMPRAR AGORA” e centraliza o texto

12.) Define o link para a página da Loja, ex: /loja

13.) Clica no menu Estilo > Coloca a Tipografia “On” e usa as seguintes definições:

  • Tamanho da fonte: 16
  • Família da fonte: Yantramanav
  • Espessura da fonte: 400
  • Transformação: Maiúsculas
  • Cor de fundo do botão: preto + transparência (clara)

14.) Cria um borda sólida com a espessura de 1px em todos os lados

16.) Clica na opção Hover (quando o rato passa por cima) e usa as seguintes definições

  • Cor de fundo do botão: preto + transparência (escura)

17.) Clica no menu Avançado > retira a seleção dos “link values together” > Coloca uma margem inferior de 40

18.) Clica em Edit Coluna > Estilo > Define “Preenchimento Completo” em Tamanho da Imagem

19.) Em Edit Coluna > Clica em Avançado > Coloca uma margem de 10 em todos os lados

20.) Clica em Estilo > Background Overlay > Tipo de fundo clássico > Define a cor preta (#000000) > Define a Opacidade para 0,2

21.) Clica em duplicar coluna duas vezes

22.) Apaga as duas colunas extra

23.) Usa as seguintes definições nos outros botões

Botão 2:

  • Imagem de fundo: botão_2.jpg
  • Título: Conheça a Equipa
  • Texto do botão: Sobre Nós
  • Link: /sobre-nos

Botão 3:

  • Imagem de fundo: botão_3.jpg
  • Título: Novas Tendências
  • Texto do botão: Explorar
  • Link: /novas-tendencias

22.4 Quarta Seção (Divisor)

1.) Adiciona uma nova seção com 1 coluna

2.) Arrasta o elementor “Divisor” para dentro da coluna e usa as seguintes definições:

  • Estilo: Sólido
  • Peso: 4
  • Cor: #ebebeb
  • Espaçamento: 15

22.5 Quinta Seção (Título + Sub-título)

1.) Adiciona uma nova seção com 1 coluna

2.) Arrasta o elemento “Cabeçalho” para dentro da coluna

3.) Cola o seguinte texto na caixa Título: “Compre Estes Looks” e centraliza o texto

4.) Clica no menu Estilo > Colocar a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: preto (#000000)
  • Tamanho da fonte: 50
  • Família da fonte: Poppins
  • Espessura da fonte: 700

5.) Arrasta o elemento “Cabeçalho” para debaixo do elemento cabeçalho anterior

3.) Cola o seguinte texto na caixa Título: “Provavelmente não tem nada para vestir no armário” e centraliza o texto

4.) Clica no menu Estilo > Colocar a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: #999999
  • Tamanho da fonte: 18
  • Família da fonte: Yantramanav
  • Espessura da fonte: 400

5.) Clica no menu Avançado > retira a seleção dos “link values together” > Coloca uma margem inferior de 15

22.6 Sexta Seção (Chamado à Ação)

1.) Adiciona uma nova seção com 1 coluna

2.) Arrasta o elemento “Editor de Texto” para dentro da coluna

3.) Cola o seguinte texto na caixa de texto: “Quer ver mais produtos? COMPRE JÁ!” e centraliza o texto no próprio editor

4.) Define a cor da pergunta “Quer ver mais produtos?” para branco (#ffffff)

5.) Define a cor das palavras “COMPRE JÁ!” para laranja (#ff6600)

6.) Adiciona um link para a loja nas palavras “COMPRE JÁ!” selecionando as mesmas e clicando no ícone de link do editor de texto.

7.) Clica no menu Estilo > Coloca a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: #999999
  • Tamanho da fonte: 18
  • Família da fonte: Yantramanav
  • Espessura da fonte: 400

22.7 Sétima Seção (Rodapé personalizado)

1.) Adiciona uma nova seção com 1 coluna

2.) Arrasta o elemento “Social Icons” para dentro da coluna

3.) Apaga o ícone do Google Plus e adiciona os seguintes ícones: Pinterest, Instagram e Youtube

4.) Clica no menu Estilo > Em cor escolhe a opção Personalizar > Na Cor Primária > Arrasta a barra da transparência até baixo

5.) Arrasta o elemento “Editor de texto” para dentro da coluna abaixo do elemento “Social Icons”

6.) Coloca o seguinte texto na caixa de texto do Editor de texto: “FAQ    |    Política de Privacidade    |    Termos e Condições”

7.) Usa o editor de texto para colocar links para cada uma das páginas. Exemplo: /faq ; /politica-de-privacidade ; /termos-e-condicoes

8.) Usa o editor de texto para alterar a cor do texto para branca (#ffffff)

9.) Clica no menu Estilo e usa as seguintes definições de Tipografia:

  • Família da fonte: Yantramanav
  • Tamanho da fonte: 15
  • Peso da fonte: 400

10.) Duplica este último elemento do Editor de texto e coloca o seguinte texto na caixa do editor de texto: © 2018 – oteunegócio

11.) Arrasta o elemento “Espaçamento”, coloca 50px para adicionar um espaço superior e repete o processo para adicionar um espaço inferior.

12.) Clica em Update para salvar as alterações!

Passo 22. Criar Produtos Simples no WooCommerce

1.) No painel do WordPress vai ao menu Produtos e clica em Adicionar Novo

2.) Dá ao produto o título de “Vestido Branco Florido”

3.) No editor de texto coloca a descrição longa. Usei o seguinte texto:

“Este look marcou uma geração. Vista-o para um casamento, uma peça de teatro ou uma noite na cidade. Tudo o que você está procurando, esse look tem! Primavera, verão ou outono, não deixe este vestido escorrer de suas mãos. Feito a partir do tecido mais fino da Itália, esta roupa de designer foi feita para você. Forma adequada e elegante, conhecemos moda e sabemos que você vai adorar isso!”

4.) Nas OceanWP Settings usa as seguintes definições:

  • Main > Content Layout > Full Width (largura completa)
  • Title > Display Page Title > Disable

5.) Na opção Dados do produto seleciona “Produto Simples” e preenche os menus Geral, Inventário e Entrega com as informações particulares do produto

6.) Coloca uma breve descrição sobre o produto

7.) Na opção Categorias de produto cria uma categoria com o nome Vestidos

8.) Na opção Tags do produto cria uma tag com o nome vestidos

9.) Na Imagem do Produto define a imagem principal do produto. Usei a imagem “produto-1b-570×708”

10.) Na Galeria de imagens do produto define as imagens alternativas. Usei a imagem “produto-1a-570×708”

11.) Por fim clica em Publicar!

Passo 23. Criar Produtos Variáveis no WooCommerce

1.) Na página de produto simples, passa com o rato no separador superior que diz Novo e clica em Produto

2.)  Dá ao produto o título de “Vestido Preto Formal”

3.) No editor de texto coloca a descrição longa. Usei o seguinte texto:

“Este look marcou uma geração. Vista-o para um casamento, uma peça de teatro ou uma noite na cidade. Tudo o que você está procurando, esse look tem! Primavera, verão ou outono, não deixe este vestido escorrer de suas mãos. Feito a partir do tecido mais fino da Itália, esta roupa de designer foi feita para você. Forma adequada e elegante, conhecemos moda e sabemos que você vai adorar isso!”

4.) Nas OceanWP Settings usa as seguintes definições:

  • Main > Content Layout > Full Width (largura completa)
  • Title > Display Page Title > Disable

5.) Na opção Dados do produto seleciona “Produto Variável” e clica no menu Atributos

6.) No menu Atributos, onde diz Atributo personalizado do produto clica em Adicionar > Dá um nome ao atributo, ex: Tamanhos > Digita os valores separados por “|”, ex P | M | G > Clica na opção “Usado para Variações”

7.) Volta a Adicionar um atributo > Dá um nome ao atributo, ex: Cores > Digita os valores separados por “|”, ex Preto | Azul | Branco > Clicar na opção “Usado para Variações”

8.) Clica em Salvar atributos para guardar alterações

9.) Ainda na opção Dados do produto, clica no menu Variações para definir os preços dos atributos

10.) No menu Variações, clica no botão “Ir” para criar variações

11.) Cria uma variação para todas as cores (preto, azul e branco) colocando diferentes preços para cada uma delas 99, 75 e 49 respetivamente.

12.) Coloca uma breve descrição sobre o produto

13.) Na opção Categorias de produto, cria uma categoria com o nome Vestidos

8.) Na opção Tags do produto, cria uma tag com o nome vestidos

9.) Na Imagem do Produto define a imagem principal do produto. Usei a imagem “produto-2b-570×708”

10.) Na Galeria de imagens do produto define imagens alternativas. Usei a imagem “produto-2a-570×708”

11.) Por fim clicas em Publicar e vês como ficou o trabalho!

Passo 24. Adicionar Imagens dos Produtos à Página Inicial

Há duas formas de adicionar produtos à página inicial da loja, com o Elementor Pro (o meu método preferido) ou com a versão grátis.

Método com versão profissional do Elementor

1.) Na página Inicial clica em “Editar com Elementor”

2. Na lista dos elementos, em “Pro Elements” procura pelo elemento “Woo-Products” e arrasta para a seção onde desejas adicionar os produtos

3.) Nas definições do elemento podes escolher o número de colunas e produtos que aparecem na página inicial

Método com a versão gratuita do Elementor:

1.) Na lista dos elementos, procura pelo elemento “Shortcode” em General Elements

2.) Nas definições do elemento em conteúdo colocar o seguinte texto: [products]

Nota: A desvantagem do método gratuito é que não dá para escolher o número de colunas e o número de produtos a ser mostrados no catálogo.

Passo 25. Editar os Botões do WooCommerce

25.1 Alterar as cores dos botões dos produtos

1.) No painel do WordPress vai ao menu Aparência e clica em Personalizar

2.) No menu Personalizar clica na opção Custom CSS

3.) Cola este código na caixa de texto: .woocommerce ul.products li.product .button
{
background-color: #000000;
color: #fff!important;
text-transform: uppercase;
padding: 10px 20px;
border:0px;
}
.woocommerce ul.products li.product
.button:hover {
background-color: #323232;
color: #fff!important;
}

4.) Podes alterar as cores do botão, bastando para isso alterar os códigos das cores no código acima. Cuidado para não fazer mais nenhuma alteração ao código ou pode não funcionar!

5.) Clica em Publicar para salvar as alterações!

25.2 Alterar os textos dos botões dos produtos

1.) No painel do WordPress vai ao menu Plugins e clica em Adicionar Novo

2.) Na barra de pesquisa procura pelo plugin chamado “WC Custom Add to Cart Labels”

3.) Assim que o plugin aparecer clica em Instalar agora e depois Ativar

4.) A seguir, passa com o rato no menu do WooCommerce e clica em Configurações > Clica no separador Produtos > Clica no link Add to cart button labels

5.) Substitui todos os textos que dizem COMPRAR por ADICIONAR

6.) Por fim clica em Salvar as alterações!

PARABÉNS! Completaste com sucesso a página Inicial da loja virtual! 😀

Passo 26. Configurar a Página da Loja

26.1 Configurar a barra lateral da loja

1.) No painel do WordPress vai ao menu Aparência e clica em Widgets

2.) Adiciona os seguintes widgets à barra lateral do WooCommerce pela seguinte ordem: Procurar produto, Filtrar produtos por preço, Categorias de produto, Nuvem de tags do produtos

26.2 Alterar o título da página da loja

1.) No painel do WordPress vai ao menu Páginas e clica em Todas as páginas > Procura pela página da Loja > Clica em Editar

2.) Na página da Loja vai até às definições do tema (OceanWP Settings) e clica na aba que diz Title

3.) Na opção Custom Title (Título personalizado) coloca o texto: LOJA

26.3 Colocar links para as páginas das categorias

Para fazer este passo vamos usar o editor de texto do WordPress para criar linguagem HTML, é muito simples!

1.) No painel do WordPress vai ao menu Posts e clica em Adicionar novo post

2.) No modo visual escreve o seguinte texto: Acessórios   |   Casacos   |   Saias   |  T-Shirts   |   Vestidos

3. A seguir seleciona o texto e coloca a negrito (CTRL + B)

4. Coloca os links das categorias em cada uma das palavras. Para encontrares o link das categorias vai ao menu Produtos (do lado esquerdo) > Abre a opção Categorias num novo separador

5. Na página de Categorias consegues ver todas as categorias criadas, para veres os links basta clicar em “Ver” junto ao nome da categoria

6.) Copia o link > volta ao editor de texto > seleciona a palavra onde queres colocar o link > clica no ícone dos link do editor de texto > cola o link e clica em aplicar

7.) Repete os últimos dois passos para todas as categorias

8.) Agora tens de transformar o texto em linguagem HTML e para isso basta clicares na aba Texto no canto superior direito do editor e o WordPress coloca tudo em linguagem HTML por ti!

9.) Copia o código HTML da aba texto > volta à página de edição da Loja > OceanWP Settings > Title > Subheading > cola o código HTML

10.) Por fim clica em Atualizar e a seguir Ver página!

26.4 Alterar as cores dos links das categorias e dos elementos da barra lateral

1.) Vai ao menu Personalizar > Clica nas Opções Gerais > Estilo Geral > Na opção Cor Principal usa o seguinte código: #ef6700

2.) Clica em Publicar para salvar as alterações!

Passo 27: Criar a Página Sobre Nós

1.) No painel do WordPress vai ao menu Páginas > Clica em Todas as páginas > Procura pela página Sobre Nós > Clica em Editar

2.) Nas OceanWP Settings usa as seguintes definições:

  • Main > Margins > Disable
  • Title > Display Page Title > Disable

3.) Clica em Atualizar e de seguida em Ver página

27.1 Primeira Seção (Título, Espaçamento, Primeiro Divisor, Editor de texto, Segundo Divisor) 

27.11 Título

1.) Clica em Editar com Elementor > Adiciona uma seção com 1 coluna > Arrasta o elemento Cabeçalho para a seção

2.) Na caixa do título escreve: Sobre Nós > Centralizar o texto

3.) Clica no menu Estilo > Colocar a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: Preto (#000000)
  • Tamanho da fonte: 60
  • Família da fonte: Poppins

27.12 Espaçamento

1.) Clica no ícone dos elementos > procura pelo elemento Espaçamento > Arrasta o elemento para cima do cabeçalho > Coloca um espaçamento de 100

27.13 Primeiro Divisor

1.) Clica no ícone dos elementos > procura pelo elemento Divisor > Arrasta o elemento para debaixo do Cabeçalho > Usa as seguintes definições:

  • Peso: 3
  • Largura: 15
  • Cor: #f7be68
  • Alinhamento: centralizar

27.14 Editor de Texto

1.) Clica no ícone dos elementos > procura pelo elemento Editor de Texto > Arrasta o elemento para debaixo do Divisor

2.) Na caixa de texto usei o seguinte texto:

“A nossa paixão é criar peças únicas e elegantes. Não vamos parar até que todos usem as nossas roupas pois acreditamos no que fazemos e acreditamos que você vai adorar as nossas roupas. Ah, e espero que você goste muito deste design de loja virtual. Este é o melhor e mais completo tutorial de loja virtual do youtube. Vender on-line nunca foi tão fácil.

A nossa paixão é criar peças únicas e elegantes. Não vamos parar até que todos usem as nossas roupas pois acreditamos no que fazemos e acreditamos que você vai adorar as nossas roupas. Ah, e espero que você goste muito deste design de loja virtual. Este é o melhor e mais completo tutorial de loja virtual do youtube. Vender on-line nunca foi tão fácil.

A nossa paixão é criar peças únicas e elegantes. Não vamos parar até que todos usem as nossas roupas pois acreditamos no que fazemos e acreditamos que você vai adorar as nossas roupas. Ah, e espero que você goste muito deste design de loja virtual. Este é o melhor e mais completo tutorial de loja virtual do youtube. Vender on-line nunca foi tão fácil.”

3.) Clica no menu Estilo > Coloca a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: Cinzento escuro (#545454)
  • Tamanho da fonte: 18
  • Família da fonte: Yantramanav
  • Peso: 400

27.15 Segundo Divisor

1.) Clica no ícone dos elementos > procura pelo elemento Divisor > Arrasta o elemento para debaixo do Editor de texto > Usa as seguintes definições:

  • Peso: 1
  • Largura: 80
  • Cor: #dddddd
  • Alinhamento: centralizar

27.2 Segunda Seção (Título)

1.) Cria uma nova seção com 1 coluna

2.) Duplica o primeiro cabeçalho “Sobre Nós”

3.) Arrasta a cópia do elemento para a nova seção

4.) Altera o texto para: Nossa Equipa

5.) Clica no menu estilo > Altera o tamanho da fonte de 60 para 37

27.3 Terceira Seção (3 Caixas)

1.) Cria uma nova seção com 3 colunas

2.) Arrasta o elemento Imagem para a primeira coluna > Adiciona a imagem “botão_2.jpg”

3.) Arrasta o elemento Editor de texto para debaixo da imagem e coloca o seguinte texto:

Tiago Dantas
Desenvolvedor Web

4.) Clica no menu Estilo > Colocar a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: Cinzento escuro (#545454)
  • Tamanho da fonte: 17
  • Família da fonte: Yantramanav
  • Peso: 400

5.) Duplica a coluna duas vezes clicando em Duplicate coluna e apaga as duas colunas extra

6.) Clica em Update para salvar as alterações

27.4 Quarta Seção (Terceiro Divisor) 

1.) Cria uma nova seção com 1 coluna

2.) Duplica o segundo divisor clicando em Duplicate Widget

3.) Arrasta o elemento duplicado para a nova seção

27.5 Quinta Seção (Título)

 1.) Cria uma nova seção com 1 coluna

2.) Duplica o segundo cabeçalho “Nossa Equipa”

3.) Arrasta a cópia do elemento para a nova seção

4.) Altera o texto para: Ajudamos você a criar lojas incríveis

27.6 Sexta Seção (3 Caixas de Ícones)

 1.) Cria uma nova seção com 3 colunas

2.) Procura pelo elemento Ícone e arrasta para a primeira coluna

3.) Edita o elemento do lado esquerdo usando as seguintes definições

No conteúdo:

  • Nome do ícone: bullseye
  • Titulo: DESIGN
  • Descrição: Este design profissional vai ajudá-lo a conquistar a confiança dos seus visitantes e a vender mais

No menu Estilo:

  • Cor primária: (preto) #000000
  • Tamanho: 70

Menu Estilo > Conteúdo > Título:

  • Cor: (preto) #000000
  • Família da fonte: Poppins
  • Tamanho da fonte: 23
  • Peso: 600

Menu Estilo > Conteúdo > Descrição

  • Cor: (cinza) #808080
  • Família da fonte: Yantramanav
  • Tamanho: padrão
  • Peso: 400

4.) Para estreitar o texto clica no menu Avançado do elemento Ícone

5.) Na opção Margem retira a seleção dos “link values together” e cria uma margem direita de 20 e uma margem esquerda de 20

6.) Duplica duas vezes a coluna com o elemento Ícone clicando em Duplicate coluna

7.) Apaga as duas colunas extra

8.) Agora podes alterar as caixas bastando para isso clicar sobre elas e alterar as definições do lado esquerdo

9.) Como exemplo alterei apenas os nomes dos ícones que são “share-alt” e “envelope” respetivamente

27.7 Sétima Seção (Chamado à ação com botão)

1.) Cria uma nova seção com 1 coluna

2.) Clica em Edit seção > Em Layout coloca Stretch Section (Esticar a seção) > Sim

3.) Clica no menu Estilo > Tipo de fundo > Clica em Clássico > Seleciona a Cor > Usa esta cor: #efefef

4.) Duplica o cabeçalho da seção anterior e arrasta para a nova seção

5.) Altera o texto para: Quer trabalhar connosco?

6.) Clica no ícone dos elementos e arrasta o elemento Botão para debaixo do elemento cabeçalho

7.) No editar botão coloca o texto: Entre em Contato

8.) Na opção link, coloca um link interno para a página de contato: /contato

9.) Na opção alinhamento centraliza o botão

10.) Clica no menu Estilo e usa as seguintes definições para o botão

  • Cor de fundo: #ff9900
  • Cor de fundo Hover (quando o rato passa por cima): #df7213

11.) Clica em Edit seção > Vai ao menu Avançado > Retira a seleção dos “link values together” > Coloca um Padding de 50 inferior e superior

12.) Clica em Save seção para guardar um template desta seção com o nome de “chamado_ação”

27.8 Oitava Seção (Rodapé)

1.) Clica em Add Template > My Templates > Clica Insert em Rodapé_loja_virtual

2.) Clica no Edit seção do rodapé e em Stretch Section (Esticar a seção) diz que Sim

3.) Para terminar o design da página sobre clicas em UPDATE!

Passo 28: Criar a página de FAQ (Perguntas Frequentes)

1.) Volta ao painel do WordPress

2.) Vai ao menu Páginas do lado esquerdo e clica em Adicionar nova

3.) Dá o título “FAQ” à página ou “Perguntas Frequentes”

4.) Nas OceanWP Settings usa as seguintes definições:

  • Main > Margins > Disable
  • Title > Display Page Title > Disable

5.) Publica a página

6.) Clica em Editar com Elementor

28.1 Primeira Seção (Título, Espaçamento, Divisor)

28.11 Título

1.) Cria uma seção com 1 coluna

2.) Arrasta o elemento Cabeçalho para a seção

3.) No menu Conteúdo usa as seguintes definições:

  • Título: Perguntas Frequentes
  • Alinhamento: Centro

4.) Clica no menu Estilo e usa as seguintes definições:

  • Cor do texto: #000000
  • Família da fonte: Poppins
  • Tamanho: 60
  • Peso: 600

28.12 Espaçamento (podemos também usar as margens)

1.) Clica no ícone para abrir os elementos e arrasta o elemento Espaçamento para cima do elemento Cabeçalho

2.) Coloca um espaçamento de 100

28.13 Divisor

1.) Clica no ícone para abrir os elementos e arrasta o elemento Divisor para baixo do elemento Cabeçalho

2.) No menu Conteúdo do elemento Divisor coloca:

  • Peso: 3
  • Cor: #f7be68
  • Largura: 15
  • Alinhamento: Centro

28.2 Segunda Seção (Título, Alternar, Padding)

28.21 Título

1.) Cria uma nova seção com 1 coluna e arrasta o elemento Cabeçalho para dentro da seção

2.) No menu Conteúdo do elemento Cabeçalho coloca:

  • Título: Informações de Envio

3.) Clica no menu Estilo do elemento Cabeçalho e usa as seguintes definições:

  • Cor: #ff6600
  • Família da fonte: Poppins
  • Tamanho: 23
  • Peso: 600

4.) Clica no menu Avançado do elemento Cabeçalho > Retira a seleção dos “link values together” > Coloca uma margem esquerda de 15

5.) Clica em Save Seção e dá o nome de “titulo_paginas” porque vamos aproveitar esta seção para a página de Contato

28.22 Alternar

1.) Clica no ícone para abrir os elementos e procura pelo elemento Alternar (em General Elements)

2.) Arrasta o elemento Alternar para baixo do Cabeçalho anterior

3.) Nas abas coloquei as seguintes perguntas:

Quais métodos de envios estão disponíveis?
Enviam internacionalmente?

4.) Podemos duplicar as abas para criar mais perguntas e alterar a posição das abas arrastando com o rato

5.) Clica no menu Estilo do Elemento Alternar e usa as seguintes definições

Para o título:

  • Cor: #545454
  • Família da fonte: Yantramanav
  • Tamanho da fonte: 18
  • Peso: 700

Para o conteúdo:

  • Cor: #545454
  • Família da fonte: Yantramanav
  • Tamanho da fonte: 18
  • Peso: 400

28.23 Padding

1.) Clica no Edit seção da segunda seção

2.) Clica no menu Avançado

3.) Retira a seleção dos “link values together” na opção Padding

4.) Coloca um Padding superior e inferior de 30

28.3 Terceira Seção (Chamado a ação)

1.) Clica em Add Template > My Templates

2.) Insere o template com o nome “chamado_açao”

3.) Altera o texto para: Tem Mais Questões?

28.4 Quarta Seção (Rodapé)

1.) Clica em Add Template > My Templates

2.) Insere o template com o nome “rodapé_loja_virtual”

3.) Clica em Edit seção no rodapé e em “Stretch Section” clica Sim para esticar a seção

4.) Clica em UPDATE para salvar as alterações!

Passo 29: Criar a página de Contato

1.) No painel do WordPress vai ao menu Páginas e clica em Todas as páginas

2.) Procura pela página de Contato e clica em Editar

3.) Nas OceanWP Settings usa as seguintes definições:

  • Main > Margins > Disable
  • Title > Display Page Title > Disable

4.) Publica a página

5.) Clica em Editar com Elementor

29.1 Primeira Seção (Título e Editor de texto)

29.11 Título

1.) Clica em Add Template > My Templates > Insere o template “titulo_paginas”

2.) Altera o texto para: Vamos Falar!

29.12 Editor de texto

1.) Clica no ícone dos elementos e arrasta o elemento Editor de texto para baixo do elemento Divisor

2.) Coloca as informações sobre o teu negócio, ex:

VIVEDANET
Bangkok, Bkk 10110
T: 123.111.222.333 | E: tiago@vivedanet.com

3.) Usa o editor de texto do elemento Editor de texto para:

  • Centrar o texto
  • Colocar um link no email
  • Alterar a cor do email para laranja

4.) Clica no menu Estilo e usa as seguintes definições:

  • Família da fonte: Yantramanav
  • Tamanho: 18
  • Peso: 400

29.2 Segunda Seção (Google Mapas)

1.) Cria uma nova seção com 1 coluna

2.) Arrasta o elemento Google Mapas para dentro da seção

3.) Coloca o endereço no menu Conteúdo lado esquerdo, ex: 45/19 Khwaeng Phra Khanong Nuea, Khet Watthana, Krung Thep Maha Nakhon 10110

4.) Define a altura do mapa para 500

5.) Clica em Edit seção e no menu Layout usar as seguintes definições

  • Stretch Section: Sim
  • Largura do conteúdo: Largura total
  • Espaçamento da coluna: Sem espaçamento

29.3 Terceira Seção (Rodapé)

1.) Clica em Add Template > My Templates

2.) Insere o template com o nome “rodapé_loja_virtual”

3.) Clica em Edit seção no rodapé e em “Stretch Section” clica Sim para esticar a seção

4.) Clica em UPDATE para salvar as alterações!

Passo 30: Criar um Artigo (post) no Blog

Nota: Vou usar o Elementor Pro para criar os artigos do blog.

Segue estes passos para criares um artigo com design profissional!

1.) No painel do WordPress vai até ao menu Posts e clica em Adicionar novo

2.) Coloca o título: Temos o Que Precisa

3.) No lado direito, onde diz Atributos do post seleciona: Elementor Canvas

4.) Clica em Atualizar página

5.) Clica em Editar com Elementor

30.1 Primeira Seção (Logo e Menu)

30.11 Logo

1.) Cria uma seção com 2 colunas

2.) Na barra de pesquisa dos elementos, pesquisa pelo elemento com o nome “Custom Header Logo”

30.12 Menu

1.) Clica no ícone dos elementos e nos Pro Elements procura pelo elemento Nav Menu

2.) Arrasta o elemento Nav Menu para a coluna do lado direito

3.) Define 20% de proporção na coluna da esquerda e 80% na coluna da direita

4.) No menu conteúdo do elemento Nav Menu, em Layout alinha o menu à direita

5.) Clica no menu Estilo e usa as seguintes definições:

  • Cor do texto: #000000
  • Família da fonte: Poppins

Clica em Hover (quando o rato passa por cima):

  • Cor do texto (hover): #000000
  • Pointer Color (hover): #f57d5f

6.) Clica em UPDATE para guardar as alterações!

30.2 Segunda Seção (Imagem de fundo, Título do artigo, Escurecer o fundo, Colocar o fundo fixo)

30.21 Imagem de fundo

1.) Cria uma nova seção com 1 coluna

2.) Clica em Edit seção

3.) Clica no menu Estilo e em Background > Clica no pincel Clássico > Seleciona a imagem “imagem_artigo.jpg” > Clica em Inserir mídia

4.) Clica no menu Layout (estrutura) e define

  • Altura: Ajustar à tela
  • Espaçamento da coluna: Sem espaçamento

30.22 Título do artigo

1.) Na seção inferior clica em Add Template > Clica em My Templates

2.) Insere o template com o nome “titulo_paginas”

3.) Elimina o elemento Espaçamento do Template

4.) Arrasta o elemento Cabeçalho para a coluna do conteúdo da seção superior (onde está a imagem)

5.) Clica no widget para editar o elemento Cabeçalho e no menu conteúdo, em Tag HTML coloca H1 (este passo serve para informar o Google e outros motores de busca que este é o título mais importante do conteúdo)

6.) Arrasta o elemento Divisor para a coluna do conteúdo da seção superior (onde está a imagem) abaixo do elemento Cabeçalho

7.) Clica no widget do elemento Cabeçalho para editar

8.) Clica no menu Estilo do elemento Cabeçalho > altera a cor do texto para branco (#ffffff)

30.23 Escurecer o fundo (background overlay)

Para lermos bem o título do artigo temos de escurecer a imagem de fundo, para isso segue os seguintes passos:

1.) Clica em Edit Seção na seção da imagem de fundo

2.) Clica no menu Estilo e na opção Background Overlay > Tipo de fundo > Clássico > Cor: #000000 > Define a Opacidade: 0,4

30.24 Colocar o fundo fixo

1.) 1.) Clica em Edit Seção na seção da imagem de fundo

2.) Clica no menu Estilo e na opção Background > Em anexo > Escolhe a opção “Fixo”

3.) Clica em UPDATE para salvar as alterações

30.3 Terceira Seção (Editor de texto)

1.) Cria uma seção com 1 coluna

2.) Arrasta o elemento Editor de texto para a nova seção

3.) Adiciona este texto:

Para criar esta loja virtual usei as versões gratuitas do tema OceanWP e do construtor de páginas Elementor. Contudo, a página de blog foi criada com a versão profissional do Elementor. Era uma vez um construtor de páginas. O Plugin Elementor é sem dúvidas o melhor construtor de páginas que podes usar para editar tudo entre o cabeçalho e o rodapé do teu site.Ele permite-te criar um número ilimitado de colunas para cada página e controlar todas as opções de design do teu site. Como por exemplo as cores de fundo, mais de 600 tipos de letra, imagens, vídeos de fundo, transparências, margens, mais de 400 ícones e muito mais. Na versão Pro do Elementor ainda podes adicionar elementos mais profissionais como por exemplo tablelas de preço, títulos animados, cronómetros, etc. Visita o site do Elementor para ficares a conhecer todas as possibilidades de design que este construtor de páginas fantástico oferece. Eleva o teu design a outro nível com o OceanWP e o Elementor! Links úteis 1.) OceanWP 2.) Elementor

4.) Para editar o texto vamos usar o editor do elemento Editor de texto e as edições exemplificadas no tutorial são:

  • Dar espaço entre os parágrafos
  • Definir os sub-títulos
  • Colocar links
  • Adicionar Imagens

5.) Clica no menu Estilo e usa as seguintes definições:

  • Família da fonte: Yantramanav
  • Tamanho da fonte: 18
  • Peso: 400

6.) Clica no menu Avançado do Editor de Texto > Na Margem retira a seleção dos “link values together” > Coloca as seguintes margens:

  • Superior: 20
  • Direita: 150
  • Inferior: 20
  • Esquerda: 150

30.4 Quarta Seção (Caixa de autor)

1.) Cria uma seção com 1 coluna

2.) Arrasta o elemento Author Box para a seção

3.) No menu Conteúdo do elemento Author Box em Source seleciona: Personalizar

4.) Em Profile Picture (fotografia de perfil) adiciona uma fotografia de perfil redonda

5.) Ainda no menu Conteúdo, adiciona um Nome e Biografia

6.) Clica no menu Avançado> Na Margem retira a seleção dos “link values together” > Coloca as seguintes margens:

  • Direita: 150
  • Esquerda: 150

7.) No menu Avançado > Clica em Background > escolhe o tipo de fundo Clássico > usar a cor: #fcf7f7

8.) No menu Avançado > Clica em Borda e usa as seguintes definições

  • Tipo de borda: sólida
  • Largura da borda: 2 (em todos os lados)
  • Cor da borda: #e0e0e0
  • Arredondamento da borda: 45

9.) No menu Avançado, clica em Estilo do elemento e coloca um Padding de 20 em todas as direções

30.5 Quinta Seção (Comentários do Facebook)

1.) Cria uma seção com 1 coluna

2.) Arrasta o Elemento Facebook Comments (este elemento pertence aos Pro Elements) para a seção

3.) No menu Conteúdo define o target URL (a página do Facebook do teu negócio)

4.) Clica no menu Avançado> Na Margem retira a seleção dos “link values together” > Coloca as seguintes margens:

  • Direita: 150
  • Esquerda: 150

30.6 Sexta Seção (Rodapé)

1.) Clica em Add Template > My Templates

2.) Insere o template com o nome “rodapé_loja_virtual”

3.) Clica em UPDATE para salvar as alterações!

Passo 31. Criar a Página de Blog (Novas Tendências)

A página de blog vai ser criada com o Elementor Pro.

Antes de criarmos a página de blog temos de informar o WordPress que não queremos que este use o design padrão do tema OceanWP na página de blog  (pois queremos editar a página com o Elementor)

1.) Para isso vai ao menu Personalizar > Clica em Configurações da página inicial > Em Páginas de posts > NÃO seleciones nenhuma página

2.) Volta ao painel do WordPress, vai ao menu Páginas e clica em Todas as páginas

3.) Procura pela página Novas Tendências e clica em Editar

4.) Nas OceanWP Settings usa as seguintes definições:

  • Main > Margins > Disable
  • Title > Display Page Title > Disable

5.) Atualiza a página

6.) Clica em Editar com Elementor

31.1 Primeira Seção (Título)

1.) Clica em Add Template > Clica em My Templates

2.) Insere o template com o nome “titulo_paginas”

3.) Altera o título para: Blog

4.) Clica no menu Estilo e em Tipografia altera o tamanho da fonte para 100

5.) Clica no menu Avançado retira a seleção dos “link values together” e coloca uma margem inferior de 20

31.2 Segunda Seção (Posts)

1.) Adiciona uma nova seção com 1 coluna

2.) Clica no ícone dos elementos e arrastar o elemento Posts (Pro Element) para dentro da seção

3.) Na edição do elemento Posts, no menu Conteúdo, usa as seguintes definições:

  • Skin: Classic
  • Colunas: 3
  • Mansory: Sim
  • Tamanho da imagem: Tela cheia
  • Meta data: Author, Date, Time
  • Alterar “Read More” para “Leia mais”

4.) Clica no menu Estilo > e em Conteúdo usa as seguintes definições para o Título:

  • Cor: #000000
  • Família da fonte: Poppins
  • Tamanho: 30
  • Peso: 600

Para o Excerpt (Exerto)

  • C0r: #545454
  • Família da fonte: Yantramanav
  • Tamanho: 18
  • Peso: 400

Botão Read More (Leia mais)

  • Cor: #eb785b
  • Família da fonte: Yantramanav
  • Tamanho: 18
  • Peso: 700

31.3 Terceira Seção (Posts)

1.) Clica em Add Template > My Templates

2.) Insere o template com o nome “rodapé_loja_virtual”

3.) Clica no Edit seção e em Stretch Section diz Sim

4.) Clica en UPDATE para salvar as alterações!

Passo 32: Colocar um Menu Fixo (Sticky Menu)

1.) No painel do WordPress, vai ao menu Plugins e clica em Adicionar Novo

2.) Na barra de pesquisa de plugins introduz: mystickymenu

3.) Instala e ativa o plugin My Sticky Menu

4.) Vai ao menu Configurações e clica em myStickyMenu para abrir as definições do plugin

5.) Em General Settings, na Sticky Class coloca: #site-header

6.) Clica no menu Style e usa as seguintes definições:

  • Sticky Opacity: 100
  • Sticky Transition Time: 0

7.) Para colocar uma cor de fundo vai ao código que está no CSS style, apaga a palavra “none” que está em frente à palavra “background” e coloca o código hex desejado, ex (preto): #000000

8.) Clica em salvar as alterações e voilá! Já tens um menu fixo no site 🙂

Passo 33: Configurar o WooCommerce

1.) Volta ao painel do WordPress

2.) Passa com o rato no menu WooCommerce e clica em Configurações

3.) Clica no separador Geral e preenche com as informações necessárias sobre a tua empresa (Endereço da loja, Opções Gerais, Opções de Moeda)

4.) Clica no separador Produtos e clica no link Geral onde podemos editar as unidades de peso e de medida

5.) Clica no separador Produtos e clica no link Exibição (agora este passo é feito no menu Personalizar > WooCommerce (1ª opção) e usar as seguintes definições:

  • Página da loja: Loja
  • Exibir página da loja: Exibir produtos
  • Exibição de categoria padrão: Exibir produtos
  • Padrão de ordenação de produtos: Ordenar por mais recentes

6.) Clica no separador Taxa e clica no link Taxas padrões para inserir as taxas necessárias

7.) Clica no separador Entrega e nas Áreas de Entrega podes definir diferentes taxas (taxa fixa, frete grátis ou retirar no local) de acordo com cada local de entrega

8.) Clica no separador Finalizar compra e nas Opções de pagamento podes desabilitar o uso de cupões > Na opção Páginas de pagamento > Define uma página para Termos e condições

9.) No separador Finalizar compra clica no link cheque e desabilita a opção cheque > Clica em Salvar alterações

10.) No separador Finalizar compra clica no link PayPal e escolhe o email associado com a tua conta PayPal > Em Opções avançadas coloca o mesmo email no e-mail do destinatário > Em Credenciais da API coloca as credenciais API do PayPal para poderes enviar reembolsos pelo PayPal (mostro como fazer isso no vídeo)

11.) No separador Contas habilita a opção “Habilitar cadastro de clientes na página minha conta.”

12.) No separador Emails certifica-te que introduziste o email correto para receberes as notificações importantes da loja virtual

Passo 34: Personalizar o WooCommerce (Estilo Avançado)

No menu Personalizar, clica no segundo menu do WooCommerce > Clica em Estilo avançado e usa as seguintes opções

  • Fundo da venda: #ef6700
  • Entrada de produto > Cor do preço : #ef6700
  • Cor do adicionar ao carrinho hover: #777777
  • Cor da borda do adicionar ao carrinho hover: #000000
  • Add to Cart Border (Size): 5%
  • Add to Cart Border (Radius): 5%
  • Produto único > Cor do preço: #ef6700

Passo 35: Tornar o Site Responsivo (Página Inicial)

FIM!

Parabéns!!

Por favor subscreve ao canal do Youtube do VIVEDANET pois vou fazer mais vídeos no futuro sobre como personalizar a loja virtual.

EXTRA: Redimensionar as Imagens dos Produtos  – OPCIONAL

Se instalaste o tema OceanWP num site de WordPress existente, tens de certificar-te que as imagens dos produtos do WooCommerce ficam bem com o tema novo.

Para garantir que as imagens ficam perfeitas recomendo que instales o plugin Regenerate Thumbnails.

Após instalado e ativo podes aceder ao plugin através do menu Configurações.

Clica no botão “Regenerate Thumbnails” e aguarda uns minutos para que as imagens sejam redimensionadas.

O que precisas

1.) Algum tempo (para seguires o tutorial do Youtube e fazeres a tua loja no WordPress)

2.) Um domínio (ex: www.atualoja.com)

3.) Uma Hospedagem (o servidor que permite guardares os textos e as imagens do teu site na Internet, acessível a todo o mundo 24h por dia e livre de publicidade)

4.) O tema de WordPress OceanWP e o constutor de páginas Elementor (a melhor combinação gratuita para criar uma loja virtual no WordPress!)

Para hospedarmos o nosso site recomendo a versão norte-americana do Hostgator. A versão norte-americana é mais barata, mais rápida e mais simples de usar do que a versão .com.br

Além disso o governo não tem acesso aos nossos dados pela versão norte-americana, ao contrário da versão .com.br onde temos de fornecer o CNP J e preencher mais papelada.

Também podes usar o Hostgator para obter o nome de domínio. Se queres usar outra empresa como a GoDaddy para obter o domínio – vê este vídeo para instruções passo a passo.

Porquê o Hostgator?

1.) Rápido, confiável, barato e excelente suporte

2.) Uso o Hostgador desde sempre e não tenho queixas

Desconto no Hostgator

Por favor usa o seguinte cupão de desconto na tua compra do Hostgatorplanoeconomico – desconto até 60% (o mais alto possível)

Muito bem, agora que já sabes o que precisas, vamos começar a criar no nosso site!

Passo 1: Registrar o Domínio e a Hospedagem

O domínio é o nosso endereço (o que as pessoas escrevem na barra de endereços para encontrá-lo). Isto é OBRIGATÓRIO.

Precisas também da Hospedagem de forma a guardar todo o conteúdo do teu site no ar (textos, imagens, vídeos).

Todos os sites precisam de hospedagem, por isso certifica-te que tens uma hospedagem profissional, caso contrário não consegues construir o teu site livre de publicidade e spam como ensino no tutorial. Isto é OBRIGATÓRIO.

Vai até à versão norte-americana do Hostgator (por aqui)

1.) Clica no menu Web Hosting – Escolhe um plano (recomendo o Hatchling para começar)

2.) Clica em Sign Up Now

> Recomendo o Hostgator norte-americano porque é mais barato e fácil começar um site. Tem um excelente suporte – Gosto muito deles! (mas podes escolher qualquer serviço que preferires!)

Escreve o nome de domínio que queres na barra de pesquisa e clica em Enter para ver se está disponível. Se encontraste um domínio disponível vamos aos próximos passos! 😀

> Usa o cupão de desconto: planoeconomico para poupares até 60%

> (é um link afiliado, recebo uma comissão do Hostgator por te ajudar)

Os principais benefícios da hospedagem do Hostgator

1.) Barata e rápida

2.) Bom atendimento ao cliente com chat ao vivo 24h por dia

3.) Fácil de instalar o WordPress – tudo o que precisas para criar a tua loja

1.) Decide qual é o plano ideal para ti (se só queres criar um site – escolhe o Hatchling Plan, se achas que precisas de mais do que um site – escolhe o Baby Plan)

2.) Preenche toda a informação (sugiro que escolhas um ciclo de pagamento de 12 meses)

3.) Retira a seleção de todos os serviços extra dos quadradinhos (são desnecessários nesta fase inicial e poupas mais dinheiro)

4.) Coloca o cupão “planoeconomico” para um desconto de até 60% (o nosso código promocional especial!)

5.) Aceita os termos e condições e clica em “Check Out Now”

Passo 2: Abrir a Caixa de Email

Vais receber um email do Hostgator com os teus dados de login – o assunto do email diz “Your Account Info” e é muito importante! Guarda-o bem!

Usa essa informação para o passo 3.

Passo 3: Login no Cpanel

1.) Usa os dados que recebeste do Hostgator para fazer login no Cpanel

2.) Clica no link que diz “Your Control Panel”

3.) Faz login com o username e a password que estão no email

Agora começa a parte divertida, criar a loja virtual!

Passo 4: Instalar o WordPress

Agora precisamos de instalar a plataforma que vamos usar para criar o nosso site. Esta plataforma chama-se WordPress – é um sistema de gestão de conteúdo super popular e com uma grande comunidade de utilizadores.

1.) Agora que estamos loggados no cpanel

2.) Rola até à secção da primeira página que diz Software/Services

3.) Clica no ícone que diz “QuickInstall”

4.) Clica em WordPress

5.) Clica em Continue

6.) Introduz um email de administrador (o teu melhor email), título do blog (podes mudar isto mais tarde), nome de utilizador e outros detalhes.

7.) Clica em “Install Now!”

Ótimo! Agora temos o WordPress instalado! Podes visitar o teu domínio e ver que já existe um site (vamos tratar dele e colocá-lo bonito – não te preocupes!)

Passo 5: Fazer Login no Painel do WordPress

Podes ter de esperar 5-15 minutos antes que seja possível fazer login no teu site. Aproveita para fazer uma pausa.

Há duas formas de entrar no teu site

1.) Podes clicar no link que o Hostgator forneceu logo após a instalação e usar o nome de utilizador e a password

2.) Podes ir até à tua caixa de email e abrir o novo email que recebeste com os detalhes para entrares no teu site (mesma informação acima)

Para personalizar e adicionar conteúdo ao teu site vais sempre ter de entrar no teu site através este link: www.OTeuSite.com/wp-admin

Por isso força, faz login!

Passo 6: Alterar a Password no WordPress

A próxima coisa que vamos fazer é alterar aquela password complicada do WordPress para a nossa própria password.

Segue os seguintes passos

1.) No menu do lado esquerdo clica em Usuários

2.) Seleciona a opção Seu Perfil

3.) Rola um pouco até encontrares a opção Gerenciamento da Conta

4.) Clica em Gerar Senha

5.) Define uma nova senha (no mínimo com um nível de dificuldade médio)

6.) Rola até baixo e clica em Atualizar Perfil

7.) Volta a fazer login no WordPress usando a nova senha

Passo 7: Colocar o WordPress em Português

1.) No menu do lado esquerdo clica em “Settings”

2.) Clica em “General”

3.) Rola um pouco para baixo até encontrares a opção “Site Language”

4.) Altera o WordPress para Português / Português do Brasil

Neste tutorial vou usar o Português de Brasil pois 9 em cada 10 pessoas que assistem aos meus vídeos são do Brasil. Oi galera!

Passo 8: Limpar os Plugins Pré-instalados do WordPress

Os plugins estão para o WordPress como as apps estão para os telemóveis. Eles permitem adicionar características extra ao design do nosso site.

Mas não vamos usar nenhum dos plugins que já vêm pré-instalados com o WordPress, por isso vamos desinstalá-los e assim libertar algum espaço no nosso site.

1.) Clica em Plugins no menu do lado esquerdo do painel

2.) Seleciona a opção Plugins Instalados

3.) Acima da lista de plugins na setinha que diz “Ações em massa” seleciona a opção “Desativar”

4.) Clica no quadradinho Plugin em cima para selecionar todos

5.) De seguida clica em Aplicar

6.) Volta a clicar em “Ações em massa” e desta vez seleciona a opção “Excluir”

7.) Clica no quadradinho Plugin em cima para selecionar todos

5.) Para excluir todos clica em Aplicar

Muito bem, o nosso WordPress ficou bem mais leve!

Passo 9: Instalar o tema OceanWP e os Plugins Recomendados

Para criar a nossa loja virtual vamos usar o tema OceanWP porque:

1.) É grátis, leve e rápido

2.) Tem boa integração com o Woo-Commerce (plugin que permite configurar os produtos da nossa loja)

Para instalar o tema:

1.) Vai até ao site do OceanWP

2.) Coloca os teus dados e clica em “Get it Now”

2.) Abre a caixa de email e clica no link para baixar tema

3.) Guardar o ficheiro ZIP no ambiente de trabalho

3.) Entra no painel do WordPress

4.) Clica no menu Aparência > Temas > Adicionar Novo > Enviar Tema

5.) Escolhe o ficheiro ZIP que está no ambiente de trabalho

6.) Clica em Instalar Agora e ativa o tema.

Após a instalação do tema vais reparar no texto acima a dizer que o tema recomenda os seguintes plugins: Ocean Extra e o Elementor.

Vamos clicar no link que diz “Comece a instalar plugins” para instalar os plugins sugeridos.

Excelente! Já temos o nosso tema e os plugins recomendados instalados! Agora podemos ver como está o nosso site passando com o rato no ícone da casinha no canto superior esquerdo e clicando em Visitar site.

Vais reparar que o design padrão do OceanWP é bem simples. Isso é uma vantagem. Queremos que o tema seja simples e leve para podermos personalizar à vontade!

Passo 10: Adicionar Páginas à Loja Virtual

Vamos adicionar as páginas Início, Sobre Nós, Blog e Contato à loja virtual.

Para criar uma página é muito simples:

1.) Clica no menu páginas do lado esquerdo

2.) Clica em Adicionar Nova

3.) Escolhe o título para a página

4.) Clica em Publicar

5.) Repete o processo descrito acima para todas as páginas

Claro que falta adicionar as páginas da Loja, onde vamos promover os nossos produtos. Essas página vão ser adicionadas de uma outra forma, no próximo passo.

Passo 11: Instalar WooCommerce + Páginas da Loja Virtual

O plugin WooCommerce é a aplicação grátis que nos vai permitir configurar a loja virtual no WordPress (adicionar produtos, definir preços, gerir stocks, etc)

Para instalar o WooCommerce

1.) Clica no menu Plugins > Adicionar Novo

2.) Procura por “woocommerce” e instala o plugin

3.) Clica em ativar e pronto!

Depois de instalado somos redirecionados para o assistente de configuração do WooCommerce, rolamos até baixo e clicamos em “Agora não”.

Este plugin também vai-nos fornecer 3 páginas extra que faltam no nosso site: Carrinho, Loja e Finalizar Compra.

Para instalar essas páginas vamos ao menu “Woo-Commerce” > clicamos em Status > Ferramentas > Procuramos pela opção “Criar as páginas padrões do WooCommerce” > clicamos em “Criar Páginas”

Podemos confirmar que as páginas padrão do WooCommerce foram instaladas. Vamos até ao menu Páginas e lá podemos ver que as novas páginas foram adicionadas com sucesso! Fantástico 🙂

Passo 12: Definir Página Início Como Página Principal

Já deves ter reparado que por padrão o WordPress mostra os últimos posts na página principal do nosso site. Mas nós criámos uma página Início e queremos defini-la como a página principal estática para o nosso site!

Então vamos tratar disso:

1.) Vamos ao menu Configurações

2.) Clicamos em Leitura

3.) Na primeira opção, onde diz “Sua página inicial exibe”, seleciona “Uma página estática”

4.) Abaixo seleciona a página Início para página incial

5.) Para a página de posts escolhe o nome da página de blog, ou deixa em branco se não quiseres ter um blog

6.) Rola até abaixo e clica em Salvar alterações.

Passo 13 (opcional): Baixar as Imagens da Loja Virtual Demo

Clica aqui para baixares todas as imagens que usei no tutorial do YouTube da loja demo.

Melhores bancos de imagens grátis:

Pixabay – Boas imagens de alta resolução, assim como vetores. Centenas de milhares de opções!

FreeImages – Mais de 400.000 imagens online que podes usar livremente nos teus sites, com uma qualidade de razoável a boa.

Flickr – Imagens de fotógrafos profissionais que optam por partilhar alguns dos seus trabalhos gratuitamente!

Melhores bancos de imagens pagos:

Shutterstock  – Neste site vais encontrar aquela imagem perfeita que tanto procuras, não falta nada e tudo com ótima qualidade!

iStockphoto – Site parecido com o Shutterstock, com uma gigante base de imagens de alta resolução.

GettyImages – Mais um banco de imagens incrível com fotos profissionais para todos os gostos!

Passo 14: Alterar os Links Permanentes

Este passo serve para tornar os links do nosso site mais bonitos e apelativos. Isto é bom não só para os nossos visitantes como para os motores de busca.

Para isso vamos até ao menu Configurações > Links Permanentes > Configurações comuns > Alterar para “Nome do post”

Desta forma quando criamos uma página ou um artigo no blog, esse link fica limpo. Exemplo: se criares uma página com o nome “artigo” o link dessa página será oteusite.com/artigo em vez de oteusite.com/2017/12/artigo

Passo 15 (opcional): Aumenta a Performance do Nosso Site

 

Nos meus tutoriais anteriores algumas pessoas diziam que não conseguiam ver logo as alterações que faziam no WordPress. Por isso neste tutorial vou recomendar um plugin que permite não só ver logo as alterações como aumentar a performance do nosso site!

Uso este plugin no vivedanet.com e gosto muito, funciona na perfeição!

Para instalá-lo vamos ao menu Plugins > Adicionar Novo > Pesquisar por “Autoptimize” > Instalar e Ativar o plugin

Agora vamos à lista de plugins, procuramos pelo Autoptimize e clicamos nas “configurações” > vamos selecionar os três quadradinhos para otimizar o site ao máximo!

Por fim clicamos em “Salvar mudanças e esvaziar a cache”.

Repara que no topo do nosso site temos um ícone chamado Autoptimize. Sempre que fizeres alguma alteração no teu WordPress e não conseguires ver de imediato podes limpar a cache passando com o rato por cima do ícone com o círculo verde e clicando em “Limpar Cache”

Passo 16: Personalizar o Cabeçalho

16.1) Identidade do Site

Para personalizarmos o cabeçalho vamos ao menu Aparência > Personalizar

Na primeira opção “Identidade do Site” podemos alterar o título do site e a descrição.

A descrição é muito importante pois é a frase que melhor descreve a nossa loja e aquilo que vendemos. Esta descrição vai ser vista pelos nossos visitantes e vai ser usada pelo Google para recomendar o nosso site, é muito importante!

Escolhe uma descrição rica em palavras-chave importantes relacionadas com o teu negócio.

16.2) Adicionar o Ícone (Favicon)

1.) Baixa o ficheiro ZIP com as imagens do Passo 13

2.) Aparência > Personalizar > Identidade do Site > Adicionar o Ícone > Enviar Aquivos > Adicionar o Favicon que está na pasta das imagens demo

16.3) Editar a barra superior

As definições que usei  foram as seguintes:

  • Cor de fundo: #00000
  • Cor da borda: #00000
  • Cor do texto: #ffffff

Conteúdo: Portes grátis para todas as compras a partir de 50€!

Redes sociais: Facebook, Pinterest, Instagram, YouTube

Cor dos ícones das redes sociais: #ffffff

Nota: Para desativar a barra superior vai ao menu Aparência > Personalizar > Barra Superior > Geral > Retirar a seleção do quadradinho

16.4) Definições de Cabeçalho

Clica em Cabeçalho > Geral e usar as seguintes definições:

  • Estilo: Transparente
  • Header border bottom: Retirar a seleção do quadradinho

Clicar em Cabeçalho > Logo

  • Adicionar o logo
  • Largura máxima: 0
  • Max Height (altura máxima): 42

Clicar em Cabeçalho > Menu

  • Cor do link: #ffffff
  • Cor do link hover: #a1a1a1
  • Cor do link item do menu atual: #ffffff
  • Estilo do ícone de pesquisa: Desativado

16.5) Criar Menu Principal

Para criar o menu principal clicar em Menus > Criar novo menu > Dar o nome de Menu principal > Definir como Menu principal

Clicar em Adicionar itens para adicionar as páginas ao Menu Principal e adicionar as seguintes páginas: Sobre Nós, Loja, Novas Tendências, Contato (vamos criar a página de FAQ mais à frente)

Passo 17: Tipografia (Estilo da Letra)

A próxima coisa que vamos fazer é alterar o estilo de letra da nossa loja virtual no menu Tipografia

Clica em Tipografia > Clica em Corpo e usa as seguintes definições:

  • Família da fonte: Yantramanav
  • Tamanho da fonte: 16

No menu Tipografia > Clica em Barra Superior e usa as seguintes definições:

  • Família da fonte: Yantramanav
  • Tamanho da fonte: 13

No menu Tipografia > Clica em Menu Principal e usa as seguintes definições:

  • Família da fonte: Poppins
  • Espessura da fonte: 700
  • Tamanho da fonte: 14

No menu Tipografia > Clica em Título da Página

  • Família da fonte: Poppins
  • Espessura da fonte: 600
  • Tamanho da fonte: 60

Passo 18: Opções Gerais

Nas opções gerais vamos alterar algumas coisas que nos vão permitir poupar algum tempo ao realizar o design.

Clica em Opções Gerais > Estilo Geral e usa as seguintes definições

  • Cor principal: #000000
  • Cor principal hover: #323232
  • Cor da borda principal: #000000

Clica em Opções Gerais > Configurações Gerais e usa as seguintes definições

  • Layout: Seleciona o rectângulo com largura completa

Clica em Opções Gerais > Título da Página

  • Estilo: centralizado
  • Cord de fundo: #ffffff
  • Cor do texto: #000000
  • Breadcrumbs: retirar a seleção do quadradinho

Clica em Opções Gerais > Role para Cima

  • Tamanho do botão: 45
  • Tamanho do ícone: 30
  • Border Radius: 100
  • Cor de fundo: #eb785b (transparência 22)
  • Cor de fundo hover: #eb785b
  • Cor: #bababa
  • Cor de fundo hover: #000000

Passo 19: Personalizar o WooCommerce

Como estamos a usar um tema compatível com o WooCommerce (OceanWP) podemos personalizar a aparência do WooCommerce através do menu Aparência > Personalizar > WooCommerce.

Clica em WooCommerce > Menu do Carrinho e usa as seguintes opções

  • Ícone do carrinho: (escolhi o ícone mais à direita)
  • Cor do link hover: #777777
  • Cor do preço: #ef6700

Passo 20: Widgets do Rodapé e Rodapé Inferior

1.) No menu Personalizar, clica em Widgets do Rodapé e retira a seleção do quadradinho

2.) No menu Personalizar, clicar em Rodapé Inferior e retira a seleção do quadradinho.

Passo 21: Criar a Página Início

A página início foi criada com o construtor de páginas gratuito Elementor e estes foram os passos seguidos:

1.) Clica em editar página

2.) Em OceanWP settings clica em “Title” e na opção “Display Page Title” seleciona “Disable”

3.) Clica em Atualizar e de seguida clica em Editar com Elementor

22.1 Primeira Seção (Imagem de fundo, título, sub-título, texto, botão e menu transparente)

22.11 Imagem de fundo

1.) Adiciona uma seção com 1 coluna

2.) Clica em Edit Seção > clica em estilo > background > clica no ícone do pincel para fundo clássico > seleciona a imagem “fundo_original.jpg” > clica em Inserir Mídia

3.) Configura a imagem em Layout > Em Stretch Section coloca “Sim” >  em Altura seleciona a opção Ajustar à tela

4.) Clica em Estilo > Define a Posição como “Centralizado” > Define o Tamanho para “Preenchimento completo”

22.12 Título

1.) Coloca a coluna de conteúdo no topo >  Layout > Define a Posição da coluna para “Superior”

2.) Clica no ícone dos elementos e arrasta o elemento “Cabeçalho” para a coluna do conteúdo

3.) Clica no elemento para abrir as definições do lado esquerdo. Cola o seguinte texto na caixa do conteúdo “O Estilo é Tudo”

4.) Clica no menu Estilo > Colocar Tipografia “On” e usa as seguintes definições:

  • Cor do texto: Preto (#000000)
  • Tamanho da fonte: 60
  • Família da fonte: Lato
  • Peso: 700
  • Altura da linha: 0,6
  • Espaçamento: 4

5.) Corrige a margem do Título no menu Avançado > Retira a seleção “link values together” > Coloca uma margem superior de 120

22.13 Sub-título

1.) Clica no ícone dos elementos e arrasta o elemento “Cabeçalho” para a coluna do conteúdo

2.) Clica no elemento para abrir as definições do lado esquerdo. Cola o seguinte texto na caixa do conteúdo “Vista-se Bem. Sinta-se Bem.”

3.) Clica no menu Estilo > Coloca a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: Cinza claro (#7a7a7a)
  • Tamanho da fonte: 20
  • Família da fonte: Lato
  • Peso: 300
  • Espaçamento: 1,7

5.) Corrige a margem do sub-título no menu Avançado > Retira a seleção “link values together” > Coloca uma margem esquerda de 5px

22.14 Texto

1.) Clica no ícone dos elementos e arrasta o elemento “Editor de Texto” para a coluna do conteúdo

2.) Clica no elemento para abrir as definições do lado esquerdo. Cola o seguinte texto na caixa do conteúdo “Vista-se Bem. Sinta-se Bem.”

3.) Clica no menu Estilo > Coloca a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: Preto (#000000)
  • Tamanho da fonte: 17
  • Família da fonte: Lato
  • Peso: 300
  • Altura da linha: 1,7
  • Espaçamento: 1,4

5.) Corrige a margem do texto no menu Avançado > Retira a seleção “link values together” > Coloca uma margem direita de 650 > Coloca uma margem esquerda de 5

22.15 Botão

1.) Clica no ícone dos elementos e arrasta o elemento “Botão” para a coluna do conteúdo abaixo do texto

2.) Cola o seguinte texto na caixa de texto “Explore a Nossa Loja”

3.) Coloca um link para a página da loja, ex: /loja (se for um link externo tens de colocar http://exemplosite.com)

4.) Clica no menu Estilo > Colocar a Tipografia “On” e usa as seguintes definições:

  • Tamanho da fonte: 13
  • Família da fonte: Roboto
  • Espaçamento: 1,2
  • Cor do texto: preto (#000000)
  • Cor do fundo: transparente

5.) Cria um borda sólida com a espessura de 1px em todos os lados

6.) Clica na opção Hover (quando o rato passa por cima) e usa as seguintes definições

  • Cor do texto: cinza escuro (#444444)
  • Cor da borda: cinza claro (#7a7a7a)

7.) Corrige a margem do botão no menu Avançado >  Coloca uma margem esquerda de 15

22.16 Menu transparente

1.) Clica no menu Personalizar do tema OceanWP

2.) Clica em Cabeçalho > Geral > Define Estilo: Transparente

3.) Rola até onde diz “Transparent Header Settings” e arrasta a barra da transparência toda para o lado esquerdo

4.) Volta para trás e clica na opção Menu

5.) Rola até onde diz cor do link > altera para branco (#ffffff)

4.) Clica em Publicar para salvar as alterações

22.2 Segunda Seção (Sub-título)

1.) Clica em editar com o Elementor para voltar ao editor

2.) Adiciona um nova seção com 1 coluna

3.) Arrasta o elemento “Cabeçalho” para a coluna

3.) Cola o seguinte texto na caixa do Título: “O estilo é algo que levamos a sério” e centraliza o texto

4.) Clica no menu Estilo > Coloca a Tipografia “On” e usa as seguintes definições:

  • Tamanho da fonte: 30
  • Família da fonte: Poppins
  • Cor do texto: preto (#000000)

5.) Clica no menu Avançado > retira a seleção dos “link values together” > Coloca uma margem superior de 40 > Coloca uma margem inferior de 20

22.3 Terceira Seção (3 Caixas)

1.) No editor do Elementor > Adiciona uma nova seção com 3 colunas

2.) Clica em “Edit Coluna” > Estilo > Tipo de fundo clássico > Adiciona o ficheiro com o nome botão_1.jpg que se encontra na pasta das imagens demo

3.) Clica nos ícones dos elementos e adiciona o elemento “Cabeçalho”

4.) Escreve “acessórios” no título

5.) Define o link para a página da Loja, ex: /loja

6.) Centraliza o título

7.) Clica no menu Estilo > Coloca a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: branco (#ffffff)
  • Tamanho da fonte: 23
  • Família da fonte: Poppins
  • Espessura da fonte: 600
  • Transformação: Maiúsculas

8.) Clica em Avançado > Retira a seleção dos “link values together” > Coloca uma margem superior de 30

9.) Clica nos ícones dos elementos, adiciona o elemento “Divisor” abaixo do título e usa as seguintes definições:

  • Estilo: Sólido
  • Peso: 2
  • Cor: branco (#ffffff)
  • Largura: 27
  • Espaçamento: 0

10.) Clica nos ícones dos elementos e adiciona o elemento “botão” abaixo do divisor

11.) Cola o seguinte texto: “COMPRAR AGORA” e centraliza o texto

12.) Define o link para a página da Loja, ex: /loja

13.) Clica no menu Estilo > Coloca a Tipografia “On” e usa as seguintes definições:

  • Tamanho da fonte: 16
  • Família da fonte: Yantramanav
  • Espessura da fonte: 400
  • Transformação: Maiúsculas
  • Cor de fundo do botão: preto + transparência (clara)

14.) Cria um borda sólida com a espessura de 1px em todos os lados

16.) Clica na opção Hover (quando o rato passa por cima) e usa as seguintes definições

  • Cor de fundo do botão: preto + transparência (escura)

17.) Clica no menu Avançado > retira a seleção dos “link values together” > Coloca uma margem inferior de 40

18.) Clica em Edit Coluna > Estilo > Define “Preenchimento Completo” em Tamanho da Imagem

19.) Em Edit Coluna > Clica em Avançado > Coloca uma margem de 10 em todos os lados

20.) Clica em Estilo > Background Overlay > Tipo de fundo clássico > Define a cor preta (#000000) > Define a Opacidade para 0,2

21.) Clica em duplicar coluna duas vezes

22.) Apaga as duas colunas extra

23.) Usa as seguintes definições nos outros botões

Botão 2:

  • Imagem de fundo: botão_2.jpg
  • Título: Conheça a Equipa
  • Texto do botão: Sobre Nós
  • Link: /sobre-nos

Botão 3:

  • Imagem de fundo: botão_3.jpg
  • Título: Novas Tendências
  • Texto do botão: Explorar
  • Link: /novas-tendencias

22.4 Quarta Seção (Divisor)

1.) Adiciona uma nova seção com 1 coluna

2.) Arrasta o elementor “Divisor” para dentro da coluna e usa as seguintes definições:

  • Estilo: Sólido
  • Peso: 4
  • Cor: #ebebeb
  • Espaçamento: 15

22.5 Quinta Seção (Título + Sub-título)

1.) Adiciona uma nova seção com 1 coluna

2.) Arrasta o elemento “Cabeçalho” para dentro da coluna

3.) Cola o seguinte texto na caixa Título: “Compre Estes Looks” e centraliza o texto

4.) Clica no menu Estilo > Colocar a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: preto (#000000)
  • Tamanho da fonte: 50
  • Família da fonte: Poppins
  • Espessura da fonte: 700

5.) Arrasta o elemento “Cabeçalho” para debaixo do elemento cabeçalho anterior

3.) Cola o seguinte texto na caixa Título: “Provavelmente não tem nada para vestir no armário” e centraliza o texto

4.) Clica no menu Estilo > Colocar a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: #999999
  • Tamanho da fonte: 18
  • Família da fonte: Yantramanav
  • Espessura da fonte: 400

5.) Clica no menu Avançado > retira a seleção dos “link values together” > Coloca uma margem inferior de 15

22.6 Sexta Seção (Chamado à Ação)

1.) Adiciona uma nova seção com 1 coluna

2.) Arrasta o elemento “Editor de Texto” para dentro da coluna

3.) Cola o seguinte texto na caixa de texto: “Quer ver mais produtos? COMPRE JÁ!” e centraliza o texto no próprio editor

4.) Define a cor da pergunta “Quer ver mais produtos?” para branco (#ffffff)

5.) Define a cor das palavras “COMPRE JÁ!” para laranja (#ff6600)

6.) Adiciona um link para a loja nas palavras “COMPRE JÁ!” selecionando as mesmas e clicando no ícone de link do editor de texto.

7.) Clica no menu Estilo > Coloca a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: #999999
  • Tamanho da fonte: 18
  • Família da fonte: Yantramanav
  • Espessura da fonte: 400

22.7 Sétima Seção (Rodapé personalizado)

1.) Adiciona uma nova seção com 1 coluna

2.) Arrasta o elemento “Social Icons” para dentro da coluna

3.) Apaga o ícone do Google Plus e adiciona os seguintes ícones: Pinterest, Instagram e Youtube

4.) Clica no menu Estilo > Em cor escolhe a opção Personalizar > Na Cor Primária > Arrasta a barra da transparência até baixo

5.) Arrasta o elemento “Editor de texto” para dentro da coluna abaixo do elemento “Social Icons”

6.) Coloca o seguinte texto na caixa de texto do Editor de texto: “FAQ    |    Política de Privacidade    |    Termos e Condições”

7.) Usa o editor de texto para colocar links para cada uma das páginas. Exemplo: /faq ; /politica-de-privacidade ; /termos-e-condicoes

8.) Usa o editor de texto para alterar a cor do texto para branca (#ffffff)

9.) Clica no menu Estilo e usa as seguintes definições de Tipografia:

  • Família da fonte: Yantramanav
  • Tamanho da fonte: 15
  • Peso da fonte: 400

10.) Duplica este último elemento do Editor de texto e coloca o seguinte texto na caixa do editor de texto: © 2018 – oteunegócio

11.) Arrasta o elemento “Espaçamento”, coloca 50px para adicionar um espaço superior e repete o processo para adicionar um espaço inferior.

12.) Clica em Update para salvar as alterações!

Passo 22. Criar Produtos Simples no WooCommerce

1.) No painel do WordPress vai ao menu Produtos e clica em Adicionar Novo

2.) Dá ao produto o título de “Vestido Branco Florido”

3.) No editor de texto coloca a descrição longa. Usei o seguinte texto:

“Este look marcou uma geração. Vista-o para um casamento, uma peça de teatro ou uma noite na cidade. Tudo o que você está procurando, esse look tem! Primavera, verão ou outono, não deixe este vestido escorrer de suas mãos. Feito a partir do tecido mais fino da Itália, esta roupa de designer foi feita para você. Forma adequada e elegante, conhecemos moda e sabemos que você vai adorar isso!”

4.) Nas OceanWP Settings usa as seguintes definições:

  • Main > Content Layout > Full Width (largura completa)
  • Title > Display Page Title > Disable

5.) Na opção Dados do produto seleciona “Produto Simples” e preenche os menus Geral, Inventário e Entrega com as informações particulares do produto

6.) Coloca uma breve descrição sobre o produto

7.) Na opção Categorias de produto cria uma categoria com o nome Vestidos

8.) Na opção Tags do produto cria uma tag com o nome vestidos

9.) Na Imagem do Produto define a imagem principal do produto. Usei a imagem “produto-1b-570×708”

10.) Na Galeria de imagens do produto define as imagens alternativas. Usei a imagem “produto-1a-570×708”

11.) Por fim clica em Publicar!

Passo 23. Criar Produtos Variáveis no WooCommerce

1.) Na página de produto simples, passa com o rato no separador superior que diz Novo e clica em Produto

2.)  Dá ao produto o título de “Vestido Preto Formal”

3.) No editor de texto coloca a descrição longa. Usei o seguinte texto:

“Este look marcou uma geração. Vista-o para um casamento, uma peça de teatro ou uma noite na cidade. Tudo o que você está procurando, esse look tem! Primavera, verão ou outono, não deixe este vestido escorrer de suas mãos. Feito a partir do tecido mais fino da Itália, esta roupa de designer foi feita para você. Forma adequada e elegante, conhecemos moda e sabemos que você vai adorar isso!”

4.) Nas OceanWP Settings usa as seguintes definições:

  • Main > Content Layout > Full Width (largura completa)
  • Title > Display Page Title > Disable

5.) Na opção Dados do produto seleciona “Produto Variável” e clica no menu Atributos

6.) No menu Atributos, onde diz Atributo personalizado do produto clica em Adicionar > Dá um nome ao atributo, ex: Tamanhos > Digita os valores separados por “|”, ex P | M | G > Clica na opção “Usado para Variações”

7.) Volta a Adicionar um atributo > Dá um nome ao atributo, ex: Cores > Digita os valores separados por “|”, ex Preto | Azul | Branco > Clicar na opção “Usado para Variações”

8.) Clica em Salvar atributos para guardar alterações

9.) Ainda na opção Dados do produto, clica no menu Variações para definir os preços dos atributos

10.) No menu Variações, clica no botão “Ir” para criar variações

11.) Cria uma variação para todas as cores (preto, azul e branco) colocando diferentes preços para cada uma delas 99, 75 e 49 respetivamente.

12.) Coloca uma breve descrição sobre o produto

13.) Na opção Categorias de produto, cria uma categoria com o nome Vestidos

8.) Na opção Tags do produto, cria uma tag com o nome vestidos

9.) Na Imagem do Produto define a imagem principal do produto. Usei a imagem “produto-2b-570×708”

10.) Na Galeria de imagens do produto define imagens alternativas. Usei a imagem “produto-2a-570×708”

11.) Por fim clicas em Publicar e vês como ficou o trabalho!

Passo 24. Adicionar Imagens dos Produtos à Página Inicial

Há duas formas de adicionar produtos à página inicial da loja, com o Elementor Pro (o meu método preferido) ou com a versão grátis.

Método com versão profissional do Elementor

1.) Na página Inicial clica em “Editar com Elementor”

2. Na lista dos elementos, em “Pro Elements” procura pelo elemento “Woo-Products” e arrasta para a seção onde desejas adicionar os produtos

3.) Nas definições do elemento podes escolher o número de colunas e produtos que aparecem na página inicial

Método com a versão gratuita do Elementor:

1.) Na lista dos elementos, procura pelo elemento “Shortcode” em General Elements

2.) Nas definições do elemento em conteúdo colocar o seguinte texto: [products]

Nota: A desvantagem do método gratuito é que não dá para escolher o número de colunas e o número de produtos a ser mostrados no catálogo.

Passo 25. Editar os Botões do WooCommerce

25.1 Alterar as cores dos botões dos produtos

1.) No painel do WordPress vai ao menu Aparência e clica em Personalizar

2.) No menu Personalizar clica na opção Custom CSS

3.) Cola este código na caixa de texto: .woocommerce ul.products li.product .button
{
background-color: #000000;
color: #fff!important;
text-transform: uppercase;
padding: 10px 20px;
border:0px;
}
.woocommerce ul.products li.product
.button:hover {
background-color: #323232;
color: #fff!important;
}

4.) Podes alterar as cores do botão, bastando para isso alterar os códigos das cores no código acima. Cuidado para não fazer mais nenhuma alteração ao código ou pode não funcionar!

5.) Clica em Publicar para salvar as alterações!

25.2 Alterar os textos dos botões dos produtos

1.) No painel do WordPress vai ao menu Plugins e clica em Adicionar Novo

2.) Na barra de pesquisa procura pelo plugin chamado “WC Custom Add to Cart Labels”

3.) Assim que o plugin aparecer clica em Instalar agora e depois Ativar

4.) A seguir, passa com o rato no menu do WooCommerce e clica em Configurações > Clica no separador Produtos > Clica no link Add to cart button labels

5.) Substitui todos os textos que dizem COMPRAR por ADICIONAR

6.) Por fim clica em Salvar as alterações!

PARABÉNS! Completaste com sucesso a página Inicial da loja virtual! 😀

Passo 26. Configurar a Página da Loja

26.1 Configurar a barra lateral da loja

1.) No painel do WordPress vai ao menu Aparência e clica em Widgets

2.) Adiciona os seguintes widgets à barra lateral do WooCommerce pela seguinte ordem: Procurar produto, Filtrar produtos por preço, Categorias de produto, Nuvem de tags do produtos

26.2 Alterar o título da página da loja

1.) No painel do WordPress vai ao menu Páginas e clica em Todas as páginas > Procura pela página da Loja > Clica em Editar

2.) Na página da Loja vai até às definições do tema (OceanWP Settings) e clica na aba que diz Title

3.) Na opção Custom Title (Título personalizado) coloca o texto: LOJA

26.3 Colocar links para as páginas das categorias

Para fazer este passo vamos usar o editor de texto do WordPress para criar linguagem HTML, é muito simples!

1.) No painel do WordPress vai ao menu Posts e clica em Adicionar novo post

2.) No modo visual escreve o seguinte texto: Acessórios   |   Casacos   |   Saias   |  T-Shirts   |   Vestidos

3. A seguir seleciona o texto e coloca a negrito (CTRL + B)

4. Coloca os links das categorias em cada uma das palavras. Para encontrares o link das categorias vai ao menu Produtos (do lado esquerdo) > Abre a opção Categorias num novo separador

5. Na página de Categorias consegues ver todas as categorias criadas, para veres os links basta clicar em “Ver” junto ao nome da categoria

6.) Copia o link > volta ao editor de texto > seleciona a palavra onde queres colocar o link > clica no ícone dos link do editor de texto > cola o link e clica em aplicar

7.) Repete os últimos dois passos para todas as categorias

8.) Agora tens de transformar o texto em linguagem HTML e para isso basta clicares na aba Texto no canto superior direito do editor e o WordPress coloca tudo em linguagem HTML por ti!

9.) Copia o código HTML da aba texto > volta à página de edição da Loja > OceanWP Settings > Title > Subheading > cola o código HTML

10.) Por fim clica em Atualizar e a seguir Ver página!

26.4 Alterar as cores dos links das categorias e dos elementos da barra lateral

1.) Vai ao menu Personalizar > Clica nas Opções Gerais > Estilo Geral > Na opção Cor Principal usa o seguinte código: #ef6700

2.) Clica em Publicar para salvar as alterações!

Passo 27: Criar a Página Sobre Nós

1.) No painel do WordPress vai ao menu Páginas > Clica em Todas as páginas > Procura pela página Sobre Nós > Clica em Editar

2.) Nas OceanWP Settings usa as seguintes definições:

  • Main > Margins > Disable
  • Title > Display Page Title > Disable

3.) Clica em Atualizar e de seguida em Ver página

27.1 Primeira Seção (Título, Espaçamento, Primeiro Divisor, Editor de texto, Segundo Divisor) 

27.11 Título

1.) Clica em Editar com Elementor > Adiciona uma seção com 1 coluna > Arrasta o elemento Cabeçalho para a seção

2.) Na caixa do título escreve: Sobre Nós > Centralizar o texto

3.) Clica no menu Estilo > Colocar a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: Preto (#000000)
  • Tamanho da fonte: 60
  • Família da fonte: Poppins

27.12 Espaçamento

1.) Clica no ícone dos elementos > procura pelo elemento Espaçamento > Arrasta o elemento para cima do cabeçalho > Coloca um espaçamento de 100

27.13 Primeiro Divisor

1.) Clica no ícone dos elementos > procura pelo elemento Divisor > Arrasta o elemento para debaixo do Cabeçalho > Usa as seguintes definições:

  • Peso: 3
  • Largura: 15
  • Cor: #f7be68
  • Alinhamento: centralizar

27.14 Editor de Texto

1.) Clica no ícone dos elementos > procura pelo elemento Editor de Texto > Arrasta o elemento para debaixo do Divisor

2.) Na caixa de texto usei o seguinte texto:

“A nossa paixão é criar peças únicas e elegantes. Não vamos parar até que todos usem as nossas roupas pois acreditamos no que fazemos e acreditamos que você vai adorar as nossas roupas. Ah, e espero que você goste muito deste design de loja virtual. Este é o melhor e mais completo tutorial de loja virtual do youtube. Vender on-line nunca foi tão fácil.

A nossa paixão é criar peças únicas e elegantes. Não vamos parar até que todos usem as nossas roupas pois acreditamos no que fazemos e acreditamos que você vai adorar as nossas roupas. Ah, e espero que você goste muito deste design de loja virtual. Este é o melhor e mais completo tutorial de loja virtual do youtube. Vender on-line nunca foi tão fácil.

A nossa paixão é criar peças únicas e elegantes. Não vamos parar até que todos usem as nossas roupas pois acreditamos no que fazemos e acreditamos que você vai adorar as nossas roupas. Ah, e espero que você goste muito deste design de loja virtual. Este é o melhor e mais completo tutorial de loja virtual do youtube. Vender on-line nunca foi tão fácil.”

3.) Clica no menu Estilo > Coloca a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: Cinzento escuro (#545454)
  • Tamanho da fonte: 18
  • Família da fonte: Yantramanav
  • Peso: 400

27.15 Segundo Divisor

1.) Clica no ícone dos elementos > procura pelo elemento Divisor > Arrasta o elemento para debaixo do Editor de texto > Usa as seguintes definições:

  • Peso: 1
  • Largura: 80
  • Cor: #dddddd
  • Alinhamento: centralizar

27.2 Segunda Seção (Título)

1.) Cria uma nova seção com 1 coluna

2.) Duplica o primeiro cabeçalho “Sobre Nós”

3.) Arrasta a cópia do elemento para a nova seção

4.) Altera o texto para: Nossa Equipa

5.) Clica no menu estilo > Altera o tamanho da fonte de 60 para 37

27.3 Terceira Seção (3 Caixas)

1.) Cria uma nova seção com 3 colunas

2.) Arrasta o elemento Imagem para a primeira coluna > Adiciona a imagem “botão_2.jpg”

3.) Arrasta o elemento Editor de texto para debaixo da imagem e coloca o seguinte texto:

Tiago Dantas
Desenvolvedor Web

4.) Clica no menu Estilo > Colocar a Tipografia “On” e usa as seguintes definições:

  • Cor do texto: Cinzento escuro (#545454)
  • Tamanho da fonte: 17
  • Família da fonte: Yantramanav
  • Peso: 400

5.) Duplica a coluna duas vezes clicando em Duplicate coluna e apaga as duas colunas extra

6.) Clica em Update para salvar as alterações

27.4 Quarta Seção (Terceiro Divisor) 

1.) Cria uma nova seção com 1 coluna

2.) Duplica o segundo divisor clicando em Duplicate Widget

3.) Arrasta o elemento duplicado para a nova seção

27.5 Quinta Seção (Título)

 1.) Cria uma nova seção com 1 coluna

2.) Duplica o segundo cabeçalho “Nossa Equipa”

3.) Arrasta a cópia do elemento para a nova seção

4.) Altera o texto para: Ajudamos você a criar lojas incríveis

27.6 Sexta Seção (3 Caixas de Ícones)

 1.) Cria uma nova seção com 3 colunas

2.) Procura pelo elemento Ícone e arrasta para a primeira coluna

3.) Edita o elemento do lado esquerdo usando as seguintes definições

No conteúdo:

  • Nome do ícone: bullseye
  • Titulo: DESIGN
  • Descrição: Este design profissional vai ajudá-lo a conquistar a confiança dos seus visitantes e a vender mais

No menu Estilo:

  • Cor primária: (preto) #000000
  • Tamanho: 70

Menu Estilo > Conteúdo > Título:

  • Cor: (preto) #000000
  • Família da fonte: Poppins
  • Tamanho da fonte: 23
  • Peso: 600

Menu Estilo > Conteúdo > Descrição

  • Cor: (cinza) #808080
  • Família da fonte: Yantramanav
  • Tamanho: padrão
  • Peso: 400

4.) Para estreitar o texto clica no menu Avançado do elemento Ícone

5.) Na opção Margem retira a seleção dos “link values together” e cria uma margem direita de 20 e uma margem esquerda de 20

6.) Duplica duas vezes a coluna com o elemento Ícone clicando em Duplicate coluna

7.) Apaga as duas colunas extra

8.) Agora podes alterar as caixas bastando para isso clicar sobre elas e alterar as definições do lado esquerdo

9.) Como exemplo alterei apenas os nomes dos ícones que são “share-alt” e “envelope” respetivamente

27.7 Sétima Seção (Chamado à ação com botão)

1.) Cria uma nova seção com 1 coluna

2.) Clica em Edit seção > Em Layout coloca Stretch Section (Esticar a seção) > Sim

3.) Clica no menu Estilo > Tipo de fundo > Clica em Clássico > Seleciona a Cor > Usa esta cor: #efefef

4.) Duplica o cabeçalho da seção anterior e arrasta para a nova seção

5.) Altera o texto para: Quer trabalhar connosco?

6.) Clica no ícone dos elementos e arrasta o elemento Botão para debaixo do elemento cabeçalho

7.) No editar botão coloca o texto: Entre em Contato

8.) Na opção link, coloca um link interno para a página de contato: /contato

9.) Na opção alinhamento centraliza o botão

10.) Clica no menu Estilo e usa as seguintes definições para o botão

  • Cor de fundo: #ff9900
  • Cor de fundo Hover (quando o rato passa por cima): #df7213

11.) Clica em Edit seção > Vai ao menu Avançado > Retira a seleção dos “link values together” > Coloca um Padding de 50 inferior e superior

12.) Clica em Save seção para guardar um template desta seção com o nome de “chamado_ação”

27.8 Oitava Seção (Rodapé)

1.) Clica em Add Template > My Templates > Clica Insert em Rodapé_loja_virtual

2.) Clica no Edit seção do rodapé e em Stretch Section (Esticar a seção) diz que Sim

3.) Para terminar o design da página sobre clicas em UPDATE!

Passo 28: Criar a página de FAQ (Perguntas Frequentes)

1.) Volta ao painel do WordPress

2.) Vai ao menu Páginas do lado esquerdo e clica em Adicionar nova

3.) Dá o título “FAQ” à página ou “Perguntas Frequentes”

4.) Nas OceanWP Settings usa as seguintes definições:

  • Main > Margins > Disable
  • Title > Display Page Title > Disable

5.) Publica a página

6.) Clica em Editar com Elementor

28.1 Primeira Seção (Título, Espaçamento, Divisor)

28.11 Título

1.) Cria uma seção com 1 coluna

2.) Arrasta o elemento Cabeçalho para a seção

3.) No menu Conteúdo usa as seguintes definições:

  • Título: Perguntas Frequentes
  • Alinhamento: Centro

4.) Clica no menu Estilo e usa as seguintes definições:

  • Cor do texto: #000000
  • Família da fonte: Poppins
  • Tamanho: 60
  • Peso: 600

28.12 Espaçamento (podemos também usar as margens)

1.) Clica no ícone para abrir os elementos e arrasta o elemento Espaçamento para cima do elemento Cabeçalho

2.) Coloca um espaçamento de 100

28.13 Divisor

1.) Clica no ícone para abrir os elementos e arrasta o elemento Divisor para baixo do elemento Cabeçalho

2.) No menu Conteúdo do elemento Divisor coloca:

  • Peso: 3
  • Cor: #f7be68
  • Largura: 15
  • Alinhamento: Centro

28.2 Segunda Seção (Título, Alternar, Padding)

28.21 Título

1.) Cria uma nova seção com 1 coluna e arrasta o elemento Cabeçalho para dentro da seção

2.) No menu Conteúdo do elemento Cabeçalho coloca:

  • Título: Informações de Envio

3.) Clica no menu Estilo do elemento Cabeçalho e usa as seguintes definições:

  • Cor: #ff6600
  • Família da fonte: Poppins
  • Tamanho: 23
  • Peso: 600

4.) Clica no menu Avançado do elemento Cabeçalho > Retira a seleção dos “link values together” > Coloca uma margem esquerda de 15

5.) Clica em Save Seção e dá o nome de “titulo_paginas” porque vamos aproveitar esta seção para a página de Contato

28.22 Alternar

1.) Clica no ícone para abrir os elementos e procura pelo elemento Alternar (em General Elements)

2.) Arrasta o elemento Alternar para baixo do Cabeçalho anterior

3.) Nas abas coloquei as seguintes perguntas:

Quais métodos de envios estão disponíveis?
Enviam internacionalmente?

4.) Podemos duplicar as abas para criar mais perguntas e alterar a posição das abas arrastando com o rato

5.) Clica no menu Estilo do Elemento Alternar e usa as seguintes definições

Para o título:

  • Cor: #545454
  • Família da fonte: Yantramanav
  • Tamanho da fonte: 18
  • Peso: 700

Para o conteúdo:

  • Cor: #545454
  • Família da fonte: Yantramanav
  • Tamanho da fonte: 18
  • Peso: 400

28.23 Padding

1.) Clica no Edit seção da segunda seção

2.) Clica no menu Avançado

3.) Retira a seleção dos “link values together” na opção Padding

4.) Coloca um Padding superior e inferior de 30

28.3 Terceira Seção (Chamado a ação)

1.) Clica em Add Template > My Templates

2.) Insere o template com o nome “chamado_açao”

3.) Altera o texto para: Tem Mais Questões?

28.4 Quarta Seção (Rodapé)

1.) Clica em Add Template > My Templates

2.) Insere o template com o nome “rodapé_loja_virtual”

3.) Clica em Edit seção no rodapé e em “Stretch Section” clica Sim para esticar a seção

4.) Clica em UPDATE para salvar as alterações!

Passo 29: Criar a página de Contato

1.) No painel do WordPress vai ao menu Páginas e clica em Todas as páginas

2.) Procura pela página de Contato e clica em Editar

3.) Nas OceanWP Settings usa as seguintes definições:

  • Main > Margins > Disable
  • Title > Display Page Title > Disable

4.) Publica a página

5.) Clica em Editar com Elementor

29.1 Primeira Seção (Título e Editor de texto)

29.11 Título

1.) Clica em Add Template > My Templates > Insere o template “titulo_paginas”

2.) Altera o texto para: Vamos Falar!

29.12 Editor de texto

1.) Clica no ícone dos elementos e arrasta o elemento Editor de texto para baixo do elemento Divisor

2.) Coloca as informações sobre o teu negócio, ex:

VIVEDANET
Bangkok, Bkk 10110
T: 123.111.222.333 | E: tiago@vivedanet.com

3.) Usa o editor de texto do elemento Editor de texto para:

  • Centrar o texto
  • Colocar um link no email
  • Alterar a cor do email para laranja

4.) Clica no menu Estilo e usa as seguintes definições:

  • Família da fonte: Yantramanav
  • Tamanho: 18
  • Peso: 400

29.2 Segunda Seção (Google Mapas)

1.) Cria uma nova seção com 1 coluna

2.) Arrasta o elemento Google Mapas para dentro da seção

3.) Coloca o endereço no menu Conteúdo lado esquerdo, ex: 45/19 Khwaeng Phra Khanong Nuea, Khet Watthana, Krung Thep Maha Nakhon 10110

4.) Define a altura do mapa para 500

5.) Clica em Edit seção e no menu Layout usar as seguintes definições

  • Stretch Section: Sim
  • Largura do conteúdo: Largura total
  • Espaçamento da coluna: Sem espaçamento

29.3 Terceira Seção (Rodapé)

1.) Clica em Add Template > My Templates

2.) Insere o template com o nome “rodapé_loja_virtual”

3.) Clica em Edit seção no rodapé e em “Stretch Section” clica Sim para esticar a seção

4.) Clica em UPDATE para salvar as alterações!

Passo 30: Criar um Artigo (post) no Blog

Nota: Vou usar o Elementor Pro para criar os artigos do blog.

Segue estes passos para criares um artigo com design profissional!

1.) No painel do WordPress vai até ao menu Posts e clica em Adicionar novo

2.) Coloca o título: Temos o Que Precisa

3.) No lado direito, onde diz Atributos do post seleciona: Elementor Canvas

4.) Clica em Atualizar página

5.) Clica em Editar com Elementor

30.1 Primeira Seção (Logo e Menu)

30.11 Logo

1.) Cria uma seção com 2 colunas

2.) Na barra de pesquisa dos elementos, pesquisa pelo elemento com o nome “Custom Header Logo”

30.12 Menu

1.) Clica no ícone dos elementos e nos Pro Elements procura pelo elemento Nav Menu

2.) Arrasta o elemento Nav Menu para a coluna do lado direito

3.) Define 20% de proporção na coluna da esquerda e 80% na coluna da direita

4.) No menu conteúdo do elemento Nav Menu, em Layout alinha o menu à direita

5.) Clica no menu Estilo e usa as seguintes definições:

  • Cor do texto: #000000
  • Família da fonte: Poppins

Clica em Hover (quando o rato passa por cima):

  • Cor do texto (hover): #000000
  • Pointer Color (hover): #f57d5f

6.) Clica em UPDATE para guardar as alterações!

30.2 Segunda Seção (Imagem de fundo, Título do artigo, Escurecer o fundo, Colocar o fundo fixo)

30.21 Imagem de fundo

1.) Cria uma nova seção com 1 coluna

2.) Clica em Edit seção

3.) Clica no menu Estilo e em Background > Clica no pincel Clássico > Seleciona a imagem “imagem_artigo.jpg” > Clica em Inserir mídia

4.) Clica no menu Layout (estrutura) e define

  • Altura: Ajustar à tela
  • Espaçamento da coluna: Sem espaçamento

30.22 Título do artigo

1.) Na seção inferior clica em Add Template > Clica em My Templates

2.) Insere o template com o nome “titulo_paginas”

3.) Elimina o elemento Espaçamento do Template

4.) Arrasta o elemento Cabeçalho para a coluna do conteúdo da seção superior (onde está a imagem)

5.) Clica no widget para editar o elemento Cabeçalho e no menu conteúdo, em Tag HTML coloca H1 (este passo serve para informar o Google e outros motores de busca que este é o título mais importante do conteúdo)

6.) Arrasta o elemento Divisor para a coluna do conteúdo da seção superior (onde está a imagem) abaixo do elemento Cabeçalho

7.) Clica no widget do elemento Cabeçalho para editar

8.) Clica no menu Estilo do elemento Cabeçalho > altera a cor do texto para branco (#ffffff)

30.23 Escurecer o fundo (background overlay)

Para lermos bem o título do artigo temos de escurecer a imagem de fundo, para isso segue os seguintes passos:

1.) Clica em Edit Seção na seção da imagem de fundo

2.) Clica no menu Estilo e na opção Background Overlay > Tipo de fundo > Clássico > Cor: #000000 > Define a Opacidade: 0,4

30.24 Colocar o fundo fixo

1.) 1.) Clica em Edit Seção na seção da imagem de fundo

2.) Clica no menu Estilo e na opção Background > Em anexo > Escolhe a opção “Fixo”

3.) Clica em UPDATE para salvar as alterações

30.3 Terceira Seção (Editor de texto)

1.) Cria uma seção com 1 coluna

2.) Arrasta o elemento Editor de texto para a nova seção

3.) Adiciona este texto:

Para criar esta loja virtual usei as versões gratuitas do tema OceanWP e do construtor de páginas Elementor. Contudo, a página de blog foi criada com a versão profissional do Elementor. Era uma vez um construtor de páginas. O Plugin Elementor é sem dúvidas o melhor construtor de páginas que podes usar para editar tudo entre o cabeçalho e o rodapé do teu site.Ele permite-te criar um número ilimitado de colunas para cada página e controlar todas as opções de design do teu site. Como por exemplo as cores de fundo, mais de 600 tipos de letra, imagens, vídeos de fundo, transparências, margens, mais de 400 ícones e muito mais. Na versão Pro do Elementor ainda podes adicionar elementos mais profissionais como por exemplo tablelas de preço, títulos animados, cronómetros, etc. Visita o site do Elementor para ficares a conhecer todas as possibilidades de design que este construtor de páginas fantástico oferece. Eleva o teu design a outro nível com o OceanWP e o Elementor! Links úteis 1.) OceanWP 2.) Elementor

4.) Para editar o texto vamos usar o editor do elemento Editor de texto e as edições exemplificadas no tutorial são:

  • Dar espaço entre os parágrafos
  • Definir os sub-títulos
  • Colocar links
  • Adicionar Imagens

5.) Clica no menu Estilo e usa as seguintes definições:

  • Família da fonte: Yantramanav
  • Tamanho da fonte: 18
  • Peso: 400

6.) Clica no menu Avançado do Editor de Texto > Na Margem retira a seleção dos “link values together” > Coloca as seguintes margens:

  • Superior: 20
  • Direita: 150
  • Inferior: 20
  • Esquerda: 150

30.4 Quarta Seção (Caixa de autor)

1.) Cria uma seção com 1 coluna

2.) Arrasta o elemento Author Box para a seção

3.) No menu Conteúdo do elemento Author Box em Source seleciona: Personalizar

4.) Em Profile Picture (fotografia de perfil) adiciona uma fotografia de perfil redonda

5.) Ainda no menu Conteúdo, adiciona um Nome e Biografia

6.) Clica no menu Avançado> Na Margem retira a seleção dos “link values together” > Coloca as seguintes margens:

  • Direita: 150
  • Esquerda: 150

7.) No menu Avançado > Clica em Background > escolhe o tipo de fundo Clássico > usar a cor: #fcf7f7

8.) No menu Avançado > Clica em Borda e usa as seguintes definições

  • Tipo de borda: sólida
  • Largura da borda: 2 (em todos os lados)
  • Cor da borda: #e0e0e0
  • Arredondamento da borda: 45

9.) No menu Avançado, clica em Estilo do elemento e coloca um Padding de 20 em todas as direções

30.5 Quinta Seção (Comentários do Facebook)

1.) Cria uma seção com 1 coluna

2.) Arrasta o Elemento Facebook Comments (este elemento pertence aos Pro Elements) para a seção

3.) No menu Conteúdo define o target URL (a página do Facebook do teu negócio)

4.) Clica no menu Avançado> Na Margem retira a seleção dos “link values together” > Coloca as seguintes margens:

  • Direita: 150
  • Esquerda: 150

30.6 Sexta Seção (Rodapé)

1.) Clica em Add Template > My Templates

2.) Insere o template com o nome “rodapé_loja_virtual”

3.) Clica em UPDATE para salvar as alterações!

Passo 31. Criar a Página de Blog (Novas Tendências)

A página de blog vai ser criada com o Elementor Pro.

Antes de criarmos a página de blog temos de informar o WordPress que não queremos que este use o design padrão do tema OceanWP na página de blog  (pois queremos editar a página com o Elementor)

1.) Para isso vai ao menu Personalizar > Clica em Configurações da página inicial > Em Páginas de posts > NÃO seleciones nenhuma página

2.) Volta ao painel do WordPress, vai ao menu Páginas e clica em Todas as páginas

3.) Procura pela página Novas Tendências e clica em Editar

4.) Nas OceanWP Settings usa as seguintes definições:

  • Main > Margins > Disable
  • Title > Display Page Title > Disable

5.) Atualiza a página

6.) Clica em Editar com Elementor

31.1 Primeira Seção (Título)

1.) Clica em Add Template > Clica em My Templates

2.) Insere o template com o nome “titulo_paginas”

3.) Altera o título para: Blog

4.) Clica no menu Estilo e em Tipografia altera o tamanho da fonte para 100

5.) Clica no menu Avançado retira a seleção dos “link values together” e coloca uma margem inferior de 20

31.2 Segunda Seção (Posts)

1.) Adiciona uma nova seção com 1 coluna

2.) Clica no ícone dos elementos e arrastar o elemento Posts (Pro Element) para dentro da seção

3.) Na edição do elemento Posts, no menu Conteúdo, usa as seguintes definições:

  • Skin: Classic
  • Colunas: 3
  • Mansory: Sim
  • Tamanho da imagem: Tela cheia
  • Meta data: Author, Date, Time
  • Alterar “Read More” para “Leia mais”

4.) Clica no menu Estilo > e em Conteúdo usa as seguintes definições para o Título:

  • Cor: #000000
  • Família da fonte: Poppins
  • Tamanho: 30
  • Peso: 600

Para o Excerpt (Exerto)

  • C0r: #545454
  • Família da fonte: Yantramanav
  • Tamanho: 18
  • Peso: 400

Botão Read More (Leia mais)

  • Cor: #eb785b
  • Família da fonte: Yantramanav
  • Tamanho: 18
  • Peso: 700

31.3 Terceira Seção (Posts)

1.) Clica em Add Template > My Templates

2.) Insere o template com o nome “rodapé_loja_virtual”

3.) Clica no Edit seção e em Stretch Section diz Sim

4.) Clica en UPDATE para salvar as alterações!

Passo 32: Colocar um Menu Fixo (Sticky Menu)

1.) No painel do WordPress, vai ao menu Plugins e clica em Adicionar Novo

2.) Na barra de pesquisa de plugins introduz: mystickymenu

3.) Instala e ativa o plugin My Sticky Menu

4.) Vai ao menu Configurações e clica em myStickyMenu para abrir as definições do plugin

5.) Em General Settings, na Sticky Class coloca: #site-header

6.) Clica no menu Style e usa as seguintes definições:

  • Sticky Opacity: 100
  • Sticky Transition Time: 0

7.) Para colocar uma cor de fundo vai ao código que está no CSS style, apaga a palavra “none” que está em frente à palavra “background” e coloca o código hex desejado, ex (preto): #000000

8.) Clica em salvar as alterações e voilá! Já tens um menu fixo no site 🙂

Passo 33: Configurar o WooCommerce

1.) Volta ao painel do WordPress

2.) Passa com o rato no menu WooCommerce e clica em Configurações

3.) Clica no separador Geral e preenche com as informações necessárias sobre a tua empresa (Endereço da loja, Opções Gerais, Opções de Moeda)

4.) Clica no separador Produtos e clica no link Geral onde podemos editar as unidades de peso e de medida

5.) Clica no separador Produtos e clica no link Exibição (agora este passo é feito no menu Personalizar > WooCommerce (1ª opção) e usar as seguintes definições:

  • Página da loja: Loja
  • Exibir página da loja: Exibir produtos
  • Exibição de categoria padrão: Exibir produtos
  • Padrão de ordenação de produtos: Ordenar por mais recentes

6.) Clica no separador Taxa e clica no link Taxas padrões para inserir as taxas necessárias

7.) Clica no separador Entrega e nas Áreas de Entrega podes definir diferentes taxas (taxa fixa, frete grátis ou retirar no local) de acordo com cada local de entrega

8.) Clica no separador Finalizar compra e nas Opções de pagamento podes desabilitar o uso de cupões > Na opção Páginas de pagamento > Define uma página para Termos e condições

9.) No separador Finalizar compra clica no link cheque e desabilita a opção cheque > Clica em Salvar alterações

10.) No separador Finalizar compra clica no link PayPal e escolhe o email associado com a tua conta PayPal > Em Opções avançadas coloca o mesmo email no e-mail do destinatário > Em Credenciais da API coloca as credenciais API do PayPal para poderes enviar reembolsos pelo PayPal (mostro como fazer isso no vídeo)

11.) No separador Contas habilita a opção “Habilitar cadastro de clientes na página minha conta.”

12.) No separador Emails certifica-te que introduziste o email correto para receberes as notificações importantes da loja virtual

Passo 34: Personalizar o WooCommerce (Estilo Avançado)

No menu Personalizar, clica no segundo menu do WooCommerce > Clica em Estilo avançado e usa as seguintes opções

  • Fundo da venda: #ef6700
  • Entrada de produto > Cor do preço : #ef6700
  • Cor do adicionar ao carrinho hover: #777777
  • Cor da borda do adicionar ao carrinho hover: #000000
  • Add to Cart Border (Size): 5%
  • Add to Cart Border (Radius): 5%
  • Produto único > Cor do preço: #ef6700

Passo 35: Tornar o Site Responsivo (Página Inicial)

FIM!

Parabéns!!

Por favor subscreve ao canal do Youtube do VIVEDANET pois vou fazer mais vídeos no futuro sobre como personalizar a loja virtual.

EXTRA: Redimensionar as Imagens dos Produtos  – OPCIONAL

Se instalaste o tema OceanWP num site de WordPress existente, tens de certificar-te que as imagens dos produtos do WooCommerce ficam bem com o tema novo.

Para garantir que as imagens ficam perfeitas recomendo que instales o plugin Regenerate Thumbnails.

Após instalado e ativo podes aceder ao plugin através do menu Configurações.

Clica no botão “Regenerate Thumbnails” e aguarda uns minutos para que as imagens sejam redimensionadas.

Fechar Menu

Usamos cookies para garantir que tem a melhor experiência possível no nosso site.

Usamos cookies para garantir que tem a melhor experiência possível no nosso site. Aprender mais

Usamos cookies para garantir que tem a melhor experiência possível no nosso site.

Espera, Isso é Abandono!

70% dos visitantes do teu site fazem isso e nunca mais voltam.

Neste tutorial grátis mostro como converter visitantes que abandonam o teu site em subscritores e clientes usando o Elementor.

Dicas exclusivas para designers não-programadores

Recebe o Modelo no teu Email

Detesto SPAM e prometo manter o teu endereço de e-mail seguro. Podes ler a minha política de privacidade.

Já subscrito? Podes submeter o formulário, não te preocupes, não serás adicionado à lista duas vezes.

Recebe as Minhas Melhores Dicas

Subscreve para receberes as novidades e as minhas melhores dicas para Elementor, WordPress, Tutoriais e Cursos. Descadastra com 1 clique quando quiseres.

Detesto SPAM e prometo manter o teu endereço de e-mail seguro. Podes ler a minha política de privacidade.

Já subscrito? Podes submeter o formulário, não te preocupes, não serás adicionado à lista duas vezes.