Um guia completo para criar sites modernos com o Drupal 8 e Bootstrap 4

1. Uma introdução ao curso: bem-vindo a este curso sobre a construção de sites modernos usando Drew Pilate e Bootstrap para Ao longo do caminho, vamos mergulhar em Drew pols, tipo de conteúdo, sistema, visão, sistema, bloco Sistema, e muito mais vai entrar no código e começar a tema frascos de galho. Analisaremos o CSS e amarraremos tudo junto com o inspetor da Web do Google Chrome. Mas primeiro, deixe-me apresentar-me e contar-lhe um pouco sobre o meu passado. Meu nome é um nove, e serei seu instrutor ao longo deste curso. Se você não pode dizer pela foto. Eu sou um desenvolvedor e designer. Considero-me também um aprendiz ao longo da vida, e sinto que a aprendizagem ao longo da vida é uma competência que todos os que entram no campo do design e do desenvolvimento devem possuir. Eu tenho um bacharelado em Ciências Web e mídia interativa, que basicamente significa que eu fiz minha graduação em design, desenvolvimento e marketing para a Web. Antes de começar a ensinar online, eu tinha uma carreira de cinco anos em droop, allow e ensino superior. Durante todo o meu tempo no ensino superior, estive envolvido em mais de 50 projetos de web design e desenvolvimento de alto impacto e tive um breve período na pós-graduação onde estava estudando para obter um mestrado em educação. Felizmente, não consegui terminar isso. No entanto, eu ainda tenho as habilidades, e eu sinto que meu diploma de bacharel também. Aziz, minha experiência pesquisando e trabalhando e ensino superior me torna exclusivamente qualificado para ensinar desenvolvimento Web online. Sem mais delongas, vamos mergulhar e começar. 2. Recursos de projetos: antes de começarmos a aprender sobre Drew pool e Bootstrap para eu queria mostrar-lhe onde você pode baixar os arquivos do curso para completar este vídeo. Então, se você estiver nesta página de aprendizado aqui e descer até o final, certifique-se de que você está em projetos e recursos é, e você verá um arquivo zip do site chamado Elaine. Dentro desse arquivo zip será literalmente todo o conteúdo e tudo o que você precisa. Teoh concluir este curso uma etapa opcional, e uma outra coisa que você pode precisar que não é conteúdo é um host da Web. Então, eu realmente tenho um vídeo de compartilhamento de habilidades sobre como configurar hospedagem e um ambiente de desenvolvedor com terreno local. Então, se você vai para compartilhamento de habilidades e digite por que você deve usar Rupel uma introdução, você vai encontrar este vídeo aqui. E então eu só queria chamar a sua atenção para isso. Caso você não tenha um host da Web, você está começando completamente do zero. Isso vai em detalhes sobre como eu construí o ambiente de desenvolvedor que estou usando para construir este site que vamos passar neste curso, e há links praticamente em todos os lugares para começar a citar terreno. Tudo bem, obrigado. E vejo-te no próximo vídeo. 3. Criando nosso ambiente de desenvolvimento: Olá. Bem-vindos de volta a este vídeo. Vamos rever as etapas que você precisará seguir para configurar seu ambiente de desenvolvimento . Há muitas maneiras de configurar um ambiente de desenvolvimento, e vou rever algumas delas que eu recomendo neste vídeo. Também vou mostrar-lhe o meu ambiente de desenvolvimento para este curso. Você é bem-vindo para segui-lo, mas certamente não precisa. Isto é apenas uma espécie de, hum, para ter certeza de que há algo lá. Este não é um curso sobre desenvolvimento local ou configuração em um ambiente de desenvolvimento. É um curso na piscina Drew. Mas eu queria ter certeza de que eu te dei algo. Primeiro, você precisará de um editor de texto ou de um ambiente de desenvolvimento independente. Meu recomendado I D E. E o que eu vou estar usando este curso é código de estúdio visual ou código V s. A próxima coisa que você precisará é de um terminal ou de uma linha de comando. Há uma linha de comando. Chama-se Terminal On Mac. Isso vem padrão, E se suas próprias janelas você também terá linha de comando, No entanto, esta é uma opção melhor. Na minha opinião, isso é hiper, e, hum, ele vem com um monte de opções para tornar este terminal no que você quiser que ele seja. O mesmo se aplica ao código do Visual Studio, para que você possa optar por ficar hiperativo. Há outras opções, como eu termo que são ótimas, mas este é o que eu uso. E a próxima ferramenta que você vai precisar é a parte deste vídeo que mais varia. E isso é algo para fazer seu local ou seu desenvolvimento em. Então, obviamente, você vai escrever código sobre isso. No entanto, muito do que cair Eliza, muito do que estaremos fazendo é através de uma interface web. Então, para mim, o que eu uso é terreno local e local. O Ground tem um instalador de um clique que vem com um domínio de teste ou um euro de teste. Eu tenho um curso inteiro sobre como configurar isso. Aqui, é parte de habilidades. Ah, é o número três. Isto vai acabar. Hum, o que nós não queremos que isso vá sobre como instalar usando compartilhamento de habilidades. Desculpe-me? Como isso vai passar por cima de como dio instalado Rupel usando o terreno do site e há também um vídeo aqui configurando-se para o sucesso. Isso vai além de mais dessas opções, então sim, definitivamente considere verificar isso. Se você não quiser ir com terreno, tudo bem. Você tem uma tonelada de opções que tocam rapidamente aqui se você quiser seguir um caminho diferente . Hum, aqui, eu vou ter certeza. Teoh, adicione isso na descrição. Este é um artigo de Low Baht, pouco sobre o qual é realmente uma loja de piscina classe A Drew. Eles fazem um monte de bom trabalho, e este é um arredondamento bastante abrangente de todas as diferentes maneiras que você pode usar atraiu pessoas localmente gratuitamente em sua máquina. Então eu recomendo vivamente verificar isso. Eu usei muitas das opções aqui. Muitos desses ar, opções mais avançadas. Este é um curso sobre deixar qualquer um pronto para usar Rupel. Mas isto é aqui. Então você tem no caso de não querer pagar. Acho que é como o meu elo. Acho que custa US$3 por mês. Hum, vale a pena, porque eventualmente você vai ter Teoh hospedar seu site de qualquer maneira, e ciclone torna isso muito fácil Mas se você realmente não quer desembolsar qualquer dinheiro, eu entendo totalmente isso. E há toneladas de opções, certo? Então confira este artigo Lobato e, em seguida, confira também o desktop Acquia Dev, que é uma solução incrivelmente popular dentro da comunidade drible para desenvolvimento local . Eu não uso isso. Foi na minha organização anterior onde aprendi a usar o pessoal do Drew. Tive que aprender da maneira mais difícil com isso. Usei muitas máquinas virtuais, mas também tinha um serviço interno que fazia o local onde eu tinha, tipo,umagarota de teste em umservidor que possuía e gerenciava. Usei muitas máquinas virtuais, mas também tinha um serviço interno que fazia o local onde eu tinha, tipo, uma um Então eu só não é porque eu não gosto de Acquia Dev desktop. Eu só nunca tinha usado Eu só não tinha que usá-lo. Então isso é muito popular para baixar, e tenho certeza que há muita documentação realmente boa aqui para começar. Se você gostaria de seguir esta rota uma vez que você tem o código s instalado, você precisará Teoh configurar uma extensão. Então, se você cair, você pode estar aqui. Se você descer até o ícone de extensões e digitar Sftp. Você pode vê-la. Eu já o tenho. Você quer ir em frente e instalar que você fez isso? Você vai querer Teoh fazer comando shift P e digite sftp config e você vai colocar seus efs Desculpe-me e você vai colocar suas informações FTP neste arquivo de configuração. Eu não vou abri-lo porque ele mostra suas informações em texto simples. E isso não seria seguro para mim fazer isso. Então, sim, então você definitivamente vai querer Teoh. Certifique-se de que você aperta o comando shift P type em sftp config. Configure suas credenciais sftp e, em seguida, o que você será capaz de fazer é realmente usado sftp também. Mostrar o servidor de desenvolvimento que você está usando. Desde que eu estou usando terra site, Eu tenho o meu sftp configurado para que ele é assim Ele está atingindo o droop vai diretório no meu servidor terra site E o que nos permite fazer é baixar qualquer arquivo tema que possamos precisar. Edite e, em seguida, quando apertamos, salve-o realmente carrega. Ok, Uma vez que você baixar todo o software necessário e obter que configurar, sinta-se livre para passar para o próximo vídeo e eu vou ver a sua 4. Instalando o Bootstrap 4 e temas de Bootstrap: todos os direitos. Bem-vindo de volta neste vídeo, vamos instalar o bootstrap quatro tema também irá instalar o tema admin add minimalista, e eu vou passar sobre o que isso significa. Mas primeiro, vamos em frente e definir a configuração básica do site algumas das informações básicas. Então, agora, se você está seguindo o meu curso anterior de compartilhamento de habilidades, um, um, eu defini isso apenas para algumas informações de teste. Então vamos mudar isso. Vamos construir uma padaria vegana chamada Elaine's. Então, se nós apenas clicar na configuração e ir para baixo para sites básicos, ist configurações sob sistema, vamos mudar o nome do site, também Elaine e vai fazer o slogan a melhor comida vegana. Obviamente defina seu e-mail e vamos em frente e salvar a configuração. Então, se voltarmos ao local, podem ver que temos o nome e o slogan definidos. Ótima. Em seguida, vamos dar uma olhada no tema de administração. Então, em Drew pull, você tem dois temas. Você tem um tema do site, que é o que você vê aqui. Este é o Bartek. Bartek é o tema padrão que envia pessoas retiradas, e você também tem um tema admin. Então, se fôssemos ir em frente e clicar no conteúdo. Você pode ver esta janela aqui. Este back-end é o tema da administração. Este é o tema de administração padrão que envia retirado, amigo. Então, se fôssemos navegar para estender a configuração todas essas janelas ou parte do tema admin Bem, eu acho que isso é bom, mas eu prefiro algo um pouco mais moderno. Então vamos instalar no meu que é, na minha opinião, na minha opinião, o melhor tema de administração disponível em triplo. E isso é adicionar mínimo. Então eu vou trazê-lo aqui para que você possa vê-lo que é encontrado no Projeto Slash adicionar tema mínimo . Você pode ver na página do projeto que este é comercializado como um tema moderno, e eu definitivamente posso atestar isso. Eu usei muito este tema neste vídeo. Vamos Teoh, use o método simples para instalar um tema. No entanto, no próximo vídeo, examinarei a instalação de módulos, que fornecerá mais de uma opção para instalar. Já que estamos apenas começando aqui, isso faz sentido que instalemos esse tipo de maneira básica, então vamos em frente e fazer isso. Então, na página do tema Minimal anúncio. Se você caminhar até a parte inferior da página onde ele diz downloads, você verá um número de versão. Isso muda com base nas atualizações de segurança Andrew People. Mas basicamente, por agora, o que precisamos é apenas o mais atual, e você tem duas opções de baixar o arquivo de tema. Você poderia usar um alcatrão ou você pode tirar o zíper. Na verdade, não vamos transferir fisicamente nada disto para a nossa máquina. Em vez disso, o que faremos é certo. Clique na guitarra e vá para baixo Teoh Copy Link endereço. E então, depois de ter feito isso, vamos pular para cair tudo no menu de aparência. Você pode ver todos os temas instalados que temos agora. O tema de administração é sete, que é o tema padrão. Vamos em frente e mudar que Teoh tinha o mínimo. Então, vamos clicar neste botão instalar novo tema, e em vez de carregar, vamos instalar a partir do seu URL. Então lembre-se, nós copiamos o endereço do link e vamos acelerar isso e vamos clicar em instalar. Fácil feito. Certo, então vamos para as páginas da administração, e nosso trabalho aqui ainda não terminou. Você pode ver que ainda estamos no tema padrão. Então, vamos clicar na aparência, e o que vamos fazer agora é encontrar no mínimo sob a opção temas desinstalados e clique em instalar. Legal. Você pode ver que isso foi feito aqui com esta janela de chamada para fora. Então, com ele instalado, ainda não terminamos. Temos mais uma coisa para Dio. Nós não vamos defini-lo como padrão porque isso iria definir o tema do site, a página inicial e todas as outras páginas no site para adicionar mínimo. O que, em vez disso, queremos é apenas ter certeza de que isso está nas janelas de administração. Então vamos descer Teoh tema administração aqui na parte inferior e vamos clicar. Adicione o mínimo. Verifique também se você usou o tema de administração ao editar, entrar em contato ou criar verificações de conteúdo. Vamos salvar essa configuração, e se tudo correr bem, você deve ver uma janela de administração muito melhorada. Então vamos clicar um pouco por aqui. Excelente. Eu acho que isso parece mais agradável do que o padrão, então vamos em frente e clique nas configurações mínimas de adicionar. E só para chamar a sua atenção, não vamos mudar nada disso, mas definitivamente há um monte de opções aqui. Então, com o anúncio mínimo tema admin definido, vamos em frente e instalar Bootstrapped quatro para que possamos fazer isso parecer um pouco mais moderno. Então vamos passar para drible trabalho filha e eu vou trazer isso para baixo novamente para que você possa ver o projeto URL barra bootstrapped quatro estavam usando este tema do projeto. Eu tive sucesso com ele neste curso, então eu estou feliz em recomendá-lo. Há um número de bootstrap quatro opções e bootstrap três opções dentro do ecossistema droop ALS um que eu usei antes e pode definitivamente recomendar é Barrio. Isso é muito bom se você estiver interessado em , entrar no SAS, que é uma linguagem de compilação de front-end para CSS. Infelizmente, isso é um pouco avançado demais para este curso. No entanto, este curso pode ser um bom passo em algo como Barrio. E, na verdade, se você queria entrar no SAS depois de usado depois de passar por este curso, este tema bootstrapped quatro tem uma opção para compilar SAS diretamente da interface do usuário, que é muito bom porque você não precisa ter um terminal para isso, sim. Se te perdi nisso, está tudo bem. Se não for, se for novo no lado técnico da web, tudo bem. Se não for, se for novo no lado técnico da web, Mas só para você saber, essa é uma opção aqui. Mas só para você saber, Certo, então vamos Teoh, use o mesmo método que usamos para instalar o tema de adição mínima. E quero chamar a sua atenção para isto. um Este éumprojeto que não está coberto pela política de segurança do drible. No entanto, minha regra geral com isso é como Maney downloads tem neste caso, há mais de 5000 downloads e quantos sites estão usando isso? Quase 750. Então, para mim, é o suficiente. Eu usei módulos que têm muito menos, hum, sites e uso sem qualquer problema. Outra coisa a ver são as questões aqui, hum, e como isso está indo. Se o tema ou módulo tem uma espécie de comunidade ativa aqui na seção de problemas, geralmente estou confortável em usá-lo. Esta é também uma janela muito útil. Se você se encontrar em uma situação difícil em que você não tem certeza do que está acontecendo no site, você sempre pode ir para o quadro de questões para qualquer tema ou módulo e fazer uma pergunta. Certo, então com tudo isso, vamos descer. Teoh os downloads e clique com o botão direito no arquivo Tar, clique em Copiar endereço Link e voltar para Drew pool. Você pode ver que ainda temos esse tema bárdico, e em um minuto vamos mudar isso. Droop para bootstrap para me desculpar. Então, vamos clicar na aparência e agora o que vamos fazer é clicar em instalar novo tema e vamos escolher instalar a partir de Ural novamente. Vamos colar e bater Instalar. Tudo bem, muito bom. Isso foi feito para voltar para as páginas de administração e para a página inicial. E mais uma vez o nosso trabalho não está feito. Ainda estamos no tema principal aqui, então vamos voltar à aparência e desta vez o que vamos dio. Ao contrário do tema mínimo de anúncio, podemos clicar em instalar e definir como padrão, então isso não só irá instalar o tema, mas também irá remover Bartek como o padrão e fazer bootstrapped o padrão. Tudo bem, então se tudo correr bem, podemos ir para a página inicial e teremos um site muito melhorado e faremos mais uma coisa antes de concluirmos este vídeo, prefiro um bar mais leve. Então, com este tema, há uma maneira muito fácil de fazer isso. O que é clique na aparência e ir para a opção de configurações, Muito parecido com o tema admin mínimo ed? Há uma tonelada de opções diferentes disponíveis neste bootstrap quatro tema. Por agora, vamos descer para pegar nossas opções. E vamos mudar sob o nosso tema. Vamos mudar a luz do dedo do pé. E vamos mudar o nab nosso fundo para luz também e bater salvar configuração. E se voltarmos para a página inicial, você pode ver que essa mudança foi feita. E eu prefiro que eu acho que isso parece legal. Por isso, espero que tenha achado isto claro, conciso e útil. Se assim for, eu definitivamente o verei no próximo vídeo onde aprenderemos alguns métodos para instalar módulos. Vejo-te então 5. Instalando módulos: Olá, todo mundo. Bem-vindos de volta a este vídeo, vamos cobrir o sistema de módulos em Drew. Puxe para o nosso site. Só precisamos de alguns módulos. No entanto, vou cobrir os dois métodos padrão para a instalação de módulos dentro de Drew Pilate. Então, se formos para ir ao Google e digitar Drew pessoas oito módulos, você vai ter ah, número de links apontando para Drew puxado para fora orig. Eu definitivamente recomendo Se você está curioso sobre como os módulos funcionam verificando esses links aqui, você pode ver que há um guia de instalação. Vou simplificar o sistema de módulos para que possamos começar imediatamente. Os módulos realmente são, para mim, intimamente associados com a loja IOS APS da Apple. Então você já ouviu a frase. Há um aplicativo para isso. Bem, Andrew Pool, há uma frase dentro da comunidade. Há um módulo para isso, e é verdade lá. Eu não sei. Acho que 400.000 módulos podemos checar aqui. O módulo se projeta. Com licença, 44 mil modelos. Hum, isso ainda é um pouco, mas na verdade, no núcleo do sistema de módulos ALS droop, existem duas peças. Um. Existem módulos de núcleo So Drew Paul Core. Podemos olhar para Drew Paul Core é o código que você baixa quando você decide construir um droop, um projeto para que você possa ver bem aqui que estamos no 8.8 ponto dois. E se você ler sobre isso, há membros da comunidade dentro da organização Droop Mut que mantiveram ativamente Drew Paul Core. Tudo bem, então há algumas partes do núcleo para cair Aled que você deve ter para fazer o sistema funcionar, e isso é simplesmente o que um módulo núcleo é. Então esse é o número um. Número dois. A outra parte do sistema de módulo droop ALS é contribuir módulos ou módulos contribuídos, e simplesmente o que é um membro da comunidade que não é uma parte da organização droop ALS desenhou pull dot org escreve um pedaço de código que se estende pool desenhado. Isso é um simples uma espinha ISS tanto como com a loja IOS App da Apple, eles são desenvolvedores. Utkan desenvolver um aplicativo IOS. Há desenvolvedores caídos, e qualquer um pode fazer isso porque ondula uma plataforma de código aberto, e não custa mais de $100 para participar do programa. Qualquer um com habilidades de codificação pode aprender como é um módulo de coda caída. Muitos dos módulos contribuídos tornaram-se pilares no ecossistema droop vontade. Um, por exemplo, aqui estão as ferramentas C de Merlin do Caos. Ele é uma espécie de lenda. Este módulo C Tools é uma dependência para provavelmente milhares de módulos, modo que é uma espécie de visão geral dos dois tipos diferentes de módulos. Outra coisa, no caso de você ser completamente novo, é que você não precisa baixar os módulos principais. Eu só gostaria de ser claro sobre isso se eu não estivesse na primeira parte. Então, se você baixar Rupel, baixe os módulos principais. O que você tem que baixar são os módulos de contribuição, qualquer módulo que você precisa para estender a funcionalidade típica do drible. Então, se voltarmos ao nosso site aqui, vamos dar uma olhada neste painel de módulos e começar a personalizar seu site em um grau mais alto. Então agora, sob a opção de menu estender, você pode ver todos os módulos principais que estão instalados e habilitados. Se estiver habilitado, ele terá uma marca azul. Se estiver instalado, mas não habilitado, ele aparecerá, mas não haverá, não será verificado. Então este é realmente o mecanismo que está fazendo seu site Drew pulso funcionar tanto como nós instalamos os temas admin e bootstrap. Podemos instalar módulos de uma maneira semelhante, então vamos olhar para esta barra de administração aqui, certo? Nós meio que nos familiarizamos um pouco com isso no último vídeo, mas eu notei que quando eu clico na estrutura, há uma tonelada de opções sob estrutura. Direito e ao longo do tempo, se eu estiver entrando no modo desenvolvedor, eu estou clicando nesses menus constantemente tendo que clicar na estrutura e, em seguida, clicar em tipos de conteúdo e, em seguida, clique em adicionar tipo de conteúdo que vai ficar tipo de árduo eventualmente. Felizmente, há um módulo para isso. Existe um modelo que torna este processo mais fácil. Por aqui, Drew Bill. Nós temos dribble dot org barra barra barra admin barra aqui mesmo, e nós vamos começar com o método básico de instalação que eu sinto que a maioria das pessoas usam quando eles começam drible pela primeira vez. Mas lamento não ter explicado que o que a barra de ferramentas de administração faz é expor todas essas opções que acabamos de falar em um menu de focalização. Então, em vez de ter que clicar clique clique clique. Posso passar o mouse sobre a estrutura, mouse sobre os tipos de conteúdo e, em seguida, clicar em adicionar em vez de ter que ir estrutura. Tipos de conteúdo adicionar tipo de conteúdo com a barra de ferramentas admin morre é ele expõe que assim você só tem que clicar uma vez, por isso é uma enorme economia de tempo. Assim, para nesta página você pode ver que há uma série de maneiras de instalar o módulo instalado assim como qualquer outro módulo. E vamos repassar esse método depois que eu mostrar o básico, porque acho que é importante ver os dois lados. Então, assim como instalamos os temas admin e bootstrap, vamos usar um tar aqui para instalar este módulo. Isso é certo. Clique e copie o endereço do link, volte sobre Drew pool e clique em, estender e, em seguida, pressione Instalar novo módulo e colar. Naquele link, nós apenas copiamos. Tudo vai bem. Ele vai ser instalado de volta para as páginas de administração, e há mais uma coisa que temos que fazer aqui, e que é que podemos digitá-lo, ou podemos apenas procurá-lo. Temos que verificar para instalar, então você também vai querer essas ferramentas extras. E uma vez que você tenha aqueles verificado tudo para ir para a parte inferior e clique em instalar. Está bem, Perfeito. E como podemos ver aqui, dois módulos foram ativados. E se passarmos o mouse sobre a estrutura, podemos ver que reduzimos três cliques para um. Então isso é muito poderoso. Então isso foi legal. Essa é uma maneira fácil de instalar um módulo. No entanto, há um problema. Há um problema em fazer isso, e essa é a ideia de dependências. Você pode ter me ouvido falar sobre isso há um segundo, então a dependência é simplesmente um pedaço de código que é necessário para fazer outro pedaço de código ser executado . Então, outro módulo de contribuição que vai precisar aqui é o módulo automático PATH. Então o que Path Auto faz é pegar um token neste caso, o título e qualquer parâmetro que você configurou e substitui esse tipo de string enigmática, esse alias enigmático. Então Path Auto é simplesmente apelidos para o seu mundo, tudo bem, É uma daquelas coisas que realmente não precisamos gastar muito tempo. Uma vez que você o configura , está feito. Mas você pode ver aqui Drew Pilatos requisitos. Então, para o trabalho do dedo do pé Path Auto. Você precisa ter token e ver as ferramentas instaladas. Então, o que acontece se descermos e usarmos o nosso método? Vamos copiar o endereço do link. Voltar para droop irá clicar em instalar novo módulo passeado em, mas nós apenas copiá-lo. Hit Install Muito legal volta. As páginas da administração Teoh se estendem e vamos descobrir que não estará sob o núcleo. Vamos encontrar o caminho Auto Cool. Bem, não podemos usá-lo. Não podemos. Não podemos checar direito? É porque quando instalamos o módulo usando esse método básico, ele literalmente só instalou Path auto. Ele não instalou as outras dependências. Lembre-se, C Tools e token, como descobrimos nesta página, são necessárias suas dependências. Então a maneira de contornar isso é instalar módulos usando composer composer é um gerenciador de pacotes PHP . Você não precisa saber, realmente, realmente, a teoria por trás do compositor além de ser um pedaço de software executado em seu servidor que permite que você saia e instale outros pacotes ou módulos. Então, a fim de usar composer e para instalar módulos a partir da linha de comando, você vai precisar de seu ambiente de desenvolvimento local configurado ou você vai precisar de um servidor para ssh em. Este não é um curso na linha de comando. Também não é um curso sobre ambientes de desenvolvimento, mas quero oferecer-lhe Away. Teoh, entre no seu servidor usando a linha de comando se você estiver usando o local ou outro serviço de hospedagem compartilhada . Assim, com o terreno do site, há uma seção de desenvolvedor na seção Ferramentas do site. A fim de entrar no servidor que você está Drew pulsate hospedou em. Você precisará configurar chaves ssh. E para fazer isso, você terá que pular para a janela do terminal. Então, em um vídeo anterior, eu recomendei hiper terminal, que é o que você vê aqui. Então, a fim de gerar sua chave ssh, você tem que digitar. Você tem que executar um comando, e isso é apenas algo que você tem que fazer uma vez. Então, se fizermos cat ssh, eu enfatizaria R s um ponto pub. Você pode pausar o vídeo e copiar que se você está seguindo por aqui, eu não vou apertar enter porque isso é uma coisa de segurança. Mas, basicamente, se você pressionar Enter, você vai obter essa string grande, que é uma chave, e você vai nomear a chave. Então, sob importação, você vai eu estou trabalhando em um I, Mac. Então eu chamaria esse Mac, e então o que é gerado aqui? Você vai copiar isso, a coisa toda e ritmo aqui e clique em importar. É assim que é o primeiro passo. Então você tem que primeiro estabelecer chaves ssh. Se você estiver usando esse método depois de importar seu site de chaves ssh, o terreno lhe dará suas credenciais ssh e você não poderá vê-las aqui. Mas esta é a informação que você precisa para entrar em seu servidor. Então eu sei que foi muita coisa, alguns de vocês que eu posso ter perdido. Sinta-se livre para pular esta parte do vídeo se você já tiver sua linha de comando configurada ou se não estiver interessado nesse método. Então, com suas chaves ssh adicionadas e suas credenciais ssh configuradas em ordem, Teoh, entre em seu servidor ou sua caixa. O que você precisa fazer é executar este comando Ssh! Nome de usuário no nome do host Dash P, que significa porta e, em seguida, você é um número de porta. Legal. Agora que entramos, podemos checar os arquivos e tudo o que está no servidor. Então, um comando que você só terá que aprender é LS Dash L. A, que lista tudo no seu servidor. O outro é CD, o que significa mudar o diretório. Então eu vou entrar em onde o site é realmente hospedado no servidor e vamos continuar indo aqui html público perfeito. E aqui está o droop vai site uma vez que estamos no diretório drible. Sei que foi um longo processo para chegar aqui, podemos iniciar o Teoh, instalar esses módulos. Então, o compositor irá fornecer que o outro método não fez é que ele não só irá instalar o módulo que você está procurando instalar, mas também irá sair e encontrar cada dependência que é necessária e instalar isso também. Então, para ilustrar como isso é útil. Se fôssemos voltar para este exemplo automático caminho, o que teríamos que fazer é lembrar que clicamos com o botão direito no endereço do link de cópia tar e instalamos dessa forma. Certo? Então o que nós teríamos que fazer é então ir para token, clicar com o botão direito na guitarra alta, copiar o endereço do link e instalar, e nós teríamos que voltar então nós teríamos que encontrar ferramentas C clique direito cópia tar, link endereço e instale. Mas com o compositor, o que nós apenas literalmente dio é digitar este comando. Então esta seção do euro é como você acessa o módulo. Assim, cada módulo de contribuição será localizado em barra de projeto qualquer que seja o nome. Tudo bem. Então eu vou copiar Path auto aqui e quente de volta para o tipo de terminal no compositor exigem pessoas desenhadas cortar qualquer que seja esse nome e pressione Enter. Levará um segundo, especialmente se você estiver em hospedagem compartilhada. E você pode ver o que os compositores fazem é sair para driblar dot org. Está recebendo as dependências. Está a certificar-se de que está tudo nos servidores. Certo. E, em seguida, eventualmente, ele vai e baixar o casaco para que você possa ver, aparecer baixado, token e ver ferramentas. Perfeito. E quando isso parar de funcionar, devemos ser capazes de saltar de volta para baixo. Todos vão para a seção do módulo, estendam Ah, recarreguem. E se descermos o caminho Teoh auto, lá está. Veja, agora podemos checar. Então, se fôssemos apenas verificar isso e clicar em instalar, o que eu acredito que acontece é droop Will diz, Ei, você deve em ferramentas de perseguir C e token. Gostaria que fizéssemos isso por você? Claro que sim. Obrigado. E lá você pode ver que três módulos foram ativados. Então, há caos. Ferramentas instaladas e ativadas. Certo, então é assim que instalamos módulos. O que precisamos fazer a seguir é apenas para este tutorial. Certifique-se de que temos os outros dois módulos instalados que precisamos. Não precisamos de uma cidade de módulos, o que é ótimo. Então eu vou mostrar a vocês um outro truque do comércio, e essa é uma maneira de instalar módulos em cadeia. Então, se fizermos compositor exigir verdadeiro o nome deste próximo módulo que precisamos, que é apenas assim acontece a ser bootstraps, célula de cuidados simples. E então podemos encadear isso para que instalemos quantos módulos precisarmos ao mesmo tempo. Então, essencialmente, o que estamos fazendo aqui é dizer Ok, nós sabemos quais módulos precisamos para este projeto. Vamos instalá-lo agora mesmo. Saia do caminho, e então não teremos mais que fazer isso. Certo? Então vamos instalar este simples carrossel, que estará em outro vídeo, e também vamos instalar um filtro de módulo, que nos permite obter uma visão geral de nossos módulos um pouco melhor. Então vamos fazer isso direito. E o que acontece é que você pode ver aqui que vai sair e procurar por ambos os módulos e fazer exatamente o mesmo processo que acabamos de passar. Ele irá insultar todas as dependências necessárias para este bootstrap, carrossel simples, bem como este filtro módulo. E se voltarmos aqui, refresque-se. Vamos verificar o filtro do módulo. E vamos verificar também. Uh, vamos digitar em bootstrap cuidados simples, então certifique-se de que é verificado e instalar a escola. Eles não tinham nenhuma dependência. E agora você pode ver aqui. Nós limpamos esta janela do módulo com o módulo de filtro do módulo, e isso apenas nos ajuda a organizar melhor. Então, se estamos procurando por um módulo que temos, mas digamos que não queremos mais, podemos começar a filtrar isso. Muito bem, muito obrigado por ficar comigo durante este vídeo. É só uma daquelas coisas lá em baixo. Tudo o que temos para configurar uma vez e então estamos bem, então eu espero que você tenha uma melhor compreensão de como o sistema de módulos funciona e espero que você entenda os dois métodos que eu forneci para a instalação. Obrigado. E vejo-te no próximo vídeo. 6. Construindo as páginas de conteúdo: com a parte mais complicada deste curso fora do caminho, agora podemos finalmente começar a construir o café vegan de Elaine. Neste vídeo, vamos rever brevemente o que o sistema de tipos de conteúdo é no pool Drew, e vamos usar o tipo de conteúdo da página para construir as quatro páginas básicas. Então vamos até a barra de administração e passar o mouse sobre o conteúdo. Você pode ver que em decadência permitir. Você tem uma opção aqui para adicionar dois tipos diferentes de conteúdo. Um artigo e uma página básica. Ambas as opções são tipos de conteúdo. Tipos constantes podem ser bem encontrados em tipos de conteúdo de estrutura. Vamos clicar nisso. Você pode ver uma descrição aqui para ambos os tipos de conteúdo enviados retirados. As pessoas que você pode ver aqui, diz que as páginas básicas são usadas para conteúdo do Sadiq, como uma página sobre os EUA, e um artigo seria usado para algo como uma página de notícias ou um comunicado de imprensa. Por agora, estamos apenas indo Teoh fazer conteúdo a partir do tipo básico de conteúdo página. No entanto, haverá outro vídeo neste curso onde realmente criamos um tipo de conteúdo personalizado. Então, se apenas clicarmos no botão de conteúdo, você terá uma visão geral de todo o conteúdo que está no site. Uma vez que não temos qualquer conteúdo, este é obviamente nenhum conteúdo disponível, Então vamos em frente e criar nossa primeira página básica. Podemos fazer isso de algumas maneiras, mas uma delas é indo para a página de conteúdo real em que estamos clicando neste botão de adicionar conteúdo. Outra maneira é usar a barra de administração, que estavam familiarizados com Neste ponto, eu prefiro fazê-lo desta forma para passar por cima do conteúdo, mouse, adicionar conteúdo e página básica. A partir daqui, somos apresentados com dois campos que podemos usar para construir páginas básicas da Web. Estas são páginas estáticas, o que significa que a única coisa que está contida na página é texto ou imagens, até mesmo vídeo, qualquer coisa que possa ser incorporada em uma página básica da Web. Então vamos fazer a primeira página ser contatar-nos, e nós vamos deixar o corpo da página em branco por enquanto. Perfeito. Então, uma coisa que se você está acompanhando, você pode ter notado, é que esta página de contato US está localizado em barra nó barra um. Bem, o que queremos procurar motores de busca para o CEO da S é fazer isso entrar em contato conosco assim. Então agora diz que uma página não encontrada porque não configuramos o caminho automático, não configuramos aliases agora. Path Auto, se você lembrar do último vídeo, é um módulo que instalamos. Então vamos em frente e configurar isso antes de começar a fazer o resto dessas páginas básicas. Então, sob configuração, vamos descer para pesquisa e metadados e, em seguida, selecionar u R L aliases a partir daqui. Vamos passar para o link do menu de padrões, e vamos definir um padrão que queremos que todas as nossas páginas básicas sigam. Então vamos fazer. Adicionar caminho padrão automático e para o tipo de padrão irá selecionar conteúdo. E para este campo, vamos procurar. Os tokens disponíveis estavam indo para fazer uso do sistema de token ALS droop, que nos permite tornar nosso site um pouco mais dinâmico. Então, sob tokens disponíveis, vamos para Node, então aqui embaixo, nós só temos que configurar isso uma vez, por sinal, então pode não ser tão complicado como parece Sob aqui. Vamos selecionar o título do nó E o que é isso se você lembrar de quando fizemos a página de contato , havia um título de página. Bem, quando você adiciona conteúdo usando qualquer tipo de conteúdo, esse pedaço de conteúdo que você acabou de criar é chamado de nota. Então o que isso está dizendo é para o nó atual, que, se estamos usando o mesmo exemplo, seria a página de contato. Esse seria o bilhete. O título desse nó seria entrar em contato conosco. Espero que isso faça sentido. E isso é realmente tudo o que precisamos. Então o que estamos dizendo aqui é em vez de fazer o caminho o número de barra do nó da barra euro b , vamos fazer do B oral o título. Ok, então nós vamos selecionar a página básica e vamos apenas nomear a página. Perfeito. Ok, agora, se você voltar para o conteúdo e verificar este contato conosco, você verá aqui que este alias ainda não foi alterado. Então, o que precisará fazer é voltar ao conteúdo, selecionar isso na tabela e em ações. Vamos atualizar seu alias de URL e aplicado aos itens selecionados. Está bem. E você pode ver aqui um alias foi aplicado. Desça para nos contatar e não está lá. Então o que precisamos para diligir é liberar o dinheiro. Então, agora, se voltarmos ao conteúdo e, em seguida, selecionar entre em contato conosco, você pode ver que esse alias o euro agora está definido para o ser o título da página. Perfeito. Então vamos em frente e construir a página sobre nós. Então vamos para o conteúdo. Adicionar conteúdo. Página básica, e vamos fazer o título desta página sobre. E se você olhar para as notas do show, eu tenho uma pasta ZIP que tem todo o conteúdo do site de teste. Se você gostaria de seguir ao longo pedaço por pedaço, então eu vou apenas ir em frente e colar eo conteúdo k grande. Vamos guardar isso e aqui vamos nós sobre páginas lá. Tudo bem agora e se quiséssemos adicionar uma imagem a esta página? Vamos em frente e vamos apenas fazer uma quebra de linha lá. E neste Wiz e Wig editor, temos a opção de adicionar uma imagem. Então vamos clicar sobre isso, e a partir daqui podemos escolher um arquivo da nossa máquina local e vamos fazer todo o texto pessoas comem na mesa de jantar e salvar isso perfeito. Então agora o que podemos fazer aqui é clicar duas vezes nisso mais uma vez e ajustá-lo Então foi é uma linha para a direita. Perfeito. E vamos guardar isto e ver como está tudo bem. E deixe-me acrescentar mais uma vez. Eu tenho que mexer com ele. Eu sinto muito. Bem, deixe-me colocar ao lado disso. E lá vamos nós. OK, agora vamos ver se isso parece um pouco melhor. Isso vai funcionar. Não é um trabalho para agora. Ok, então há a página sobre. Então fizemos a página de contato. Fizemos a página sobre. Agora vamos criar o menu. Então, mais uma vez, conteúdo página básica e vamos chamar este menu. E realmente o que eu uma vez aqui é criar uma tabela de itens de menu, mas realmente não há uma opção para nós. Teoh criar uma tabela aqui, então o que podemos fazer é ir para baixo para este formato de texto, selecionar a opção, e vamos clicar nisso e selecionar HTML completo. O que isso vai fazer é abrir algumas opções adicionais aqui para nós usarmos e uma das quais apenas acontece de ser esta tabela. Então, antes de criarmos a tabela, vamos adicionar alguns títulos. O que é tipo de alimento para o primeiro título. E vamos destacar isso e torná-lo um H dois. Você pode selecionar formatos a partir desta opção dentro da peruca wheezy. Ok, e vamos adiar outra pausa e vamos digitar bebidas. Selecione isso e torná-lo uma idade para aperfeiçoar. Agora, entre comida e bebidas. Vamos fazer a tabela, então certifique-se de que o cursor está entre cada cabeçalho e selecione a opção tabela. Vamos fazer uma tabela de cinco linhas com três cabeçalhos de colunas na primeira linha. Nós vamos derrubar o tamanho da borda, e vamos remover a largura e vamos fazer a comida sumária e bater OK, agora vamos deixá-la cair. Mais uma bebida e vamos fazer exatamente a mesma coisa. Vamos fazer cinco linhas, três colunas, cabeçalhos na primeira linha e derrubar o tamanho da borda para baixo, não o chicote para baixo. E vamos fazer este resumo de bebidas. E então eu tenho todo o conteúdo que você precisará para preencher essas tabelas nas notas do show . Vamos realmente apenas passar pelos cabeçalhos Primeiro vai fazer item, descrição e custo para os cabeçalhos. E então vamos repetir isso aqui embaixo, descrição do item e custo. E vamos em frente e fazer um juntos. Vamos fazer a noite Chai Oatmeal cadeira. Quem quer um pouco de mingau de aveia e vamos fazer a descrição só vai acelerar isso em. E o custo é $5 fora da refeição Oh, refeição. Ah, vamos ousar isso para fins de estilo e vamos itálico isso e pronto. Ok, então eu vou seguir em frente e preencher o resto usando o conteúdo fornecido, e então eu vou me juntar a você de volta, e eu vou fazer o mesmo para beber. Tudo bem, eu tenho todo o conteúdo adicionado, e apenas para um exemplo, nós copiamos a mesa de alimentos para baixo sob bebidas apenas para fins estilísticos. Então vamos salvar isso e o que acontece? Nossa mesa realmente não se parece com uma mesa. Não há estilo disponível aqui, e nós definitivamente não gostaríamos que este representasse o nosso menu se estivéssemos construindo um site moderno para alguém. Bem, a razão pela qual isso é assim é porque nós temos Bootstrapped quatro instalado como nosso tema, mas nós não adicionamos nenhuma classe bootstrap classes CSS para fazer isso parecer como bootstrap para torná-lo melhor. Então vamos em frente e ver como podemos fazer isso. Então vamos apenas ir para o Google aqui e digite bootstrap para e você será apresentado com esta página de introdução. Então bootstrap é um dos meus favoritos, se não o meu front favorito e frameworks. Isso torna essa tarefa de construir um site moderno muito mais fácil. E a boa notícia é que não temos que fazer nenhuma dessas coisas introdutórias porque já está instalado desde que instalamos nosso tema bootstrap quatro. Então, o que podemos difundir é ir até o conteúdo. Vamos verificar as opções de tabelas, e você pode ver aqui imediatamente. Hum, há alguns exemplos de como tabelas em bootstrap para o nosso estilo Bem, parece que tudo o que precisamos fazer é adicionar a tabela de classes. Se quisermos que o Teoh limpe a nossa mesa. Então vamos literalmente copiar que este é o primeiro exemplo. E eles não só mostram como é o exemplo, mas também fornecem o código bruto por baixo dele. Então, se copiarmos a aula da mesa e voltarmos para casa da Elaine. Vamos clicar nele. E o que vamos fazer aqui é sujar as mãos um pouco. Olhe sob o capô e clique na fonte. Este é o HTML que é representado em seu conteúdo enquanto você o cria dentro. Este era o bloco de perucas. Então o que podemos fazer aqui é apenas ver esta tabela html tag e literalmente antes que o que podemos fazer é logo antes do sinal maior que. Podemos apenas colar nessa classe que copiamos e vamos rolar para baixo através deste código até encontrarmos a outra opção. E vamos também colar mesa lá enquanto estamos aqui. Vamos fazer as bebidas resumidas e vamos desmarcar a fonte perfeita. Agora o que podemos fazer é descer e salvar, e lá vamos nós. Você pode ver que nós temos uma mesa real agora, mas há mais uma coisa que eu gostaria de fazer. Gostaria de adicionar uma borda aqui para ajudar a separar visualmente o menu. Então vamos voltar sobre Teoh Bootstrap, e vamos rolar para baixo. Você poderia fazer isso. Ah, o tema escuro, se você quiser e vamos rolar para baixo até encontrarmos mesas. Fila da mesa, desculpe, a fronteira dela. Tudo bem. E aqui está a opção para tabela delimitada. Vamos selecionar isso e voltar para o Andrew da Elaine. As pessoas acertam, editam e estão sob fonte. Vamos tomar Border tabela que acabamos de copiar e colá-lo na classe. Então nós vamos apenas abordar uma classe extra nesta declaração aqui. E então vamos salvá-lo. E lá vamos nós, tudo bem, e há mais uma página que vamos construir para este vídeo. Vamos apenas ir em frente e construir a página de receitas para que possamos ir em frente mais uma vez sob conteúdo, adicionar conteúdo e página básica. Você será um especialista nisso quando terminarmos. Vamos apenas fazer o título dessas receitas, e nós realmente vamos deixar isso em branco por agora, e nós vamos preencher esta página de receitas e torná-la dinâmica em outro vídeo. Então isso conclui este vídeo em fazer as páginas de conteúdo básico. No próximo vídeo, vamos rever a estrutura do menu e desenhar pessoas. Vamos adicionar todas essas páginas que acabamos de fazer ao menu, e vamos derrubar essa opção de pesquisa porque não precisamos dela para este projeto. 7. Criando o menu de navegação e o significado de blocos: Olá, todo mundo. Bem-vindo de volta a este vídeo, vamos construir sobre o trabalho que fizemos no vídeo anterior quando compilamos nossas páginas estáticas do site. Vamos agora adicionar essas páginas para droop sistema de menu ALS e começar a construir a navegação real aqui. Então, Andrew Pool, temos algumas opções para definir nossos menus. Nós podemos, na verdade, apenas de qualquer lugar no site onde há o menu, nós podemos realmente apenas clicar nele menu. Eles estão usando essa ponta de lápis. Mas para os propósitos deste vídeo, eu acho, Bem, na verdade, basta ir até a opção menus. Então, se você passar o mouse sobre a estrutura e clicar nos menus aqui, você verá uma lista de todos os menus no site, e isso inclui os menus administrativos também. Então aqui em cima e aqui. Então, não só e o menu da conta de usuário. Então, em droop vai, não só você pode personalizar o menu frente o menu que seus usuários irão interagir com, mas você também pode criar uma experiência de administração personalizada aqui editando os menus de administração . Mas para este vídeo, vamos manter a navegação principal e como você pode ver aqui nesta descrição, este é o link da seção do site. Então vamos em frente e clique no menu. E isso é exatamente o que devemos esperar ver. Há apenas um link de menu, e se abrirmos uma nova aba aqui e verificarmos esta página inicial, você pode ver que temos este HomeLink. Então agora vamos em frente e adicionar todos os links que fizemos até agora. O primeiro link que irá adicionar é este link de menu e para o campo de link. Como já criamos as páginas, enfraquecer literalmente, basta procurar o menu e selecioná-lo. E vamos dizer isso. Vamos para a Navegação Principal novamente e está em outro link. Desta vez, vamos adicionar receitas e encontrá-lo na lista. Guarde isso. Repita o processo. E, como em outro link, tempo fará sobre salvá-lo e, em seguida, no menu e mais um link. É contato e seguro. Tudo bem, e vamos nos certificar de que tudo está situado corretamente. Eu gostaria de ter o menu casa vir em primeiro lugar, seguido pelas receitas de menu sobre e contato que vamos para que você possa ver como eu fiz isso Lá. É só uma simples gota de dragão. Então vamos salvar essa ordem de link. Confira a página inicial e veja o que fizemos aqui. Tudo bem, legal. Então isso está olhando melhor já, e você pode ver que você pode clicar através das páginas e está olhando muito bom até agora. Então, esses foram os únicos links que a navegação principal manterá para este projeto. No entanto, o que vamos passar em seguida é o sistema Drew Pols Block. Portanto, para este site, não é necessário ter essa pesquisa e minhas opções de conta aqui. Então vamos ver como podemos nos livrar disso em apuros. O principal caso de uso para blocos seria elementos do site reutilizáveis. Então, por exemplo, este bloco de pesquisa aqui nós poderíamos pegar isso e duplicá-lo e colocá-lo para baixo no rodapé. E esse é realmente o propósito dos blocos. Vamos dar uma olhada nas opções reais do bloco sob a estrutura, então sob a estrutura, basta passar o mouse para bloquear layout e clicar que aqui podemos pela primeira vez neste curso, ver o recurso da região. Andrew pessoas vão passar por cima disso mais quando começamos a temar o site, mas basicamente este tema é dividido em diferentes regiões onde podemos colocar blocos. Podemos ver aqui na região de navegação adicional que o menu da conta de usuário, bem como o formulário de pesquisa, são colocados nessa região. Então, já que não queremos isso na navegação, vamos apenas desativá-lo. Então, se formos até aqui ao lado de configurar, clique na seta e selecione este capaz, você pode ver as configurações de bloqueio foram atualizadas e o vamos descer Teoh menu conta de usuário bem e desativar que Perfeito. Agora vamos guardá-lo e vamos para casa. E agora ele se foi. Agora, em outro vídeo, vamos alinhar este menu à direita para que não tenhamos tanto espaço em branco aqui. Mas por agora, acho que é exatamente isso que precisamos. Há mais um bloco que vamos desativar, no entanto, para este curso, não queremos as migalhas de pão, então vamos em frente e desativamos isso também. Sob layout de bloco, vamos descer para pão ralado aqui e desativar Perfeito. Certo, isso conclui este vídeo introdutório no menu e sistema de bloqueio e Rupel. Veremos você no próximo vídeo, onde começaremos a escrever algum código CSS e construir o tipo de logotipo da Elaine. 8. CSS, logo, tipografia: Olá, todo mundo. Bem-vindo a este vídeo. Estou muito animado para entrar nessa. Vamos fazer minha parte favorita de projetar para a Web, e isso é tipografia. Então, neste vídeo, vamos adicionar nossos dois tipos de letra do Google. Fontes entrarão no arquivo CSS e definirão a tipografia de linha de base para o site, e eu mostrarei como adicionar o logotipo fornecido nos arquivos do curso. Então vamos entrar nisso. Tudo bem. Então vamos pular para o Google aqui e digitar fontes do Google. Então, o Google fez um trabalho incrível ao trazer a tipografia para a Web. Este serviço é totalmente gratuito e oferece uma série de opções para incluir fontes modernas em um site. As duas fontes que estarão usando para este curso são melhores não s e Monta Sarit. Então vamos começar mês para Sarah estará usando isso como nossa principal nossa tipografia de linha de base para o site, e você pode ver que é uma fonte sans serif realmente agradável. Então, a fim de fazer isso, vamos para o canto superior direito desta página e simplesmente selecionar Selecionar esta fonte e você pode ver aqui em baixo que foi adicionado. E vamos voltar às fontes do Google e adicionar nosso Bevis. Não, como novamente, uma fonte San Serif realmente agradável estará usando isso para o tipo de logotipo. Então, vamos selecionar este. E agora você pode ver aqui temos ambas as fontes selecionadas e o Google oferece duas opções para importar as fontes. Muito legal. temos No entanto, mais uma coisa para Dio. Vamos selecionar personalizar. E para Monta Sarah, vamos fazer semi ousado e ousado. Isso afetará o tempo de carregamento do seu site porque estamos adicionando apenas algumas opções aqui. E porque nosso site é relativamente pequeno, ele vai. Ele não deve ficar no caminho de nós adicionar essas duas fontes Perfeito. Então vamos voltar para o mal aqui. E vamos manter isto aqui por enquanto e vamos para o código V. Então, em um vídeo anterior, tudo bem mostrou como baixar o código V s. Então, se você está seguindo junto, vá em frente e saltar sobre o código V s e usando a extensão sftp para código Bs, vamos bloquear no servidor. Já configurei minhas credenciais e vamos aos temas. Você pode digitar isso ou descer em temas selecionados. E vamos ao Bootstrap. Ok? E agora estamos no tema bootstrap. E para este curso, vamos simplesmente trabalhar dentro do arquivo CSS style dot, que é encontrado se voltarmos dentro do diretório Temas, ele é encontrado no diretório CSS em Styled at CSS. Agora, melhor prática seria dividir o trabalho que estamos fazendo aqui em seu arquivo CSS separado . Mas nós só estaremos fazendo algumas mudanças no C S s. Então, para os fins deste curso, é completamente fino trabalho dentro deste estilo padrão que arquivo CSS. Então vamos voltar ao Google. E o primeiro passo que precisará fazer para importar essas novas famílias de fontes é selecionar na importação. E você pode ignorar estilo as tags de estilo aqui e simplesmente copiar tudo sob as tags de estilo ou dentro das tags de estilo. Então vamos copiar isso e vamos voltar para o código do Visual Studio, fazer algumas quebras de linha aqui e no topo antes da rota. Vamos nos certificar de que estamos importando nossas novas fontes do ghoul que você apertou salvar. E se você configurou o código V s com a extensão sftp, você terá upload ao salvar. Então, se você notar no canto inferior esquerdo aqui se eu pressionar Salvar, isso é realmente carregar arquivos para o servidor. Então é muito poderoso, tudo bem, e podemos testar que nossa importação está funcionando. Se deslocarmos para baixo e definir os títulos para seus novos estilos, vamos fazer todos os títulos Monta Sterett. Mas vamos ousá-los, e vamos definir todos os estilos de parágrafo para Montazeri também. Mas não vamos mantê-los ousados. E então eu vou mostrar a vocês como vamos fazer isso. Então vamos voltar para o Google e vamos encontrar nossa declaração de família de fontes aqui. E vamos copiar a Monta Sarah. É um. Sinto muito se eu não estou dizendo esse direito de ir para uma nova linha e simplesmente colar isso agora. Como também estamos fazendo títulos, vamos adicionar peso frontal e torná-lo 600 e vamos economizar isso. Deve ser carregado. É quente de volta aqui e atualizar Bem, nada mudou, ea razão para isso é porque em Drew Pool, quando fazemos alterações para o estilo que CSS ou para um arquivo de modelo, temos que liberar o dinheiro. Então, a maneira mais fácil de fazer isso se você não estiver trabalhando a partir da linha de comando, é apenas passar o mouse sobre a inclinação. Irá ícone e clique em limpar todas as capturas. Portanto, se tudo correr bem, nosso rumo deve ser fixado em dois meses. A Sarah. Lá vamos nós. Muito bom. Então nossa importação funcionou. E se saltarmos um pouco para o lado, você pode ver que estes também mudaram. E o que faremos a seguir é também definir todo o estilo de fonte do site. Dois. Monta Sarah. É assim, vamos subir. Mas rolar um pouco para cima. Começamos com H. Um. Vamos rolar para cima e ir para corpo a declaração do corpo aqui. E vamos, na verdade, fazer uma nova linha. E vamos colar nesse ar de monstro. Sua declaração mais uma vez. Aperte salvar, e depois vamos voltar e liberar o dinheiro. Perfeito. Então agora você pode ver que esses menus foram atualizados e eu acho que a tipografia está parecendo melhor já, e eu notei nesta página que alimentos e bebidas não são dobrados a um 600 pés. Espere. Eu poderia dizer aqui que isso não é o que nós selecionamos aqui e fontes do Google de nós, sabe? Olhe a página para Monta. Sara, podemos ver que A a 600. Desculpe-me. Um 600 é, na verdade, muito mais fronteira do que o que isto é. Certo, então se voltarmos ao código V e se você se lembrar, eu defini os títulos. Onde estamos? Ouça os títulos da fonte Espere 600. Mas se eu inspecionar este elemento aqui, você pode ver que nossa declaração de peso da fonte 600 está realmente sendo substituída por uma declaração que foi feita mais tarde no arquivo CSS. Então, por exemplo, se desmarcássemos essa fonte Espere, podemos ver isso. Agora estamos em 600. Então vamos em frente e limpar isso. Está quente de volta ao código V. E o que eu realmente vou dio que eu já copiei é procurar pesos de fonte. 500. E vamos comentar isso. Você pode fazer isso em um Mac usando o código V s. Certifique-se de que você está no final da linha e fazer barra de comando e que irá comentar. Vamos guardar isso. Volte para o local. E se tudo funcionar, isso ainda deve ser ousado. Id perfeito. Então, vamos apenas fazer, ah, atualização do site. E agora os nossos títulos são Bolden. Então isso é ótimo. Ok, então demos o primeiro passo para limpar a tipografia do nosso site. Definimos os estilos de linha de base usando nossa folha de estilos CSS. Agora vamos começar a construir este tipo de logotipo. Tudo bem, Então primeiro, vamos remover o ícone de bootstrap. Para fazer isso, vamos sob aparência e clique em aparência. Vamos descer para o creme bootstrap e selecionar configurações em configurações. Vamos desmarcar o uso do logotipo fornecido pelo tema, e vamos fazer upload da imagem do logotipo que foi incluída nos arquivos do site com este curso. E vamos. Uma vez que tenhamos adicionado, Vamos descer e clique em salvar configuração e vamos liberar o dinheiro para boas medidas. Perfeito. Agora vamos voltar para casa e podemos ver que nosso logotipo foi alterado. Mas é muito grande. Tudo bem, então como podemos consertar isso? Bem, uma coisa que eu Dio é muito projetar dentro do navegador. Eu tenho escrito CSS por um longo tempo, então isso é natural para mim. Mas é uma habilidade que qualquer um pode aprender, e é uma habilidade que é incrivelmente poderosa Se você está entrando em um Web design, especialmente Drew Peled baseado Web design, porque a marca front-end dentro Drew pool é tão agrupado honestamente, muitas vezes você tem que realmente cavar a partir da janela Inspecionar. Então vamos descobrir como consertar isso. Vamos, clique em Inspecionar e temos nossas ferramentas de desenvolvimento aqui. Nós nos familiarizamos um pouco com isso há um minuto, e podemos ver aqui que ele é realmente colocá-lo para baixo e normalmente não. Mas vamos colocá-lo aqui para que possamos ver que o tamanho da imagem está definido para 100%, mas nós realmente gostaríamos que fosse menor. Então vamos fazer a largura 35 pixels e isso parece muito bom, certo? É isso que queremos que aconteça. Então eu vou mostrar-lhe como podemos rapidamente adicionar isso ao nosso estilo, que CSS Vamos copiar esta declaração dentro das ferramentas de desenvolvimento, e é copiar isso e saltar para o código V S. Agora o que vamos fazer aqui é rolar todo o caminho até o fundo, e vamos começar a construir nossos estilos de site personalizados. Então vamos fazer isso chamado de estilos personalizados e apenas para estilizar dentro do documento real . Vamos fazer isso dessa maneira. Se alguém assumir o local, eles sabem para onde ir. Então estes são estilos personalizados. E vamos acelerar isso no colchete aberto e fechar colchete encaracolado. E o que vamos dio é definir a largura para 35 pixels, assim como fizemos dentro das ferramentas do desenvolvedor. E o que eu também gostaria de fazer é adicionar uma seção em nosso documento aqui chamada Logotipo, porque faremos algumas alterações adicionais. Agora sabemos onde está o logotipo, e vamos fazer algumas pausas, guardar isso e voltar ao cromo, liberar o dinheiro. Perfeito. Então agora você pode ver se fomos logo fresco foi atualizado, e isso parece muito melhor agora se ficarmos nas ferramentas de desenvolvimento aqui, queremos Teoh corrigir esta tipografia aqui, e queremos fazer queremos transformar isso em um tipo de logotipo, Então vamos fazer isso iniciando primeiro nas ferramentas do desenvolvedor. E vamos ficar onde estamos. Clique no nome do site da classe span. Aqui é onde tudo está sendo definido para que possamos fazer o estilo dos elementos aqui. Ou podemos apenas apertar a opção de mais para adicionar uma nova regra. E você pode ver que o cromo é adicionado. Nossa declaração para nós. Então, isso é span a tag HTML Span e a classe CSS que foi aplicado o nome do site. Você pode ver isso aqui. Vamos mudar isso para realmente vamos voltar para fontes e checkouts do Google. Como adicionamos esta família Bevis Nu EZ Font? Vamos copiar. Isso estava quente aqui e colar isso para que você possa ver que parece realmente ótimo. Bevis New s é uma ótima tipografia para tipos de logotipo, mas na verdade é um pouco pequeno demais. Ainda assim, eu sinto que eu gostaria de Teoh um pouco, Então vamos começar a começar algum estilo aqui no navegador. Então eu vou fazer este tamanho de fonte para Ram. É melhor usar Ram, e então eu acho que eu gosto desse tamanho, mas na verdade não é centro verticalmente. Então, vamos na verdade fazer margem superior. Vamos fazer dois pixels só para ver como isso é. E eu realmente vou destacar os dois lá se você pode ver isso para baixo nas ferramentas de profundidade e usar a seta para cima para ajustar. E eu realmente gosto mais disso, eu acho que cinco, talvez quatro Margin top quatro. Vamos ver, aqui esta é a nuance de qual desenvolvimento Vamos realmente fazê-lo para e vamos definir a cor para preservar seu zero acreditar que já é, mas ok, nós podemos realmente apenas tirar isso. Sim, isso parece bom. Sinto-me especialmente quando pegamos isto e nos movemos para a direita. Ok, isso vai funcionar. Vamos fazer isso. Então eu vou copiar por isso. Na verdade, o que podemos fazer é copiar toda esta declaração. É quente de volta ao código V s e sob nossa seção de logotipo, vamos acelerar isso em condole Comer que ele salvar. E isso foi carregado. Vamos voltar para o cromado Flush o dinheiro. Tudo vai bem. Isso deve ser bom. Ok, ótimo. Então isso conclui este vídeo. Fizemos um excelente trabalho ao criar nosso logotipo aqui, e também definimos alguns estilos de linha de base que parecem muito melhores. Na minha opinião. No próximo vídeo, começaremos a temar essas páginas. Então essas páginas de conteúdo vão começar a olhar para isso e ir um pouco mais fundo sob o capô de nosso site. Eu vou ver isso. 9. Temática de conteúdo da página: Bem-vindo de volta a este vídeo, vamos começar a construir a página dot html arquivo modelo galho. Também vamos limpar esta navegação para que os links estejam alinhados ao lado direito da navegação. Vamos começar. Então, começando até agora, eu acho que essas páginas ar vindo muito bem. Mas se acabarmos aqui, provavelmente não o suficiente para atrair os clientes fictícios do Teoh Elaine. Então o que eu pretendo fazer sobre isso é adicionar uma opção para o editor do site adicionar um banner e um banner de imagem neste site sem ter que entrar no código. Certo? Então vamos hipoteticamente dizer que Elaine, que é dona da padaria, paga Michael para atualizar o conteúdo do site. Bem, nós gostaríamos que Michael tivesse a capacidade de apenas carregar a foto Teoh em cada página sem ter que codificar, então eu vou te mostrar como fazer isso. A maneira como isso é feito é editando o tipo de constante de página. Aprendemos um pouco sobre tipos de conteúdo em um vídeo anterior, e aprendemos um pouco sobre o tipo de conteúdo da página, mas vamos apenas descer, tipos de conteúdo Teoh, página básica, e vamos clicar em Isso. Então, dentro desta janela, temos opções que podemos definir para cada página. E também há uma opção de campos aqui. Neste momento, você pode ver em nosso tipo de conteúdo de página. Nós só temos um campo de corpo, que é o que temos usado para definir para colar no conteúdo de cada página. Bem, vamos em frente e adicionar um campo adicional a esta página. Tipos de conteúdo Então, vamos selecionar, adicionar campo e em adicionar um novo campo. Vamos descer Teoh Image e vamos apenas chamar esta imagem banner e bater, salvar e continuar a partir daqui. Vamos apenas certificar-nos de que isso está definido para uma configuração de campo de salvamento e vamos para baixo. Isto está certo. Queremos ter certeza de que ativar em todos os campos e fazer todos os campos necessários é verificações de acessibilidade. Então, vamos clicar. Salvar configurações perfeitas e vamos passar para gerenciar a exibição do formulário. Você pode ver que temos uma série de coisas aqui. Temos o título no topo e a melhor maneira que eu gosto do Teoh show. Isto é, na verdade, apenas adicionando um pedaço de conteúdo aqui, Então vamos abrir isso em uma nova guia e vamos olhar para o que acontece quando fazemos ah página básica você possa ver que temos um título de corpo. Você pode ver nossa nova imagem de banner Field está aqui em baixo, mas na verdade gostaríamos que esta imagem de banner fosse colocada acima do corpo para uma melhor experiência do usuário à direita. Também temos algumas opções, algumas opções de site. Poderíamos criar um alias de URL personalizado se não quiséssemos usar o que é gerado. E se você tivesse vários autores, você poderia verificar em qual autor você é. Então vamos voltar para a página em que estávamos antes nesta exibição de formulário de gerenciamento e você pode ver o título aqui está no topo direito títulos aqui e nós temos o corpo. Aqui está o corpo e a imagem da bandeira. Essas outras opções são o que você vê à direita. E assim o que eu gosto de Dio é colocar o corpo sob o título. Mas neste caso, vamos colocar a imagem do banner entre o título no corpo, e eu gosto de ter certeza de que estas são a última opção selecionada causa tipicamente, você não estará alterando estes nem sempre o caso, mas aí está. Assim que tivermos nossas opções organizadas, vamos salvá-lo. E agora, se voltarmos e fazer conteúdo, adicionar conteúdo, página básica, você pode ver que isso foi colocado entre título no corpo Perfeito. Tudo bem, então vamos voltar para casa e vamos selecionar o menu e eu vou em frente e para ele. Você pode ver aqui que a imagem do banner agora é uma opção em nossas páginas anteriores também. Vou em frente e adicionar a imagem de banner que está incluída nos arquivos do site e certifique-se que você está colocando em todo o texto para acessibilidade. Perfeito, sabe, e poupe. E você pode ver aqui que, embora tenhamos definido o campo dentro do em sua opção para estar acima do corpo abaixo do título, a exibição ainda está abaixo do corpo. Então vamos voltar para nossas opções de tipo de conteúdo e vamos selecionar a página básica um, em exibição. Vamos selecionar gerenciar exibição, e o que podemos fazer é realmente colocar isso acima do corpo e vamos esconder o poço do LaBella , perfeito. Agora vamos voltar, abra uma nova guia e confira o menu que acabamos de colocar legal. Isso é bom. Mas o que eu realmente gostaria de falar é ter isso antes com Então agora, estamos trabalhando dentro dos limites do contêiner bootstrap. Como você pode ver, tudo está alinhado dentro desta janela de contêiner aqui e uma linha para o meio da página. E nós queremos isso. Mas para fazer parecer realmente moderno, queremos que um elemento esteja cheio. Você já viu isso em outros sites e pode vê-lo aqui, certo? Esta é uma parte cheia do site, mas todo o conteúdo está dentro do contêiner. Bem, o que podemos fazer é ir até o arquivo de modelo de ponto de pontos html e atualizar isso. Então vamos passar para o código V. Então estamos no diretório droop vontade para chegar aos arquivos de modelo. Vamos para temas e vamos para bootstrap e, em seguida, sob quando você está no tema bootstrap , o que você vai querer fazer é ir para modelos e a página, bem como os modelos HTML são encontrados sob layout, e nós irá em frente e selecione a página html. Agora o que? Você será recebido com, imediatamente é um monte de comum ele fora. Ajude a mensagem dela. Isto é muito útil. Se você está procurando Teoh, mergulhe mais no desenvolvimento de temas triplos e vamos continuar rolando aqui um pouco. Então, logo de cara, não vou explicar tudo linha por linha. Mas isso é bom saber que o que você está vendo aqui são variáveis galhos. O desenvolvedor deste bootstrapped quatro tema decidiu fazer uso muito pesado de galhos sistema variável, mas neste momento você provavelmente está se perguntando o que galho é. Então vamos conferir o Google e vamos digitar HTML galho. Então galho é um motor de template ing para a linguagem de programação PHP. O que isso faz é que simplifica muito como bootstrap, muito como s CSS ou sass. Ele simplifica a forma como você é capaz de construir modelos dinâmicos no PHP para que você possa fazer muito mais coisas com muito menos código. Twig é um tópico extenso, e eu recomendo conferir alguns vídeos no compartilhamento de habilidades ou no YouTube. Se você gostaria de ir mais fundo neste tópico, mas por agora, vamos voltar ao código V s. Agora que temos um pouco de compreensão do que é galho. Podemos ver que há alguma variável definida aqui. Mas se continuarmos indo para baixo, você será apresentado com um modelo ou uma estrutura do que cada tipo de conteúdo de página é. Quando você clica em conteúdo, adicione a página de conteúdo. Então, toda vez que você faz isso, isso é representativo do código em uma única página e apenas para ir um pouco mais longe, podemos ver aqui. Vamos começar a olhar para isto. Então, há cabeçalho certo? Temos esta tag de cabeçalho. E aqui está a nossa primeira região que foi definida dentro de galhos. Esta é uma região Andrew pessoas página ponto cabeçalho. Mas você pode ver aqui que temos este bar Naff. Então vamos voltar para o Google e o Chrome e você pode ver aqui está esta navegação. E se fôssemos ir em frente e inspecionar este elemento, você pode ver que temos uma tag de cabeçalho com a classe de nab nossa expansão Large. Certo. Então, vamos voltar para V s tag de cabeçalho código com a classe agora barra expandir grande. Então espero que isso faça sentido aninhado sob o cabeçalho é esta tag valete com um número de classes e você pode ver aqui nós temos esta tag valete aninhada agora. Eu fiz um vídeo anterior, e no início deste vídeo, eu disse que estaríamos alinhando essa parte da navegação para a direita. Então vamos ver como podemos fazer isso aqui no código V. Vamos descer um pouco e vamos encontrar agora, barra de navegação, vamos mudar este M R Auto para B M L auto. Essa é apenas uma classe bootstrap que magicamente faz isso funcionar direito. É assim que eu vejo as coisas, pelo menos. Então vamos voltar para o Google Chrome e liberou o dinheiro e tudo correu bem que deve ser alinhado para a direita. Perfeito. Tudo bem. Eu acho que isso já parece melhor, mas vamos continuar nosso trabalho aqui de definir o banner da página. Certo, então o que precisamos fazer aqui é primeiro dar uma olhada na estrutura real da página. Vamos clicar com o botão direito Inspecionar Mais uma vez nosso velho amigo aqui Dev Window. Então você pode ver que temos este cabeçalho. E neste cabeçalho temos. Se você olhar para o que está destacado acima na tela, nós obviamente temos todos os componentes de navegação e dentro da tag valete real, nós temos o direito de navegação para que possamos continuar indo para baixo. E é assim que isso é estruturado. E se continuarmos rolando para baixo, podemos ver que a tag principal contém tudo na página menos o rodapé, que está em seu próprio ataque de pé. Então nosso objetivo é tirar essa imagem da seção principal e colocá-lo entre cabeçalho e feito. Agora, o que poderíamos fazer é definir uma região. Mas faremos isso mais tarde se voltarmos ao código S. Então, na verdade, estamos indo. Teoh, verifique este cabeçalho aqui. Mas o cursor entre lá certifique-se de que o seu está no final da declaração de cabeçalho e vamos digitar na seção. Vamos usar uma tag de seção para isso. Vamos dar uma classe de banner de página. E antes de renderizarmos a imagem de fundo, o que eu gostaria de fazer é ter o título da página colocado na frente da imagem para um efeito visual agradável. Então vamos fazer em H um aqui. E vamos apenas tabulação que vamos dar a isso uma classe de cabeçalho da página e vamos renderizar o título da página . Então o que precisamos fazer é pegar. O que queremos fazer é levar este o título da página. Neste caso, é Menu, e queremos que seja colocado. Ver se consigo fazer isto. Sim, colocado bem no meio desta imagem, e gostaríamos que esta imagem fosse uma imagem de fundo. Então, vamos primeiro começar colocando o título em Drew Pilatos, a fim de renderizar o título vamos dizer nó, porque estamos tendo um tema página nó aqui ponto h t não um galho, e nós vamos torná-lo nenhum rótulo de ponto, que é apenas assim acontece em Drew Pilatos usando galhos. É assim que se consegue o título. Então, se dissermos isso e saltamos para o cromo e liberamos o dinheiro, bem, bem, você deve ver que é sim. Isso é exatamente o que eu esperaria. Você vê dois títulos porque não é apenas o título original que colocamos em sua renderização, mas também adicionamos esse rótulo de nó. Então, como é que nos livramos desta? Bem, vamos voltar para lá. E enquanto estou rolando aqui, não vejo nada. Bem, isso é porque este título de página é realmente parte do sistema de bloqueio padrão. Andrew Prato. É um bloco para que possamos ver isso para a Europa e ver o título da página. Então o que vamos fazer é, na verdade, ir em frente e desativar isso. Então vamos sob estrutura e layout de bloco. Estamos um pouco familiarizados com isso neste momento e aqui sob o título da página, vamos simplesmente clicar em desativar grandes blocos de salvamento de sucesso e liberar para uma boa medida. E então vamos voltar para casa e ver o menu. Perfeito. Portanto, é exactamente isso que esperamos ver. Um título e esse título padrão agora é removido. Tudo bem, vamos continuar a construir esta página. Então, o que queremos dio é renderizar o caminho para a imagem diretamente nesta tag de seção. Esta é definitivamente a parte mais complexa, a parte mais complicada do vídeo, e é só porque queríamos ficar bem e queríamos ser dinâmicos, então deixe-me mostrar a vocês o processo de pensamento por trás disso, e acho que isso vai esclarecer algumas coisas. Vamos começar por primeiro apenas renderizar para o caminho da imagem em um P marcado dessa forma, sabemos que nós temos isso. Então saltando para trás atraiu as pessoas. O que queremos fazer é inspecionar este elemento. O que estamos olhando para Dio é como eu disse, coloque esse caminho real aqui no arquivo template. Então, primeiro, vamos sob estrutura, tipos de conteúdo, página básica e vamos gerenciar campos. Você pode ver que há um nome de máquina aqui. Imagem de sublinhado do banner do campo. Isso seria o que parece no banco de dados, por exemplo. Muito provavelmente para o tema ing. Isso é útil quando você precisa fazer referência a itens. Ok, então vamos copiar isso e vamos até aqui e colá-lo só para que tenhamos, então vamos gerenciar a exibição e vamos realmente desativar essa imagem e acertar. Salvar razão é que nós não queremos ter este mesmo cenário onde nós tínhamos títulos de fita duplicados que nós não queremos ter imagens duplicadas então nós vamos realmente desativar isso, e então vamos voltar para o código V. S. Nós temos o nome da máquina aqui, e o que devemos ser capazes de fazer é colchetes duplos. Vamos pegar essa imagem de banner de campo, cortá-la e colá-la bem no meio. Ok? E então vamos fazer um espaço aqui e fazer sublinhado arquivo. Você é tudo isso é uma função auxiliar fornecida pelo drible. E depois vamos fechar isso, está bem? E agora, não estamos especificando que isso é um nó. Então nós só precisamos fazer nenhum campo de ponto sublinhado imagem sublinhado banner, e então nós temos que fechá-lo com o arquivo de ponto de entidade. Você é eu. E se isso funcionar, estamos no caminho para a nossa imagem. Deveria estar aqui. Sim, aí está. Perfeito. Então, se eu fosse copiar isso e então ir para ele, você pode ver que é onde as imagens reais esfriam no servidor. Agora, é aqui que fica um pouco complicado. Aqui nós estamos indo para fazer um estilo CSS em linha, e nós estamos realmente indo apenas para renderizar a imagem em linha para cada página. Não podemos fazer isso em CSS porque Twig não se estende para essa linguagem, então não haveria maneira de sermos capazes de fazer essa dinâmica. E eu estou realmente indo para colar em algum código CSS que eu sei que funciona. Então, se você quiser pausar o vídeo e copiar isso em seu arquivo de modelo, eu garanto que ele funciona. Mas basicamente o que estamos fazendo aqui é fazer uso de CSS três anos recurso de ingrediente linear para fazer um efeito visual muito agradável e transparente. Mas há mais uma peça. Assim que você tiver isso adicionado em seu arquivo de modelo, você vai notar. Este ano Earl Declaração aqui em CSS nós colocaríamos que começaríamos a fazer, como imagens do site, caminho para a imagem, certo. Mas novamente, já que queremos que isso seja dinâmico, vamos realmente pegar essa corda que colocamos e hey, pisou bem. Ok, vamos poupar isso e depois vamos liberar o dinheiro. Impressionante para que você possa ver que a imagem está lá, então nós alcançamos nosso objetivo nesse sentido, mas nós queremos limpar este menu um pouco, então vamos voltar para o nosso velho amigo aqui, o Inspetor Dove. E vamos apenas dizer que eu quero que este seja Tex Align Center e vamos fazer a cor branca. E então nós queremos um pouco de enchimento, hum, para espaçar isso fora dele. Vamos derrubar isso e não precisamos de estofamento, realmente na esquerda do escritor. Vamos fazer um quarto para isso. Este é CSS abreviado. Então este quatro é superior e inferior, e então este é direito e esquerdo. Então vamos assim. Acho que seis podem ser melhores. É isso que queremos que o nosso código seja. Nós já temos uma classe CSS definida para isso. Então, o que é realmente apenas copiar este código que fizemos no navegador? E vamos voltar ao nosso estilo que o arquivo CSS smika New Line quebra aqui e chamar essa consistência de estilos de página. Então eu tenho que pessoal e vamos fazer isso legal. E, em seguida, o que é verificar duas vezes. Fizemos este cabeçalho de página de classe, então vamos chamar H um cabeçalho de página ponto. Vamos chamá-lo de colchetes cruzados no código. Conserte isso e vamos salvá-lo. Descarregue o dinheiro e aqui estamos. Isso é incrível, certo? Então agora o que podemos fazer se tomarmos algum tempo aqui, Teoh, clique através. Podemos ver que isso já parece muito mais moderno e honestamente, no geral, melhor. O que podemos fazer é começar Teoh, adicionar as imagens de banner de receita e as imagens de banner para as outras páginas. Então eu vou em frente e fazer isso e depois me juntar a você de volta. Ótima. E aproveitei o tempo para adicionar as imagens. Então isso parece muito bom até agora. Certo, isso conclui este vídeo. Eu vou vê-lo no próximo onde vamos começar a construir o conteúdo receitas tipo C então. 10. Criando o tipo de conteúdo de Recipes: Olá, todo mundo. Bem-vindo de volta neste vídeo, vamos criar um conteúdo personalizado. Eu tenho receitas. Até agora, temos trabalhado com apenas um tipo de conteúdo e esse é o tipo básico de conteúdo da página que você pode ver aqui. E como você sabe, temos usado que Teoh criar essas páginas. Então, agora vamos construir sobre nosso conhecimento do tipo básico de conteúdo da página e, finalmente construir o nosso próprio. Então é aqui que fica muito divertido, na minha opinião. Então, se formos para o Google e você sabe por este ponto que eu gosto de fazer isso fornecer-lhe algumas informações e digite tipos de conteúdo Drew pally, você clica neste 1º 1 haverá algumas informações que você pode achar útil se você quiser para aprofundar o tópico. Quase todos os tópicos na piscina Drew são extensos, então eu só poderia cobrir tanto, mas meio que longo. E o abreviado disso é que tipos de conteúdo consiste em dois elementos uma configuração base, que é o que você é recebido com na primeira página e, em seguida, os campos. Então, vamos rever os dois. Ok, então para criar nosso primeiro tipo de conteúdo. Vamos pairar sobre a estrutura. Os tipos de conteúdo tinham tipo de conteúdo e esta primeira página foi recebida com. A configuração de base é como acabamos de ler no artigo? Então é aqui que você define alguns comportamentos padrão. Então, para este, vamos nomear receitas. Isto será o que é referido quando você vai para o conteúdo, adicionar conteúdo para que possamos adicionar um tipo de receita, e vamos manter isso em branco por agora. Em opções de publicação, vamos desmarcar promovido para a primeira página e vai manter criar revisão foi desmarcar exibir autor e informações de data, e não precisamos fazer nada aqui nas configurações do menu. Vamos salvá-lo. Ótima. Então agora somos apresentados com a opção de campos. Portanto, por padrão, qualquer novo tipo de conteúdo que você criar terá um campo de corpo. Se você se lembra de nosso vídeo anterior, adicionamos um campo à página básica aqui, que era essa imagem de banner, e você pode ver que o campo do corpo é este era o título do bloco de perucas da linha de base. A configuração também é um campo, mas é por padrão. O único campo que é necessário estar em um tipo de conteúdo, é por isso que ele não é apresentado nesta exibição de campos de gerenciamento. Então o que vamos fazer é criar algo semelhante a todas as receitas. A página da receita está dentro do nosso site Drew pull, e todo o conteúdo do teste foi retirado deste site de todas as receitas. Então você pode ver que há um título que em decadência seria um campo e vai para baixo. Temos uma opção de ingredientes, que eu acho que é muito bom, uma direção, seção , alguma nutrição , fax e , claro, alguns outros campos aqui. Então vamos ver como podemos construir algo semelhante a isso na piscina Drew. Vamos voltar para o nosso site e deixaremos o campo do corpo em sua grande. Então o primeiro campo que vamos fazer é o campo de direções, que é realmente apenas vai ser um bloco de texto formatado. É chamado de direções, e vamos manter isso em um aqui e manter tudo igual. Isso parece certo. Vamos, na verdade, sim, vamos manter as configurações seguras e perfeitas. Ok, nosso campo agora está criado. Em seguida, vamos fazer um campo de ingredientes, ea idéia aqui é vamos saltar de volta para este site todas as receitas é toe tem uma lista de ingredientes, então eu gostaria de ter, como, o capacidade de adicionar várias linhas individuais. Vamos ver como podemos fazer isso em Drew Pool. Então aqui, vamos adicionar novo campo e fazer plano de texto, e vamos chamar isso de ingredientes. E a chave para este é certificar-se de que o número permitido de valores é definido como ilimitado. Ele salvou as configurações do campo. Tudo o resto parece bem aqui para que possamos realmente arrastar e soltar os. Isso é exatamente o que queremos. E vamos guardar isso. Perfeito. Certo, e precisamos adicionar mais um campo de texto aqui. Vamos fazer um campo de texto de fax nutricional. Então vamos fazer isso um texto formatado longo e vamos chamá-lo de fatos nutricionais, e vamos limitar esse dedo do pé um K grande que parece, escreve Salvar as configurações impressionante. E o que eu gostaria de dio é fornecer uma foto, bem como um link para a receita original. Uma vez que estou tomando este conteúdo, eu gostaria de ser capaz de dar atribuição ao criador aqui para allrecipes. Então vamos ver como podemos fazer isso. Então é adicionar campo e você verá em geral, há uma opção de campo de link. É chamada de receita original, e vamos limitar esse dedo do pé. E para isso, vamos realmente selecionar links externos só ele salva configurações. Agora há um último campo que vamos aderir, e que é eu gostaria de trazer uma dessas fotos para o nosso conteúdo. Então, vamos adicionar Campo já estavam familiarizados com o tipo de campo de imagem. Então vamos fazer isso de novo. Digite-o na foto que parece certo. E enquanto o ar estiver habilitado, vamos acertar configurações seguras. Ok, ótimo. Então vamos fazer o conteúdo. Adicione receitas de conteúdo e vamos dar uma olhada em como isso acabou para que você possa ver que temos nosso título, nossas direções corporais, ingredientes e quantos ingredientes precisarmos. Fatos nutricionais, a receita original e a foto. Então vamos fazer um desses juntos e apenas um lembrete que esse conteúdo está disponível nos arquivos do curso. Então vamos tomar café da manhã de morango Roubo, aveia, smoothie de café da manhã. Vamos fazer este saudável e saboroso morango aveia café da manhã smoothie dentro da opção Teoh adicionar proteína para que isso possa ser considerado como a descrição. E então vamos dar instruções Teoh. E eu vou copiar isso porque ninguém quer me ver digitando. E tudo bem, vamos escolher isso. E então vamos fazer os ingredientes aqui. Então, a opção em vários campos é realmente agradável e desenhou pessoas, eu acho que sim. Podemos apenas continuar a adicionar estes e, eventualmente, seremos capazes Teoh, você sabe, reorganizar a ordem que é super útil, e deixe-me preenchê-los e então eu estarei de volta em um segundo. OK, eu tenho todos os ingredientes adicionados aqui, e eu também vou apenas ir em frente e preencher o fax nutricional. Aperfeiçoe a receita original. Então vamos realmente colocar no Ural para isso todas as receitas aqui e, em seguida, ritmo que em e vamos fazer o texto link receita original, que é o que o usuário vai ver. Então é assim que o texto será parecido e que será vinculado. Teoh este euro E finalmente, vamos adicionar a foto grande. E não se esqueça que você está todo texto perfeito. E assim que você tiver todo esse conteúdo adicionado, vamos publicá-lo. Legal. Certo, isso não parece ruim. Há algum trabalho de limpeza que terá que fazer aqui, mas acho que faz o trabalho por enquanto. Uma coisa que você vai notar é que quando você cria uma nova receita, este padrão de nó antigo ainda está sendo usado. Então vamos para a Path Auto e vamos para baixo e vamos consertar isso. Então pesquisa de configuração e metadados, aliases Urais Vamos passar para padrões e vamos adicionar Path Auto Pattern. Então vamos chamar esse conteúdo e vamos fazer isso para cada receita que gostaríamos que fosse em barra receita cortar o título. Então, se enfraquecer navegar estes disponíveis sem tokens novamente, vamos verificar isso e vamos encontrar este nenhum título. Então isto é dizer aquilo. E temos que verificar isso. Claro, este é rótulo receitas que receitas e vamos fazer a máquina chamada receitas padrão perfeito . E então o que isso está dizendo é que cada único tipo de conteúdo de receita cont nó que adicionamos será localizado em barra receita cortar o título da receita. Então, se dissermos que fora e, em seguida, vamos para o conteúdo, vamos selecionar morango aveia filme café da manhã e em ação, vamos atualizar o URL Alias vai liberar o dinheiro. E se tudo correu bem, isso agora deve ser localizado na receita Strawberry. Será o café da manhã filme Nice. Você sabe que isso já foi feito. Eu gosto que o rótulo direções está lá. Eu também gosto que os ingredientes é o seu fax de nutrição. Eu não gosto que a receita original tenha um rótulo e a foto, então vamos nos livrar disso. Podemos fazer isso sob estrutura, conteúdo, tipos, receitas e, em seguida, gerenciar exibição. Então, sob a foto, vamos sob a coluna do rótulo. Vamos esconder isso. É também esconder receitas originais, e eu acho que eu quero as instruções abaixo ingredientes. Então vamos mover isso para cima e isso vai funcionar. Acredito que isso vai funcionar. Sim. Certo, vamos guardar isso. E então vamos para o conteúdo. Vamos ver o nosso filme “Haute Refeições” de morango. Ok, isso funciona. Eu gosto disso. Então o que você poderia fazer agora Se você é como eu em um pouco obsessivo sobre espaçamento, você poderia temar a nota de receitas inspecionando isso, e então você pode temar isso com apenas CSS. Se você gostaria de ir para o corpo e, em seguida, se você vê aqui, temos receitas de tipo de nó de página, você poderia criar uma declaração CSS que é pontos de corpo, tipo de nó de página. E então você poderia dizer, Tudo bem, cada rótulo de campo fez um rótulo de outfield. Na verdade, queremos que isso tenha uma margem. No fundo da sala de três, talvez. Ah, certo, porque é sublinhado. Sublinhado. Certo. E assim você pode, em seguida, começar Teoh, limpar o CSS aqui. Então vamos fazer isso enquanto estamos aqui. Hum, nós vamos fazer uma margem. Em cima de um carneiro, certo? Zero fundo. Vamos fazer dois e depois à esquerda. Zero. E é um pouco espacial, eu diria, eu diria, mas o que é realmente você poderia fazer isso o dia todo. Honestamente, e o que fazer? 0,5 quarto. Ok, então eu acho que parece melhor já e o que nós poderíamos fazer em vez de fazer esta margem de almofada , nós poderíamos fazer estofamento e, em seguida, borda sobre, hum, uma escolha sólida e então você sabe o que eu quero dizer? Então você poderia fazer algo como estofamento. Vamos manter esse fundo. Vamos fazer 0,5 e, em seguida, vamos fazer a margem inferior um quarto e nós poderíamos fazer isso. Eu sinto que isso parece OK. Sim, vamos fazer isso. Nada como projetar no navegador. Então vamos copiar toda esta declaração aqui. Então, no caso de eu perder você, o que estamos dizendo está na tag body, que é representada em cada página HTML, sempre há uma tag body. Se a tag body tiver uma classe de página sem tipo de receitas, que só estará lá se você estiver na página do nó de receitas, então vamos encontrar o rótulo do campo e nos dar um pouco de estilo. É o que estamos fazendo. Então vamos copiar isso. Vamos voltar ao código V S e estilos mal pagos. Vamos fazer receitas, estilos, homens. Então vamos com isso. E vamos fechar isso. Perfeito. Vamos salvar Carregado para o servidor. Voltar para droop ALS e homem, que já está olhando melhor, eu sinto e vamos liberar o dinheiro. Tudo bem, Incrível em ótimo. Certo, isso conclui este vídeo. Fizemos com sucesso um tipo de conteúdo de receita. O que eu vou fazer é ir em frente e adicionar o resto das receitas que estão incluídas nos arquivos do site e então eu vou me juntar a vocês de volta para o próximo vídeo onde vamos mergulhar no sistema de visualizações de Drew Pal, que é ótimo. Então eu vou ver que 11. Como criar uma lista de receitas: Bem-vindo de volta com o nosso tipo de conteúdo de receitas feito. Agora vamos olhar para como podemos fazer uma lista usando o sistema de visualizações de Drew Pal de cada receita que criamos até agora temos quatro receitas que fizemos a partir do tipo de conteúdo receitas . Então vamos dar uma olhada em pontos de vista. Então, como sempre, vamos ao Google. Desde que estamos introduzindo um novo tópico, vamos digitar pessoas desenhadas oito visualizações e vamos clicar no primeiro link. Se você estiver interessado em saber mais sobre visualizações, você pode conferir este link aqui e em seu núcleo. O que pontos de vista permite que você didio é buscar dinamicamente conteúdo do banco de dados. Então, o que está acontecendo quando estamos criando receitas a partir do tipo de conteúdo receitas está em nosso banco de dados. Há um lugar para cada um desses campos. Ok, então há um lugar para nutrição, fax para fotos para direções, e esses lugares estão todos empatados. Teoh uma categoria de receitas abrangente ou uma tabela. Então, para cada entrada. Então, toda vez que adicionamos uma receita, ela vai para a tabela de receitas, e há um ponto no banco de dados para cada um desses campos. Bem, com vistas. O que podemos dizer é que quero buscar todos os títulos. Digamos de receitas. Então eu quero buscar aveia durante a noite, waffles veganos, crepes veganos, aveia de morango, smoothie de café da manhã e eu só quero pegar o título e talvez alguns outros campos que acabamos de ver. Talvez peguemos o título, a imagem e a descrição, que é o que vamos acabar fazendo, e vamos fazer uma lista deles, certo? Talvez peguemos o título, a imagem e a descrição, que é o que vamos acabar fazendo, e vamos fazer uma lista deles, Então é isso que as visualizações permitem que você faça sem ter que programar. E isso é uma espécie de parte chave é Drew Polis fornecendo uma ferramenta incrivelmente poderosa dentro de uma interface, uma interface de usuário para que você possa pular ter que saber como programar? Realmente. Então, para você, realmente, tudo o que você tem que aprender é como usar visualizações. Espero que isso faça sentido. É um grande, grande tópico. Vamos dar uma olhada na página de receitas, e então o que vamos fazer é criar um bloco de exibição e colocá-lo nesta página. Então vamos começar a fazer isso. Então, sob a estrutura, vamos passar o mouse para baixo para exibições e adicionar nova exibição. Vamos nomear esta lista de receitas de exibição e, sob as configurações de exibição, garantiremos que o conteúdo seja verificado. E vamos nos certificar de que estamos recebendo todo o conteúdo de receitas. Não procuraremos páginas ou artigos. Tão perfeito. Então isso vai dizer a vista qual tipo de conteúdo dedo do pé procurar e você vai notar. Aqui. Você pode usar isso para muitas coisas para usuários, blocos, arquivos, arquivos, taxonomia e ainda mais à medida que você começa a baixar módulos adicionais. E a última coisa é, vamos pular criar uma página porque já temos uma página feita para receitas. Então vamos adicionar um bloco, e vamos fazer isso uma lista de campos não formada e emaranhada, e isso é realmente importante. Então certifique-se de que você tem campos verificados, e então vamos fazer esse zero. Ou vamos apenas fazer esse cobertor deve ser o mesmo se você ir zero ou piscar. Mas uma vez que você tem tudo isso, vamos salvar e fazer isso, ok? E se você segui-lo aqui, você verá agora na parte inferior da página uma lista de todas as nossas receitas. Isso é muito legal. Tudo bem, então o que estamos tentando fazer aqui é criar uma espécie de lista de visualização para que o usuário possa clicar em uma receita. Eles estão interessados e procurando e obter mais detalhes. Então, a fim de fazer isso, deixe-me apenas voltar para a receita que nós já criamos. Então vamos olhar para a aveia tímida durante a noite, e eu acho que o que vamos fazer é pegar o título. O corpo. Vamos pular as instruções vai pular os ingredientes nutrição, fax e a foto. Ok, vamos pegar esses campos e vamos colocá-los todos juntos para que eles saiam em uma bela lista. Certo, então, então, como eu disse, aqui temos campos à direita, e então dentro dessa janela de administração de visualizações, temos a opção de adicionar Campos. Curso. Já temos nosso título aqui, então vamos começar adicionando nosso primeiro campo. Então vamos olhar para a foto. Vamos ver a foto e também vamos pegar o , corpo, que é como a descrição em horas. E então vamos também procurar o fax nutricional. Legal e vamos adicionar e configurar campos para que você possa vê-lo vai passar por cada um que nós verificamos aqui. Então, estamos olhando para o campo do corpo e vamos apenas manter tudo padrão por agora. Fatos nutricionais, mesmo negócio e para a imagem. Vamos fazer com que a mídia e bater se apliquem. Isso deve funcionar bem, então se nós rolarmos aqui para baixo parece que há um problema com minhas imagens. Por alguma razão, vou certificar-me de verificar isso. Mas você pode ver waffles veganos está correto lá. Então temos o nosso título. Temos uma descrição e fatos nutricionais, e está parecendo muito bom. Então, o último passo aqui é ter certeza de que salvamos e tudo bem, bom. Deve ter sido um erro. Todas as fotos estavam aqui e legais. Isso já está melhor. Temos uma lista de nossas receitas que poderíamos usar em todo o site. A última coisa que faremos neste vídeo é adicioná-lo à página de receitas. Então aqui o que vamos fazer é ter a visão de que acabamos de conseguir e colocá-la no corpo. Então, a fim de fazer isso, vamos voltar para a nossa janela de layouts de bloco, e isso é familiar. Eu acho que assim para baixo aqui no Maine conteúdo porque é onde queremos colocar o nosso. Se você bloquear na página de receitas, clicaremos em Inserir, Bloquear e porque quando configuramos nossa exibição, escolhemos fazer um bloco em vez de uma página. Se escrevermos a lista de receitas que aparecerá aqui nesta janela do motel como uma opção. Então vamos selecionar um bloco de lugar e vamos desmarcar o título da exibição e, em seguida, vamos salvar isso . E vamos nos certificar de clicar em salvar blocos na parte inferior. Então, agora, se formos para receitas, você pode ver que temos uma lista dinâmica de receitas do nosso banco de dados. E só para mostrar se nós formos e adicionamos uma receita de teste que apareceria. Então vamos pular o fax de nutrição, e eu não tenho uma foto para este, mas só para mostrar aqui e depois vamos para as receitas, certo? Perfeito. Você pode ver que isso foi adicionado à nossa lista. Então isso é dinâmico. Agora vamos voltar e simplesmente excluir esse pedaço de conteúdo de teste antes de nunca. Ainda assim, ótimo. Ok, agora há um problema se formos a cerca de nós temos a nossa lista de receitas. Se entrarmos em contato, temos uma lista de receitas. Todas as páginas agora têm esta lista certa, que não é o que queremos neste caso. Então, como consertamos isso? Bem, se formos Teoh, poderíamos ir para o layout de bloco ou poderíamos ir para este ícone de lápis e selecionar Configurar bloco. Acho que vou fazer isso. E agora sob esta seção de visibilidade, vamos até as páginas e digamos que vamos mostrar esse bloco para uma página listada, então vamos apenas certificar-nos de que as receitas estão na janela da página listada. E o que você pode fazer é separar isso por uma quebra de linha. Então, se eu quisesse ter certeza de que isso estava em receitas e contato, eu poderia fazer isso. Mas vamos manter isso na página de receitas. Então, com isso atualizado vamos bater Salvar e agora você pode ver que ficou na página de receitas e vamos ver se ele também está nos menus. Ele se foi, então isso é bem simples, mas poderoso. E isso é apenas uma espécie de dar-lhe uma idéia de como você pode utilizar ter usado para fazer um site moderno dinâmico. Tudo bem, então isso concluirá este vídeo no próximo vídeo. O que vamos fazer é trabalhar na limpeza disto para que pareça mais moderno e pareça com bootstrap. Vejo você no próximo vídeo. 12. Criação de listas de exibição de receitas: Bem-vindo de volta a este vídeo, vamos transformar esta lista de visualização que fizemos para que ela se encaixe em um dos componentes de quatro bootstrapped. Certo, então vamos limpar como isso parece. Então, para começar, vamos para Bootstrap. Aqui estamos no site bootstrap na introdução. E vamos para baixo para componentes e o que é objeto de mídia fina. Então o que vamos fazer é tornar nossa lista de exibição em um dos componentes de objetos de mídia bootstraps . Então vamos usar este código aqui para este alinhamento. Um. Acho que isso parece legal, certo? Então vamos mover a imagem para a esquerda e limpar a descrição um pouco . Como sempre, com bootstrap, temos código de exemplo abaixo do exemplo. Tudo bem, então vamos apenas copiar isso para agora e voltar para as receitas e vamos editar a vista deste ícone de lápis aqui. Agora estamos de volta à janela de administração U. Views. Então, a fim de fazer isso, vamos fazer uso do campo de texto personalizado, então devemos ser capazes de digitar texto personalizado e vamos adicionar e configurar campos e o que isso nos permite fazer é fazer uso do sistema de token ALS droop. Ficamos um pouco familiarizados com tokens quando estávamos configurando nossos caminhos automáticos de caminho. Mas novamente, o que isso vai fazer é procurar é realmente tornar essa lista dinâmica e procurar esses campos, que são representados por tokens do banco de dados. Certo. Então vamos colar em nosso HTML que copiamos do Bootstrap, e eu vou fazer isso maior. E vamos aplicar isso para ver o que acontece. Tudo bem, então como você pode ver para cada um e vamos salvá-lo ainda melhor para que possamos ver isso se parece. Então você pode ver para cada um que temos o código HTML que colamos através do campo de texto personalizado . Bem, o truque aqui é ocultar todos os nossos campos e representar esses campos usando tokens de pols desenhados no texto personalizado. Então vamos fazer isso agora, então vamos editar, visualizar e vamos começar por ocultar cada campo. Então, vamos excluir isso da exibição e pressione aplicar. Vamos descer e fazer isso para o campo do corpo também. fax nutricional excluirá isso e a foto. Então, o que nos resta é apenas o HTML em que colamos do Bootstrap. Agora vamos para este campo de texto personalizado e vamos começar Teoh, substituir o texto estático por tokens. Vamos pular a tag de imagem por agora porque isso vai exigir algo extra. Mas o mais fácil para Dio é começar aqui é ir sob corpo de mídia e vamos onde diz Top alinhado mídia, Vamos encontrar sob padrões de substituição. Vamos copiar, título e colá-lo. Ok. E só para mostrar esta linha por linha agora você pode ver em vez do título estático que temos o título real da receita. Vamos continuar a fazer isto, e vou tornar esta janela maior outra vez. Ok, para esta tag de parágrafo, vamos apagar todo o texto e vamos apenas enquanto estamos aqui em baixo. Além disso, apague todo esse Texas. Bem, ficamos com duas etiquetas de parágrafo para este em padrões de substituição, vamos pegar o corpo. E para o último, vamos pegar o fax de nutrição Cool e vamos lá. Candidate-se para ver como isso está parecendo. Tudo bem, ótimo. Agora vamos atacar esta imagem. Se olharmos para o campo da foto, isso está sendo renderizado como uma tag de imagem. Certo, então não queremos que isso que copiamos de Bootstrapped seja uma imagem. Em vez disso, vamos realmente fazer esta imagem uma div, e vamos manter a classe o mesmo Align Self iniciar M R três. Ok, nós podemos remover todo o texto porque isso é representado no campo mais uma vez. E vamos nos certificar de que estamos fechando essa div antes de irmos mais longe e o que colocaremos aqui é o campo de fotos real. Assim, não poderíamos envolver uma imagem dentro de uma imagem. Simplesmente não funcionaria. Então é por isso que tivemos que fazer disso um div. Ok, então vamos aplicar isso. E como você pode ver aqui, isso parece bom. Agora vamos guardar isto e ver o que temos na página. Incrível. Então fizemos isso com sucesso e isso parece muito bom. Até agora, há algum trabalho de limpeza CSS que faremos aqui. Mas apenas para demonstrar, você pode ver que este é um site móvel totalmente funcional, graças ao bootstrap. Então, estamos mais uma vez indo Teoh estilo isso no navegador e, em seguida, trazê-lo para nossas folhas de estilo CSS . Então, vamos clicar com o botão direito Inspecionar e eu vou trazer isso de volta para baixo. Teoh a bandeja ali e vamos dar uma olhada na nossa marca. Então, o que vamos acabar fazendo é criar uma declaração a partir dos pontos de vista. Então, se você acabou de ver que eu bati um sinal de mais lá no Inspetor e nós temos e nós temos esta enorme lista de classes , que não é o que nós queremos, nós vamos começar a cortar isso para que os estilos que fazemos apenas afetem isso vista particular. Tudo bem, então agora nós ficamos com classes de vista vista vista receitas lista lista lista I D listas de receitas eo bloco I d. Ok, mas nós podemos realmente trazer isso para baixo ainda mais. Podemos remover esses óculos, e podemos apenas dizer div dot view lista de receitas. E então podemos começar a agarrar em classes a essa declaração. Então, digamos que dentro da div dot receitas lista todos os div ibs imediatos. Queremos esse dedo do pé. Tem uma margem, parte inferior de uma sala e um, digamos, fundo de enchimento de uma sala, bem como para começar a espaçar fora e vamos fazer o nosso truque aqui novamente. Então, com tudo isso, podemos fazer uma fronteira uma escolha sólida. Mas na verdade, vamos fazer borda inferior um pixel sólido de E. Isso parece muito bom, na minha opinião. Então isso parece bom. Se acabarmos com isso, já está começando. Parecem espaçados e melhores. E eu acho que o que também vai fazer aqui é simplesmente fazer o título. , Este é o nosso site verde,o verde que temos usado para o site. Então, se selecionarmos esse título e, em seguida, vamos fazer novamente nossa lista de receitas de visualização de pontos div e digamos, cada cinco a. Porque há um link embutido nesta tag de cabeçalho. lista de receitas de visualização de pontos div e digamos, cada cinco a. Ok, então vamos fazer essa cor. Não Alice Blue, mas o que é Basta usar isso e então obter esta alternância de cor. E vamos selecionar uma dessas cores aqui. Não é isso. Bem, na verdade, na verdade, selecione-o a partir deste. Eu não posso. Eu acredito que parece muito melhor, eu acho, mas podemos torná-lo um pouco mais escuro. Provavelmente. Sim. Lá vamos nós. Então você pode copiar isso para o seu projeto também para E oito c 60 k E com esses estilos, vamos apenas copiar este 1º 1 aqui que acabamos de fazer ou o 2º 1 que acabamos de fazer. E vamos saltar para o código V S. E é nomeado este, hum, hum estilos de lista de exibição de receitas. E vamos começar a juntar isso. Vamos voltar aqui e encontrar nossa aula de mídia. E vamos copiar a declaração que fizemos aqui no navegador, ele disse. Em Hit Save ele será carregado mais uma vez. Vou fechar isso e liberar o dinheiro. E se tudo correr bem, nossas atualizações devem ser perfeitas. Tudo bem. Então nós transformamos com sucesso um droop Alvaro, você lista em um objeto de mídia bootstrap usando apenas a interface, e isso está começando a parecer bom. Tudo bem, eu vou ver no próximo vídeo 13. Criando a página: Tudo bem. Bem-vindo de volta a este vídeo, vamos finalmente chegar a esta página inicial. Vamos limpar este material extra que está atualmente situado na página inicial. E o plano aqui é criar uma apresentação de slides usando bootstraps carrossel, e também irá adicionar um bloco na parte inferior com algumas informações extras. Então vamos direto ao assunto. Então você deve ter notado que este banner verde é repetido em todo o site. Se você se lembra, isso é algo que adicionamos no modelo de página. Você pode temar esta página inicial usando uma página TPL específica. Então, se você se lembra que se fôssemos voltar para o código de estúdio visual aqui, nós usamos esta página dot html ponto galho. Bem, se você quisesse Teoh tema fora desta página inicial, você poderia dio ir ao Google e digitar homem drible. Eu como de modelos de página. Tweet. Vamos fazer modelos de galhos. E deixe-me ver aqui nesta troca tripla. É assim que você iria temar a página inicial para que você pudesse copiar isso. Traga-o aqui para o galho e adicione isso aos seus arquivos de template. No entanto, para nós, nossa ponte não é realmente complexa. E fora disso, realmente não há diferenças estruturais. Então eu vou mostrar-lhe um truque rápido para ser capaz de remover este Onley para a página inicial. Dessa forma, poderíamos apenas ficar dentro do nosso modelo de galho de ponto de página html. Então, tudo bem, então para se livrar disso, vamos inspecionar o elemento e você pode ver que demos a esta seção uma classe de banner de página . Então o que vamos fazer aqui como fizemos em um vídeo anterior, vamos selecionar o elemento corpo e vamos Teoh. Veja que esta página principal do caminho é uma classe disponível sobre o ataque corporal. Vamos copiar isso e criar uma nova declaração corporal com essa primeira página do caminho. Então isso é dizer apenas a primeira página. Só vamos fazer isso na primeira página. E vamos, em seguida, fazer a seção do banner da página pontos. E com isso feito, vamos fazer mostrar nenhum. Tudo bem, então isso irá remover o banner da página apenas para a página inicial. Perfeito. Então vamos voltar e vamos nos certificar de que copiamos isso para a declaração que fizemos Vamos passar para o código V. S em nosso estilo de ponto CSS. E vamos fazer uma nova seção aqui para a primeira página do Silas. E vamos acelerar isso em “Salve it out”. Volta para a piscina Drew e certifica-te de que vamos dar descarga no caixa. Incrível! Então, isso se foi. E agora você pode ver que as outras páginas ainda têm seus banners. Legal. Então vamos passar para Bootstrap e vamos olhar para o componente de célula de cuidados, dar-lhe um exemplo aqui com controles, e isso é realmente o que queremos para o nosso site. Queremos poder ter um editor de conteúdo adicionado em uma imagem e ter que ser um carrossel bootstrap . Agora, quando instalamos em todos os nossos módulos no caminho de volta em um dos primeiros vídeos deste curso , um dos módulos que instalamos foi este bootstrap, carrossel simples, e eu encontrei isso. Ele faz um trabalho muito simples de habilitar este castelo bootstrap que acabamos de ver na interface de puxar Drew , então apenas certifique-se de que você faz, na verdade tem que instalado. Se você fizer isso, será sob estrutura e na parte inferior, itens de carrossel simples. Então vamos até lá e selecionar isso e o que está em um elemento. Vou escolher um dos arquivos do nosso site de curso. E com isso carregado, vamos fazer isso chamado Bebidas Incríveis e eu copio isso e coloco isso na imagem Alz. Vamos também fazer o link de imagem e o título da legenda Amazing Drinks também. Vamos definir o estreet, Atis dedo ativo e o peso para três porque queríamos estar no topo. Vamos continuar adicionando estes aqui. Faremos isso juntos. Vamos encontrar a próxima foto e vamos fazer isso chamado café e café expresso premium. Nós também vamos apenas copiar isso para cada um, e nós vamos fazer este quatro. Os itens mais pesados afundam para o fundo, e eu realmente apenas Oops, precisamos também fazer esse status ativo. E também notei que adicionei a foto errada aqui. Então deixe-me dizer, você realmente tem que excluir isso usando este módulo. Então eu deletar isso. Certo, e vamos adicionar a última imagem. Vamos chamar este café Vegan de melhor qualidade e apenas repetir este processo, torná-lo ativo, e nós vamos fazer isso cinco. Então afunda todo o caminho até o fundo. Então, é o último. Ótima. Ok, agora há outra coisa que precisamos fazer antes de adicioná-la à página inicial. Precisamos entrar aqui e ajustar as configurações. Então, se formos ao Bootstrap e depois verificamos esta cela de cuidados, chame-a mais uma vez. Vamos rolar até a parte inferior da tela e vamos dar uma olhada nas opções. Tudo bem, então o que o desenvolvedor deste módulo fez foi pegar essas opções de intervalo, bem como algumas dessas outras opções aqui. E ele trouxe isso para este módulo para que você possa ver que nós temos esses 500. Na verdade, vamos fazer o intervalo aqui. 500 ou com licença, 5000. Nossa, nós queremos isso. Teoh continuamente ciclo, e vamos fazer Paul's on hover mostrar os indicadores que controla sobre. Vamos apenas verificar se os ativos estão incluídos no tipo de imagem bootstrap. Vamos fazer fluido de imagem, e o estilo de imagem será a imagem original. Então vamos guardar isso perfeito. E, a fim de colocá-lo na página inicial, vamos para o layout do bloco e vamos colocá-lo no principal. Ah, lá não. Vamos colocá-lo na seção de conteúdo principal e você verá o primeiro 1 aqui, na verdade. Isto é bootstraps? Bloqueio de células de cuidados simples. É o lugar em que. Tudo bem, embaixo das páginas. Nós vamos fazer frente. Vamos fazer esta exibição apenas na primeira página Land. Vamos salvar esse bloco e vamos salvar os blocos mais uma vez. Vá para casa e vamos ver o que aconteceu aqui. Certo, algumas coisas. Primeiro, ainda temos esse conteúdo, e vou mostrar-lhe como se livrar disso. Mas primeiro nós realmente queremos isso. Isto parece bom. Ok, então nós fizemos um ótimo trabalho adicionando nosso controle deslizante aqui, mas nós realmente queremos que isso seja cheio com. Queremos que isso abranja toda a largura da tela exatamente como nossas imagens de banner fizeram . Então, a fim de fazer isso, vamos construir uma região em Drew pool. Então vamos passar para o código V. E vamos listar o nosso e vamos listar o diretório do site do servidor. Então deixe-me falar disso agora. Estamos no nível superior, então vamos aos temas. Este é o lugar onde temos trabalhado Bootstrap e dentro das inicializações principais reupped para o diretório de temas . Vamos descer e encontrar Bootstrap para info dot de amel. E se você apenas fazer um espaço lá e, em seguida, com a extensão sftp, você pode, em seguida, ir para a lista pasta ativa e, em seguida, você está de volta onde começamos lá. Assim, neste arquivo foram capazes de definir algumas das configurações de linha de base para qualquer tema que estavam trabalhando com Lesão Bull. Então vamos saltar de volta sobre Teoh a interface pull Drew e vamos olhar para o layout de bloco e você pode ver aqui que temos um número de regiões que estão disponíveis para nós para colocar conteúdo em. Ok, então o que nós vamos fazer é fazer um desses nós mesmos e adicioná-lo a este tema para que possamos colocar a apresentação de slides na região logo acima do conteúdo. Vamos chamar isso de destaque e a próxima linha aqui isso é o que vamos nos referir a esta região como no modelo destacado. Mas na interface, esta próxima linha é o que o usuário vê. Então vamos chamar esse chamado porque isso é realmente o que estamos fazendo é um chamado e vamos salvar isso. E então vamos para a página dot html ponto galho E o que vamos fazer aqui é encontrar aquele banner de seção que fizemos este e vamos fazer alguma lógica condicional aqui para começar. Então vamos Teoh, abra um bloco de galhos aqui e vamos nos certificar de que fechamos isso. É assim que abrimos isso. Digamos, se é sublinhado frentes, que é uma função auxiliar em Drew pool. Vamos fechar o bloco de galhos aqui. Bem, nós temos isso e digamos, e se sim, estamos terminando nossa declaração de “se”, ok? E o que é Taibe? E vamos chamar esta página de ponto destacado. Tudo bem, então é assim que declaramos uma região em um arquivo de modelo dentro do drible. Então vamos guardar isso. Vamos voltar para Drew Paul e dar descarga. O dinheiro está bem, e se tudo funcionou corretamente, devemos ter essa região de chamada disponível, e vamos colocar nossas bootstraps Célula Simples de Cuidados bem nessa chamada. E vamos chamar isso de frente mais uma vez. Salve o bloco e acabei de perceber que isso significa que agora temos dois. Então vamos pegar este, então nós adicionamos anteriormente, e vamos apenas remover esse perfeito e vamos salvar isso. Vamos verificar a página inicial, e isso já está melhor. Há uma limpeza que precisamos fazer aqui. Vamos configurar o bloco. Nós não queremos isso, então vamos simplesmente na verdade. Não, vamos ficar com isso. Vamos desmarcar o título de exibição e salvar o bloco. Ótimo! Tudo bem. E agora vamos limpar os C s um pouco aqui, como temos feito. Portanto, queremos que esta legenda seja alinhada verticalmente no meio do carrossel. Vamos clicar com o botão direito inspecionar café e café expresso premium e então vamos subir um para esta legenda Div Carrossel e eu vou voltar. Então que estavam sobre isso e você pode ver aqui que a legenda do carrossel já tem alguns estilos associados a ele, e está sendo posicionado aqui com, um posicionamento absoluto usando esta declaração CSS. Então o que vamos fazer é apenas ajustar isso para que haja primeiro de fundos de preto. Dessa forma, podemos vê-lo, e eu também acho que ele parece realmente agradável lá e acrescentará também uma declaração de topo aqui. E vamos chamar isso de 50%. E como você pode ver, isso agora é uma treta. Como consertamos isso? Bem, temos que definir uma altura específica para consertar isso. Então vamos fazer a altura 75 pixels e voltar para a nossa folha de estilos CSS e adicionar esses estilos que acabamos de criar para a legenda do carrossel. E vamos dizer isso. Volte, lave o dinheiro e atualize. Tudo bem, eu acho que isso parece muito bom, ok? E a última coisa que vai fazer neste vídeo é adicionar um jumbotron bootstrap para a parte inferior da página inicial sobre o site bootstrap sob componentes. Vamos encontrar o Jumbotron, e isto parece muito bom, por isso acho que vamos copiar esse código. Vamos voltar para cair tudo, e a maneira que vamos fazer isso acontecer é adicionando um bloco. Então vamos para layout de bloco de estrutura, adicionar bloco personalizado e vamos apenas chamar este jumbotron contato, e então o que vamos fazer é tornar o formato de texto completo. HTML. Vamos clicar no botão fonte e colá-lo. Certo, então vamos chamá-lo de Lanes. Comece Cafe Cage Cafe, e vamos simplesmente colocar em algumas das informações de endereço falso aqui. Vamos manter o RH ali. Esta regra horizontal que parece agradável. E então vamos colocar na data e horas em que eles estão abertos. Então vamos fazer isso. E então eu acho que o que vamos fazer aqui é ligá-lo menu Teoh. Ok, vamos ver aqui esse trabalho e vamos para a fonte real para mudar esta informação. Então, em vez de aprender mais, vamos chamá-lo, verificar o menu, ok, e, hum, vamos dizer que fora. Incrível. Nós não vamos exibir o título. Vamos escolher páginas e então vamos para a frente por agora e então podemos realmente colocar isso na região de chamada a partir daqui, então vamos salvar isso. Certifique-se de que está sob o bloco de celas de cuidados simples bootstrap e, em seguida, ir para o fundo bater salvar blocos e vamos voltar para o site. Isso parece bom, mas acho que podemos estilizar isso um pouco. Vamos encontrar o bloco real I d. Então bloquear contato Jumbotron é o que estamos procurando lá. Vamos adicionar um “plus”. E felizmente, eles têm div com uma idéia de contato de bloco. Jumbotron já selecionado. Com isso, vamos fazer o centro das linhas têxteis. Certo, então vamos centrar isso. Acho que isso parece muito bom. E então vamos adicionar um pouco de preenchimento. Hum, vamos fazer um estofamento de Vamos fazer um estofamento de Ram. Isso parece muito melhor. Incrível. Tudo bem, então vamos pegar a declaração de estilo aqui e então vamos copiar isso. Jogue-o em nosso arquivo CSS, salve-o. Limpe o cache. Perfeito. Tudo bem. E, na verdade, há outra coisa que queremos difundir, um, um, nossas páginas de contatos, a única página que está em branco. Então vamos adicionar um Jumbotron aqui embaixo também, então vamos voltar para casa. Vamos selecionar a partir deste Jumbotron que fizemos. Vamos ir sob fonte aqui em selecionar todas as cópias, voltar e, em seguida, na página de contato, vamos editar. E antes de selecionar o código-fonte, vamos para HTML completo e vamos colar isso. Nós vamos realmente pegar 1 800 rua incrível e fazer que o título vai derrubar este link e então nós vamos fazer uma nova quebra de linha e dizer, “ Nos ligue no 111222333 E vamos salvar isso. Incrível. Gosto de dizer muito incrível, como todos podem ver. Então vamos eu prefiro que este seja alinhar texto, centro. Mas em vez de fazer uma declaração de estilo, vai realmente apenas editar isso de dentro da peruca Wiz E. Então vamos para a fonte A partir de então o Jumbotron Div, vamos fazer estilo igual ao alinhamento de texto. Hum, centro. Perfeito. Então isso deve consertar isso. E isso já parece melhor. Ok, muito obrigado por assistir este vídeo, e eu vou te ver no próximo. 14. Obrigado!: Olá, todo mundo. Parabéns por terminar este vídeo. Siri e eu queremos agradecer pessoalmente a cada um de vocês por dedicarem um tempo para aprender comigo. Eu realmente espero que você tenha sido capaz, Teoh, achar a informação deste curso útil. Eu certamente me diverti muito fazendo isso. E por favor, se há algo que não faz sentido para você, sinta-se à vontade para começar uma conversa aqui, e eu farei o meu melhor para voltar para você o mais rápido possível. Agora que você concluiu este curso, você tem um modelo de site moderno pronto que você pode usar para personalizar de acordo com suas necessidades. Existem muitos recursos que podem ser adicionados a este site que criamos para torná-lo ainda mais moderno e mais dinâmico. Se você já assistiu este vídeo durante todo o caminho e você está interessado em me fazer criar um vídeo sobre tema avançado ing onde nós realmente criar uma página de modelo de nó personalizado e ir um pouco mais fundo em como podemos construir este site, Por favor, me avise se houver interesse suficiente que eu trabalharei na construção desse curso novamente. Muito obrigado por aprender comigo. E espero vê-lo em outra das minhas séries de treinamento. Cuide-se