how_to_build_templates_720p.mp4

00:00:00

Olá! Neste tutorial em vídeo, você aprenderá como criar temas e modelos que seus clientes podem usar ao criar novos sites ou alterar o estilo dos existentes

00:00:11

Apenas uma observação rápida antes de começarmos: para entender completamente esse processo e usar os recursos de construção de temas e modelos, você precisa ter pelo menos um conhecimento básico de como HTML e CSS funcionam.

00:00:24

Como você verá, tornamos todo esse sistema o mais simples possível, mas você precisa pelo menos saber do que estamos falando

00:00:31

Ok, dito isso, como você já deve saber, os modelos são sites prontos com páginas, conteúdos e estilo que você e seus usuários podem escolher como ponto de partida no processo de criação de um novo site.

00:00:41

site

00:00:43

Neste tutorial, você aprenderá como adicionar novos modelos, proporcionando aos seus clientes uma experiência ainda mais ampla e personalizada, o que significa que se você segmentar, por exemplo, agências imobiliárias, poderá criar

00:00:53

temas imobiliários personalizados que somente você e seus usuários poderão usar

00:00:58

O primeiro passo ou melhor, o pré-passo neste processo é obter inspiração para um novo modelo

00:01:05

Geralmente começamos com temas WordPress existentes, mas se você tiver mais imaginação do que deveria, pode começar com o que tem em mente ou usar outros recursos, como sites existentes ou modelos de outras plataformas.

00:01:16

Apenas esteja atento a quaisquer problemas de direitos autorais

00:01:20

De qualquer forma, neste tutorial, vamos começar com este tema WordPress gratuito aqui

00:01:24

Queremos replicar algo semelhante a isso com este estilo muito limpo, mas elegante

00:01:28

Vamos ao criador do site para iniciar esse processo criando um novo site, não usando o assistente, mas construindo-o do zero

00:01:36

Vamos dar um nome a este site e salvá-lo, e então vamos para a lista de páginas

00:01:42

Aqui, podemos começar a adicionar o conteúdo deste site

00:01:46

Lembre-se, tudo o que adicionaremos a este site, incluindo páginas, imagens, opções de comércio eletrônico, opções de login, widgets e tudo o mais será usado como conteúdo pronto que os usuários encontrarão quando escolherem este modelo.

00:02:00

no processo do assistente

00:02:03

Ok, então vamos começar pela página inicial

00:02:05

Estaremos criando um site muito simples

00:02:08

A primeira coisa que queremos adicionar é um cabeçalho bonito, replicando o que encontramos no tema WordPress e estamos nos inspirando nele.

00:02:15

Vamos definir a altura do cabeçalho

00:02:18

Como você vê, podemos definir um diferente para desktop e para celular

00:02:21

E então vamos definir o tipo de fundo

00:02:23

Se quisermos usar a galeria de mídia gratuita, precisamos salvar a página primeiro

00:02:27

Então vamos adicionar mais alguns dados antes de salvar

00:02:29

O título principal, que é um H1, e o subtítulo, um H2

00:02:35

E então, já que temos isso no modelo original, vamos adicionar também um botão

00:02:39

Ok, legal

00:02:40

Vamos deixar o espaço horizontal

00:02:41

Este país ocupará o cabeçalho em largura total

00:02:44

Poderíamos torná-lo menos largo e, por exemplo, centralizá-lo

00:02:47

Mas vamos deixar na largura total

00:02:49

E então vamos adicionar uma animação legal ao texto para que ele apareça gradualmente no topo quando os usuários visitarem a página.

00:02:55

Muito legal

00:02:56

Agora podemos definir este widget e começar a adicionar imagens de fundo

00:02:59

Escolhendo-os na biblioteca de mídia, você tem acesso gratuito a

00:03:03

Vamos escolher uma imagem na categoria de computador como esta

00:03:07

Assim que salvamos, você verá na pré-visualização que ele é usado como plano de fundo para o cabeçalho

00:03:12

