Guia para iniciantes do Elementor Pro Parte 2 - Criador de temas | Paul Charlton | Skillshare

Velocidade de reprodução


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Guia para iniciantes do Elementor Pro Parte 2 - Criador de temas

teacher avatar Paul Charlton, Designer & Trainer

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      Introdução do curso

      0:36

    • 2.

      Quais ferramentas você precisa?

      1:05

    • 3.

      Como construir um cabeçalho global

      8:27

    • 4.

      Como construir um rodapé global

      5:16

    • 5.

      Como criar modelos de arquivo e publicação únicos

      10:42

    • 6.

      Técnicas de edição de modelo inline

      1:54

    • 7.

      Como e por que usar modelos globais

      5:07

    • 8.

      Em conclusão

      0:26

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

264

Estudantes

1

Projetos

Sobre este curso

Parte 1 do Guia para iniciantes para Elementor.

Se você está procurando um guia de início rápido detalhado para construir seu primeiro tema WordPress com Elementor Pro, este tutorial vai levá-lo lá em tempo duplo

double-quick as habilidades principais e conhecimentos necessários para tirar o máximo proveito do poderoso Criador de Temas do Elementor Pro.

O curso abrange os seguintes tópicos principais:

  1. As ferramentas necessárias
  2. Como construir seu cabeçalho global e entender as opções de condições
  3. Como construir seu rodapé global
  4. Arquivos de tema único e arquivo
  5. Modelos globais...

Com as habilidades cobertas neste curso, você não deve mais se restringir a usar temas WordPress pré-desenhados. Você pode deixar sua criatividade fluir e criar desenhos exclusivos para você ou para seus clientes.

Conheça seu professor

Teacher Profile Image

Paul Charlton

Designer & Trainer

Professor

Hi, I'm Paul, from South Wales, UK and I am a passionate Musician, photographer, professional web & graphic designer, mountain biker and gamer who enjoys all things technical! 

I've worked as a professional web designer for over 15 years and an IT trainer for 10 years prior, specializing in digital media and design. I've been lucky enough to provide work for some amazing industry magazines (.Net, Digital Photographer, Computer Arts, etc.) and had my photography featured in magazines and online.

I'm the owner of a successful web & graphic design company trading for over 14 years alongside developing over 600 training videos on a range of design, photo editing and audio production topics as well as authoring 2 eBooks on photography and Adobe Lig... Visualizar o perfil completo

Level: All Levels

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Apresentação do curso: nesta classe em particular, eu vou estar levando vocês através de todo o processo de criação de um tema usando profissionais elementais . Criador de temas. Vamos dar uma olhada em todas as habilidades fundamentais que você precisa saber incluindo algumas das atualizações recentes para coisas como estilos de tema sobre a capacidade de em linha editar todas essas coisas para fazer todo o processo de criação de coisas personalizadas com elemental pro. Muito mais simples, muito mais simplificado, muito mais rápido. Então, se estiver interessado, junte-se a mim nesta aula e eu vou te mostrar cada passo do fim dela. Você vai ter um conhecimento completo exatamente como construir seus próprios temas usando elemental pro. 2. Quais ferramentas você precisa?: Então, a primeira coisa que vamos fazer é baixar Install the hello theme. A razão pela qual usamos o tema Olá é porque mesmo que nós estamos tipo de construir nosso próprio tema, WordPress em si só precisa ter um tema instalado. Não precisamos necessariamente usá-la. E nós vamos usar o tema Olá porque é basicamente apenas um tema de ossos nuos pelos desenvolvedores fora elemental em si. Isso garante que temos wordpress feliz e não precisamos se preocupar com quaisquer bits extras e peças ficando no caminho e causando problemas quando configuramos as coisas como parte do nosso tema. Agora, no topo do tema Olá, também precisamos ter certeza de que temos elemental pro instalado. Agora você tem que usar elemental pro. A versão gratuita não vem com a capacidade de criar arquivos de tema. Podemos salvar alguns modelos básicos como modelos de página e seção, mas não construir um tema. Então, basta ter em mente se você não tem a versão pro, você não pode realmente seguir junto com o que eu vou cobrir neste vídeo em particular. Então, desde que você tenha o tema Olá instalado. Você tem elemento elemental no elemento ou pro instalado. Estamos prontos para começar a seguir em frente. Então vamos apenas saltar para o painel do Wordpress agora e começar a dar uma olhada em todas as coisas que temos para começar a construir seus próprios temas personalizados com elemental pro. 3. Como criar um cabeçalho global: desde que eu fiz meu vídeo inicial sobre como usar o construtor de temas Enemy Elemental 2.0, as coisas meio que mudaram. Os fundamentos básicos são praticamente os mesmos, mas agora temos alguns recursos de economia de tempo real que tornam todo o processo ainda mais simples sobre o mal, mais abrangente. Mas precisamos definir algumas coisas que, primeiro lugar, então o que eles fazem é que eu vou entrar no Elemental. Vamos entrar na seção de configuração a partir daí. Vamos tomar duas opções. Vamos desativar as cores padrão desativadas em fontes padrão para ir verificar as duas mudanças de gravação. Agora, por que estamos fazendo isso? Porque Elemental lançou recentemente a capacidade de criar estilos de tema. E isso significa que podemos definir fontes, enfraquecer tamanhos de fonte, cores, cores botões, toda a gama de coisas diferentes. Tudo isso agora significa que quando criamos nossos próprios temas, também podemos contar todas essas informações também. Todos esses ativos de design temos que desativar as cores padrão e fontes padrão. Caso contrário, isso funcionará. A próxima coisa a fazer é saltar para a aparência e os personalizadores para que possamos dar uma olhada em quais opções estão disponíveis como parte do tema Olá apenas para que você possa ver algumas das coisas que você pode fazer lá, mas principalmente apenas para ver que isso não é nada para ele. Vai aparecer e personalizar. Assim que entrarmos lá, podemos ver que temos quatro abas no lado esquerdo. Os menus de identidade do site, configurações da página inicial em CSS adicional. Se quiséssemos aplicar algum CSS global para o site, não. Usando algo como o tema Olá, podemos beneficiar de algumas das opções que estão disponíveis. Se entrarmos na identidade do site, por exemplo, temos quatro opções diferentes. Enfraquecer configurar o logotipo, o título do slogan em um ícone, que é basicamente que dar tecido em que irá aparecer nas guias do navegador. O que eu quero fazer é definir o logotipo, então nós vamos definir isso para usar o logotipo escuro em vai dizer select. Vamos pular o corte. O que isso basicamente nos permite fazer é quando montamos nossa cabeça e colocamos nosso logotipo lá . Podemos usar o widget logotipo em vez de apenas usar em gráfico comum. E então, se ele quisesse mudar esse global em todo o site que usa esse widget em particular , nós simplesmente temos que entrar no personalizador. voltarmos a sair disto agora, podemos configurar menus dentro de ti, se quiseres. Tudo o que podemos apenas fazer isso da maneira normal como parte do painel de controle do WordPress. Vou deixar assim por enquanto. Vai voltar a sair. Vamos deixar tudo como está e vamos acertar. Publicar. Só para termos o nosso logótipo no topo. Só uma boa vantagem sobre o que vamos fazer. Então, agora que passamos e configuramos tudo, vamos dar uma olhada no próprio edifício do tema. Se sairmos da seção de modelo no lado esquerdo, temos construtor de temas. Vou clicar nisso, e isso vai nos levar para a seção básica do construtor de temas. Agora você pode estar olhando para isso e pensando, bem, não há realmente muita coisa acontecendo. Como trabalhamos com ele? Bem, deixe-me explicar esta seção, e então você verá o que começamos a construir as coisas, como isso irá preencher com diferentes tipos de arquivos de construção de temas que configuramos. Então, em primeiro lugar, temos o construtor de vapor, que mostrará todos os diferentes arquivos de tema que criamos. Atualmente, não há nenhum, mas à medida que começamos a criá-los, eles serão listados aqui. Em seguida, temos quatro guias diferentes, uma para cada um dos diferentes tipos de arquivos de tema que podemos criar. O cabeçalho e um rodapé lá muito auto-explicativo. O que eles fazem, o single é basicamente, se você olhar para um post blawg, que é um único modelo. Em outras palavras, ele mostra a postagem onde o arquivo exibirá uma lista de postagens novamente. Você verá isso enquanto passamos agora. Se você tivesse alguns realmente a pé para casa instalado, você veria algumas abas extras dentro do seu para a guerra. Comércio para um único Ah, um para arquivos de comércio de parede funciona do mesmo tipo de maneira. Ele só mostra o produto em vez de postagens. Essa é a única diferença entre eles. Então vamos começar isso, dando uma olhada na cabeça do set up para clicar para ir para o cabeçalho uma vez que fazemos isso agora, porque não temos nenhum arquivo de tema configurado nesta seção particular foram apresentados com este primeiro tipo de criar seu primeiro cabeçalho. Então nós vamos fazer é dizer em um novo cabeçalho porque nós escolhemos a cabeça que um tablet já sabe que está à frente de nós vamos criar. Mas clicamos para expandir que você pode ver que podemos escolher entre qualquer uma dessas outras opções, além alguns arquivos de modelo, que são coisas como seções e assim por diante. Então vamos deixar isso como chefe de Isso é perfeitamente bom. A próxima coisa a fazer é dar um nome a este arquivo de modelo. Agora, o que eu costumo fazer é que tenho uma convenção de nomes que eu costumo usar para praticamente todos os meus projetos. Então, se eu estou indo para criar um arquivo de modelo, um arquivo de tema que vai ser usado globalmente são sempre chamá-lo padrão algo assim neste exemplo vai ser cabeçalho padrão. Agora, se eu quisesse criar uma cabeça para cima para uma seção específica que será diferente do cabeçalho padrão, eu iria nomeá-lo algo diferente, mas novamente, incluindo cabeçalho. Então, o que eu sugiro é apenas entrar no hábito de criar uma convenção de nomes que você mantém porque isso só vai tornar sua vida mais fácil quando você voltar para um projeto talvez seis ou 12 meses abaixo da linha de pensamento. Qual o nome desse arquivo de modelo específico? Use uma convenção de nomenclatura lógica. Torna sua vida consideravelmente mais fácil. Ok, então nós fizemos as duas coisas que precisamos fazer. Neste ponto, vamos clicar em criar modelo que irá, em seguida, passar por abrir, elementar sobre. Se temos algum modelo, podemos puxar em formas parte do elemental ou elemental pro. Poderíamos usá-los como ponto de partida. Ou se quiséssemos, poderíamos começar completamente e totalmente do zero. Agora, deixe-me apenas levá-lo através desta seção antes de seguirmos em frente para começar a dar uma olhada na construção ou mudança de coisas. Se dermos uma olhada, temos três abas no topo. Temos páginas de blocos nos meus modelos. Blocos, como este nome foi sugerido são elementos de bloco diferentes de uma página. Coisas como cabeçalhos, rodapés, serviços de heróis, esse tipo de coisas. Todos eles são divididos em várias seções diferentes, que você pode filtrar no lado esquerdo, usando esta seção particular porque estamos criando um cabeçalho, ele irá nos mostrar automaticamente os arquivos de modelo de cabeçalho. Essa instalação faz parte do elemental pro. Se quiséssemos, poderíamos mudar isso para outra coisa. Então, por exemplo, herói e eles vão nos mostrar todos os blocos de herói que eu vejo. Queremos manter a cabeça da seção porque é com isso que estamos trabalhando atualmente , páginas com as quais não precisamos nos preocupar, porque isso vai nos mostrar modelos de página inteira. Não é o que você quer usar quando estamos criando Cabeçalho em meus modelos. À medida que criamos modelos, todos eles serão listados lá para que possamos usar aqueles como e quando considerarmos apropriado, vamos voltar sobre a seção de bloco para que eu faça agora é vamos encontrar um desses modelos pré-projetados e usá-los como um ponto de partida para o nosso design particular. Então eu não pego esse cabeçalho em particular. Agora você vai ver que eu vou Logo já está inserido porque nós configuramos que foi parte do Olá. Parece que você vê por baixo temos o lugar segurar um widget, pronto para colocar em nosso menu. Mas como não configuramos um menu, nada está aparecendo no Então temos agora é um tipo normal de página que vamos trabalhar como parte do Elemental. Então podemos clicar em qualquer um desses. Podemos fazer mudanças em tudo o que quisermos. Podemos configurar o que quisermos. Então não queríamos este verde no topo. Poderíamos simplesmente clicar na seção de estilo Commodore, ou podemos escolher a cor que quisermos a partir daí. Tal usado este azul claro Nós não temos nenhuma mudança que temos o nosso primeiro modelo configurado. A próxima coisa a fazer é clicar em Publicar. Então, uma vez que clicamos em publicar, você pode ver que ele nos leva e diz, precisamos adicionar uma condição. E este é o tipo de fundamentos básicos fora. Usando os modelos como parte do elemental pro Para construir um tema, você apenas cria condições para dizer quando em caminho um determinado arquivo de tema será usado. Então podemos fazer é clicar em, adicionar uma condição e, em seguida, temos duas configurações diferentes que temos incluir e excluir, então você pode usar qualquer lógica que você quiser. Então você diz Incluir, e você vê-lo atualmente diz site inteiro. Clicamos para expandir isso para a lista suspensa. Temos três opções agora. Este é um menu sensível ao contexto. Todo ator significa que o menu mudará com base no arquivo de tema que foi editado. Por enquanto, no entanto, vamos dizer que todo o site está perfeitamente bem. Se ele queria enfraquecer, adicionar condições adicionais, Suker diz em outra condição, e você poderia escolher excluir. Então poderíamos dizer Vamos excluir isso dos arquivos e eu não diria todos os arquivos e você pode ver que temos opções extras lá dentro para que possamos dizer agora nós definimos para diferentes condições que este cabeçalho estaria mostrando todo o site excluindo qualquer uma das páginas de arquivo. Vamos apenas remover a segunda condição. Não temos apenas configurá-lo para dizer incluir todo o site. Vamos apertar salvar perto e esse é o nosso primeiro arquivo de tema criado. Então, agora temos uma cabeça global um pouco aplicar a cada página em nosso site 4. Como criar um rodapé global: Agora, se dermos uma olhada em nossa página de teste, esta é a página inicial antes da cabeça como sendo aplicada a ela. Então este é o tema Olá, layout básico de ossos nuos. Então, vamos apenas atualizar esta página. Aqui está o nosso novo cabeçalho para que você possa ver que há barra azul no topo. Temos um logótipo. Obviamente, ainda estamos perdendo o sistema de menu, então vamos colocar isso em um momento. Então é assim que é fácil. Não, cada página que pudermos dar uma olhada em uma dessas postagens vai pular e você pode ver novo. O modelo de post único real ainda parece absolutamente terrível. O que temos é que temos um cabeçalho aplicado à nossa página. Então, em todos os lugares agora esta cabeça vai ser evidente. Agora, antes de seguirmos em frente, há outra coisa que quero te mostrar. E esta é uma das maiores coisas que foram adicionadas ao elemental pro nos últimos meses e uma das razões pelas quais estou mostrando esse processo de criação de um tema do zero novamente. Então vamos para o lado esquerdo. Widgets de grelha são bem vir para o pequeno menu de hambúrguer no canto superior esquerdo foram clicados para abrir. As diferentes opções, as preferências, as configurações e todos esses tipos de coisas. O que estamos vendo é a terceira opção chamada estilos de tema, para que eles possam abrir os estilos de tema. Você pode ver que não aparece e abre um conjunto diferente de opções. Temos uma variedade de seções diferentes dentro de você. O plano de fundo, que a cor de fundo global para toda a tipografia do site, botões e assim por diante. Agora eu não vou entrar neste em toneladas de detalhes porque eu já abordei como usar isso em muito mais detalhes, seu próprio vídeo dedicado e também como eu realmente usá-lo pessoalmente. Então eu vou vincular esses dois vídeos abaixo na descrição abaixo. Então, se você quiser saber mais sobre temas, estilos e como a melhor maneira de usá-los é, confira isso agora. Outro definir o fundo para isso e deixar o fundo como é, no entanto, foram cometidos a tipografia, e lá podemos agora configurar todas as opções de tipografia para todo o nosso site. Então vamos fazer isso. Vamos preparar alguns desses para começar. Então vamos fazer é ir para a cor do texto. Eu não sabia. Eles iam definir isso para ser um cinza escuro. Uma vez que você fez isso, vamos entrar nas opções de tipografia, e a partir daí nós vamos apenas escolher a família de fontes que queremos usar. Então, para isso, vamos usar Poppins. Nós definimos um valor de cerca de 14 e você pode ver se damos uma olhada no lado direito. Você pode ver que isso está mudando as coisas e podemos ver alguns exemplos básicos do que estamos fazendo . Podemos mudar o peso se quisermos aqui para o que quisermos. Vamos colocar o estômago 400 para que fique um pouco mais grosso. Vai dizer que estamos felizes com a bacia dos Parágrafos. Bem, cabe a nós. Poderíamos definir os valores em pixels, EMS ou VH. Então vamos apenas dizer bem, defina isso para ser algo como 16 pixels. Então temos um bom espaço entre os parágrafos. Então, com isso no lugar, se quisermos, podemos mudar nossa cor do link. Então poderíamos dizer que o que vamos fazer é tão difícil, mas vamos definir isso para ser sublinhado virá na tipografia definir uma decoração para sublinhar e, em seguida, no normal , vamos definir a cor para ser diferente. Então nós estamos configurados para essa cor azul claro para que nós saberemos globalmente estilo As cores de link para o porto no estado normal vão vê-lo para nossas posições. Então o que vai acontecer é que podemos usar esse tipo de hierarquias se definirmos a fonte para ser um estilo particular. Neste caso, Poppins, você pode ver que o cabeçalho também tem estilizado para Poppins para que possamos deixar que como ele é, e ele vai tipo de cascata para baixo através. No entanto, se quiséssemos, poderíamos mudar qualquer coisa a ver com as diferentes rubricas. Então podemos mudar a cor na topografia. Então vamos apenas dizer que para a tipografia nós não queríamos usar Poppins que queríamos usar em um monstro do lago em que poderíamos escolher isso de lá. Você vê, a fonte agora atualiza e nós queremos mudar o peso da fonte lá. E se você quiser, nós também poderíamos dizer que eles vão para a maiúscula para que você possa ver que poderíamos facilmente entrar. E as coisas justas são apenas o tamanho, todos esses tipos de opções. E depois vamos. Nós poderíamos basicamente fazer isso através de todos os títulos diferentes de um a seis para ter certeza de que todas as cores, o tamanho, estilos, fontes, todos esses tipos de coisas foram configurados. Botões é exatamente o mesmo. Podemos entrar para controlar a tipografia do botão, sombra de texto, o normal, o estado do porto, as cores de fundo, qualquer raio de borda e assim por diante. Para imagens de campos, também temos CSS personalizado No final do mesmo, o CSS personalizado se aplicaria ao estilo global do seu site não especificamente para um pago. Então, tenha isso em mente. Uma vez feito isso, podemos clicar na atualização que saberá fazer quaisquer alterações ao longo de todo o site. Eu fui em frente, adicionei na estrutura do menu apenas para que eu possa mostrar como é fácil antes de seguirmos em frente. Dê uma olhada no rodapé para fazer alterações e personalizar isso da maneira que queremos para que possamos fazer se você quiser é que poderíamos facilmente entrar em qualquer um destes e fazer quaisquer ajustes que queremos clicar em. A imagem vai entrar nisso. Você pode ver que temos margem para a garrafa de cima. Vamos apenas pisar aqueles para ser um pouco menor para fazer 10 dos 10 primeiros na parte inferior. Só apertamos isso um pouco. E se chegarmos ao nosso suco widget menu, há outro widget de menu? Nós temos uma cor verde lá dentro que obviamente não faz sentido porque não usar o esquema de cores que nós configuramos então nós vamos fazer é entrar nesta seção de estilo e lá dentro nós podemos ajustar a tipografia que poderíamos apenas para soltar no botão tobel todos esses tipos de coisas. Então vamos para a seção do porto. Você pode ver que há 0,2 cores sendo anos, este tipo de cor verde vai mudar que para o nosso azul foram finalmente mais longo. Agora temos azul com a lista. Se ele quisesse, poderíamos ajustar as coisas lá dentro. Haverá bater atualização O que ele fez para saltar de volta para fora da nossa página de teste? Atualize que você pode ver que não há coisas apertadas que as cores certas estão sendo usadas e assim por diante 5. Como criar arquivos e modelos de post: seguida, vamos dar uma olhada Agora estão criando um rodapé para o construtor de temas. Nós vamos falar com o pé da seção, eu diria, rodapé Agnew, você pode ver sem pé pré-selecionado em um jogo com a mesma coisa. Então rodapé padrão, clique em criar modelo Uma vez que você fizer isso, que vai nos assumir e agora podemos dar uma olhada nos blocos. Então o que eu faço é que eu vou encontrar algo que eu acho que é tipo de manter o que nós temos feito vai inserir isso em nosso template, modo que agora coloca nosso design na página. Obviamente, há algumas coisas que precisamos resolver. As cores estão todas erradas neste momento, então precisamos corrigir isso. É muito fácil. Apenas a fazer é clicar em qualquer um dos itens que chamamos de guia estilo. E você pode mudar essa cor para o que quiser. Você poderia literalmente levá-lo para lá ou você pode definir a cor. Vamos apenas claro que e, em seguida, que vai pegar quaisquer cores padrão que você disse que era parte dos temas para baixo. Se você quiser substituir que você pode simplesmente entrar e escolher a cor que você quer definir especial para este azul pálido, por exemplo, sob o mesmo sem botão e deixar que entrar em um botão Venha para a nossa seção de estilo eu vou descer para Seu botão Mude esse conjunto que são de cor azul E agora estamos recebendo as coisas de volta para o jeito que eles deveriam ser Mesmo vale para a pequena linha no topo Você cidade veio para uma seção de estilo poderia ou borda redefinir isso para ser um azul pálido E finalmente temos o Navegação Você diz que o dedo azul também Ok, então essa é a nossa dissecção do pé Tudo pronto bater, publicar e nós obter a mesma coisa novamente. Agora podemos adicionar outra condição. Eles vão clicar na nossa condição. Vamos deixar esse conjunto para todo o local. Está economizando perto. Isso agora é a nossa dissecação do pé. Então ele voltou em seu site atualizar nossa página de teste escola abaixo da página. Uma vez que você começa a parte inferior, estes nossos novos para a seção tudo configurado no lugar e há cada página para ir para um dos posts. Você pode ver como para esta ação está tudo lá dentro. Então, certamente arquivar a guia novamente. Somos apresentados com a mesma opção que diz criar o seu primeiro seja qual for o uso. Então eu digo a criação de um novo arquivo. Vamos chamar este post padrão. Está bem? Quem criou um modelo? Uma vez que você criar um modelo com ser trazido para a área de blocos que vamos fazer vai fechar isso para baixo. Vai levar-nos para a nossa área de modelos. Agora, como você pode ver, nosso cabeçalho está no lugar e eu vou Rodapé está no lugar. Vamos criar nosso arquivo. Então, quando abrimos no modelo arquivado, você pode ver no tema do arquivo um modelo que você pode ver no lado esquerdo. Temos três ícones para começar com um widgets R, o título do arquivo, o post da caixa do autor. Porque nós escolhemos um arcade para este arquivo de tema em particular, ele sabe que esses provavelmente estão indo para o tipo de coisas que nós vamos querer fazer. Vamos jogar no título do arquivo vai apenas arrastar e soltar esse widget em. Você pode ver que apenas puxa em algumas informações de modelo pré hold. Então vamos fazer é adicionar um pouco de espaço a isso. Então vai simplesmente vir a este quarteirão em particular. Agora, você vê, nós temos um pouco de um problema aqui porque ele é tão perto da navegação real. Quando tentamos chegar ao pequeno quarteirão, fica muito difícil. Enfraquecer, lidar sem facilmente enfraquecer. Basta vir e usar o navegador. Opção clicada. Abra o navegador em você pode ver Agora no lado direito, temos uma nova entrada, em que ponto isso nos mostrará todas as seções chave, seu nascimento tendo em mente. Neste momento, o cabeçalho e o pé não são considerados uma seção dentro do modelo de arquivo que estamos criando. Então é por isso que você não está vendo isso. Eles só estão nos mostrando a seção real. Acabamos de entrar. Mas o que podemos fazer é clicar no que irá ativar a seção. E agora chegamos no lado esquerdo e podemos usar as opções em sage aqui. Vamos apenas dizer que vamos desmarcar esses valores no topo. Vamos adicionar 50 pixels de espaçamento. Agora nós nos demos como um pouco de espaço de respiração no topo este retorno Goto widgets no lado esquerdo, e é apenas arrastar nas postagens de arquivo e soltar isso por baixo do título. Você pode ver que nenhum puxa na página de arquivo basicamente externa. Eles são apenas fecha navegou para baixo agora no lado direito novamente para que você possa ver que isso nos deu o título do topo em três posts do nosso arquivo. Se fizermos isso dessa maneira, agora temos muito controle sobre como enfraquecer as coisas de estilo, como podemos colocar as coisas para fora. Agora. Você ainda tem o mesmo nível de controle. Se você estava usando um dos blocos pré-definidos, no entanto, você tem um ponto de partida que você pode ter que fazer alterações em tudo. Isso apenas começa com apenas os elementos que você deseja arrastar para dentro sem ser dito. Podemos simplesmente escolher isto, que podemos escolher uma pele diferente se não o fizermos. Uma pele é apenas basicamente, o design que vai ser usado atualmente está usando o clássico. Vamos mudar isso sobre os cartões que já parece muito mais limpo e um pouco mais do que nós também temos 1/3 opção, que é o conteúdo completo em seu não o mais bonito olhar. Mas é tipo do que você esperaria é parte da maneira padrão que a maioria dos temas funcionam no WordPress. Vamos levar isto de volta para cima e ir para os carros. Acho que essa é a opção mais bonita que temos agora. Todas estas diferentes peças de componentes dentro desta camada em particular poderiam ser controladas para que pudéssemos dizer o número de colunas que poderíamos dizer. Só queremos colocar duas colunas. Você pode ver que atualiza imediatamente. Você quer mostrar a imagem que podemos dizer sim ou não para que pudéssemos nos livrar da imagem completamente se quiséssemos. Vamos colocar isso de volta para sim, tamanho da imagem. Você pode ver que ele parece um pouco pixelado, embora não pareça o melhor, então podemos escolher uma imagem diferente. Ciência. Podemos ir para o meio, e você pode ver que agora parece muito melhor, muito mais claro. A proporção de imagem é basicamente como nós Condell com a altura do tamanho desta imagem. Então, se nós apenas dirigirmos isso para baixo um pouco, você pode ver que podemos posicionar isso para obter um layout muito mais bonito, então nós apenas ajustamos isso um pouco. Acho que cerca de 56 vai funcionar perfeitamente para a proporção que eu tenho configurado para todas as minhas miniaturas. Nós também temos em categorizado, que é apenas basicamente os metadados dizendo a que taxonomia isso está associado para que possamos nos livrar de qualquer um desses tipos de coisas, incluindo coisas como títulos e trechos e assim por diante. Então, você vê, nós poderíamos tirar o título se você quisesse colocá-lo de volta. Vamos mover o exceto que podemos mudar quanto forno. Exceto que na verdade eles são, sim, podemos dizer que queremos 30 palavras lá para nos dar um pouco mais para que você possa ver que podemos ajustar e configurar isso exatamente como queremos. Que tipo de fundo? Poderíamos dizer. Queremos colocar alguma paginação lá, então vamos dizer que os números foram dizer que os números no anterior e no próximo. Então, quando obtemos entradas reais mawr em um blog, as páginas de arquivo terão boa paginação na parte inferior. Agora que estamos satisfeitos com a forma como a nossa nova página de arquivo não está configurada, clicaremos em Publicar. E novamente trouxemos de volta a essas condições. Se você clicar em adicionar condição desta vez, você pode ver que temos todos os arquivos está configurado é a condição de inclusão. Se clicarmos para expandir isso, começamos a ver alguns mawr. Aquelas opções que eu falei a partir deste menu de contexto. Então, porque estamos lidando com um arquivo, existem alguns tipos diferentes de arquivos em um site típico do WordPress. Mas você pode ver que temos todo o nosso caso, que irá aplicar este modelo não importa o que, ele vai fazê-lo em todo o site. Para cada arquivo, vai ser usado para muitos casos que podem ser perfeitamente bons. No entanto, se você quiser um controle mais granular, você pode escolher o nosso caso diferente para diferentes layouts de página. Assim, os arquivos do autor podem ser diferentes para a data RK a partir da página de resultados da pesquisa e fato, os arcades do post. Você pode ver que temos o post nossas categorias cavernas, direcionar crianças ou diretores crianças fora categorias fora. Então, se escolhermos algo assim, você pode ver que nenhum abre outra opção, então podemos entrar. Podemos filtrar ainda mais baixo. Mas vamos definir isso para ser agradável e simples e dizer que todos os arquivos vão bater em Salvar perto. Agora criamos a camada de arquivo para o nosso site WordPress. Então vamos voltar agora para uma página de teste. Volte para nossa casa e eu não deveria ver agora que pegou a camada de arquivo que acabamos de escolher. Então, tudo não está configurado do jeito que queremos. Se clicarmos neles para entrar em um desses, você pode ver que ainda temos o único modelo que precisamos atualizar para ter certeza de que parece tão bom quanto possível. Vou entrar na empresa de construtor de temas, opção única. Adicione um novo single. Bem, eu sei que você vê seu único Selecione o tipo de post com um clique lá. Agora, é aqui que as coisas podem ficar um pouco confusas. Quando você está trabalhando com WordPress, você pode considerar o fato de que nós escolhemos um single e que vai ser para um único post. Por que isso está relacionado a ambos os posts em páginas na página de quatro ou quatro certamente oposto à página é diferente. Bem, a maneira como o WordPress funciona é que considera praticamente tudo para ser um post em quando você agrupar aqueles post juntos. Considera que se trata de um arquivo. Em outras palavras, um grupo de postagens. Então, uma vez que você meio que coloca esse conceito em sua cabeça, você pára de pensar que eles são diferentes. Eles só têm opções ligeiramente diferentes. Então, podemos configurar um único modelo para ambos os posts em páginas nas quatro ou quatro páginas. Todos eles poderiam ser diferentes para este exemplo. Vamos começar com o Post. Clique em Publicar. Nós só vamos chamar este single padrão, postá-lo criar modelo que vai nos levar em. Agora podemos escolher qualquer um dos blocos pré-definidos. Se quisermos usar um desses como ponto de partida. Vamos apenas escolher um design que eu acho que é bastante arrumado e mantendo o que estamos fazendo. Então é apenas inserir este em particular que vai baixar todos os arquivos relevantes agora e soltar o design em nossa página para nós. Você vê, há todo o layout todo configurado dentro do nosso design. Agora podemos novamente, como eu disse, fazer alterações completas de letras para isso. Você pode ver que a imagem na parte superior não parece muito correta. Nós poderíamos chegar a essa imagem lá e você pode ver que podemos ajustar a altura disso Então nós poderíamos dizer que queremos definir que para ser 600, por exemplo, vai aplicar isso e você vai ver que vai ajustar as coisas de acordo. Então nós poderíamos passar agora configurado isso, fazer quaisquer alterações a partir deste modelo básico que nós configuramos. Nós escolhemos sobre ele Poderia facilmente entrar e fazer quaisquer alterações vai bater. Publicar lá. Você pode ver de novo. Agora temos condições configuradas e, novamente, temos uma variedade de opções diferentes. Nós abrimos a seção de postagem, você pode ver que há até mesmo opções mawr dentro de você para chegar a um nível realmente granular de controle. Agora, você poderia ter você queria pisar. Este é um valor global para todos os singulares. Obviamente, isso pode nem sempre fazer sentido. Pode ser dependente do tipo de criação de citações, então eu não deixo este conjunto para ser postagens. Você pode ver que ele diz a seguir. Isso é tudo. No entanto, se quiséssemos, poderíamos clicar lá. Poderíamos filtrar que não um posts específicos, ou dependendo se escolhermos algo diferente dentro do ano, podemos dizer em categorias infantis, por exemplo, e então podemos clicar e podemos escolher carro infantil diferente graus e filtrar aqueles para fora. Então, é um post diria, salvando perto. E é assim que um único modelo criado Voltar na sua página irá atualizar isso agora. E aqui está o nosso novo design. Tudo arrancou ele daquele modelo. Portanto, um tema básico está agora configurado. Volte para a nossa página inicial. Você pode ver que temos nosso arquivo. Temos um cabeçalho. Temos o nosso pé. Se entrarmos em qualquer um desses itens, também temos a opção agora de ver exatamente o que temos definido como parte desse post de bloco . Então, esse é o básico desses quatro arquivos de tema chave que precisamos configurar 6. Técnicas de edição de modelos em linha: anteriormente quando estávamos trabalhando com desenhos e modelos e assim por diante, sempre que você criou em nossa caverna ou um único e esses tipos de modelos, sua cabeça em sua área de pé. Se você quisesse fazer alterações nelas, você teria que sair literalmente da página em que você está editando. Entre no cabeçalho ou no rodapé e comece a adicioná-lo lá. Você não precisa mais fazer isso. Você pode passar por cima de qualquer um desses e você verá que agora nos mostra em amarelo. Opõe-se ao azul normal para a cabeça para fora se ele repreendeu o pé com a parte inferior, faz a mesma coisa Eles podemos agora que querem simplesmente clicar sobre essa maneira, diz Editar o cabeçalho ou rodapé Clique que não vai levar-nos diretamente para o rodapé neste exemplo, podemos fazer alterações nele. Sim, você pode ver que ainda estamos na fila. Nós ainda temos todo o tipo de modelo que estavam trabalhando no lugar para que você possa entrar no trabalho. Qualquer mudança que ele quiser. Digamos que você quer o logotipo. Queremos definir isso para ser a esquerda. Agora podemos clicar na atualização Isso não é atualizado o pé para modelo. Quando estivermos prontos para voltar a um modelo de página normal, Poderíamos simplesmente voltar para que você possa ver que agora está em amarelo Nós clicamos editar único e você descobrir que estamos de volta à edição O único modelo poderia ser o modelo arquivado Poderia ser qualquer outro modelo Mas você pode ver que é rápido e fácil E o mesmo acontece para dizer Para o cabeçalho, podemos clicar em Editar cabeçalho Nós sabemos Ir para o chefe de seção sobre Nós poderíamos saber fazer mudanças no estado você para que possamos clicar sobre isso Nós poderíamos dizer, Bem, esta parte de baixo está me irritando um pouco, então vamos entrar por baixo, vamos colocar um pouco de estofamento no fundo, por exemplo. Vamos apenas dizer que vamos colocar 20 pixels de separação no Então fizemos algumas alterações na atualização de sucesso em então nosso cabeçalho não foi atualizado. Basta clicar de volta em editar single e continuamos editando o modelo de post único. Por isso, torna muito mais rápido e fácil, não menos edição redonda acontecendo. Nós podemos tipo de fazer em linha edição muito mais rápido e mais fácil mais essas apenas pequenas atualizações que eu quero chamar a sua atenção para porque isso apenas torna sua vida consideravelmente mais fácil . 7. Como e por que usar modelos globais: Há uma última coisa que quero mostrar-te antes de acabar com isto. E isso são widgets globais. Cobrimos isto desde o início. Acabei de mencionar que vamos dar uma olhada nisso. Então deixe-me apenas mostrar o que é um widget global e por que eu acho que eles são úteis, especialmente quando você está trabalhando com todo o aspecto de construção do tema. Digamos que você tinha uma seção de depoimentos e queria usar isso na mesma área em todas as suas páginas de arquivo. Mas você tinha vários modelos diferentes. Para essas cavernas, como acabamos de ver, você pode configurar várias temperaturas diferentes de várias partes diferentes do seu site, mesmo usando o mesmo tipo de arquivo, o single e assim por diante. A maneira mais fácil de fazer isso seria configurar um widget global. E então, se você fizer uma alteração em um desses, você pode ter isso refletido em todos os seus modelos. Deixa-me mostrar-te como fazemos isso. Temos uma nova página. Não importa como você faz isso. Vou usar uma página como exemplo para mostrar a diferença entre páginas e modelos. Então, vamos chamar esse widget global? Bem, acabamos de publicar esta página Vamos editar com o Elemental assim que os editores elementares abrirem que estamos recebendo uma pequena busca por depoimentos, pegar um testemunho, o que deixa cair isso na página que vamos fazer agora vai rapidamente fazer algumas alterações a isso. Então nós vamos apenas adicionar em uma imagem, por exemplo, vai ajustar o estilo da fonte e assim por diante. Só assim temos alguns enviando um pouco mais exclusivo do que o padrão para que possamos ver as alterações que fazemos. Então vamos definir isso para ser itálico vezes o rolo, então vamos dizer que estamos felizes com isso. Então agora o que precisamos fazer é salvar isso como um widget global. Agora, é aqui que você tem que entender como os widgets globais funcionam. Este é um widget, não uma seção ou qualquer outra coisa. Então, por exemplo, se entrarmos na seção que contém o widget em que clique com o botão direito, podemos dizer savers modelo. Cada clique salva modelo, enfraquecer. Salve-o como um modelo que não podemos salvar. É um widget global. Então, como contornamos isso? O que você não tem Você tem que vir para o widget que você deseja salvar globalmente em. Então, certo? Clique nisso. E a Shoes Savers Global. Então, agora dizemos “savers global”, vamos chamar esse widget de testemunho global. Agora você novamente verá que meu nome e convenção apenas torna minha vida mais fácil Se eu disser global um começo eu sei que este é um widget global e eu sei widget de testemunho global. Eu meio que sei o que é. Diz que está no salvamento de 10 acertos. Uma vez que fazemos isso, você verá agora onde normalmente temos apenas o elemento que vamos Um widget normal lá dentro se chegarmos à seção global agora terá uma lista de todos os widgets globais que temos em você. Veja, eles também têm uma pasta laranja amarelada no canto superior esquerdo que Justin observa que temos um widget global. Então, agora atualizar esta página para que você possa ver tudo está configurado lá saiu deste. Agora volte ao nosso painel e vamos entrar em uma seção de modelos em um construtor de temas . Vamos entrar no nosso single padrão. Vamos editar isso com elemental. Vamos colocar isso na parte inferior de cada um dos nossos modelos de postagem. Então você entra nisso, nós vamos ter esse widget global tão rápido para sair da nova seção. Poderíamos começar esta seção de qualquer maneira. Nós queremos, como eu disse, é independente do widget global real. Então clique em que irá apenas colocar um pouco de espaçamento acima e abaixo. Só nós poderíamos fazer um pouco de espaço sobre isso que é 50 no topo em 50 na parte inferior. Então temos um pouco de espaço. Agora voltamos para um código widgets de global. Há o nosso widget de depoimento global, enfraquecer, arrastar e soltar isso em nossa página e você pode ver que o deixa cair lá, mas também nos dá algumas opções adicionais. Podemos editar o widget global ou enfraquecer desvinculado do global. Se editarmos o widget global, todas as alterações que você fizer nele serão refletidas em todo o site vinculado a esse widget global. Se quisermos desvinculá-lo e fazer uma alteração a este que não reflita em todos os outros widgets globais, podemos fazer isso. Basicamente desvinculamos sua conexão global. Espero que isso faça sentido vai dizer atualização sobre eles. Então, agora temos este widget global configurado. Agora, então, vamos voltar a isto. Conseguimos ver que recebemos o texto da Laura do John Doe. Então você diz que estamos felizes sem tudo está configurado com porta de saída Dashboard vai voltar para a nossa página inicial Isso tem que lá dentro vai entrar em um widget global que editar isso com elemental que vamos fazer é vamos mudar o imposto Um pouquinho. Então, vamos clicar nisto. Nós vamos clicar, editar e eles vão fazer vai pegar isso e nós vamos apenas duplicá-lo. Então vamos colocar em muitas coisas da mesma coisa que sabemos. Tem mais impostos lá dentro, vai bater atualização. Essa é a atualização desta instância. Mas também, se voltarmos e dermos uma olhada em uma de nossas páginas únicas, basta atualizar essa rolagem para baixo e você pode ver Não, isso também foi refletido nesta seção específica. Então esse link significa que é um link bidirecional. Podemos atualizá-lo em um e, em seguida, isso irá refletir direito lá em todos os seus sites. Esta é uma ótima maneira de fazer as coisas que você pode ter um formulário de inscrição para sua lista de discussão que se você rapidamente queria mudar de provedor de selecionar macaco luz de tomate masculino, você poderia fazer uma mudança e, em seguida, isso será refletido em todo o site em todos os lugares que usa esse widget global. Super simples, uma economia de tempo real. 8. Em conclusão: Então essa é a turma roubada. Esperemos que o que isso é demonstrado é que a criação de temas usando elemental pro sobre as ferramentas que estão disponíveis não é complicado, mas dá-lhe um telescópio para a criação sites WordPress bonitos. Se você gostou da classe policiais verificações de minhas outras classes de compartilhamento de habilidade para ajudá-lo a expandir suas habilidades e conhecimento no WordPress e muitas outras habilidades relacionadas Web design, bem, bem, Vejo puxar, Veja Espero que você tenha gostado do classe e espero que eu te veja novamente em breve.