3/4

CRIANDO CONTEÚDOS

EM ROWS

Compartilhe:

Jan, 2018

 

Olá, seja bem vindo de volta à terceira parte do nosso tutorial para criação de sites incríveis!

Na última parte, falamos sobre como instalar o Wordpress dentro de seu servidor e como fazer as configurações básicas em seu site. Caso não se lembre, leia novamente como fazer, aqui.

Nesta terceira parte mostrarei melhor para o que servem os temas de Wordpress e como efetivamente construir suas páginas.

Compreenda: Um site incrível é um site que gera receita para o dono. Ou seja, se seu site for simples, com informações claras e precisas e for capaz de persuadir seu prospecto a fazer contato, este é um site incrível. Você deve testar novas abordagens e novas estratégias para que suas taxas de conversão melhorem cada dia mais.

Não adianta ter um site, cheio de informações bagunçadas, com 400 banners publicitário, vários pop ups, 50 cores piscando… E no fim das contas, o cliente não entende o produto e não faz contato.

Os pontos a seguir destacados serão a espinha dorsal para criação de um site realmente incrível.

  • O que são temas para Wordpress?
  • Como instalar gratuitamente meu tema?
  • Como criar e alterar páginas?
  • Como criar o visual do site?

O que são temas para Wordpress?

Ok, existem milhares e milhares e milhares e infinitos temas para Wordpress. Se você já trabalha com sites, pode ter percebido.

Temas servem para alterar o layout de seu site e com eles é possível modificar disposições de imagens, textos, vídeos e cores.

A facilidade na alteração destes conteúdos precisa ser uma de suas prioridades, pois caso contrário ficará refém de um profissional que faça tais mudanças para você. Ainda que você tenha tal profissional, quanto mais tempo você economizar dele, mais tempo ele poderá fazer outra coisa.

Isso significa que o tema precisa ser funcional e te promova economia de tempo.

Muitos temas possuem poucas opções de alteração, pois tais mudanças exigem que parte do código do site seja reescrito, em linguagens como HTML, CSS e PHP. Isso são coisas que levam certo tempo para se aprender. (Mais tempo que você deseja gastar, eu suponho.)

Caso você não saiba o que são essas linguagens e como “conversar” com elas, não se preocupe. Eu também não sabia até meu sétimo website mais ou menos. Provavelmente você nunca precise saber.

Ainda assim, mesmo sem você saber nenhuma programação, conseguiremos produzir seu site incrível com um altíssimo nível de personalização e de quebra um design clean. Duvida?

Para essa tarefa, em um universo com todos os temas do mundo para Wordpress, estou seguro que escolhi o melhor.

O tema chama-se: Ultra Theme.

A empresa responsável pelo desenvolvimento, manutenção e comercialização do tema é a Themify.me e eles são realmente de outro mundo.

Vou te mostrar todas as razões, que me dão motivos para crer que este é o melhor tema do mundo para Wordpress. E mais que isso, não importa se você já constrói sites, este tema é certo para qualquer nível de profissional, muito experiente ou não.

As razões:

  1. Você tem a opção de utilizar o tema de forma gratuita ou paga. Sim, isso é bom de maiiis. (Eu mesmo utilizei ele de forma gratuita por quase 1 ano)
  2. A forma paga oferece suporte para solução de eventuais problemas e atualizações frequentes com correção de bugs e novas funcionalidades. A forma gratuita não.
  3. Você pode instalar em quantos sites quiser. Sério, sem limite de sites. Se você tiver 10 sites, instale nos 10.
  4. Eles possuem temas e plugins gratuitos, é necessário apenas entrar no site deles e fazer o download.
  5. A empresa possui um fórum com conteúdo ilimitado e tópicos de ajuda para todos os membros. E ainda que você não pague, poderá ler qualquer conteúdo, mas não poderá postar novas dúvidas.
  6. A empresa possui opção de licença Life Time, o que significa que caso torne-se um cliente, poderá optar por pagar apenas 1 vez na vida. Não ficando refém de mais uma conta mensal para seu negócio. Isso é algo raríssimo na internet e na vida, a maioria dos serviços são sempre mensais.
  7. A empresa conta com pacotes de mais de 20 temas e diversos plugins premium que vem inclusos no pacote Life Time.
  8. Todo o suporte é online.
  9. Para cada tema e para cada plugin, existe uma página com a documentação de funções.
  10. Possui atualizações frequentes.

