MobiFirst WL Template Creation Training_720p.mp4

00:00:07

Ok, legal

00:00:09

Então, sim, o gerenciamento de modelos e temas

00:00:15

Em primeiro lugar, esta é a interface de marca branca usual que temos

00:00:21

Ok, esta é a interface de marca branca usual

00:00:27

Então estamos falando de temas e modelos em sites para dispositivos móveis e desktop, ok? Então clicamos aqui e como você vê, temos três, isso obviamente dá acesso aos principais sites e tudo isso

00:00:43

Então, para orientar a gestão e criação de sites

00:00:45

Bom, é sobre isso que falaremos hoje

00:00:48

Agora, na verdade, eles são um pouco para trás no sentido de que começamos com temas e, na verdade, começamos com a diferença em nossa plataforma entre temas e modelos, ok? Então, um tema é basicamente um

00:01:05

CSS

00:01:08

Um tema é basicamente um CSS que nos permite personalizar a aparência de um site

00:01:16

Então vamos fazer algo rápido e muito fácil aqui

00:01:23

Então, D, ok, agora este é bem personalizado

00:01:29

Então vamos fazer isso, por exemplo

00:01:30

Certo, então como você sabe, na seção de estilo de cada site, podemos adicionar e inserir algum CSS personalizado, certo? Então aqui, podemos adicionar todo o CSS que quisermos, até mesmo importando o modelo base, certo?

00:01:49

Então se clicarmos aqui, importamos o modelo base

00:01:54

Então, o que é basicamente uma folha CSS vazia

00:01:59

Agora podemos então sentir com definição

00:02:01

Então, por exemplo, aqui o H1 é basicamente o título

00:02:05

Então, por exemplo, vamos fazer isso, vamos fazer uma cor vermelha, certo? Isso é algum, isso é CSS

00:02:12

Então dizemos que o H1 precisa ter uma cor vermelha

00:02:16

Então, quando salvamos o CSS, agora isso é forçado

00:02:22

Então vamos fazer isso, vamos fazer algo assim

00:02:26

Ok, então temos isso, mas acho que me fizeram definir apenas como branco

00:02:33

Então vamos fazer, por exemplo, em H2

00:02:38

Ok, de qualquer forma, aqui ou podemos mudar o, podemos mudar a cor, podemos mudar o tamanho da fonte, por exemplo, e tudo isso, certo? Então podemos fazer, podemos fazer qualquer personalização CSS aqui

00:02:58

Agora um tema, então a maneira como definimos, ok, você vê aqui que as regras que aplicamos, definimos, na verdade são aplicadas aqui

00:03:08

Então você vê que o H1 ficou vermelho e tudo mais

00:03:11

Agora, esse CSS, como podemos ver aqui, define como um site basicamente se parece, certo? Porque com CSS, podemos definir muito mais coisas

00:03:22

Podemos definir botões, tamanho da fonte, cores da fonte, ícones, tamanhos, cores, layouts e tudo isso

00:03:31

Agora um tema, então é basicamente um CSS que salvamos, ok? Então, por exemplo, agora se formos aqui, e por exemplo, clicarmos no novo, no gráfico, então um dos temas mais novos

00:03:47

que criamos, você vê que isso é basicamente um conjunto de regras CSS, certo? Então, por exemplo, aqui dizemos que o H1 leva ao negrito, o H1 no cabeçalho leva a pessoas,

00:04:02

então todo esse tipo de coisa, certo? Então um tema é um conjunto de regras CSS que definem como um site se parece, ok? E como você sabe, podemos aplicar qualquer tema que escolhermos aqui,

00:04:16

qualquer coisa para qualquer site, e o conteúdo do site não mudará, mas o layout será

00:04:24

Então, por exemplo, agora temos aqui este, vamos escolher este, por exemplo, e um, assim que o escolhemos, vemos uma prévia agora, isso não é muito diferente do outro,

00:04:39

e isso é então por aqui

00:04:41

Por exemplo, poderíamos usar este, para podermos aplicar, e depois salvá-lo, e você vê que agora o conteúdo é sempre o mesmo, você vê que o conteúdo é o mesmo, enquanto o

00:04:56

layout e o CSS ou a aparência mudou, então você vê que os títulos agora são vermelhos, com essa fonte, com a sombra e tudo mais, então podemos aplicar todas essas coisas

00:05:09

Nesta seção aqui, então gerenciamos temas, podemos criar novos temas, agora não sei como, novamente, quão útil neste momento isso pode ser, mas se no futuro você se tornar

00:05:23

um ninja CSS, ou você vai contratar alguém que pode criar temas CSS para você, você usa esta seção aqui para criar um novo tema, então você dá um nome a ele, você opcionalmente escolhe uma demonstração

00:05:37

site se você quiser, então aqui você insere o CSS real e então aqui você carrega uma imagem de visualização

00:05:44

Normalmente, esta imagem aqui é a prévia de um telefone, do que você vê na prévia do telefone, porque será mostrado aqui nesta lista, então você vê que parece bom se for

00:05:57

mostrado dessa forma, ok, então tudo que espero que esteja claro com temas, o que é um template? Um template é um tema mais conteúdo, ok, então é um site pronto que tem um tema aplicado a ele

00:06:19

e alguns conteúdos prontos, ok, então basicamente se clicarmos em um desses modelos, por exemplo, este Superburger, você vê aqui que temos um site, um site completo, que podemos usar como

00:06:35

um modelo, certo, que as pessoas podem importar e usar como ponto de partida para seu site, então é conteúdo com um cabeçalho, uma lista de produtos, neste caso, algum conteúdo e um tema pronto

00:06:53

estão prontos selecionados, então a maneira de criar um novo modelo é selecionando, agora este é importante, e veremos sobre modelos importantes mais tarde, mas para criar um novo modelo, você clica

00:07:07

em criar um novo modelo, e então tudo o que você tem que fazer, basicamente, você precisa criar um site pessoa, e então você diz, e então você diz, ok, escolha, selecione um desses sites e transforme

00:07:25

em um modelo, certo, então vamos dar um exemplo, agora vamos dizer que este, ok, Shannon Scaldi -Demo, queremos transformar este site em um modelo, ok, então o que fazemos é aqui, nós

00:07:44

selecione este, ok, então se você quiser, você pode editá-lo, nós damos um nome a ele, e aqui devemos sempre carregar dois arquivos, duas imagens, uma é a mesma que usamos para

00:08:00

o tema, então a pré-visualização do telefone, basicamente, e por exemplo, podemos escolher este, temas, e podemos apenas, vamos escolher um, e então obviamente, removeremos o modelo literalmente, e a pré-visualização é

00:08:18

geralmente aquele com o telefone e o computador de mesa ao mesmo tempo, então, por exemplo, este, ok, você vê, então podemos adicionar tags, você vê hambúrguer, completo, elegante, qualquer coisa, como eu não sei, restaurante,

00:08:39

qualquer tag que ajude as pessoas a encontrar este modelo na lista, e então escolhemos a categoria, queremos colocar este modelo, e por exemplo, completo, e então aqui colocamos, nós vimos, nós

00:08:52

vi, fizemos isso, então podemos usar o tema, então vamos esquecer este, e então salvamos, e isso é tudo o que temos que fazer

00:09:01

Agora, em primeiro lugar, este site não estará mais visível, no, veja bem, você não o verá mais, porque agora ele se tornou um modelo, certo, e quando criamos um novo site, ok, então

00:09:19

você vê que temos o modelo de demonstração aqui, que acabamos de criar, tudo o que precisamos fazer é clicar nele, aqui vemos a prévia do site, agora esta é uma única página

00:09:31

modelo, então se você notar, isso é exato, agora está muito feio, então vamos removê-lo imediatamente, mas é isso que realmente configuramos como um modelo, e tudo o que temos que fazer é

00:09:43

clique em escolher este modelo e criar site, como fazemos, precisamos dar um nome a ele, site de demonstração do modelo, certo, ok, e agora estamos editando este site que criamos a partir

00:09:57

este modelo, ok, esse é realmente todo o risco, você sabe, sobre criar um modelo, agora obviamente, como você sabe, nós, como proprietários da plataforma, lançamos periodicamente outros modelos, novos modelos, agora, antes de tudo, vamos

00:10:18

vá remover este modelo da lista, agora, ok, vamos deixá-lo aqui, então vou mostrar o que está acontecendo, agora vou fazer login como revendedor, ok, Scotty, você tem algum revendedor

00:10:34

contas aqui que eu posso usar para que eu possa fazer login? Sim, Scotty planeja EO, qualquer coisa que diga Scotty

00:10:43

Ok, este, ok, bem, vamos fazer isso aqui, ok, de qualquer forma, então na sua plataforma de marca branca, então é quando você faz login como uma plataforma de marca branca, você vê que às vezes há alguns

00:10:56

alertas aqui? Um dos alertas é que há 16 novos modelos para importar, porque isso significa que criamos alguns novos modelos, e você pode importá-los para sua lista, certo, então tudo o que você tem

00:11:11

o que você precisa fazer é clicar aqui, e então aqui você vê todos os modelos que você pode importar, ok, e então todos eles são selecionados, mas você pode desmarcar alguns, talvez você não queira importar isso

00:11:24

um em sua plataforma, e então tudo o que você precisa fazer é clicar em importar esses modelos, e eles serão imediatamente adicionados à sua lista de modelos, a única diferença é que a única diferença entre

00:11:41

um modelo que você cria e um que você importa é que se, por exemplo, este que você vê, for um modelo importado, você não pode editar o lado correspondente, então você não pode editá-lo obviamente, ele é importado como

00:11:54

é, e você não pode alterá-lo, ok, mas a qualquer momento você pode criar qualquer novo modelo novamente, configurando um tema ou criando um site, basicamente tudo o que você precisa fazer é criar um

00:12:09

site, e então aqui em modelos você apenas diz, ok, eu quero criar um novo modelo, ok, e então você apenas seleciona o site que você quer transformar em um modelo, adiciona um nome, o

00:12:24

imagens, os cartões, as categorias, tudo isso depende de você, obviamente, e é isso

00:12:33

E Colin, já que você, eu acho que Scotty está na equipe, estamos atualizando todas as imagens para o modelo, correto, sim, mas em qualquer caso, se você quiser, você pode atualizar a qualquer momento o

00:12:52

imagem de um modelo, então se não estiver certo, se não se encaixar, como seu site ou tudo isso, você pode mudar isso, você não pode mudar o site em si, mas você pode mudar as imagens que irão

00:13:07

serão mostradas aos seus usuários, e também as imagens que serão mostradas, como na lista de modelos quando você usa isso, no widget do site, no seu site

00:13:20

Acho que é basicamente tudo o que eu tinha a dizer sobre modelos, a menos que haja mais alguma coisa, Colin, talvez se você tiver alguma dúvida adicional

00:13:34

ou Scotty, se você notou, eu pulei algumas partes

00:13:39

Não, isto é, você testa um pouco de CSS, o que é legal, e é basicamente isso que eu faço o dia todo, então temos alguns que vão aparecer nas imagens

00:13:53

nele para colocá-los, mas há muita coisa vindo

00:13:58

Mas é isso mesmo

00:14:00

A propósito, Colin e qualquer outro treinamento sobre isso, eu também conheço muito bem esse assunto, então posso ajudar com tudo isso também, então é isso.

00:14:11

Então não tem nada aí

00:14:13

Legal