Tutorial Theme Jessica, Genesis Child Theme for Ecommerce (vídeo passo a passo)

Oi pessoal

Hoje trago um tutorial do template filha do Studiopress chamado Jessica.

É um dos modelos mais recentes lançados para o FrameWork Genesis.

É um tutorial longo já que vem com muitas opções, espero que gostem 😉

Você pode modelar compre aqui por $ 129,95 $ o grátis para meus alunos

Aqui está o tutorial em vídeo completo do modelo:

[wps_button style=»default» url=»https://comohacerunapagina.es/ir/jessica-theme» target=»blank» background=»#dd3333″ color=»#ffffff» size=»18″ icon=»star » wide=»yes» position=»left» radius=»auto» text_shadow=»0px 0px 0px #000″ rel=»nofollow» title=»Botão padrão» id=»default-button»]COMPRAR MODELO JESSICA[/wps_button ]

Antes de continuar com o tutorial, você precisa ter um host para instalar seu site. Se não tiver eu recomendo hostgator, além de ser um dos mais baratos do mercado e oferecer mais funcionalidades, com o cupom oscarteahelp você fica 25% mais barato.

Depois de ter a hospedagem e instalar o WordPress, como explico no vídeo, começamos com a configuração real do template premium Jessica.

O resultado final que vamos alcançar é o seguinte:

[wps_button style=»default» url=»https://comohacerunapagina.es/ir/jessica-theme» target=»blank» background=»#dd3333″ color=»#ffffff» size=»18″ icon=»star » wide=»yes» position=»left» radius=»auto» text_shadow=»0px 0px 0px #000″ rel=»nofollow» title=»Botão padrão» id=»default-button»]COMPRAR MODELO JESSICA[/wps_button ]

O primeiro passo que temos que dar é instalar o template pai, ou seja, o template Genesis.

Lembre-se de que o modelo Jessica é um modelo filho do Genesis, então você precisa ter o modelo Genesis instalado primeiro.

Lembre-se de que ambos os modelos estão disponíveis no área premium.

Uma vez que o modelo Genesis está instalado, agora podemos instalar o modelo Jessica. No arquivo compactado do template Jessica, quando descompactado, existem três pastas, uma template, uma com o conteúdo de demonstração da web e outra com os designs. Estou lhe dizendo isso porque quando você instala o template você não precisa carregar o arquivo compactado com tudo, mas apenas a pasta do template em si.

Se você fizer isso corretamente, você encontrará algo semelhante ao seguinte:

Uma vez que o template está instalado você enfrenta um momento muito difícil, que você vai ver seu site e não tem nada a ver com a demo:

Não se preocupe, mesmo que tenhamos instalado o template agora temos que configurá-lo, você verá que assim que adicionarmos os plugins, widgets e conteúdo de demonstração o resultado será o que estamos procurando 😉

Agora vamos instalar os plugins necessários para o correto funcionamento do template Jessica:

Solilóquio: Ele vem com o modelo e você também pode encontrá-lo na área premium.

Digg Digg: É grátis e você pode baixe aqui

GravityForms: É um plugin pago ($ 39), os membros do área premium Você pode baixar de graça da área de membros e se preferir, você pode compre daqui

Woocommerce: É o melhor plugin para converter nosso site em uma loja. É grátis e você pode baixe aqui.

Genesis Connect para Woocommerce: Este plugin faz com que nossa loja tenha os estilos necessários quando usamos um template Genesis. Nós podemos baixe daqui

Assim que os plugins estiverem instalados e configurados, como podemos ver no vídeo deste post, podemos continuar configurando nosso template.

Agora temos tudo o que precisamos para configurar nosso template.

O próximo passo é instalar o conteúdo de demonstração para que tenhamos conteúdo suficiente para que nossa loja de demonstração não fique vazia.

Lembre-se que eu te falei que quando descompactamos o template temos 3 pastas, uma delas se chama arquivos jessica-xml, dentro desta pasta você tem 3 arquivos, vamos usar um ou outro dependendo do plugin da loja que instalamos. No nosso caso, como instalamos o Woocommerce, vamos usar o arquivo chamado jessica-woocommerce.xml.

Como importamos? Muito fácil, vamos em ferramentas –> Importar–> WordPress, aqui nos diz que precisamos instalar o importador do WordPress, instalamos como você pode ver na imagem a seguir:

Nós clicamos em «Ativar plugin e iniciar importação»

Ele nos diz para selecionar o arquivo e selecionamos o arquivo do nosso computador jessica-woocommerce.xml

Antes de iniciar a importação, ele nos pergunta a qual usuário será atribuído o conteúdo importado, selecionamos nosso usuário ou criamos um e marcamos a opção “Baixar e importar arquivos anexados”.

Vai demorar um pouco e é possível que ele nos diga que não conseguiu importar tudo, não se preocupe, é normal e tudo funcionará perfeitamente:

Agora temos muitos produtos, posts e menus de teste para poder ver nosso site com informações.

Se formos aos produtos, podemos ver tudo o que foi criado:

Agora o que temos a fazer é começar a colocar as informações em nosso site.

Vamos começar colocando os menus:

Para isso vamos em Aparência –> Menus e veremos que temos vários menus que foram criados a partir do conteúdo de demonstração.

Selecionamos o menu “Navegação Primária”, clicamos em escolher e na parte inferior marcamos a localização do tema “Menu de Navegação Primária”, como vemos na imagem a seguir:

Fazemos a mesma operação com a “Navegação Secundária” e colocamos no “Menu de Navegação Secundária”.

Se formos ao nosso site, os menus já apareceram no cabeçalho:

Agora vamos colocar o texto “Frete Grátis” e os ícones das redes sociais no cabeçalho.

Para fazer isso vamos aos widgets, em Aparência -> Widgets e vemos que temos uma área chamada “Cabeçalho Direito”
Nesta área vamos colocar o widget “Web Savvy Social Widget”.

Este widget possui uma série de campos que vamos preencher, faremos da mesma forma que vemos na imagem a seguir:

Texto personalizado:

<h2>Free Shipping!</h2>
For all orders over $50

E no resto dos campos a url das redes sociais que queremos que apareçam. Se você deixá-lo vazio, essa rede social não aparecerá.

O widget, uma vez preenchido, fica assim:

E o resultado final é:

Agora vamos configurar o Slider da página principal, para isso voltamos aos widgets e desta vez vamos configurar a área Rotator e vamos adicionar o widget Soliloquy, adicioná-lo, o slider da página inicial aparece, eu seleciono e a imagem de teste aparecerá em nosso página.

O resultado é o seguinte:

Se quisermos adicionar novos controles deslizantes, podemos fazê-lo no menu lateral da área de administração no item Soliloquy.

Agora vamos adicionar o menu que aparece abaixo do controle deslizante, para isso vamos aos widgets na área “Menu de categorias iniciais” e adicionamos o widget “Menu personalizado” e selecionamos o menu “Categorias iniciais”.

O resultado seria o seguinte:

Agora vamos criar os banners que aparecem abaixo do menu que acabamos de criar. Para fazer isso, vamos usar as áreas de widget chamadas Home CTA Left e Home CTA Right.
O widget que vamos utilizar em ambas as áreas é o widget “Web Savvy – CTA Widget”, este widget não vai criar um banner de uma forma muito simples.

Uma vez que o widget é adicionado, temos uma série de campos que devemos preencher.

Os campos são:
Título: LOJA DE SAPATOS
Mais texto: GO
Link: URL para onde queremos direcionar os visitantes ao clicar
Imagem: Url da nossa imagem: A imagem deve ter um tamanho de 544×194 pixels

O widget deve se parecer com o seguinte:

Uma vez que as duas áreas estejam preenchidas, a aparência que deve ter é:

Agora vamos configurar o formulário que aparece abaixo dos banners à direita. Para isso vamos usar o plugin de formulários de gravidade, lembre-se que se você estiver na área premium você o tem disponível gratuitamente.

Para configurá-lo, vamos ao menu lateral ao item “Formulários” e adicionamos um novo formulário, damos o nome que desejamos e vamos para uma tela onde podemos adicionar campos.

Entre os campos que podemos adicionar nos campos avançados está o campo Email e arrastamos para a área central. Na aba aparência, no campo “Marcador de conteúdo” colocamos Email*, no campo tamanho colocamos o campo “Grande”.

Feito isso, salvamos o campo e vamos para a configuração do formulário, aqui na descrição do formulário adicionamos o texto que queremos que apareça no widget, no nosso caso:

«Inscreva-se agora e receba instantaneamente um cupom de $ 20 de desconto em $ 100 por e-mail.
Outras vantagens para membros incluem descontos mensais apenas para membros e notificações antecipadas de chegada de novos produtos.»

E um pouco mais abaixo no campo “Nome da classe CSS” colocamos: gforms-placeholder button-right

A aparência desta configuração é a seguinte:

Uma vez configurado o plugin de formas gravitacionais, voltamos aos widgets e adicionamos o widget “formulário” na área “Home Mid Right”, selecione nosso formulário, coloque “Fale conosco” no nome e marque a opção “Mostrar descrição do formulário” . », temos que ficar com algo que parecia o seguinte:

Agora vamos adicionar um depoimento de cliente, para isso vamos até a área “Home Mid Left” e adicionamos um campo de texto com o seguinte conteúdo:

No título:
O que nossos clientes pensam

e no conteúdo:

<blockquote>I absolutely love my new dress and shoes. They made the perfect night even more perfect. Not only
did I get a fab outfit, I received free shipping too. Love you Jessica's Shop!</blockquote>

Se tivermos feito o widget de formulário e depoimento corretamente, o resultado será:

Agora vamos adicionar o banner que aparece na página inicial, para isso voltamos aos widgets e adicionamos o widget “Web Savvy – On Sale Widget” na área “Home Bottom ad” e preenchemos da seguinte forma :

na url da imagem você tem que colocar: /wp-content/themes/jessica/images/banner-bg.png

O resultado final seria:

Agora precisaríamos dos widgets das zonas Inicio inferior 1, Inicio inferior 2, Inicio inferior 3 que os preenchíamos quase da mesma forma, adicionando produtos em destaque, novidades, ofertas, etc.,

estaria com ele Widget “Produtos Woocommerce” da seguinte forma

InícioInferior1

Você faz o mesmo para as 3 zonas, mas alterando os produtos em destaque, Todos os produtos, Ofertas

InícioInferior2

InícioInferior3

Na área inferior 4 da página inicial, adicionamos o widget Web Savvy – Posts em destaque da seguinte forma:

Em “Número de Posts a Mostrar” colocamos 3, marcamos “Mostrar Título dos Posts” e “Mostrar Informações do Post”.

Algo muito importante é no campo “Mostrar informações do post” colocar: post_date format=”M d» entre colchetes []

O resultado visual desta área seria:

Agora vamos configurar o rodapé no Área do widget «Rodapé 1» e adicione um widget de texto com o seguinte conteúdo:

Título: Fale Conosco
conteúdo:

<p>Fashion on your terms. Our collection is inspired by you and changes daily. Contact us to make suggestions and requests for designers we may have missed.</p>
<p><b>Phone:</b> 123.456.7890<br>
<b>Returns:</b> 123.456.7890<br>
<b>Email:</b> info@jessicastore.com</p>

Em zona do pé 2 Adicionamos outro widget de texto com as formas de pagamento, o conteúdo seria o seguinte:

Título: Métodos de pagamento

conteúdo:

We accept PayPal and all major credit cards. 
<br><br>
Transactions are performed via a SSL server to ensure your privacy.<br><br>
<img src="/wp-content/themes/jessica/images/visa.png" alt="">

Em zona de rodapé 3 adicionamos o widget Tag Cloud:

Em zona do pé 4 Adicionamos o widget Menu Personalizado e escolhemos o menu “Menu Rodapé”:

O resultado dos 4 widgets na área do rodapé seria:

Já temos nosso site quase pronto, precisaríamos das barras laterais das páginas internas, para isso vamos configurar os widgets das áreas da Barra Lateral.

Sidebar Blog, que é a barra lateral do blog, podemos adicionar widgets próprios do blog, como categorias, posts em destaque, artigos recentes, o que quisermos. No meu caso adicionei o seguinte:

O resultado desses widgets seria:

Faríamos o mesmo com a barra lateral da loja, no meu caso adicionei o seguinte:

E o resultado seria:

Você pode modelar compre aqui por $ 129,95 $ o grátis para meus alunos

Espero que o tutorial tenha sido útil para você 😉
Qualquer dúvida aqui você me tem.

lembranças
Oscar