Sobre as razões acima descritas, vou explicar melhor cada um dos pontos.

O tema pode ser utilizado de forma gratuita, mas você não terá suporte para dúvidas e não contará com atualizações frequentes. (Eu te ajudarei em suas dúvidas, é claro, mas é diferente de você falando direto com a empresa. Economiza tempo, né?)

Caso você já tenha sua empresa ou algum outro negócio online, sabe que são raros os serviços que permitem que você compre um pacote por toda a vida. Geralmente os gastos para viver e empreender são mensais. É precisamos pagar diariamente ou mensalmente: impostos, luz, água, telefone, funcionários, taxas de banco, hospedagem, domínios, email marketing, contadores, gasolina, seguros, etc…

Grande parte dos temas vendidos na internet são na verdade, um aluguel de uso por prazos de 12 meses corridos, ou seja, uma vez por ano você precisará pagar novamente para continuar com as atualizações de melhoria em seu  site. Se seu site durar 20 anos, por 20 anos você é refém do preço da empresa.

Por isso, produtos com pacotes life time são como jóias raras.

Caso um dia você decida comprar algum dos pacotes de temas, a Themify.me possui pacotes também anuais.

A minha última dica em relação ao pacote life time é que além de acesso vitalício ao Ultra Theme (Tema que utilizaremos), ele também da direito a:

  • Acesso a todos os temas para sempre.
  • Acesso a todos os plugins para sempre.
  • Suporte vitalício para todos os temas e plugins.
  • Atualizações vitalícias de todos os temas e plugins (São muitos!)

Você pode descobrir as funcionalidades de cada um dos plugins e conhecer todos os outros temas, nesta página.

INSTALAÇÃO GRATUITA DO TEMA

Para instalar gratuitamente o Ultra Theme, clique no botão abaixo e faça o download do tema para seu computador.

Dentro de seu site, no menu lateral esquerdo, clique na opção “Aparências”, depois em “Temas”. A página para instalação de temas abrirá. Clique em “Adicionar novo”, conforme destacado na imagem.

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-5-650x444

Após clicar em “Adicionar novo”, clique em “Fazer upload de tema”. Abrirá uma caixa, conforme mostra a imagem.

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-6-1024x284-900x249

Devemos agora clicar em “Escolher Arquivo” e localizar o tema no diretório de seu computador. Localizado o arquivo, clique em abrir.

Repare que o tema começa a ser instalado e no canto inferior esquerdo de sua tela, veremos o progresso da instalação, conforme destaquei na imagem.

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-7-650x495

Depois de 100% instalado, você verá uma página como a da imagem. Clique em “Ativar” e pronto, tema instalado e ativado!

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-8-650x354

Com o Ultra Theme instalado (o tema mais fod@ do mundo!), estou seguro em afirmar que seu site já começou na frente da concorrência.

Repare que uma nova opção apareceu em seu menu lateral, um balãozinho amarelo com o nome de Themify Ultra. Clique nesta opção e seremos direcionados as configurações do tema.

Em primeiro lugar, gostaria de mostrar alguns modelos de fábrica que te ajudarão, caso esteja sem nenhuma ideia para seu site. Na aba “Skins & Demos”, é possível conhecer todas as opções modelo que o tema nos apresenta.

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-9-650x648

Repare que cada uma das opções tem o nome de um nicho específico. Caso desejar ver como esta skin ficará em seu site, poderá clicar no botão verde “View Demo”, conforme destacado no número 1 da imagem.

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-10-800x484

Caso desejar importar esta demonstração, basta clicar em “IMPORT”, conforme o número 3 da imagem, mas saiba que serão importadas juntas todas as imagens, menus, páginas, textos e blog posts da versão modelo de View Demo.

Repare ainda que de acordo com qual modelo escolher, o tema informará que alguns plugins estão faltando, como na imagem abaixo. Obviamente isso ocorre pois nenhum deste plugins foram instalados. Mas não se preocupe, caso realmente desejar importar as páginas, clique em “Proceed Import”.

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-13-650x343

Caso queira apagar toda a importação feita, clique em “ERASE” e todos os conteúdos importados serão excluídos.