Vamos verificar na página de dispositivos, na página de visualização, como nosso site está indo

00:03:16

Legal

00:03:17

Mas o botão não está alinhado como queremos

00:03:19

Ok, então vamos voltar ao editor do site

00:03:21

E vamos mudar o alinhamento do botão

00:03:23

Isso se aplica apenas ao desktop, no celular, todos os botões são exibidos em bloco por padrão

00:03:30

Ok, melhor, mas ainda tem uma coisa

00:03:32

Precisamos deixar o cabeçalho um pouco mais alto no desktop para replicar mais de perto o modelo original

00:03:38

Estamos nos inspirando em

00:03:41

E então vamos voltar ao criador do site e vamos mudar a altura do cabeçalho para desktop

00:03:45

Deixaremos o do celular em tela cheia

00:03:49

Vamos salvar tudo isso e verificar novamente o resultado

00:03:51

Ok, lindo

00:03:53

Agora, só para você saber, poderíamos ter construído um controle deslizante semelhante ao que você vê na equipe do WordPress

00:03:57

Mas antes de tudo, nós realmente não gostamos disso

00:04:00

E em segundo lugar, queríamos criar algo rápido

00:04:02

Em qualquer caso, você encontrará tutoriais que explicarão como criar todos os tipos de slider na seção de ajuda da plataforma

00:04:08

Agora é hora de começar a adicionar mais conteúdo abaixo do cabeçalho principal

00:04:12

Usaremos as colunas do widget de texto

00:04:14

Então vamos adicioná-lo à página e clicar neste widget para editar seus detalhes e conteúdo

00:04:21

A primeira coisa que podemos fazer é adicionar um título e um subtítulo a esta seção

00:04:25

Podemos fazer isso inserindo o contexto que queremos nesses dois campos aqui e salvando-o

00:04:30

Agora podemos começar a adicionar colunas com texto a este widget

00:04:34

Uma maneira fácil de mostrar blocos de conteúdo com uma imagem ou um ícone em um formato de grade

00:04:38

Neste formulário aqui, podemos adicionar um título, um subtítulo se quisermos e então o texto real a ser mostrado nesta coluna

00:04:45

Também podemos adicionar uma ou mais imagens ou, como estamos fazendo agora, escolher um ícone da biblioteca gratuita de ícones que você pode usar

00:04:52

Ok, vamos salvar isso e ver como fica

00:04:54

Bom, digamos assim

00:04:56

Agora podemos voltar ao editor do site e adicionar mais algumas colunas

00:04:59

Vamos pular esse processo, pois é exatamente a mesma coisa que fizemos antes

00:05:04

E aqui estão eles

00:05:05

Nossas três colunas e texto com os ícones que selecionamos

00:05:10

Agora queremos adicionar outro elemento à página de um grande botão como uma chamada para ação logo abaixo dessas colunas de texto

00:05:17

Então vamos clicar novamente em adicionar widget e então vamos escolher o widget de botões

00:05:22

Ao abri-lo temos novamente uma lista, neste caso podemos criar um novo botão clicando no link aqui

00:05:28

Podemos especificar todas as opções que precisamos e queremos: o tipo de link, o link real, o texto mostrado no botão e assim por diante.

00:05:35

Ok, vamos salvar esta página e aqui está

00:05:38

Agora para completar o conteúdo desta página e replicar o mais fielmente possível a página inicial do tema de onde tiramos nossa inspiração, estamos perdendo a seção do blog

00:05:48

No momento, podemos criar isso usando um widget de lista e, em seguida, adicionar a cada processo uma ferramenta de item desta lista

00:05:54

Então, vamos voltar para nossa lista de widgets na página inicial e clicar novamente no botão para adicionar um novo widget

00:05:59

Desta vez escolheremos o tipo de widget de lista e, ao adicioná-lo à página, podemos clicar nele para editar seu conteúdo e detalhes

00:06:07

Novamente, vamos dar a este widget um texto de introdução e salvá-lo

