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:
Inscreva-se no meu canal:
[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