Desafios Web Marketing

Desafio 3: WordPressing

Objetivo

Criar um website similar a este.

Passos a realizar

Definições Iniciais

  • Nas definições, alterar o idioma do site para Português. Esta será a linguagem apresentada a quem visita o site.
  • Descobrir onde se pode alterar o idioma do utilizador para Inglês. Esta será a linguagem apresentada no back-office, para quem trabalha no site. Realiza a alteração, se desejares.
  • Eliminar página “Sample Page”.
  • Eliminar artigo “Hello World!”.

Página “O Telefone”

  • Criar página intitulada “O Telefone”. No conteúdo, adicionar o seguinte texto com imagem:

Texto: “Já pensou como seria se conseguisse gerir toda a sua vida a partir deste telefone?”
Imagem: telefone-desligado.jpg
Texto Alternativo da Imagem: Telemóvel desligado em fundo branco

  • ???? Após publicação da página, alterar o slug da mesma para telefone-rev. Poderás ter que ir a Settings > Permalinks para conseguir realizar esta tarefa, alterando a definição para “Post name”. Testa o URL – a página deverá ser encontrada em https://subdominiodogrupo.gurusdomarketing.pt/telefone-rev
  • Criar nova página “Home”, permalink “/home”. Defini-la como homepage do site.

Customização

  • Instalar e ativar o tema “Sydney”.
  • Instalar e ativar o plugin Elementor Website Builder.
  • Com a ajuda do Elementor, editar a página “Home”, alterando o seu Layout para “Elementor Full Width” (para ocultar a barra lateral) e esconder o título da página.
  • Fora do Elementor, navega até “Appearance > Customize” para acrescentar um carrossel de imagens na secção “Hero”. Será um slider full-screen que só aparecerá na homepage e com botão call to action com o texto “Saber Mais”, para a página “O Telefone”.

1º Slide: telefone-fundo-madeira.jpg
Title – “TELEFONE REV” | Subtitle – “Bem-vindo à Revolução.’

2º Slide: telefone-muro-colorido.jpg
Title – “Pronto para mudar?” | Subtitle – “Adeus, computador.”

Criação de Páginas adicionais

  • Criar página Business Plan (permalink business-plan) copiando e colando o conteúdo do site de exemplo:
<h2>PORQUÊ O NOSSO BLOG?</h2>
<h3>1. Porque é que estamos a começar este blog?</h3>
<p>É importante ter em conta 2 grandes objectivos para construir um negócio: querer genuinamente entreter/educar/inspirar a nossa comunidade e, pelo caminho, ganhar dinheiro. Quais são as nossas razões para começar este blog?</p>
<h3>2. Que problemas é que o nosso blog vai resolver, ou que necessidades vai satisfazer?</h3>
<p>Como qualquer negócio de sucesso, o blog terá de resolver um problema ou preencher uma necessidade.</p>
<h3>3. Qual é o leitor ideal do blog?</h3>
<p>Devemos descrever o leitor ideal do blog de uma forma ultra específica - nada de "mulheres dos 18 aos 35". Devemos visualizar "a" pessoa. O que faz no seu dia-a-dia? Qual é a sua profissão? Que hobbies tem? Onde costuma passar o tempo quando está online? A que comunidades pertence?</p>
  • Criar página “Sobre Nós” (permalink sobre-nos) com o seguinte texto:

Texto: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Criar página “Blog” com o seguinte texto:

Texto: A nossa lista de artigos está toda aqui!

  • Definir página “Blog” como página de índice de artigos.

Navegação e Artigos

  • ???? Criar menu com “O Telefone/Blog/A Empresa”. O “Sobre Nós” e o “Business Plan” deverão ficar acessíveis dentro da secção “A Empresa”. Certifica-te que o mesmo fica visível no cabeçalho das páginas.
  • Criar um primeiro artigo, com imagem de destaque, associado à categoria “Apps”:

Imagem: telefone-apps.jpg
Título: As 3 apps que deves instalar no teu novo Telefone Rev
Texto (código HTML):

<h2>App #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit soluta deleniti aut nostrum veritatis saepe quos reiciendis, debitis ipsa ad adipisci sequi eaque iste deserunt et beatae inventore natus, recusandae quo alias, rerum aliquid maxime consequatur! Sint molestias fugiat, asperiores corporis, quas, dolores nemo illum, animi ratione eligendi vero obcaecati? Mollitia optio ut voluptas porro dolorem blanditiis impedit recusandae illo, eum ad rerum dicta, fugiat quaerat quae pariatur enim expedita magnam similique, hic sapiente accusamus temporibus, sint quos magni. Molestiae doloribus perferendis ratione totam. Necessitatibus placeat autem molestiae quod omnis.</p>
<h2>App #2</h2>
<p>Sit molestiae incidunt laborum aliquid pariatur eum veniam vitae vel, voluptatem voluptate, eaque possimus provident quasi ipsa voluptatum esse alias nesciunt officiis consequatur quos reprehenderit! Reprehenderit, accusantium earum commodi doloremque eum laboriosam necessitatibus, saepe obcaecati perferendis incidunt architecto. Eum, reprehenderit. Fuga aliquid unde alias quidem est nihil nesciunt exercitationem a illo nemo voluptatem saepe temporibus, porro, sed assumenda! Tenetur velit voluptatibus iure vitae. Expedita nobis incidunt eos consectetur delectus numquam culpa, consequatur sunt quos cumque pariatur nostrum repellendus qui, earum rem officiis! Doloribus alias sed minima vitae dolorem eos ipsum.</p>
<h2>App #3</h2>
<p>Perspiciatis repellendus laboriosam excepturi, assumenda quidem esse officia magni saepe impedit modi. Itaque corrupti veritatis optio dolore repellendus dignissimos, porro molestias. Cupiditate delectus necessitatibus fuga nihil, soluta officiis quaerat recusandae praesentium, est placeat distinctio similique doloremque ipsam aut velit eos quia nemo, voluptatibus assumenda enim minima sequi iste mollitia quidem. Suscipit dolorum sunt dolor illum aperiam iste voluptate tenetur iure veniam. Impedit mollitia iste officia provident minima laborum culpa ipsum, reiciendis quia eligendi, et repellendus non ipsa sunt a quis assumenda beatae unde dicta est iusto maiores necessitatibus doloribus. Earum.</p>

Customização Extra

  • Inserir logo no header (cabeçalho) e Ícone do Site:

Imagem: telefone-rev-logo.png (com 70px de altura)
Imagem: telefone-rev-icon.png

  • Alterar a tipografia: “Lato” para headings e “Merriweather” para o body.
  • Nas páginas que não sejam full-width, acrescentar uma barra lateral (sidebar) com apenas 2 widgets:

Título + Parágrafo com título “Quem Somos?” (um <h3>) e texto “Pode saber tudo sobre a nossa história na página Sobre Nós.” (com o devido link para a página “Sobre Nós”)

Widget de Caixa de Pesquisa com título e botão “Pesquisar”

  • ???? Alterar o padding superior e inferior para 50px, para reduzir o espaço entre o cabeçalho e o conteúdo de cada página. Pista: Appearance > Customize > General > ???