4/4

ARREMATES VISUAIS

E CORES

Compartilhe:

JAN, 2018

 

E aí galera blza?! Bem vindos de volta a quarta e última parte do tutorial para criação de sites incríveis. Se caiu de paraquedas nesta página e ainda não leu os demais módulos do tutorial, clicando aqui você aprenderá gratuitamente como criar websites incríveis para o seu negócio.

Levando em conta que a terceira parte do tutorial ficou muito grande, tentarei ao máximo resumir todas as fases desta última etapa.

Conforme prometido anteriormente, nesta última parte você aprenderá sobre os seguintes pontos:

  • Como personalizar as fontes e cores do meu site Wordpress?
  • Como criar novos blog posts no Wordpress?
  • Como alterar minhas redes socias no Wordpress?
  • Como criar e alterar menus no Wordpress?
  • Como criar emails profissionais?

 Como personalizar as

fontes e cores do meu site Wordpress?

Ok. Vamos à prática!

Como de costume, faça login em seu Wordpress, utilizando o link com final wp-admin e suas credenciais.

Ao logar no site, vá até sua página inicial e clique em “Personalizar”.  Abrirá um menu lateral chamado Menu de Personalização, este menu possui 2 abas: Basic e Advanced,  conforme destacado em vermelho na imagem, clique na aba ADVANCED. Está aba, conforme o próprio nome já diz, apresenta opções avançadas de personalização.

Cada uma das linhas deste menu, possuem várias seções para que você mude a cor de cada pequeno espaço de seu site. Neste tutorial apresentarei as principais, mas com o passar do tempo você se acostumará a trabalhar em todas as opções existentes.

BODY

pragmatike-hiero-crepaldi-hierocrepaldi-personalizar-advanced-body-themify-550x549

A primeira seção chama-se BODY, aqui você conseguirá alterar tudo referente as fontes do corpo de seu site. Como assim do corpo do meu site?

Cada parte de texto de seu site deverá ser organizada de forma que o Google seja capaz de “ler” o conteúdo que está escrito. Desta forma, precisamos marcar cada parte do texto com tags que dizem ao Google quais as partes mais importantes do seu texto por ordem hierárquica. Isso permite que ele consiga diferenciar um título de um subtítulo, de uma chamada, por exemplo.

BODY será tudo que não for um título, subtítulo ou outros textos de destaque. Este texto que você esta lendo assim como todos os blogposts que você já leu, foram escritos na categoria BODY.

Um título deverá sempre ter a tag < h 1 > (ainda que você não veja, ele tem), um subtítulo sempre a tag < h 2 >, e assim por diante até < h 6 >, o que estiver sem tag, aos olhos do Google e dos demais motores de busca, é corpo de texto (BODY).

Eu já mostrei como marcar seu texto com as tags < h 1 >, <  h 2 >, < h 3 > , mas se não se lembrar, basta olhar a imagem abaixo.  Nos módulos de texto do Themify, na aba Text, ao clicar em parágrafo, abrir-se um menu onde são mostradas todas as 6 tags.

pragmatike-hiero-crepaldi-hierocrepaldi-como-criar-emails-profissionais-heading-tags-550x453

Lembre-se sempre de marcar cada texto de seu site com a respectiva tag, isso ajudará que os motores de buscam leiam corretamente seu conteúdo. Geralmente eu utilizo apenas as 3 primeiras tags, pois as tags 4, 5 e 6 são de baixa ou nula relevância, cumprindo um papel meramente estético, sem importância para o Google. Tudo que for um título eu marco com < h 1 >, subtítulo < h 2 >, destaques/citações < h 3 >, o que não couber em um desses 3, é body.

Nesta seção aprenderemos como alterar o padrão das fontes de seu site. Talvez você gostaria que sua tag h1 fosse maior ou menor, ou fosse azul, ou estivesse em negrito. Aqui será possível fazer isso. Lembre-se que mudaremos o PADRÃO, mas não significa que você não possa utilizar a aba “Styling” do módulo de texto do Themify para promover novas alterações na fonte.

