Como Criar um Blog de Estilo Médio com Divi

Publicados: 2017-07-06

Na postagem do blog Divi de hoje, vamos compartilhar algumas ótimas dicas sobre como criar seu próprio site de blog no mesmo estilo do blog do Medium.

O Medium é conhecido por ser uma das plataformas mais utilizadas para blogs. Eles não apenas têm uma grande comunidade de blogueiros que se envolvem com seu público regularmente, mas sua plataforma de blog também oferece uma experiência de usuário muito agradável. Isso é exatamente o que todo blogueiro deseja. Eles querem ter certeza de que entregam a mensagem de forma clara e em um ambiente onde o leitor se sinta confortável.

No entanto, o blog no Medium tem suas limitações. Não há benefícios de SEO envolvidos, por exemplo. Ao criar seu próprio blog, que é inspirado no estilo de blog do Medium, você pode continuar aquele sentimento familiar que eles já têm com o blog do Medium e trazê-lo para o seu próprio site.

Vamos começar

Inscreva-se no nosso canal no Youtube

Mostraremos as partes mais importantes da criação de um blog no estilo Medium e também mostraremos, passo a passo, como criar algumas das partes importantes. Por exemplo; como fazer um modelo de postagem de blog no estilo Médio que você pode usar em todas as suas postagens. O modelo é parecido com este:

Também mostraremos como adicionar os plug-ins Worth The Read e Highlight and Share para torná-lo ainda mais semelhante. O resultado Worth the Read é parecido com este:

E o Realçar e Compartilhar terá o seguinte efeito:

Crie um menu simplista como o blog do meio

Uma das coisas que você pode notar claramente ao visitar o site do Medium é a simplicidade do menu. Não existem muitas opções disponíveis, o que torna imediatamente mais fácil para os visitantes navegar. Os visitantes podem explorar as postagens do blog em destaque na página inicial e continuar a sua estada a partir daí.

Elementos do Menu

Escolha um logotipo que corresponda à simplicidade do restante do seu site e certifique-se de que seja sutil, atribuindo-lhe um tamanho pequeno no menu. Você definitivamente não quer que o logotipo se sobreponha ao conteúdo que você está compartilhando em seu site.

Em seguida, não inclua muitas páginas em sua navegação. Como o seu site será sobre blogs, a página inicial provavelmente é o suficiente. Você também pode adicionar uma página sobre se quiser contar aos visitantes um pouco mais sobre você.

Continuando, inclua um ícone de pesquisa para que as pessoas possam pesquisar facilmente as postagens do seu blog com algumas palavras-chave. É tudo sobre o conteúdo que você está produzindo e tornando-o fácil de encontrar.

Para o exemplo acima, usamos as seguintes configurações para a Barra de Menu Principal no Customizador de Tema:

  • Altura do menu: 54
  • Altura máxima do logotipo: 37
  • Tamanho do texto: 18

Use uma paleta de cores com contraste e fontes simples

O blog do Medium usa três cores principais em sua plataforma, o que torna o conteúdo fácil de ler. Embora duas das cores possam parecer preto e branco, são ligeiramente mais suaves para os olhos. O terceiro é cinza claro, mas de cor legível. Faça os seguintes ajustes na barra de menu principal no personalizador de temas para alterar as cores e a fonte que estão sendo usadas no menu principal:

  • Fonte: Fonte Sans Pro
  • Cor do texto: rgba (0,0,0, 0,44)
  • Cor do link ativo: rgba (0,0,0, 0,44)
  • Cor de fundo: #fbfcfd

Incluir ícone de pesquisa

Além disso, para incluir o ícone de pesquisa em seu menu principal, vá para Cabeçalho e navegação> Elementos do cabeçalho> Mostrar ícone de pesquisa.

Desativar barra de navegação fixa