00:06:11

Agora podemos começar a adicionar itens a esta lista que é o post em nosso blog

00:06:17

Vamos clicar no botão adicionar um item à lista para que possamos editar os detalhes deste artigo

00:06:22

Neste formulário aqui podemos agora inserir o título, o subtítulo, o resumo que é o texto que aparece na lista como o que estamos criando agora, o corpo do artigo e se quisermos

00:06:31

queremos também podemos carregar uma ou mais imagens do nosso computador

00:06:35

Assim como estamos fazendo aqui especificando também como queremos alinhar essas imagens no desktop, no celular isso sempre é mostrado acima do corpo principal do item da lista

00:06:44

Observe também que se você adicionar mais de uma imagem, este sistema criará automaticamente um controle deslizante

00:06:52

Ok, legal, nós salvamos, então vamos dar uma olhada no site

00:06:56

Aqui está o post que acabamos de publicar com a imagem que carregamos e o resumo que escrevemos

00:07:00

Agora vamos finalizar rapidamente este site de exemplo que usaremos como base para nosso novo modelo, adicionando uma nova página

00:07:08

Vamos voltar para a lista de páginas e então adicionar uma nova, por exemplo, sobre nós com um cabeçalho e um bloco de conteúdo

00:07:14

O processo para personalizar e criar este widget é o mesmo que vimos antes, então vamos pular direto para a página finalizada aqui

00:07:23

Você vê que no menu de navegação temos uma nova página e se clicarmos neste link a abrimos com seu cabeçalho vermelho, seu bloco de conteúdo e controle deslizante de imagens

00:07:32

Muito bem, agora terminamos de adicionar conteúdo ao site que transformaremos em um modelo, então é hora de personalizar seu estilo e aparência.

00:07:41

Para fazer isso, precisamos clicar nesta guia de estilo no criador do site

00:07:45

Como você pode ver, há algumas coisas que você pode fazer aqui, começando por alterar o tema geral ou personalizar as fontes e cores de certos elementos do site, como cabeçalhos ou parágrafos.

00:07:57

Embora essas personalizações sejam úteis quando você não conhece CSS ou apenas deseja adicionar uma alteração rápida a um site, já que estamos criando um modelo e um tema, precisamos ir um pouco mais fundo.

00:08:06

mais profundo que é adicionar algum CSS real nesta seção aqui

00:08:11

A maneira como o sistema funciona é que você pode escrever todo o código CSS que quiser nesta caixa e ele será aplicado a este site, permitindo que você personalize a aparência dele em um

00:08:19

maneira totalmente flexível

00:08:21

Mas como você sabe qual CSS você precisa adicionar? Boa pergunta

00:08:25

Para tornar as coisas o mais fáceis possível, criamos uma folha de estilo esqueleto que é um conjunto de identificadores vazios que cobrem mais ou menos todos os elementos das páginas que você cria com a plataforma

00:08:35

e que você pode preencher rapidamente com as regras CSS que desejar

00:08:39

Para importar esta folha de estilo vazia pronta, você pode clicar neste botão aqui e aqui ela está pronta para ser preenchida e personalizada com as regras CSS que você deseja para este site

00:08:49

Para começar a escrever as definições de regras e estilos, vamos voltar ao tema original do qual estamos nos inspirando e, primeiro, vamos ver qual fonte ele está usando.

00:09:00

Podemos inspecionar qualquer elemento agora, observe que isso é algo muito útil e importante aqui, a ferramenta de inspeção que você tem no Chrome e no Firefox e recomendamos fortemente que você use um desses dois navegadores

00:09:11

e suas ferramentas de desenvolvimento web

00:09:13

De qualquer forma, estávamos dizendo que, ao inspecionar um elemento, podemos obter a fonte que eles estão usando aqui, aqui está aberto -sens, agora podemos ir ao Google Fonts para pesquisar essa fonte e

00:09:22