Ainda na seção BODY, existem 2 subseções importantes, chamadas “Body Link” e “Body Link HOVER”.  Aqui você conseguirá configurar visualmente os links inseridos no texto de seu site. Repare que escrevi HOVER desta forma para que você atente-se a este termo. Todas as vezes que você ver este termo escrito aqui no Themify, ele está se referindo ao ato do cursor de seu mouse estar SOBRE alguma coisa. Ou seja, conforme a imagem, a cor do link será AZUL ESCURO, pois esta foi a cor definida em BODY LINK e será AZUL CLARO apenas quando o cursor do mouse estiver SOBRE o link.

Portanto lembre-se, o termo HOVER estará presente em muitos momentos neste tema e sempre significará o mouse sobre algo.

pragmatike-hiero-crepaldi-hierocrepaldi-personalizar-advanced-bodylink-themify-550x550

HEADINGS

Seguindo a listagem, HEADINGS será a próxima configuração que te interessará. Aqui você conseguirá alterar o padrão de cada uma das 6 tags.

pragmatike-hiero-crepaldi-hierocrepaldi-personalizar-advanced-headings-themify-550x550

HEADER e STICKY HEADER

As próximas seções são HEADER e STICKY HEADER. Esta seção servirá para você alterar a cor da tira do seu cabeçalho superior, onde fica o nome, logo e menu principal de seu site. Sticky Header especificamente configura como o cabeçalho aparece quando a barra lateral de seu site é rolada para baixo. Nestas configurações é possível alterar cores, transparências,  texturas, etc…

pragmatike-hiero-crepaldi-hierocrepaldi-personalizar-advanced-header-sticky-stickyheader-themify-550x550

SITE LOGO & TAGLINE

A seção SITE LOGO & TAGLINE, conforme o nome já diz, serve para inserir uma logo ou alterar o nome escrito em seu site. Tagline é o slogan de seu produto e também poderá ser alterada nesta seção.

pragmatike-hiero-crepaldi-hierocrepaldi-personalizar-advanced-logo-themify-site-logo-550x550

MAIN NAVIGATION

MAIN NAVIGATION é a seção que permitirá configurar o seu menu principal de navegação, caso precise alterar algo de caráter estético como fontes e cores. Conforme destacado na imagem, também existe uma opção para alterar como o menu aparecerá em smartphones.

pragmatike-hiero-crepaldi-hierocrepaldi-personalizar-advanced-main-navigation-mobile-menu-themify-550x550

POST

A seção seguinte, POST, cuidará especificamente de seu blog, algo que não me aprofundarei por não ser o objetivo do tutorial. O foco deste tutorial é criar um site limpo, rápido e que seja capaz de divulgar seu produto ou serviço para a venda no menor tempo possível e com o melhor custo benefício possível.

O blog é uma parte importante de seu site, pois é um dos meios mais baratos de atrair possíveis clientes. Vale lembrar que o blog é apenas 1 dos vários meios de atrair clientes e deve ser utilizado em conjunto com outras estratégias de negócio de sua empresa.

pragmatike-hiero-crepaldi-hierocrepaldi-personalizar-advanced-post-themify-550x550

FOOTER

A última seção chama-se FOOTER, dedicada para configurações de seu rodapé. Aqui você poderá configurar esteticamente tudo que se encontra no rodapé de seu site. Antes de mudar de seção, lembre-se por favor de salvar.

pragmatike-hiero-crepaldi-hierocrepaldi-personalizar-advanced-footer-themify-550x550

COMO CRIAR NOVOS BLOG POSTS

NO WORDPRESS?

Excelente, terminadas as configurações visuais de seu site, agora vamos a criação de blog posts. Volte para as configurações do Wordpress, clicando em Painel, ao lado de Personalizar. Na imagem abaixo destaquei onde você promoverá a criação de novos blog posts ou editará blog posts já adicionados. Aqui não tem segredo, o funcionamento é muito semelhante ao de criação de páginas, passo a passo já ensinado na terceira parte do tutorial.

pragmatike-hiero-crepaldi-hierocrepaldi-como-criar-novos-blog-posts-no-wordpress-550x550

Como alterar as redes sociais

no Wordpress?