Outra coisa que o blog do Medium faz é manter sua barra de navegação no topo da página. Dessa forma, os visitantes não são desnecessariamente interrompidos durante a leitura. Para desativar a barra de navegação fixa em seu site Divi, vá para o painel do WordPress> Divi> Opções de tema> Configurações gerais> Desativar a barra de navegação fixa.

Estilize os Módulos de Blog da Sua Página Inicial por Categorias

Em seguida, você deseja estilizar a página inicial do seu site por categorias. Dependendo do blog que você está criando, você pode criar diferentes seções em sua página inicial que correspondam ao que seus visitantes mais gostam de ler. Recomendamos fazer uso, pelo menos, dos seguintes tipos de categorias: populares, mais recentes e sugeridas. Você pode atribuir postagens de blog a essas categorias criando categorias diferentes na página 'Categorias' de 'Postagens' no menu do WordPress e atribuindo cada postagem a uma ou mais categorias dentro da própria postagem.

Outra coisa que você realmente deseja fazer é facilitar o acompanhamento dos diferentes módulos e seções do blog em sua página inicial. Para fazer isso, você pode usar a grade de blog padrão no construtor Divi ou pode pesquisar algo um pouco mais avançado. Listamos três plug-ins abaixo que você pode considerar o uso.

Plug-in do cartão de artigo Divi

O plugin Divi Article Card é um plugin gratuito que foi compartilhado em nosso blog durante o Divi 100. O estilo que está sendo usado neste plugin é limpo e tem um bom efeito de foco. É um efeito simples, mas pode dar um toque extra ao seu blog.

O plugin é totalmente gratuito, basta ir ao post e fazer o download!

Módulo de blog personalizado da Divi

Outro plugin que criou um layout de Módulo de Blog atraente é o Módulo de Blog Personalizado Divi. Este se assemelha aos posts do blog do Medium mais do que o anterior, tendo a imagem em destaque colocada no lado esquerdo.

O preço do plugin é de $ 20.

Divi Blog Extras

O último plugin que pode ajudá-lo a tornar seu blog mais parecido com o do Medium é o Divi Blog Extras. Este plugin também tem vários layouts de módulo de Blog diferentes que podem ajudá-lo a construir seu blog no estilo Medium.

O plugin é vendido por $ 15 para a Licença de Site Único e $ 30 para a Licença Estendida.

Criar modelo de postagem no blog

O Medium tem um formato de postagem de blog padrão para todas as postagens criadas. O design foca na essência da postagem: o conteúdo. O formato de postagem do blog que está sendo usado está de acordo com o restante do site: simplista. Ele vai direto ao ponto usando a combinação de conteúdo escrito e mídia que você pode inserir ao longo da postagem.

Divi oferece essas mesmas possibilidades. Você pode tornar sua postagem de blog tão simples ou delicada quanto desejar usando os diferentes módulos que o Divi builder oferece. Este é o layout de exemplo que mostraremos como criar passo a passo:

Divi Post Settings

Comece adicionando uma nova postagem, dando-lhe um título e ativando o Divi builder. Em seguida, certifique-se de que as configurações de postagem Divi são as seguintes:

  • Layout da página: largura total
  • Navegação por pontos: desligada
  • Ocultar navegação antes de rolar: padrão
  • Título da postagem: Ocultar

Autor (Desktop)

Para fazer o layout, vamos mudar para o Visual Builder. Comece adicionando uma nova seção com duas linhas. Continue adicionando um Módulo de imagem à primeira coluna e dois Módulos de texto à segunda coluna. Abra as configurações da seção e adicione escolha '#fbfcfd' como sua cor de fundo.

Módulo de Imagem

Abra o Módulo de Imagem, carregue a imagem na guia Conteúdo e coloque o Alinhamento da Imagem à 'Esquerda' na guia Design. Continuando, adicione '-5%' à margem superior e '25% 'à margem esquerda na subcategoria Espaçamento da guia Design.

Depois disso, adicione o seguinte código ao Elemento principal na subcategoria CSS personalizada da guia Avançado: 

-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
width: 75px;
height: 75px;

Módulo de Primeiro Texto

Adicione o nome do autor na caixa de conteúdo na guia Conteúdo e faça os seguintes ajustes na subcategoria Texto da guia Design:

  • Orientação do Texto: Esquerda
  • Fonte do texto: Fonte Sans Pro
  • Tamanho da fonte do texto: 18
  • Cor do texto: rgba (0,0,0,0.8)
  • Altura da linha de texto: 1,7em

Role para baixo na mesma guia para adicionar '-3%' à Margem Superior e '-70%' à Margem Esquerda.

Segundo Módulo de Texto

Digite o slogan no segundo Módulo de Texto e faça os seguintes ajustes na subcategoria Texto da guia Design:

  • Orientação do Texto: Esquerda
  • Fonte do texto: Fonte Sans Pro
  • Tamanho da fonte do texto: 14
  • Cor do texto: rgba (0,0,0,0.44)
  • Altura da linha de texto: 1,7em

Além disso, role para baixo na mesma guia e adicione '-5%' à Margem superior e '-70%' à Margem esquerda na subcategoria Espaçamento.

Visibilidade da linha

Por fim, abra as configurações de linha e desative a linha em telefones e tablets na subcategoria Visibilidade da guia Avançado.

Autor (celular)

Adicione outra linha à mesma seção com uma linha de largura total. Continue clonando o Módulo de imagem e os Módulos de texto na linha anterior e colocando-os na linha de largura total. Teremos que fazer algumas modificações em cada módulo para torná-los centralizados na tela quando alguém abrir a página no celular ou tablet.

Módulo de Imagem

Abra o Módulo de imagem e coloque o alinhamento da imagem em 'Centro'.

Módulo de Primeiro Texto

Abra o primeiro Módulo de Texto e altere a Orientação do Texto para 'Centro' na subcategoria Texto da guia Design.

Role para baixo na mesma guia, exclua a Margem Esquerda e mantenha a Margem Superior.

Segundo Módulo de Texto

Além disso, faça a mesma coisa para o segundo Módulo de Texto. Coloque a Orientação do Texto em 'Centro' e exclua a Margem Esquerda na subcategoria Espaçamento da guia Conteúdo.

Visibilidade da linha

Por fim, abra as configurações de linha e desative a linha para desktops.

Módulo de Título de Postagem

Já que desabilitamos o título do post em nossas Configurações de Postagem Divi, vamos adicionar um módulo Post Title em uma linha de largura total dentro da mesma seção que usamos até agora.

Na subcategoria Elementos da guia Conteúdo, podemos escolher quais elementos queremos que apareça. Como já mencionamos o autor, desativamos tudo, exceto o título.

Além disso; faça os seguintes ajustes nas subcategorias Texto e Texto do Título da guia Design:

  • Orientação do Texto: Centro
  • Fonte do título: Fonte Sans Pro
  • Estilo da fonte do título: negrito
  • Tamanho da fonte do título: 47 px (desktop), 40 (tablet), 35 (telefone)
  • Cor do texto do título: rgba (0,0,0,0.8)

Imagens de largura total

A primeira imagem de largura total que adicionaremos é uma representação da imagem em destaque. Adicione uma seção de largura total, coloque um módulo de imagem de largura total nela e carregue uma imagem na guia Conteúdo. É simples assim.

Módulos de Texto

Continuando, criaremos os Módulos de Texto que estão sendo usados ​​para a postagem do blog. Adicione uma seção padrão com uma linha de largura total e coloque um Módulo de Texto nela. Neste exemplo, estamos usando a família de fontes 'Cardo' em vez de 'Georgia' simplesmente porque 'Cardo' é uma família de fontes integrada.

Além disso, abra as configurações do módulo Texto, digite algum texto de amostra na caixa Conteúdo e vá para a guia Design. Na subcategoria Texto, faça os seguintes ajustes:

  • Orientação do Texto: Esquerda
  • Fonte do Texto: Cardo
  • Tamanho da fonte do texto: 25 px (desktop), 19 px (tablet), 17 px (telefone)
  • Cor do texto: rgba (0,0,0,0.8)
  • Altura da linha de texto: 1.8em

Role para baixo na mesma guia, adicione '800px' à largura máxima na subcategoria de dimensionamento e adicione '10% 'à margem esquerda na subcategoria de espaçamento.

Módulo de Vídeo

A última coisa que pode agregar valor à postagem do seu blog é a integração de um vídeo. Para fazer isso, você deve clonar a seção feita anteriormente com o Módulo de Texto e dividir o conteúdo total que você possui entre os dois módulos de texto. Bem entre as duas seções, vamos adicionar outra seção com uma linha de largura total. Nessa linha de largura total, vamos adicionar um Módulo de Vídeo.

É assim que a estrutura deve se parecer no back-end:

Não fizemos nenhum ajuste no Módulo de Vídeo além de adicionar o URL.

Salvar modelo

Você pode reutilizar as diferentes seções para caber na postagem do blog que está criando, clonando-as e alterando o conteúdo. Depois de fazer isso, você pode salvar o modelo de postagem do blog clicando em 'Salvar na biblioteca' e dando um nome a ele.

Da próxima vez que você quiser usar o modelo, simplesmente clique em 'Carregar da Biblioteca' e carregue o modelo.

Vale a pena ler

Uma coisa típica sobre a criação de um blog no Medium é o número de minutos que leva para ler uma determinada postagem do blog. Isso geralmente aparece logo no início da página e fornece aos usuários uma estimativa de quanto tempo levarão para terminar a leitura. Em uma época em que o tempo é a coisa mais preciosa, isso ajuda as pessoas a decidir se querem ler a postagem do blog ou não.

Um plugin gratuito para WordPress que ajuda você a chegar lá é Worth The Read by Well Done Marketing. Você pode baixá-lo na página que criamos no link ou pesquisá-lo nos plugins. O bom deste plugin é que você pode escolher onde quer que apareça o tempo de leitura; páginas, posts ou ambos. Você também pode escolher o posicionamento e o formato.

Depois de baixar o plugin e ativá-lo, clique na opção 'Progresso da leitura' no menu. Vá em frente e faça as alterações necessárias. Definir um tempo de leitura geralmente é usado apenas para postagens, então a maioria das pessoas provavelmente escolherá apenas essa opção.

Na guia Estilo, você pode escolher o estilo que deseja usar. Certifique-se de usar a mesma fonte do título. Você também pode adicionar código CSS personalizado se quiser fazer modificações extras.

Destaque e compartilhe

Outra característica bem típica do Medium é a possibilidade de destacar algo, compartilhar ou comentar, se quiser. Ele agrega valor ao post do blog, permitindo que ele se envolva com as pessoas que o estão lendo. Encontramos um plugin que o ajuda a fazer algo semelhante; o plugin Destacar e Compartilhar, que também é de uso gratuito.

Você pode decidir em quais canais de mídia social as pessoas podem compartilhar acessando Configurações> Destacar e compartilhar> Habilitando os canais de mídia social que deseja usar.

Empacotando

Depois de ler esta postagem, você deve ser capaz de começar a construir seu blog no estilo Medium, que contém algumas das partes mais relevantes do Medium. Você tem muitas possibilidades para mantê-lo simples como o blog do Medium, mas ainda assim impregná-lo com alguns toques pessoais. Se você tiver dúvidas ou sugestões; certifique-se de deixar um comentário na seção de comentários abaixo para que possamos ficar em contato com nossa incrível comunidade Divi!

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!

Imagem em destaque por Julia Tim / shutterstock.com