Para o nosso tutorial, começaremos do início, sem importar nada. Por isso, caso tenha clicado em IMPORT, clique novamente em ERASE e depois em salvar, conforme o número 4.

Na imagem é possível notar que o tema “Restaurant”, está com um tick roxo mostrando que foi selecionado. Apesar de selecionado, não fora importado nenhuma página nem nenhum menu da demonstração, pois não cliquei em IMPORT. Esta seleção servirá apenas como guia para que pequenos detalhes do tema se enquadrem melhor ao seu site.

Para este tutorial selecionaremos com o tick roxo a opção “Agency”, ao lado de “Restaurant”. E depois de selecionado clicaremos em salvar.

Este site será todo desenvolvido utilizando uma única página.

Uma única página? Pois é, além de incrível, será um site com layout limpo, e com conteúdo extremamente objetivo.

Entes de iniciar a construção, vamos configurar sua home page, ou página inicial.

No menu esquerdo clique em Páginas. Caso exista alguma página, exclua todas e depois clique em “Adicionar nova página”. No primeiro espaço vago, escreva o nome da página: Home. 

Repare que abaixo, em link permanente, fora criado um link de acesso para sua nova página. Que deverá ser algo do tipo: meusite.com/home . Depois clique em Publicar e pronto, sua página está criada. Toda nova página será criada da mesma forma.

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temify-3-1024x481-900x422

Nesta mesma página, role a barra lateral até localizar a seção “Themify Custom Panel, e selecione a aba “Page Options”(Conforme a imagem) e selecione as opções marcadas em laranja.

  • Sidebar Option: Selecione a última opção. (Não utilizaremos barras laterais)
  • Content Width: Selecione Fullwidth (Utilizaremos toda a área disponível)
  • Hide Page Title: Selecione Yes. (Escondemos o nome da página)
pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temify-4-1024x375-900x329

Role novamente a barra lateral para cima e clique em Atualizar. Eu geralmente, para garantir, clico em atualizar 2x.  Após salvar o que foi feito, clique novamente em Páginas, no menu lateral esquerdo.

Para que o Wordpress reconheça esta nova página criada como página inicial de seu site, será necessário ir em Configurações de leitura.

Para isso, no menu lateral esquerdo, clique em Configurações e escolha a opção “Leitura”. Na primeira seção altere para a opção “Uma página estática” e selecione home, como página inicial. Conforme a imagem:

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-xx-650x419

Clique em salvar alterações.

Seu site possui um menu superior, como uma faixa preta, contendo:

  • A Logo do Wordpress;
  • Uma casinha com o nome de seu site;
  • Um balão de comentários;
  • Um sinal de positivo, para criação de novas páginas e posts.

Coloque o mouse sob a casinha e verá a Opção “Visitar Site”. Clique com o botão direito de seu mouse nesta opção e escolha “Abrir link em nova guia”. Uma nova aba será aberta e mostrará como é a página inicial de seu site.

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-11-650x520

Caso tenha seguido todas as instruções, conforme este tutorial, sua home será algo como a imagem a seguir. Para retornar ao menu lateral anterior, basta deixar o mouse por cima da casinha (que agora não é mais casinha, é como um velocímetro) e clicar em painel.

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-21-1024x467-650x296

Talvez a sua página tenha uma cor diferente, mas isso só acontecerá caso tenha escolhido outra opção na parte do tick roxo (lá em cima quando falamos das Demos). De toda forma, escolha a opção que mais lhe agrada.

Para iniciarmos a construção de sua página utilizaremos três tamanhos distintos de imagens. Os tamanhos serão assim:

  • Para imagens de fundo: 1800×1000 pixels.
  • Para imagens da sua equipe: 600×600 pixels.
  • Para imagens complementares: 700×700 pixels.

Selecionar e recortar imagens neste formato garantirá que seu site fique uniforme, com visual profissional. Muitas imagens de tamanhos diferentes causarão confusão ao seu cliente. Não queremos clientes confusos.

Claro que existem exceções, como no caso deste tutorial, onde é impossível padronizar todas as imagens por se tratarem de muitas telas de diferentes tamanhos.

Existem muitos sites na internet que disponibilizam imagens gratuitas para uso em seu website.

Aconselho que você use o site The Stocks um buscador para web designers. Lá é possível encontrar muitas fotos, fontes, paletas, ícones e até mockups. Vai te economizar um tempão!

Ao entrar no site, clique na opção fotos e logo na primeira opção selecione Pixabay. Cada site possui sua própria política para uso de imagens, a do Pixabay é bem simples e não obriga o usuário a creditar o dono da foto, mas você pode creditar como cortesia.

Escolha no Pixabay ao menos quatro imagens que sejam incríveis e guardem relação com seu nicho. Faça o download em formatos de ao menos 1900 pixels.

Se após uma longa procura, não encontrou suas quatro fotos no Pixabay, escolha outros sites na barra da esquerda. Fique atento a política de uso das imagens, pois apesar de permitir o uso de imagens gratuitas, alguns sites obrigam que seja creditado o fotógrafo ou o banco de imagens como moeda de troca.

Caso você já tenha suas próprias imagens (você pode ser um fotógrafo ou uma modelo) e não precise de mais nenhuma outra, podemos pular para o próximo ponto logo abaixo, edição de suas imagens.

Se você não tem programas para recortar suas fotos no tamanho correto, utilize este editor online:

Separe as imagens desta forma:

  • 1 Imagem principal de fundo para seu site: Recortadas tamanho – 1800×1000.
  • 1 Imagem para seção de Fale Conosco: Recortadas tamanho – 1800×1000.
  • 2 imagens para decoração do site: Recortadas tamanho – 1000×1000
  • Quantas imagens forem necessárias da equipe, com o rosto da pessoa. Geralmente 1 foto por pessoa: Recortadas tamanho 600×600.

Antes de adicionar suas imagens ao site, vamos compactar estas imagens para que não fiquem muito pesadas. Para esta tarefa, utilize o site:

Basta arrastar suas fotos, compactar e salvar em JPG.

Para adicionar ao site as imagens já recortadas no tamanho correto e já compactadas, volte ao menu lateral do Wordpress na esquerda, selecione “Mídia” e depois “Biblioteca”.

Escolha os arquivos desejados em seu computador e espere até que carreguem. Você também pode arrastar suas imagens para esta página.

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-22-1024x309-900x271

Depois de carregadas, podemos voltar à sua página inicial. Novamente, deixe o mouse sobre a casinha e clique em visitar site.

Imagine cada tela de seu site como 1 slide de uma apresentação de PowerPoint.

Neste tutorial, desenvolveremos 5 “slides” diferentes para apresentar seu produto aos seus clientes. Essa sequência de faixas de conteúdo são chamadas Rows.

O importante aqui, é que você compreenda a dinâmica de como funcionam as configurações básicas deste tema. Uma vez compreendidas tais funcionalidades você conseguirá promover alterações cada vez maiores e mais complexas.

O tema em si se parece bastante com um PowerPoint, principalmente na parte de edição de textos, efeitos e imagens. Então não tenha medo de construir novas rows, ainda que você seja iniciante, tudo que for feito tem como ser desfeito e com o tempo você conseguirá corrigir seus próprios erros.

Vou ensinar como modificar cada uma das 5 rows em sequência. Como são rows diferentes, você aprenderá novas funcionalidades em cada uma delas. Então conseguirá alterar com facilidade qualquer configuração existente.

Ao chegar à página inicial, clique no balãozinho amarelo – Turn on Builder, e verá sua tela assim:

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-23-1024x318-900x279

Tanto o lápis destacado em vermelho quanto o pincel ao lado dele, são opções de personalização de sua row, cada row é uma faixa de armazenamento de conteúdo, onde é possível colocar textos, imagens, vídeos, plugins, códigos em HTML e widgets.

No canto superior esquerdo de sua tela, existe um sinal de positivo “+” roxo.

É neste local onde se encontram todos os módulos de conteúdo que você poderá utilizar em seu site. Cada pequeno módulo tem uma função diferente com configurações diferentes, o que permitirá uma combinação de infinitas personalizações distintas.

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temify-5-650x890

Em breve, farei pequenos tutoriais ensinando sobre cada um. Mas até lá, comece testando sozinho, sem medo e descubra qual deles ajuda mais a apresentar seu produto.

É importante utilizar apenas o que for realmente necessário. Não desperdice o tempo de seu cliente e dedique-se a apresentar o seu produto da forma mais clara e objetiva possível.

Utilizaremos neste tutorial, basicamente 3 módulos:

  • Button
  • Image
  • Text

Note que na imagem eu também destaquei um cadeado. Este cadeado serve para travar o menu de módulos. Eu prefiro trabalhar com ele travado, mas faça sua escolha.

Row 1 – Home Page

Para o nosso primeiro “slide”, a primeira row, arraste um módulo de texto até a caixa pontilhada, conforme a imagem.

Utilizando o módulo Text, você conseguirá alterar e criar qualquer tipo de texto. Escreva aqui o título do seu site ou o nome de sua marca.

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temify-6-650x280

O módulo é dividido em quatro abas. São elas:

  • Text: Escrita e edição de texto básica.
  • Styling: Edição de texto avançada (cor, tamanho, posicionamento, etc…)
  • Animation: Efeito animado do módulo ao aparecer na tela.
  • Visibility: Permite escolher em quais dispositivos mostrar o módulo (Desktops, Smartphones, Tablets).

Para que o Google compreenda que este primeiro texto é o de maior destaque em sua pagina, escolha opção “Cabeçalho 1”. O texto ficará grande e as pessoas conseguirão ver o nome de sua marca. Clique em salvar e o módulo será fechado.

Se desejar, utilize seu slogan abaixo deste texto, mas dessa vez em cabeçalho 2, ou 3, pois são um pouco menores.

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temify-9-650x379

Repare que agora você tem um módulo de texto dentro de uma row e ao colocar o mouse por cima de cada um deles, você verá que possuem configurações individuais (simbolizados por seus próprios cabeçalhos com um lápis e um pincel).

No cabeçalho da row (CABEÇALHO DA ROW, não é o cabeçalho do módulo de texto), clique em Edit (Lápis), será aberta uma caixa de configurações. Aqui configuraremos melhor cada aba de sua row.

Em Row Options, coloque as configurações conforme a imagem. Repare que eu dei um nome para Row Anchor, escolhi para a primeira ROW o nome de “home”. Você pode escolher o seu, mas lembre-se do nome escolhido, ao final precisaremos destes nomes para montar seu menu principal.

As configurações ficaram da seguinte maneira:

  1. Row Width: Fullwidth Content – Essa opção permite estender a área de conteúdo.
  2. Row height: Fullheight – Isso garantirá que sua row fique da mesma altura da página.
  3. Row Anchor: home  – Este é o nome de sua row (Tipo o nome do slide)
pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-w1-650x545

Próxima aba, “Styling” (pincel).

Nesta aba teremos muitas configurações. Portanto explicarei cada uma das opções em formato de lista.

  1. Background Type: Esta opção te permite escolher o que utilizar no fundo de sua Row. Ficaremos com a opção padrão, imagem. (Image)
  2. Background Image: Utilize a opção sinalizada com número 2, clique em Browse Library. Ao clicar nesta opção, veremos todas as imagens que anteriormente adicionamos ao site. Escolha uma imagem com 1800×1000 pixels, esta será a imagem de apresentação do site, o rosto dele.
  3. Background Mode: Fullcover
  4. Background Position: Center Center
pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-w12-650x545

Ok, aqui precisaremos parar, para que eu explique o é Row Overlay. Esta funcionalidade cria uma camada de cor sob sua imagem de fundo. Mas em que pode nos ser útil?

As configurações mostradas na imagem são (números 5,6,7,8) 2 camadas de cor. A primeira camada chama-se Overlay e é fixa; escolhi uma cor preta (#000000) com 0.20% de transparência. A segunda camada chama-se Overlay Hover, pois aparece apenas quando colocamos o mouse sobre ela. Para esta camada, também escolhi a cor preta (#000000), porém com 0.30% de transparência.

Escolhi colocar uma camada um pouco menos transparente quando colocamos o mouse sobre a row, pois ajudará a leitura do título para usuários no site. O efeito permitirá que o fundo escureça um pouco mais (10%) quando o mouse estiver sobre a row.

Vale lembrar que a quantidade de transparência não é um padrão, pois dependerá de quão clara ou escura é a imagem que você decidiu utilizar. A imagem pode precisar de 0.50% de transparência se for clara de mais ou se possuir muitos detalhes que atrapalhem a leitura. Esta camada também não precisa ser preta (#000000) pode ser de outra cor que você desejar.

Teste a transparência e ajuste as suas necessidades.

Para finalizarmos esta aba, role a barrinha lateral do box um pouco para baixo, até “Font”. Aqui você pode alterar todas as informações referentes a cor, tamanho, alinhamento e fontes.

Como meu fundo ficou escuro, graças a row overlay que colocamos, acabei optando por uma cor clara, branco puro (#ffffff). Mais uma vez, dependerá da sua imagem, por isso não tenha medo de testar.

Lembre-se de alinhar o texto ao centro e salvar. Nossas configurações para a row Home, estão prontas.

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-w13-650x545

Ao salvar o box ele se fecha, mas não foi 100% salvo. Para salvar seu trabalho precisamos clicar no SAVE laranja no canto superior direito de seu site. Após devidamente salvo, vamos à próxima row. Tenha o atalho “ctrl + s” como um amigo e utilize o tempo todo para salvar.

Row 2 – Apresentação

Na row seguinte, que se encontra logo abaixo da home que construímos, vamos colocar informações referentes ao seu negócio.

Neste tutorial, desenvolveremos apenas 2 rows para falar sobre seu produto. Compreendo que dependendo de seu produto, serão necessárias mais rows que isso, mas ao entender como funciona a dinâmica de criarção do tema, você conseguirá construir muitas outras sozinho.

Para começar, utilizando o sinal de positivo roxo, pegue um módulo de Imagem e arraste até a segunda row, localizada logo abaixo da primeira.

Abrirá uma janela contendo todas as configurações do módulo. Na parte de “Image URL”, clique em Browse Library para escolher sua imagem. Selecione uma das imagens com tamanho 700x700px.  E certifique se as demais configurações estão de acordo com a imagem:

pragmatike-hiero-crepaldi-hierocrepaldi-como-a-imagem-deve-ficar-650x371

Coloquei a foto para aparecer em 500px, pois apesar de nossa resolução ser o dobro disso, não queremos nenhum tipo de distorção. Caso queira uma imagem um pouco maior, use 600px ou 700px.

Salve a janela e depois salve o site.

Repare que existe um cabeçalho cinza, no início da row. Este cabeçalho aparece representado pelo ícone de três colunas paralelas.

Deixe o mouse sobre este ícone e aparecerá um menu, como o da foto.

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-row4-feature-9-x-3-650x542

Escolha as opções desta forma:

  • 4 colunas
  • Column Alignment: Central
  • Gutter Spacing: None

Depois de selecionadas as configurações, repare que sua row será dividida em 4 colunas. E sua imagem provavelmente estará na primeira delas.

Nesta mesma row, arraste um módulo de texto na terceira coluna e escreva a primeira descrição que desejar para seu serviço ou produto. Não escreva muito, apenas algumas linhas.

Caso seu texto seja grande, repare que a coluna ficará distorcida em relação ao tamanho da imagem. Arraste os pontos centrais das colunas, conforme destacado na imagem, para conseguir ajustar corretamente. Não precisa escrever tudo apenas nesta row, a row de baixo também será dedicada para que escreva sobre seu produto. E lembre-se, você sempre poderá criar mais uma.

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-row4-feature-9-x-4-1024x438-900x384
pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-row4-feature-9-x-5-1024x383-900x336

Agora trabalharemos na fonte, para isso clique no ícone do pincel onde abrirá uma janela de configurações. Na aba styling, escolha a fonte conforme demonstrado na imagem.

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-row4-feature-9-x-2-650x382

A quem diga que a fonte dependerá de seu nicho ou do seu gosto. Eu discordo. Você deverá sempre escolher fontes limpas, sem detalhes que promovam uma leitura fácil. Se o seu gosto te disser outra coisa, lembre-se que ele está errado. Escolha fontes simples.

Não misture mais de 2 ou 3 fontes diferentes para um mesmo site. Quanto mais fontes você tiver, mais difícil será a combinação entre elas. Na realidade, os grandes websites geralmente não passam de 2 fontes. Escolha fontes limpas, que ajudem na leitura. Esqueça fontes complicadas e “sofisticadas”, nada é mais sofisticado que a simplicidade.

Para a cor da fonte, utilizaremos uma de nome: #3b3b3b, é um cinza bem escuro. Utilizar cores como esta, no lugar do preto puro #000000 é uma boa idéia, pois ajuda a tornar o design leve permitindo uma leitura mais confortável. Algo que empresas como Apple e Google já fazem a tempos em seus websites.

A última configuração desta row será na aba row options, escreva o nome da row, conforme a imagem:

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-xa-x2-900x440

Para a próxima row, utilizaremos as configurações já existentes criando um “clone” que nos economizará tempo. Como fazemos isso?

É simples, no cabeçalho de sua row (na que estamos editando agora), existe um botão chamado “Duplicate”, conforme demonstrado na imagem.

Clique neste botão e uma nova row será gerada, exatamente igual a anterior.

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-row2-2-650x650

ROW 3 – O CLONE

Para iniciar as edições, faremos apenas pequenas modificações no layout. Para que o design não canse, vou intercalar imagens com textos. Isso equilibrará a leitura.

Na nova row clonada, troque o módulo de texto (na direita) pelo módulo de imagem (na esquerda), repare que ao deixar o mouse sob um dos módulos, aparece um pequeno ícone com 2 setas (Tipo assim: <-->) este ícone permite que as colunas sejam trocadas de lugar, apenas arrastando da esquerda para direita, ou vice versa. Você pode também utilizar a opção de arrastar e solta o módulo na coluna desejada.

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-row4-feature-9-x-6-1024x382-900x335

Agora que as colunas estão devidamente posicionadas, ou seja, texto pra esquerda (coluna 2), imagem pra direita (coluna 4), abra o módulo de texto com 2 cliques e edite mais um texto para seu produto e salve.

Para a imagem, clique duas vezes e escolha a outra imagem com tamanho de 700×700 pixels e salve.

ROW 4 – SOBRE VOCÊ

A próxima row, será o como um “Sobre”, mostrando quem é a pessoa ou quem são as pessoas responsáveis por este empreendimento. Visitantes gostam de saber de quem estão comprando, por isso essa é uma row que definitivamente não deve ser ignorada.

Para a nova row, escolheremos um módulo novo em nosso caixinha de módulos. Ele se chama “Feature”. Encontre o módulo Feature e arraste para nossa nova row.

Aqui, irei supor que exista apenas 1 pessoa na sua equipe, por isso escolheremos 3 colunas e alinharemos todos os módulos com informações ao centro. Caso sua equipe tenha 2 ou 3 membros, utilize as colunas vazias para preencher com mais módulos.

Na imagem abaixo fiz algumas configurações que condizem com o layout de meu site. Você deverá fazer upload de sua própria imagem, utilizando o Browse Library. 

Em Size mude a opção para Large e escolha uma cor. Repare que existe uma caixinha chamada “Stroke”. Esta configuração permite definir a largura da linha colorida. Escolha um número maior para aumentar o destaque.

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-ROW4-feature-3

Conforme disse anteriormente, a organização desta row será em 3 colunas com o alinhamento do módulo feature no centro.

Veja:

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-row4-feature-9-x-8-650x368
pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-row4-feature-5-1024x449-650x285

O módulo de feature possui as mesmas configurações que os demais em relação a textos, por isso escolha também como serão as fontes e cores do módulo.

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-row4-feature-9-x-9-650x368

Por fim, as configurações e o nome da row. Conforme a imagem:

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-xa-x3-900x440

ROW 5 – CONTATO

A última row que mostrarei como desenvolver neste tutorial, será a row para contatos. Afinal as pessoas precisam entrar em seu site, conhecer seu produto e comprar.

Aqui irei colocar apenas uma imagem de fundo da row junto a um módulo de texto com as informações básicas para contato. Ou seja, seu email e seu telefone. Não ensinarei aqui como criar caixas de contato, mas caso precise, existem plugins para esta função.

Como será uma row simples, apenas arraste um módulo de texto e escreva as informações, como na imagem abaixo. Repare no fundo da imagem que escrevi 3 linhas apenas. O título, o telefone e o email para contato.

É possível notar que a letra que escolhi esta na cor branca (#ffffff). A cor de sua letra dependerá da sua imagem de fundo. Para manter o padrão, escolha branco ou cinza escuro: #3b3b3b, aquilo que melhor destacar.

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-xa-4-650x425

Em ROW OVERLAY, escolherei novamente uma camada extra para permitir uma leitura mais confortável. Isso ajudará a escurecer o brilho da imagem de fundo e a destacar a letra branca.

A cor da row poderá também ser outra que não preto puro (#000000). Uma row com a cor laranja por exemplo, fornece uma sensação de calor que pode ser interessante dependendo da necessidade.

Teste qual cor e qual transparência melhor se enquadram ao seu texto e imagem.

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-xa-5

Para finalizar esta row, escolha seu nome em Row Options.

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-xa-x4-900x440

SALVE.

Uma coisa que você deve se acostumar a fazer sempre é salvar seu trabalho. Você vai se esquecer cedo ou tarde, e vai perder o que foi feito. Mas com o tempo ficamos mais ligados e salvamos sempre, qualquer micro alteração.

Salve o tempo todo utilizando o grande botão laranja no canto superior direito de sua tela. O TEMPO TODO.

Depois de esperar SALVAR, aperte o “X” logo ao lado do botão de “SAVE“. Isso te levará de volta a visão de seu site, da forma que qualquer visitante o vê.

Calma, eu sei que provavelmente ficou uma bosta. Mas ainda não está pronto.

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-ROW4-feature-8

O principal problema que você deve ter notado é que os módulos estão muito próximos uns dos outros. Isso acontece pois não definimos os chamados Paddings. Esta ferramentinha poderosa permite posicionarmos cada módulo no exato local que você deseja.

Onde encontrar os Paddings? Dentro de todos os módulos existe uma aba chamada Styling. Dentro desta aba existe a seção Padding.

Esta seção estará oculta. Para desocultar, localize dentro do módulo que deseja adicionar espaçamento, a aba Styling. Depois encontre a seção padding, e então clique em “

Abrirá um menu como este: 

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-paddings

Conforme destacado na imagem, sempre que for utilizar um padding, selecione a opção (%), pois será mais fácil compreender a dinâmica de deslocamento.

Cada uma das 4 opções irão adicionar espaço a um lado do módulo.

  • Top: Adiciona espaço ao lado superior do módulo.
  • Right: Adiciona espaço ao lado direito do módulo.
  • Bottom: Adiciona espaço ao lado inferior do módulo.
  • Left: Adiciona espaço ao lado esquerdo do módulo.

Esta parte ficou por último pois neste ponto, todos os conteúdos de seu site, como imagens e textos, ja foram colocados. Portanto será mais facil localizar quais módulos precisam de espaço e quanto espaço será preciso.

Praticamente todos os módulos deste tutorial possuem 5% de padding no Bottom, isso significa que 5% é a distância padrão que utilizo entre o modulo de cima e o de baixo.

Talvez para você seja pouco espaço, então utilize mais. Não importa, 10%, 20%, 30% de espaçamento, você deverá encontrar o ideal para cada módulo. Baseado no tamanho de suas imagens e de seus textos.

Como resultado final, após todos os  ajustes relacionados aos paddings, veja como ficou nossa sequencia de rows para a construção do site de teste:

pragmatike-hiero-crepaldi-hierocrepaldi-como-fazer-sites-incriveis-resultado-1
pragmatike-hiero-crepaldi-hierocrepaldi-como-fazer-sites-incriveis-resultado-2
pragmatike-hiero-crepaldi-hierocrepaldi-como-fazer-sites-incriveis-resultado-3
pragmatike-hiero-crepaldi-hierocrepaldi-como-fazer-sites-incriveis-resultado-4
pragmatike-hiero-crepaldi-hierocrepaldi-como-fazer-sites-incriveis-resultado-5

Repare que na imagem já é possível ver um menu escuro, com o nome de nossas rows e com botões para redes sociais. Algo que ainda não ensinei.

Caso tenha chegado até aqui  com o tema instalado, com as rows e módulos configurados, e com a dinâmica dos Paddings formatada ao seu conteúdo, estaremos aptos para evoluir à última parte dos 4 módulos essenciais para a criação de sites incríveis.

No próximo módulo ensinarei a:

  • Personalizar todas as cores e letras de seu site.
  • Criar e alterar blog posts.
  • Configurar suas redes sociais.
  • Criar e alterar menus.
  • Criar emails profissionais.

Caso tenha gostado do tutorial até aqui, compartilhe com seus amigos e familiares, tenho certeza que juntos conseguiremos criar muitos novos negócios virtuais!

Nos acompanhe nas redes sociais pelos links abaixo.

Um abraço e até a próxima aula!

Veja aqui a quarta e última parte do tutorial para criação de sites incríveis.

Compartilhe: