Desafios Web Marketing

Desafio 4: WordPressing II

Objetivo

Continuar a criação de um website similar a este.

Passos a realizar

SEO

  • Instalar o plugin Yoast SEO e ativá-lo. Realizar as seguintes alterações no artigo criado (“As 3 apps que deves instalar no teu novo Telefone Rev”):

Para o Google:

Slug: 3-apps-essenciais-rev-phone
Descrição: O Telefone Rev tem imensas aplicações disponíveis, mas estas 3 são absolutamente essenciais. Vem conhecê-las!

Para as Redes Sociais:

Exclusivamente para o Facebook, vamos imaginar que o artigo apresenta 7 apps e não 3:

Título: 7 Apps Imperdíveis para TI!
Descrição: Há apps e apps. Estas são aquelas que tens mesmo, MESMO que ter no teu telefone.
Imagem de destaque: telefone-apps-social.jpg (do ficheiro ZIP do desafio anterior)

Confirma se este link é apresentado na rede social como pretendes recorrendo ao Facebook Sharing Debugger (requer conta Facebook).

  • Na página “Business Plan”, solicitar que a mesma não seja indexada pelos motores de busca.
  • No artigo “As 3 apps que deves instalar no teu novo Telefone Rev””, certifica-te que os links não são seguidos pelos motores de busca (nofollow).

Localização e FAQ

  • Na página “Sobre Nós”, com a ajuda do Elementor, define o layout desta página como “Elementor full-width”.
  • Cria uma nova secção de 2 colunas (50% cada).
  • Dentro de um container, acrescenta um sub-título <h2> na coluna da esquerda, com o texto “Mapa”, e adiciona um mapa com a localização da ESCS (Zoom 12). Não utilizes a coluna da direita, para já.
  • Cria uma nova secção de 2 colunas, com a estrutura de 33% / 66% (como na página modelo). Arrasta os elementos para a nova secção, com a ajuda da ferramenta “Structure”, do Elementor. Elimina a secção de cima, que entretanto ficou vazia.
  • Na coluna da direita, acrescenta um outro sub-título <h2>, com o texto FAQ, e acrescenta um acordeão.
  • Adiciona um 4º item ao acordeão com o respectivo lorem ipsum. Podes duplicar os elementos com a ferramenta “Structure”, para facilitar o processo.
  • Acrescenta espessura de borda (1) com a cor #d65050 e garante que o primeiro surge automaticamente expandido.

Formulário de Contacto ????

  • Instala o plugin Contact Form 7.
  • Cria uma nova página “Contactar” com o seguinte texto:

Temos uma equipa disponível 24 horas por dia, 7 dias por semana, para si. Se tem alguma questão, não hesite – prometemos uma resposta em menos de 12 horas!

  • Cria um Formulário de Contacto com a ajuda do Contact Form 7.
  • Acrescenta-o à página “Contactar”, com a ajuda do shortcode.
  • Vamos personalizar o formulário. Traduz (ou adapta) os 4 campos, juntamente com o botão, para o seguinte:

O seu Nome (campo necessário)
O seu Email (campo necessário)
Assunto
Mensagem

Copy do botão: Enviar

  • Torna o campo “Mensagem” de preenchimento obrigatório, alterando também o nome do campo para “Mensagem (campo necessário)”.
  • Adiciona um novo campo, “O seu Telefone”, com label associada e de preenchimento opcional, entre os campos do Email e do Assunto.
  • Adiciona o e-mail do teu chefe ([email protected]) e dos elementos do teu grupo, para que todos recebam os e-mails enviados pelos clientes.
  • Adapta a mensagem de envio com sucesso para o seguinte texto: “Obrigado pela mensagem. Responderemos muito em breve!”

Flamingo

  • Apesar de todo este trabalho, poderás não receber as mensagens enviadas pelo Contact Form 7 na tua inbox. Uma forma de resolver isto seria instalar um plugin de SMTP, mas vamos antes instalar o Flamingo, que te apresentará as mensagens recebidas diretamente no back-office WordPress.
  • Testa o formulário! ???? Verifica que todos os campos estão presentes na mensagem recebida e que os campos obrigatórios têm de ser preenchidos.
  • Adiciona a página “Contactar” ao final do Menu.

Acrescenta uma Promoção

  • Instala o plugin WP Notification Bars descarregando-o deste link.
  • Cria uma notificação Black Friday similar à do site de exemplo, com o seguinte copy:

Texto: Até 31/11 – faz a tua encomenda com 15% de desconto e PORTES GRÁTIS!
Texto do Botão: EU QUERO!
URL: página do telefone

  • Altera a cor do fundo e do botão:

Fundo: #56A3A6
Cor do Texto: #ebebeb
Botão: #d65050

  • Torna esta notificação apenas visível na Homepage.
  • Acrescenta a possibilidade do utilizador poder fechar essa notificação e altera a posição para “Absolute”, para que os utilizadores possam fazer scroll e utilizar o menu de navegação.

Desafio Bónus (CSS) ????????

  • Com a ajuda de CSS, oculta o copyright do rodapé (Criado com o Sydney). O nome da classe de CSS que terás de ocultar é sydney-credits.
  • Coloca tudo o que são títulos (<h1>) e sub-títulos (<h2>) na cor #D25455.
  • Reduz o tamanho dos sub-títulos <h2> para 32px.