Conforme demonstrado na imagem, clique em Themify Ultra >> Themify Settings >> Social Links. Aqui estará a lista padrão de redes sociais. Se deseja excluir algum destes ícones clique no “X” laranja, no canto do balão. Caso desejar um novo link para uma rede social diferente, crie uma nova e busque a imagem em “Insert Icon”. Nestas configurações também é possível alterar as cores dos links. LEMBRE-SE DE SALVAR.

pragmatike-hiero-crepaldi-hierocrepaldi-como-alterar-as-redes-sociais-no-wordpress-1024x458-800x357

Você poderá colocar um Widget com suas redes sociais em diversos lugares de seu site. Para isso, no menu lateral, mova o mouse sob a opção “Aparência (Pincel)” e depois clique em Widgets. Neste ponto basta arrastar o Widget “Themify – Social Links”, para um dos espaços de Footer Widget. Isso adicionará suas redes sociais ao rodapé do site. Repare na imagem que é possível configurar como os links aparecerão (Horizontal, vertical) e também o tamanho do ícone.

pragmatike-hiero-crepaldi-hierocrepaldi-widgets-como-redes-sociais-400x400
pragmatike-hiero-crepaldi-hierocrepaldi-widgets-rede-social-de-novo-400x398

 

COMO CRIAR E ALTERAR MENUS

NO WORDPRESS?

Para essa tarefa, no menu lateral, em Aparências (Pincel), clique em Menus. Clique em “Links personalizados”, na URL digite endereço de seu site e adicione ao final “/#home”, no texto do link escreva como esta opção será mostrada no menu, escolha Home e clique em “adicionar ao menu”.

Eu escrevi /#home supondo que este também foi o nome que você escolheu em “Row Anchor”, conforme este tutorial mostrou. O row anchor é a comunicação para que o Wordpress entenda que toda vez que alguém clicar naquela opção do Menu, deverá ser levada corretamente para a row assinalada em row anchor.

Portanto se sua row anchor esta com o nome de “inicial”, você deverá colocar “/#inicial” na criação do link personalizado. O texto que da nome ao link não possui nenhuma influência, você pode escrever qualquer nome. Veja na imagem abaixo onde encontra-se a informação Row Anchor.

pragmatike-hiero-crepaldi-hierocrepaldi-cpanel-como-fazer-um-site-instalar-wordpress-temas-xa-x4-7000x3423
pragmatike-hiero-crepaldi-hierocrepaldi-como-construir-e-editar-menus-no-wordpress-400x399
pragmatike-hiero-crepaldi-hierocrepaldi-como-construir-menus-no-wordpress-400x400

Depois de criar 4 links personalizados, um para cada row. Link 1 – Home, Link 2 – Serviços, Link 3 – Sobre, Link 4 – Contato. Lembre-se que “Serviço” deverá ser escrito sem “Ç” tanto na Row Anchor quanto na URL do Link personalizado.

Após criar as 4 opções organize-as da forma que mais lhe agrade, arrastando e soltando as opções do menu. Certifique-se que o box “Main Navigation” esteja marcado, indicando que este menu principal será utilizado como principal. Depois, clique em salvar menu.

Agora vá até a página inicial e teste os links clicando em cada uma das opções. Se algum deles não estiver funcionando, confira as URLS nos links personalizados e as âncoras em row anchor. Confira de verdade, da primeira a última letra. Uma letra errada impede o funcionamento do menu.

As vezes, quando copiamos a URL do navegador, direto para os Links Personalizados, fica assim: “http://http://meusite.com”, com o HTTP:// duplicado, isso impedirá o funcionamento correto de seu menu. Por isso, é melhor conferir.

 COMO CRIAR CONTAS DE

EMAIL PROFISSIONAL?

Para finalizar com a cereja do bolo, ensinarei você a criar contas de email profissional. Para isso, logue em seu servidor utilizando o painel da Hostgator, conforme já ensinado neste tutorial.

Na pagina inicial em popular links clique em “Contas de Email”.

pragmatike-hiero-crepaldi-hierocrepaldi-como-criar-emails-profissionais-links-populares-hostgator-600x306

Aqui será possível criar qualquer email com o fim de domínio que desejar. Prefira emails curtos que evitarão erros de digitação. Ao criar seus emails no servidor da Hostgator será possível visualizar sua caixa de entrada utilizando apenas o portal da Hostgator, o que pode ser um pouco chato já que estamos acostumados com o visual do Gmail ou do Outlook.

