Como Criar Uma Página De Blog Post Para Seu Site Wordpress Com Elementor De Forma Fácil e Rápida
o palácio é muito bem vindo a mais esse vídeo aqui do canal academia eu vou te peço para x hoje eu quero te ensinar como fazer uma página de blog assim a disposição dos esportes como essa que eu vou te mostrar agora olha só uma página é essa tá na parte de blog news uma parte de blogspot para o nome que você quiser aqui com esse esporte tá super moderno super bonito e totalmente conversível também para mobile olha só como ele fica aqui no celular funciona muito bem tudo isso tá utilizando
o elemento e o instalação hoje prece para sites gostou da ideia então fique comigo até o final que eu vou te mostrar passo a passo como criar essa página de blog para seu site wordpress e olha só tô aqui na página só para mim te dar um pouco de contexto e não te deixará vagando né como que eu cheguei a essa página como que eu cheguei as site criado eu queria um site para mim chamado mesaque mota ponto com.br a meu site pessoal que eu tô querendo do zero e eu eu tô compartilhando com vocês
aqui com o canal tudo que eu tô fazendo nele todas as atualizações inclusive essa parte de blog vai ser a parte de blog para o meu site no vídeo passado se não me engano eu criei um um vídeo de 50 minutos onde eu mostro passo a passo absolutamente do zero como criar um site wordpress esse site que que você tá vendo aqui eu mostrei como fazer ele é utilizando um pouquinho elemento e uma instalação wordpress com domínio e hospedagem tá então veja lá que você vai aprender co mo que é o site e chegar
até aqui agora daqui para frente é o outro vídeo tá bom vamo voltar aqui blog news nossa você ter ideia e o blog comum é esse aqui ó que já vem nesse template que é um neve tá o tema que eu neve muito bom muito bonito só que ele foge um pouco da layout do site para o completa vendo aqui ó tem essa parte aqui de cima com contato né se você vem aqui sobre mim também tem essa parte de cima aqui ó então meio que ficava sem sentido se o blog também não tivesse um b anner cima com o nome e também um
suposto uma bonitinha você quer só imagem quadrada em um texto tá até um pouco esquisito apesar que dá para você mudar isso aqui na personalização então é isso aqui é o blog que eu vou criar um blog não né é a página de postes para o seu blog vou voltar aqui em blog news é essa aqui ó como fica muito mais moderna muito mais bonita olha esse esporte tá muito muito bonito mesmo então o que que vai precisar de instalação ou depressa se apesar do eleme nto e você vai precisar de um plugin que auxilia
o elemento seja que adiciona mais elementos ao plugin elemento que é chamado de elemento o kit tá elementos kit eu mostrei ele também na aula passada mas eu vou te mostrar aqui olha só vou vir aqui no na personalização da administração vou vir aqui em plugins ó você vai precisar é o elemento e o elemento kit tá só esses dois por enquanto eu tô aqui com meu site eu vou deixar aqui na página do blog porque eu criei aqui né nessa novo site que eu criei na aula passada mas eu quero criar para o meu
site pessoal tá vai ficar basicamente desse jeito se eu tiver que mudar alguma coisa só uma posterior fala que eu disse o blog tá assim eu vou mudar tá tá muito esquisito assim eu não gostei eu vou mudar eu vou vir aqui e se você criar uma nova página né vem na administração do seu site a só antes de eu começar a construir aqui se você já gostou da ideia já gostou da do design aqui achou bonito que implementar no seu site ta mbém deixa seu like aí compartilha quantas pessoas esse vídeo muitas
pessoas estão gostando dos vídeos aqui que eu tô fazendo do elemento e tem ajudado muita gente então se você quer ajudar outras pessoas compartilha tá no facebook no telegram no instagram onde você quiser tava onde você puder na verdade a e eu seu like é muito importante porque o youtube entende que um vídeo que de certa forma te ajudou então ele vai mandar para outras pessoas também vamos lá páginas adicionar no va eu tô no meu site que eu vou criar eu vou colocar aqui vem aqui ó blog só que eu
vou colocar eu já criei tá lá depois eu mudo eu vou deixar blog news aqui tá em inglês mas beleza vou publicar depois que eu publicar eu vou editar com elemento conto já instalado tá e olha mandou carregar olha só a um detalhe que eu esqueci de te falar esqueci não né eu já falei mas eu vou te mostrar aqui eu mostrei os dois plugins e vou te mostrar o template que eu tô utilizando tá o tema que eu tô utilizando é o tema neve tá eu não tenho muito interessante aí inclusive tá com pedindo
atualização aqui ó o tema neve e eu simplesmente estar em um site pré-moldado digamos assim né e dá a partir daí eu criei as outras páginas tá bom vamos lá que que eu preciso aqui ó eu preciso dessa barra aqui de cima olha só essa barra aqui é porque eu já sei eu já fiz ontem para testar como eu fiz essa então eu já sei ela tá com a altura de 390 o que eu preciso eu preciso de eu podia mui to bem salvar né essa página toda e carregar para cá como template mas eu quero que você aprenda a fazer
tá bom vou clicar aqui nesse mais e vou criar uma seção completa e essa atenção vou vir aqui ó e vou né na edição dela aqui aqui aonde está espaçamento altura tá altura eu vou colocar altura mínima em vez de 400 vou colocar três anos 90 só para ficar certinho igual tá lá pronto fez isso já tá na mesma digamos assim altura aqui nessa parte agora eu preciso adicionar um título né vem aqui nessa grelha e então vou pegar o título aí eu vou clicar ou arrastar e vou soltar que o título bom para mim
saber aqui qual é o tamanho eu já sei mas eu clico o botão direito e inspecionar e eu vou ver aqui que a a cor é branca e também eu tô vendo aqui que o tamanho olha só 70 picos eu tenho que deixar igual né e a fonte tv qual é a fonte se não me engano é a pópis mary pops é a pobre tá então fazer a mesma coisa eu coloquei aqui eu vou clicar nele né aí vou digitar aqui ó controlar vou apagar tudo aqui colocar blog news h2 não o que é o título da página tá vou deixar no centro ouvir no estilo vou
vir aqui em tipografia e vou colocar o tamanho como 70 aí em ponte deixa eu ver se já tá indo copos já tá nela então posso deixar aqui porque tava né default o elemento já pegou a fonte padrão do tema tá que essa pops pronto a cor branca né só que em vez de eu colocar a cor branca eu vou eu vou colocar logo a cor branca pronto aí vai desaparecer é claro né eu tenho que vir aqui na configuração né na edição dessa hall essa toda essa parte que tá em azul vou vir aqui ó em estilo e aí nós temos
aqui plano de fundo vou clicar no pincel que ele vai me dar opção de colocar uma cor ou imagem eu vou colocar imagem eu vou colocar mesma imagem que tá lá quando eu carreguei eu posso deixar esse mais para você lá no telegram tá eu tenho um grupo telegram onde eu posso os vídeos assim que eu lanço eles e também eu coloco coisas adicionais com o essa imagem tá mas se você digitar a imagem do elemento eu vou colocar lá para você não sair mais eu tudo que nós usar aqui é exatamente essa imagem
aqui ou dava inserir mídia ou taticamente já tá bem parecido né só que eu pensava que tem um fundo um pouco mais acinzentado mais preto tomar aqui ó antes de tudo também tá cortando olha só aqui tá cortando a imagem porque ela acaba aqui depois continua mas precisamos vir aqui em posição eu vou colocar centro é superior centraliza do você já centralizados horizontalmente e verticalmente na parte do topo anexo colegio fixo se você colocar fixo vai ficar fixa e rolagem ela fica rolagem eu acho que
o nome vai mudar muito aqui porque é pequeno se fosse uma imagem grandona que pegasse toda a tela faria diferença repetir não repetir tá aí aqui tal grande segredo ela vai dar um cover ou seja você vai colocar preenchimento completo e ela vai preencher tudo tá mas agora já tá bem parecido mesmo vou até sair aqui ó olha só tá muito parecido né e se eu fechar aqui ó quase não tem mais diferença tem diferença porque aqui tá sem aquela barra preta do elemento duas depressa aqui mas fora isso só ah
tá igualzinho beleza vamos lá onde continuar o que é aquela parte que ela tem um meio com a sombra se pensa que tá mais escuro né para esse tem que vir aqui ó sobre a posição de fundo e aqui você vai colocar uma cor geralmente um preto deixa eu ver aqui um preto peguei um preto um emprego exatamente preto p ronto só que não é esse preto né ele tá muito escuro aí você vai mexendo aqui olha loja não ficar perfeito né igualzinho aqui você pode vir aqui ó inspecionar e tentar achar a cor a cor que tá
por cima do background né acho meio difícil achar ela aqui ó achei background cola tá esse aqui é ali né a gradiente é esse rgb aqui ó eu vou copiar todo ele e vou vir aqui e vou colar que eu tirar essas parte aqui que não faz parte né essas partes que não faz parte é só que aí gba pronto rgb a e parentes e esses números aqui e pronto olha só já tá igualzinho aqui ó você pode controlar o quanto você quer acentuar ou atenuar tá olá aqui é o colocar 0,7 que já fica bem parecido ó eu vou perder
muito tempo aqui pro até porque é isso aqui é mais pessoal tem gente que gosta gente que não e pronto tá feito tá essa parte e já tá feita vou fazer o quê vou atualizar vou dar uma conferida aqui vou dar uma visualizada pronto tá muito muito bonito vou ver aqui no contato a diferença ó praticamente não tem diferença alguma roupa se eu voltar aqui blog news e contato a diferença é o tamanho do título porque eu mudei o tamanho do título lá nas opções aqui de personalizar então tem que colocar
todos igual né olha só tá vendo que tá pequeno eu vou vir aqui e pressionar o que eu peguei o tamanho baseada nesse daqui e é baseado nesse daqui que eu tô fazendo então eu tenho que pegar o tamanho também olha só achei você tava demorando a chá é três então ela tá em out ra forma de medida como que eu vou fazer eu vim aqui nele né vou editar aqui clicando no lápis vou vir aqui no tamanho né a tipografia ainda o pixel colocarem ele tá em três olha só pronto já tá tudo certinho agora parte nosso
blog né nós temos aqui a parte do blog os portes é que ela que você já tem que ter post sair com imagens para poder fazer sentido tá eu vim aqui no elemento ou vem aqui na grelha então que a gente precisa fazer é vir aqui ó vou fechar tudo tá e vou encontrar s omente esse aqui alimentos kit elementos kit e vou inserir blog por isso para isso eu vou criar aqui uma hall totalmente larga tá a largura completa tá aqui vou dar um espaçamento mínimo dela também mínima né de 400 fixos e o ajuste aqui no
meio pronto agora sim eu venho aqui no na grelha e vou pegar aqui ó blog post e vou arrastar aqui tá dentro do mais e olha só pronto já tá e já estão aí os potes é claro você tem que ter os portes já com imagem com título e um pouco de descrição pa ra fazer sentido tá bom olha só clicar aqui no lápis para editar ao invés de bloco eu vou colocar aqui grid porque vai ficar em forma de grade né olha só muito bacana aí aqui ó quantos por linha três vou colocar quatro por exemplo se você colocar
quatro ele vai ficar quatro por que que não mostra porque aqui em baixo lá na cohab tá para 3 portas então se eu colocar aqui 20 e poucos logo aí eu volto e vem aqui não é áudio agora sim ele vai colocar todos os pontos eu não tenho 20 tem só 6 horas por isso que ele não coloca aqui e fica esse espaço aqui embaixo bacana eu não quero quatro eu quero três né que fica mais bonito pelo menos eu acho seu título se você quer mostrar o título sim aqui se você quer cortar a quantidade de palavras no
título não mostrar o conteúdo sim só que eu quero mostrar poucas palavras 1612 palavras só eu acho que já tá bom olha aí já tá bacana e eu acho melhor sim pronto agora com 16 só que você pensar que tá estranho né o fundo de uma cor tá esquisito aqui também aos botão colado mas não mexer com tudo isso aqui na cueca como já mostrei só vou falar alguma coisa mais por exemplo de coco todas as categorias é um quero categoria eu quero pôs recente é mostrar o post mais recente se você quiser você pode
criar um bloco desse para categoria x outro bloco desse né outra sessão para o bloco y e você colocar o título categoria a categoria b também funciona eu prefiro deixar os portes todo aqui conforme eu vou publica ndo eles então por data sim ordenar decrescente sim porque o mais novo vai ficar em primeiro e sobe sete se você colocar um por exemplo ele vai eliminar o último post aqui você colocar dois eliminar os dois últimos quer ver eu vou dar um exemplo aqui dois vai ficar somente aqui ó começa
a parte desse eu não quero dar nem off-set vou tirar aqui tô acabando aqui tá explicando tudo né aqui meta data é a parte aqui é aonde falar categoria tags e tudo não tá mostrando porque tem que tu qu er esse buraco aqui ó tá você clica aqui ó tá vendo que tem alguns altos aí já começa abrir data eu não vou falar sério o que eu vou utilizar aqui vai ser só comentará saltou não porque só eu sou autor autor data porque vou colocar de outra forma categoria pronto olha só vai ficar categoria e
quantidade de comentários somente isso eu vou colocar aqui se eu quero flor e te data vai ficar um botão aqui ó da data olha só pronto no meu caso já tá perfeito nos mexendo você quiser mu dar o modelo lá tem esses dois modelos eu colocar esse que o que utilizei na outra página tá aqui mostrar a data assim meta data né que são essas informações aonde eu quero mostrar e acima do título no caso quero abaixo do título bem aqui ó pronto também tem o título aí abaixo do título ou você pode colocar
também abaixo do conteúdo vai ficar aqui embaixo antes do botão também funciona muito bem deixa até aí mas ficou melhorzinho né não importa muito local não muda muito red mole é o botão tá vendo aqui tá azul e não quero ele azul quero nas cores da minha paleta de cores né no caso aqui ó haley demora eu vou colocar leia mais me adiciona aí como é que tá assim né mas eu não quero adicionar ícone alinhamento no centro pode pôr no centro ou aqui no canto tá se você quiser colocar uma classe
adicional e aqui basicamente é isso agora nós vamos pra parte da do estilo olha só se você vem aqui no estilo você tem o rappa que é todo esse campo q tah azul aqui certo imagem minha própria imagem né meta essa parte aqui que você que nós colocamos da categoria aí do quantidade de comentários é flor de dente é essa parte aqui vermelha o título é o título conteúdo é o contexto aqui que o botão é o botão o que eu vou mudar aqui são poucas coisas tá poucas mesmo por exemplo aqui tá grudado eu vou
aqui na meta e vou dar um padre nela tá vendo aqui eu vou colocar aqui para zerar e eu vou colocar na parte superior 25 ó pronto agora já deu espaço ach o que 25 é muito vou colocar 20 pronto aí eu vou fechar para não confundir o que mais nada aqui eu vou vir aqui o fundo ele é branco não sei se você percebeu aqui ó olha é branco e tem uma pequena linha cinza vou desligar aqui a sentir a dor que deve tá atrapalhando vocês aí bom vamos lá eu vou colocar aqui o rappi vou mudar a cor tá vendo aqui ó
clico no clássico aqui a cor vou colocar branco e pronto tá tudo branco ah mas aqui sumiu tudo sim agora nós temos que vir aqui no título e mudar a cor dele eu vou colocar aquele preto não é aqui é aqui a cor e vou colocar um preto pode ser se mais preta aqui fica mais interessante no meu caso tá mais contraste com o branco aqui de fundo e aqui também ó e o conteúdo né conteúdo também só que quando eu vou botão preto vou colocar esse cinza aqui ó só para dar uns tá cozinho menor e também aqui na
meta eu vou ter que colocar a cor diferente também aqui embaixo a color colocar a meta um pouquinho mais claro ainda o que aquil o ali mais ou menos assim eu acho que tá bom na meta eu posso fazer o que diminuir um pouco é só fonte vou colocar em 12 picos vai ficar um pouquinho melhor né para não dar tanto destaque assim e pronto aqui basicamente está feito ouvindo o botão e o questão do botão é mais as cores você percebe ó é um vermelho né aqui eu vou clicar com o botão direito em cima para mim
saber qual é a cor você pode fazer isso de outra forma também tá tem um plugin aqui ó por exemplo esse daqui eu poss o capturar a cor da tela onde eu quiser e eu só vem aqui colo vou vir aqui no botão tipo de fundo vou clicar o pincel vou clicar aqui nesse na cor né e vou colar pronto como eu e aí a cor do texto do texto tem que ser preta tá branco quero dizer branco e quando passar o mouse vocês não ou ver eu colocar qualquer amarelo porque eu posso vir aqui também na página inicial ó e pegar o
amarelo aqui porque tem um botão na cor que eu quero o certo é você ter um blog nos as cores que você va i usar para não dar esse problema aqui tá vou pegar a minha ferramenta de cores pegar aqui watier ó pronto aí eu vou aqui vou copiar copiado agora eu vou vir aqui vou colar né no ou ver a cor vou colar pronto quando passar o mouse ó só que a cor do texto vai ter que ser preta preto né e pronto olha não ficou deixa eu ver aqui na tipografia sair não dá para o verde agora ela foi é porque ele
não às vezes demora um pouquinho pronto tá tudo preto vai tá tudo certinho ó bacana né só qu e a tipografia eu vou fazer o seguinte vou dar um peso maior para ela eu vou colocar 700 tá para ficar olha só e aqui também eu vou colocar a transformação maiúscula olha só agora sim tá muito muito legal pronto praticamente já tá bem parecido né que eu voltar aqui ó tá bem parecido a falta algumas coisas se você vir aqui ó e no rapper nós vamos tirar 10 a todos esses espaçamentos aqui ó tá vamos colocar
só que a contente padre um colocar 25 vou colocar a clicar aqui para ficar marca do para ficar 25 em tudo pronto agora ficou todo igual já aqui na imagem factor eu também vou zerar tudo porque ela vai ficar encaixada tá no topo olha só se eu fechar aqui ela fica bem parecida com aquela lá não fica é a única coisa que eu não podia ter gerado era o que rádios eu acho que deve ter uns quatro ó os quatro não uns 8 horas que é arredondamento aqui em cima pronto ficou bacana agora eu vou fechar no
rappi aqui ainda eu vou colocar o contorno nós temos a soma do bloco que isso não me engano tem sombra lá já tá aqui com a sombra e também se nós descer aqui nós temos borda tá bom as duas conteúdo e borda do container vamos arado contendo sólido nós vamos colocar o que um pixel tá e também a cor vai ser uma cor bem ralinha é só para para dar uma passada mesmo só para dizer que tem você escolhe a cor que você quiser ir pronto ó já tá bem parecido só que tá vendo tá grudado aos que têm mais
texto estão grudados então que nós temos que fazer vim a qui ó no rapper e dá uma margem a margem superior de 15 e inferior de 15 por quê que tem colocar inferior e superior porque igual esse aqui você tiver outro aqui embaixo ele tem que ter espaçamento em cima em baixo tá e aqui já tá feito pronto atualizar o seu este alguma outra coisa que a atentar eu acho que é isso ficou muito muito bacana eu vou sair aqui vamos ver se já tá pronto é um e se vocês aprovam pronto a tão de tarde que faltou
você pode perceber aqui ó que temos espaçame nto maior né aqui você não me engano deve ser o que uns 50 picos eu tenho que vir aqui a gente tá com elemento ó e aqui eu vou clicar na sessão ó e vou vir aqui no avançado e vou dizer aqui né vou colocar uma margem superior de 50 ó eu acredito que já deu 50 fixas é um pouquinho maior mas é detalhe né vou botar 75 eu acho que já tá bom vou publicar agora sim vou clicar aqui nesse hamburguerzinho envolver a página eu acho que deu tudo certo e olha só
qual o espaçamento tá aqui ó os dois estão bem interessante é lógico que o título aqui tá um pouco maior né e aqui também a minha logo tá um pouco melhor que você muda a tela ele dá um arde que tá diferente olha que o título tá um pouco diferente mas o foco mesmo é só a parte do blog tá eu vou depois eu vou ver se eu consigo aumentar um pouco aqui porque eu não gostei muito de um pouco pequeno vou deixar do jeito do original mesmo e tá aí achei entrar aqui agora no nosso blog e olha tá desse
jeito próximo passo é fazer isso aqui virar isso aqui olha só para extensão é muito mais moderno muito mais profissional muito mais bonito né olha como você prefere esse ou esse é o mesmo tema é o elemento mesmo mesma coisa só que esse aqui não vou utilizar o elemento não tem mais nada de clareamento para mim mudar isso aqui eu vou utilizar um pouco de personalização em css se você tiver afim eu vou fazer no próximo vídeo se não tiver bacana fechou por aí você pode deixar o blog desse jeito
mesmo co ntexto aqui tá ok é bom agora falta uma coisa não sei se você percebeu só clicar aqui em blog olha o que acontece ele vai para o blog antigo como que eu faço para colocar o blog novo aqui eu vou simplesmente vem aqui em personalizar canal volk até finalizar menos você entra na administração depois que entra no menu ao invés de utilizar essa página blog aqui vou remover ela depois que eu removo aqui eu venho aqui ó nas páginas eu acabei de criar o que blog news tá aqui né eu tenho até o
código do elemento dizendo que foi com o elemento que eu criei e pronto olha só blog wilson agora já está aqui vou salvar já tá no menu primário se envolver opá cancela aqui espera salvar né e vou ver aqui o meu site agora vou sair porque já salvei agora blog news quando eu clico qual é a página do blog agora a nova página blog vamos ver se ela tá personalizada para celular olha só tá personalizada para celular tudo bacaninha se você quiser você pode ir lá para celular e diminuir um pouco es se
espaço eu vou fazer isso para ficar perfeito é como se fazer isso vem aqui ó tá vendo modo responsivo você clica e põe celular no modo né e aí você vai descer tá vendo aqui ó vou clicar em editar a parte do blog por vir aqui em estilo título vou clicar aqui para editar e vou mudar né agora nós estamos aqui mobile percebe que nós estamos em mobile eu vou colocar aqui na verdade aqui tá certo né eu vou ter que mudar a altura da linha ó tá vendo vou deixar o altura aqui de 1.21.3 tá 1.3 eu acho que
ficou bacana nunca aqueles passamento tão grande e aqui o título é para mobile você pode mudar também deixar um pouquinho maior eu vou deixar em 20 fixos é um pouquinho maior e o espaçamento aqui já foi ajeitado né e pronto agora eu vou vir aqui vou ver a página e com certeza vai estar perfeita tanto para morro quanto para desktop f12 ou clicar aqui para celular e pronto olha só como ficou agora perfeito né gostou agora se eu vim aqui ó mudar aqui do s5 vou colocar um iphone vamos ver como é que
ele mostra o iphone vamos ver como é que ele mostra aqui no ipad pro aqui já é tablet né iphone x iphone 10 olha só bacana ok bom e aí que que você achou dessa página blog eu tenho certeza que você deve ter gostado se você viu até aqui com certeza você gostou aplica tá faz uma modificação é claro faz igualzinho a minha eu sugiro você fazer do seu sua personalidade o seu jeito pegando sempre a estrutura de básica tá bom então se você gostou da seu like ativ e o sininho entre o nosso grupo telegram
que eu vou disponibilizar lá alguns materiais para vocês se eu esquecer me cobram vamos para o telegram falando isso aqui cadê o material que eu vou te ah tá bom forte abraço até o próximo vídeo e aí
0 Comentários