use-o em nosso estilo usando o método de importação e, em seguida, adicionando a família de fontes a esta regra aqui que controla todo o corpo e tudo dentro dele

00:09:31

Ok, vamos salvar nosso CSS e, como você pode ver, a fonte mudou do padrão que tínhamos antes para abrir -sens, que acabamos de incluir do Google Fonts.

00:09:42

O esqueleto CSS é organizado em ordem, começando pelas regras mais gerais até as mais granulares e específicas.

00:09:49

Uma das primeiras coisas que podemos controlar são os títulos principais e quaisquer títulos específicos no cabeçalho, por exemplo, o h1 que vemos aqui

00:09:57

Para alterar a aparência, podemos usar o conteúdo do cabeçalho e a regra CSS h1

00:10:03

Vamos adicionar alguns estilos aqui e salvar para ver como fica

00:10:08

Ok, quase lá no celular, vamos verificar a versão para desktop, nenhum núcleo e o fundo estão ok, mas a largura deste elemento está errada

00:10:16

Então, vamos voltar à nossa definição CSS e corrigi-la

00:10:19

Podemos adicionar uma regra de largura máxima, por exemplo, para 100 pixels e economizar um ganho, vamos novamente ao site, então sim, muito melhor agora

00:10:28

Agora podemos alterar os subtítulos h2 aqui, como você pode ver, voltando para a caixa CSS personalizada, não temos uma regra predefinida para este elemento, tudo o que precisamos fazer é copiar o h1

00:10:39

regra como mudança leve substituindo h1 por h2

00:10:44

Agora podemos adicionar as regras que queremos aqui para fazer também este elemento da página parecer o mais próximo possível do modelo que escolhemos, por exemplo, adicionando um preenchimento e uma cor de fundo com

00:10:53

alguma opacidade e assim por diante

00:10:55

Como de costume, vamos salvar e verificar o resultado

00:10:58

Não é ruim, mas provavelmente precisa reduzir um pouco o tamanho da fonte

00:11:02

Ok, então vamos voltar ao editor CSS e mudar isso para uma fonte um pouco menor, por exemplo, 15 pixels em vez de 20

00:11:10

Vamos verificar isso agora

00:11:12

Sim, muito melhor agora

00:11:15

Uma observação importante antes de prosseguirmos

00:11:17

Um dos aspectos mais poderosos de toda essa plataforma é ser mobile first e adaptável ao desktop, o que significa que seu site ficará ótimo em smartphones, computadores de mesa e telas maiores.

00:11:28

Para lhe dar ainda mais controle e usar esse recurso da melhor forma possível, você pode e deve usar consultas de mídia

00:11:33

no seu CSS

00:11:34

Já preparamos alguns para você, por exemplo aqui, onde você pode alterar a aparência dos títulos principais no desktop e no celular

00:11:42

Ok, tendo tocado brevemente na consulta da mídia

00:11:44

tópico agora terminamos com esses dois elementos e podemos abordar botões e links

00:11:49

Queremos usar exatamente a cor vermelha que está sendo usada no tema original e, portanto, novamente podemos usar as ferramentas de inspeção no Chrome e no Firefox para obter o valor acidental para esta cor

00:12:00

Aqui está tudo o que precisamos fazer é copiar e colar aqui para links e aqui para botões, lembrando que os botões por padrão também têm uma borda, então precisamos usar a cor

00:12:09

também para a regra de cor da borda

00:12:12

Como você pode notar, os botões no tema original também têm uma sombra ou algum tipo de borda inferior ou algo assim

00:12:19

Vamos inspecionar este botão então e aqui está, vamos copiar e colar diretamente esta regra de sombra da caixa como esta

00:12:27

Tudo bem, vamos salvar agora e vamos ver como os botões ficam

00:12:31

Hmm botão fechar sem charuto

00:12:33

Precisamos brincar um pouco com o preenchimento e talvez forçar também a variação do texto em maiúsculas

00:12:37

Ok, então vamos voltar ao editor CSS e adicionar mais preenchimento lateral à variação do texto novamente, vamos salvar e pronto, ok, agora este botão parece exatamente como queríamos.

00:12:49

Falando em botões, agora podemos personalizar este botão aqui mesmo quando adicionamos um único botão em um widget de botões, o sistema o trata automaticamente como um bloco de exibição e, portanto, podemos personalizar a maneira como ele

00:13:00

parece diferente de como fazemos para o resto dos botões

00:13:03

Você pode ver o código CSS aqui e, por exemplo, podemos torná-lo maior e centralizado com o truque de margem automática e com um peso fixo

00:13:13

Ah, aí está muito melhor agora, não

00:13:16

Ok, descendo em nosso esqueleto CSS e, na verdade, subindo no site, agora podemos personalizar a aparência do cabeçalho superior e da barra de navegação

00:13:24

Como você pode ver aqui, o modelo que estamos usando tem uma barra de navegação branca com mais preenchimento do que o que temos atualmente e estamos prestes a consertar isso

00:13:32

O identificador CSS que podemos usar para controlar como a barra de navegação aparece no desktop e no celular é a navegação principal e, como você pode ver aqui, adicionamos algum CSS para defini-la.

00:13:43

fundo e preenchimento

00:13:45

A barra de navegação é o elemento que mais difere entre dispositivos móveis e desktops e, portanto, é onde as consultas de mídia são realizadas.

00:13:52

são amplamente utilizados

00:13:54

Aqui você vê a parte para gerenciar a versão desktop da barra de navegação, em particular definindo o peso da cor dos menus, por exemplo, vamos definir esses valores e vamos para o tema original para

00:14:04

veja se há algo especial que queremos que o meu carregue

00:14:06

Ah, sim, parece que o espaçamento entre letras é diferente e então nós apenas copiamos nossa regra em nosso CSS aqui

00:14:15

Vamos salvar isso e aí está, os menus na área de trabalho parecem muito semelhantes ao modelo que estamos replicando, só precisamos mudar a aparência mental ativa agora e fazemos isso indo

00:14:25

de volta ao editor CSS e alterando a regra para links ativos da barra de navegação aqui queremos remover o ótimo fundo e adicionar algum outro estilo para identificar o menu atual, por exemplo, mostrando-o

00:14:38

sublinhado

00:14:39

Ok, vamos salvar isso novamente e recarregar nosso site para desktop. Sim, agora temos nossos menus principais para carregar exatamente como queríamos.

00:14:48

Precisamos passar agora para a navegação móvel do site e tudo o que temos a fazer é rolar um pouco mais para baixo na caixa de regras CSS editando as regras para a barra superior

00:14:57

e botões de navegação no celular

00:15:01

As duas principais coisas que podemos fazer aqui são mudar a aparência dos botões, neste caso temos apenas o botão de menu, mas podemos ter o carrinho de compras, login, pesquisa e outros botões e também mudar

00:15:11

o estilo do menu que desliza para baixo quando clicamos no botão

00:15:15

Então, primeiro vamos escolher os botões

00:15:17

Aqui podemos remover a sombra que temos para todos os botões, mudar a cor e o fundo, não esqueça de mudar também a cor da borda e pronto o botão agora está com esse estilo que queríamos

00:15:28

Para alterar então o estilo do menu suspenso e dos itens que podemos usar nesta regra CSS aqui e, por exemplo, podemos definir o fundo como branco

00:15:37

Ok, ótimo, eu sei que você está se divertindo e agora poderíamos continuar brincando com o CSS, mudando todos os outros elementos deste site, mas vamos parar por aqui por dois motivos

00:15:47

Agora você entendeu o conceito, tudo o que você precisa fazer é editar o conteúdo desta caixa CSS aqui e ver imediatamente como essas alterações afetam seu site.

00:15:56

Este personagem em CSS deve fazer um bom trabalho em dar a você uma dica de todas as mudanças possíveis que você pode fazer e, acima de tudo, você tem a ferramenta mágica de inspeção, basta inspecionar um elemento que você

00:16:06

quer mudar, copie sua regra no CSS e personalize como quiser

00:16:12

É simples assim

00:16:17

Ok, agora que terminamos de mudar o estilo do nosso site, podemos ver rapidamente como transformar este site em um tema e um modelo que você e seus clientes podem usar ao criar

00:16:27

um novo site ou mudar o estilo de um existente

00:16:30

Mas antes de prosseguir, apenas um segundo de teoria para entender rapidamente do que estamos falando

00:16:36

Em primeiro lugar, um site é composto de conteúdo, páginas, texto, imagens, vídeos, manchetes e assim por diante e estilo

00:16:46

Estamos falando aqui apenas sobre o estilo, ou seja, mudanças que afetam a aparência de um site, mas não seu conteúdo.

00:16:53

Para melhorar ainda mais esse conceito, você pode tentar alterar o tema de um site na aba de estilo e notará que, embora as cores, fontes e botões mudem, o conteúdo real é sempre o mesmo.

00:17:06

Um tema é o CSS que define a aparência de um site

00:17:11

Nos últimos 15 minutos, editamos o CSS de um site, essencialmente criando um novo tema

00:17:17

Quando você seleciona um tema na seção de estilo do criador de sites, você está basicamente aplicando a esse site um conjunto predefinido de regras CSS

00:17:26

Finalmente, um modelo é uma combinação de conteúdo e estilo, um site pronto, um site completo que você e seus clientes podem usar para começar com algo pré-construído e um tema que é um CSS predefinido

00:17:47

Ok, agora que você entendeu esse conceito, faremos o seguinte

00:17:50

Obtenha o CSS que escrevemos e transforme-o em um tema para que ele possa ser reutilizado na seção de estilo do criador do site

00:17:58

Aplique esse tema ao site que estamos construindo e transforme esse site, que é lembrar a combinação de conteúdo e estilo em um modelo para que você e seus clientes possam usá-lo ao criar

00:18:11

um novo site

00:18:13

Ok, pronto, vamos lá

00:18:15

A primeira coisa que precisamos fazer é voltar para a página inicial do site e clicar em temas

00:18:21

Aqui clicamos em criar um novo tema e copiamos e colamos nesta caixa aqui o CSS que criamos para o site que estamos trabalhando assim

00:18:32

Em seguida, damos um nome a esse novo tema, selecionamos o site de demonstração para esse tema e carregamos uma captura de tela, geralmente uma captura de tela da visualização do formulário e a salvamos

00:18:45

Então, a partir de agora, este novo tema estará disponível na seção de temas da guia de estilo no criador do site

00:18:52

Agora é hora de criar um modelo que é basicamente um site reutilizável ao qual um tema foi aplicado

00:18:59

Então vamos voltar ao painel, clicar em modelos e depois em criar um novo modelo

00:19:05

A primeira coisa que precisamos fazer aqui é selecionar neste menu suspenso o site que queremos transformar em um modelo

00:19:10

É tão simples quanto isso, uma vez que você tenha escolhido o site que queremos transformar em um modelo, podemos dar-lhe um nome, escolher algumas tags e adicioná-lo a uma ou mais categorias e

00:19:20

finalmente carregue a imagem ou captura de tela que queremos mostrar na lista de modelos no assistente do construtor de sites e isso é tudo se nós ou nossos clientes começarmos a criar um novo site e escolhermos

00:19:32

use o assistente veremos o novo modelo que acabamos de criar na lista aqui e poderemos usá-lo como um site pronto, assim como todos os outros sites e

00:19:42

lembre-se de que somente você e seus clientes verão este novo modelo

00:19:47

Uau, isso foi longo, mas espero que tudo tenha ficado claro e que agora você tenha uma ideia melhor de como usar o criador de sites e como criar novos e lindos temas e modelos com

00:19:57

isto

00:19:58

Obrigado por assistir e tchau tchau