Graças a isso preparei uma dica BÔNUS onde mostrarei como utilizar emails profissionais direto de sua caixa de entrada do Google (GMAIL apenas) ou de seu celular.

Para isso criaremos seu primeiro email juntos e depois conseguirá fazer muitos outros, sozinho.

No campo email digite o nome “vendas”.  Em domínio escolha o seu site. Em senha, utilize uma simples (Tipo: abc), caso escolha uma senha complicada, anote, pois precisaremos dela em segundos.

pragmatike-hiero-crepaldi-hierocrepaldi-como-criar-emails-profissionais-passo1-550x550

Após criar o email, volte para a pagina inicial do servidor e clique em “encaminhadores de email”, depois em Adicionar encaminhador. Abrirá a seguinte tela:

pragmatike-hiero-crepaldi-hierocrepaldi-como-criar-emails-profissionais-passo2-550x550

Escreva novamente “vendas”. Depois, escolha novamente seu site. Em destino escreva seu endereço de email GMAIL (não pode ser outro provedor, mostrarei como configurar apenas o Gmail). Clique em adicionar encaminhador e pronto.

Agora vamos para sua caixa de entrada do Gmail. Em sua caixa de entrada clique na engrenagem e depois em Configurações. Abrirá um menu com várias abas. Procure pela aba “Contas e Importação”.

pragmatike-hiero-crepaldi-hierocrepaldi-como-criar-emails-profissionais-no-gmail-550x550

Em Contas e Importação, clique em “Adicionar outro endereço de email” e abrirá um pop-up como o da imagem.

pragmatike-hiero-crepaldi-hierocrepaldi-como-criar-emails-profissionais-no-gmail-1-550x550

Escreva o nome que desejar para este email. Pode ser “João – Comercial – seusite.com” em endereço de email escreva “vendas@seusite.com” e depois clique em “Próxima etapa >>”.

Aqui você deverá deixar o servidor SMTP como o padrão, a porta poderá ser a 587, o nome do usuário deverá repetir o email. Na senha você deverá escrever a senha que escolhemos no servidor da Hostgator (eu disse para colocar “abc” pois usaríamos em segundos). Clique em “adicionar conta>>”. Caso tenha feito tudo corretamente, dentro de segundos, receberá um email de confirmação em sua caixa de entrada  do Gmail. Neste email existirá um número que deverá ser informado confirmando a configuração ou apenas poderá clicar no link do email e confirmar a ativação.

pragmatike-hiero-crepaldi-hierocrepaldi-como-criar-emails-profissionais-no-gmail-2-550x550

Utilizando estes simples passos você conseguirá criar vários emails profissionais para você e para seu time!

Bom, é isso pessoal, finalizamos nosso tutorial de hoje, espero que os ensinamentos passados ao longo destes 4 módulos tenham sido de grande utilidade para sua vida e torço para que auxiliem em sua jornada virtual.

BONUS EXTRA:

Gostaria de deixar um último recado em relação ao desenvolvimento de websites. Neste curso, falamos de uma cadeia de sistemas diversos, que juntos e orquestrados, fazem nascer seu empreendimento virtual.

Vários sistemas de empresas como:

Levando em conta que todas são empresas sérias, seus sistemas encontram-se em frequentes evoluções, o que significa que dependendo de quando você lê este tutorial, algumas das imagens apresentadas, podem estar desatualizadas.

Entretanto, o mais importante aqui é que você compreenda os conceitos passados e não se prenda aos programas. Todos os sistemas sofrem atualizações diárias que alteram pequenas configurações, mas caso você tenha se dedicado a aprender a teoria, você não será afetado.

Então, não se preocupe se alguma imagem não estiver exatamente igual a da tela de seu computador. O conceito é a única coisa essencial para o desenvolvimento de seu projeto. 

Se gostaram deste mini curso, por favor, utilizem os links abaixo para curti e compartilhar com seus amigos e familiares nas redes sociais. Espero que estas linhas ajudem mais pessoas no desenvolvimento de negócios lucrativos online.

Ficou com dúvidas? Fale comigo -> sos@pragmatike.com

Obrigado por nos acompanhar e até a próxima!

Compartilhe: