Cómo crear un blog de estilo mediano con Divi

Publicado: 2017-07-06

En la publicación del blog Divi de hoy, vamos a compartir algunos excelentes consejos sobre cómo crear su propio sitio web de blogs con el mismo estilo que el blog Medium.

Se sabe que Medium es una de las plataformas más utilizadas para los blogs. No solo tienen una gran comunidad de blogueros que interactúan con su audiencia de forma regular, sino que su plataforma de blogs también ofrece una experiencia de usuario muy agradable. Eso es exactamente lo que quiere todo bloguero. Quieren asegurarse de transmitir el mensaje de forma clara y en un entorno en el que el lector se sienta cómodo.

Sin embargo, los blogs en Medium tienen sus limitaciones. No hay beneficios de SEO involucrados, por ejemplo. Al crear su propio blog, inspirado en el estilo de blog de Medium, puede continuar esa sensación familiar que ya tienen con el blog de Medium y llevarlo a su propio sitio web.

Empecemos

Suscríbete a nuestro canal de Youtube

Le mostraremos las partes más importantes de la creación de un blog de estilo Medium y también le mostraremos, paso a paso, cómo crear algunas de las partes importantes. Por ejemplo; cómo hacer una plantilla de publicación de blog de estilo Medium que pueda usar para todas sus publicaciones. La plantilla tiene este aspecto:

También le mostraremos cómo agregar los complementos Vale la pena leer y Resaltar y compartir para que se vea aún más similar. El resultado de Worth The Read se ve así:

Y Highlight and Share tendrá el siguiente efecto:

Crea un menú simplista como el blog de Medium

Una de las cosas que puede notar claramente al visitar el sitio web de Medium es la simplicidad de su menú. No hay demasiadas opciones disponibles, lo que facilita inmediatamente la navegación de los visitantes. Los visitantes pueden explorar las publicaciones de blog destacadas en la página de inicio y continuar su estadía desde allí.

Elementos del menú

Elija un logotipo que coincida con la simplicidad del resto de su sitio web y asegúrese de que sea sutil dándole un tamaño pequeño en su menú. Definitivamente no desea que el logotipo domine el contenido que está compartiendo en su sitio web.

A continuación, no incluya demasiadas páginas en su navegación. Dado que su sitio web se tratará de blogs, la página de inicio probablemente sea suficiente. También puede considerar agregar una página acerca de si desea contarles a los visitantes un poco más sobre usted.

Continuando, incluya un ícono de búsqueda para que las personas puedan buscar fácilmente en las publicaciones de su blog con algunas palabras clave. Se trata del contenido que estás produciendo y de que sea fácil de encontrar.

Para el ejemplo anterior, usamos la siguiente configuración para la barra de menú principal en el personalizador de temas:

Altura del menú: 54
Altura máxima del logotipo: 37
Tamaño del texto: 18

Use una paleta de colores con contraste y fuentes simples

El blog de Medium utiliza tres colores principales en toda su plataforma, lo que hace que el contenido sea fácil de leer. Aunque dos de los colores pueden parecer en blanco y negro, son un poco más suaves para los ojos. El tercero es un color gris claro pero legible. Realice los siguientes ajustes en la barra de menú principal en el personalizador de temas para cambiar los colores y la fuente que se utilizan en el menú principal:

Fuente: Source Sans Pro
Color del texto: rgba (0,0,0, .44)
Color de enlace activo: rgba (0,0,0, .44)
Color de fondo: #fbfcfd

Incluir icono de búsqueda

Además, para incluir el icono de búsqueda en su menú principal, vaya a Encabezado y navegación> Elementos del encabezado> Mostrar icono de búsqueda.

Deshabilitar la barra de navegación fija

Otra cosa que hace el blog de Medium es mantener su barra de navegación en la parte superior de la página. De esa manera, los visitantes no serán interrumpidos innecesariamente cuando estén leyendo. Para deshabilitar la barra de navegación fija en su sitio web Divi, vaya a su panel de WordPress> Divi> Opciones de tema> Configuración general> Deshabilitar la barra de navegación fija.

Diseñe los módulos de blog de su página de inicio por categorías

A continuación, desea diseñar la página de inicio de su sitio web por categorías. Dependiendo del blog que esté creando, puede crear diferentes secciones dentro de su página de inicio que estén a la altura de lo que a sus visitantes les gusta leer más. Recomendamos al menos hacer uso de los siguientes tipos de categorías: populares, últimas y sugeridas. Puede asignar publicaciones de blog a estas categorías creando diferentes categorías en la página 'Categorías' de 'Publicaciones' en su menú de WordPress y asignando cada publicación a una o más categorías dentro de la publicación en sí.

Otra cosa que realmente desea hacer es hacer que los diferentes módulos y secciones del blog en su página de inicio sean fáciles de seguir. Para lograrlo, puede usar la cuadrícula de blog estándar en el creador de Divi o puede buscar algo un poco más avanzado. A continuación, enumeramos tres complementos que puede considerar usar.

Complemento de tarjeta de artículo Divi

El complemento Divi Article Card es un complemento gratuito que se compartió en nuestro blog durante Divi 100. El estilo que se utiliza en este complemento es limpio y tiene un agradable efecto de desplazamiento. Es un efecto simple pero puede crear ese toque extra para tu blog.

El complemento es completamente gratuito, ¡solo vaya a la publicación y descárguelo!

Módulo de blog personalizado Divi

Otro complemento que creó un diseño de módulo de blog atractivo es el módulo de blog personalizado Divi. Este se parece más a las publicaciones del blog Medium que el anterior al tener la imagen destacada colocada en el lado izquierdo.

El precio del complemento es de $ 20.

Extras del Blog Divi

El último complemento que podría ayudarlo a que su blog se parezca más al blog de Medium es Divi Blog Extras. Este complemento también tiene muchos diseños de módulos de Blog diferentes que pueden ayudarlo a construir su blog de estilo Medio.

El complemento se vende a $ 15 por la licencia de sitio único y $ 30 por la licencia extendida.

Crear plantilla de publicación de blog

Medium tiene un formato de publicación de blog estándar para todas las publicaciones que se crean. El diseño se centra en la esencia del post: el contenido. El formato de publicación de blog que se está utilizando está en línea con el resto del sitio web: simplista. Va al grano utilizando la combinación de contenido escrito y medios que puede insertar en toda la publicación.

Divi ofrece esas mismas posibilidades. Puede hacer que la publicación de su blog sea tan simple o delicada como desee utilizando los diferentes módulos que proporciona el constructor Divi. Este es el diseño de ejemplo que le mostraremos cómo crear paso a paso:

Configuración de Divi Post

Comience agregando una nueva publicación, dándole un título y activando el constructor Divi. A continuación, asegúrese de que la configuración de Divi Post sea la siguiente:

Diseño de página: ancho completo
Navegación por puntos: desactivada
Ocultar navegación antes de desplazarse: predeterminado
Título de la publicación: Ocultar

Autor (escritorio)

Para hacer el diseño, cambiaremos al Visual Builder. Comience agregando una nueva sección con dos filas. Continúe agregando un módulo de imagen a la primera columna y dos módulos de texto a la segunda columna. Abra la configuración de la sección y agregue, elija '#fbfcfd' como su color de fondo.

Módulo de imagen

Abra el Módulo de imagen, cargue la imagen en la pestaña Contenido y coloque la Alineación de imagen en 'Izquierda' en la pestaña Diseño. Continuando, agregue '-5%' al Margen superior y '25% 'al margen izquierdo en la subcategoría Espaciado de la pestaña Diseño.

Después de eso, agregue el siguiente código al elemento principal en la subcategoría CSS personalizado de la pestaña Avanzado:

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

Primer módulo de texto

Agregue el nombre del autor en el Cuadro de contenido dentro de la pestaña Contenido y realice los siguientes ajustes en la subcategoría Texto de la pestaña Diseño:

Orientación del texto: izquierda
Fuente de texto: Source Sans Pro
Tamaño de fuente de texto: 18
Color del texto: rgba (0,0,0,0,8)
Altura de la línea de texto: 1.7em

Desplácese hacia abajo en la misma pestaña para agregar '-3%' al margen superior y '-70%' al margen izquierdo.

Segundo módulo de texto

Escriba el lema en el segundo módulo de texto y realice los siguientes ajustes en la subcategoría de texto de la pestaña Diseño:

Orientación del texto: izquierda
Fuente de texto: Source Sans Pro
Tamaño de fuente de texto: 14
Color del texto: rgba (0,0,0,0.44)
Altura de la línea de texto: 1.7em

Además, desplácese hacia abajo en la misma pestaña y agregue '-5%' al Margen superior y '-70%' al Margen izquierdo en la subcategoría Espaciado.

Visibilidad de fila

Finalmente, abra la configuración de Fila y desactive la fila en teléfonos y tabletas en la subcategoría Visibilidad de la pestaña Avanzado.

Autor (móvil)

Agregue otra fila a la misma sección con una fila de ancho completo. Continúe clonando el Módulo de imagen y los Módulos de texto en la fila anterior y colocándolos en la fila de ancho completo. Tendremos que hacer algunas modificaciones en cada módulo para que se centren en la pantalla cuando alguien abra la página en un móvil o tableta.

Módulo de imagen

Abra el Módulo de imagen y coloque la Alineación de imagen en 'Centro'.

Primer módulo de texto

Abra el primer Módulo de texto y cambie la Orientación del texto a 'Centro' en la subcategoría Texto de la pestaña Diseño.

Desplácese hacia abajo en la misma pestaña, elimine el margen izquierdo y mantenga el margen superior.

Segundo módulo de texto

Además, haga lo mismo con el segundo módulo de texto. Coloque la Orientación del texto en 'Centro' y elimine el Margen izquierdo en la subcategoría Espaciado de la pestaña Contenido.

Visibilidad de fila

Finalmente, abra la configuración de la fila y desactive la fila para escritorios.

Módulo de título de la publicación

Dado que hemos deshabilitado el título de la publicación en nuestra configuración de publicación Divi, vamos a agregar un módulo de título de la publicación en una fila de ancho completo dentro de la misma sección que hemos usado hasta ahora.

En la subcategoría Elementos de la pestaña Contenido, podemos elegir qué elementos queremos que aparezcan. Como ya hemos mencionado al autor, hemos desactivado todo menos el título.

Es más; realice los siguientes ajustes en las subcategorías Texto y Texto del título de la pestaña Diseño:

Orientación del texto: centro
Fuente del título: Source Sans Pro
Estilo de fuente del título: Negrita
Tamaño de fuente del título: 47px (escritorio), 40 (tableta), 35 (teléfono)
Color del texto del título: rgba (0,0,0,0.8)

Imágenes de ancho completo

La primera imagen de ancho completo que agregaremos es una representación de la imagen destacada. Agregue una sección de ancho completo, coloque un módulo de imagen de ancho completo en ella y cargue una imagen en la pestaña Contenido. Es tan simple como eso.

Módulos de texto

Continuando, crearemos los módulos de texto que se están utilizando para la publicación del blog. Agregue una sección estándar con una fila de ancho completo y coloque un módulo de texto en ella. En este ejemplo, usamos la familia de fuentes 'Cardo' en lugar de 'Georgia' simplemente porque 'Cardo' es una familia de fuentes incorporada.

Además, abra la configuración del módulo Texto, escriba un texto de muestra en el cuadro Contenido y vaya a la pestaña Diseño. Dentro de la subcategoría Texto, realice los siguientes ajustes:

Orientación del texto: izquierda
Fuente de texto: Cardo
Tamaño de fuente de texto: 25px (escritorio), 19px (tableta), 17px (teléfono)
Color del texto: rgba (0,0,0,0,8)
Altura de la línea de texto: 1.8em

Desplácese hacia abajo en la misma pestaña, agregue '800px' al Ancho máximo en la subcategoría Tamaño y agregue '10% 'al Margen izquierdo en la subcategoría Espaciado.

Módulo de video

Lo último que puede aportar un valor añadido a tu entrada de blog es la integración de un vídeo. Para hacer esto, debes clonar la sección realizada anteriormente con el Módulo de texto y dividir el contenido total que tienes entre los dos módulos de texto. Justo entre las dos secciones, agregaremos otra sección con una fila de ancho completo. En esa fila de ancho completo, agregaremos un módulo de video.

Así es como debería verse la estructura en el backend:

No hicimos ningún ajuste en el Módulo de video además de agregar la URL.

Guardar plantilla

Puede reutilizar las diferentes secciones para que se ajusten a la publicación de blog que está creando clonándolas y cambiando el contenido. Una vez que haya hecho eso, puede guardar la plantilla de publicación de blog haciendo clic en 'Guardar en la biblioteca' y dándole un nombre.

La próxima vez que desee utilizar la plantilla, simplemente haga clic en "Cargar desde biblioteca" y cargue la plantilla.

Vale la pena leer

Una característica típica de la creación de un blog de Medium es la cantidad de minutos que se tarda en leer una determinada publicación de blog. Por lo general, aparece justo al principio de la página y brinda a los usuarios una estimación de cuánto tiempo les tomará terminar de leer. En una era en la que el tiempo es lo más preciado, esto ayuda a las personas a decidir si quieren leer la publicación del blog o no.

Vale la pena leer un complemento de WordPress gratuito que lo ayuda a llegar allí por Well Done Marketing. Puede descargarlo en la página que vinculamos o buscarlo en los complementos. Lo bueno de este complemento es que puede elegir dónde desea que aparezca el tiempo de lectura; páginas, publicaciones o ambos. También puede elegir la ubicación y el formato.

Una vez que haya descargado el complemento y lo haya activado, haga clic en la opción 'Progreso de lectura' en su menú. Continúe y realice los cambios necesarios. Poner un tiempo de lectura generalmente solo se usa para publicaciones, por lo que la mayoría de las personas probablemente elegirán solo esa opción.

En la pestaña Estilo, puede elegir el estilo que le gustaría usar. Asegúrate de usar la misma fuente que en el título. También puede agregar código CSS personalizado si desea realizar modificaciones adicionales.

Resaltar y compartir

Otra cosa realmente típica de Medium es la posibilidad de resaltar algo, compartirlo o comentarlo si te gusta. Le da un valor agregado a la publicación del blog al permitirle interactuar con las personas que la están leyendo. Encontramos un complemento que te ayuda a hacer algo similar; el complemento Resaltar y compartir, que también es de uso gratuito.

Puede decidir en qué canales de redes sociales las personas pueden compartir yendo a Configuración> Resaltar y compartir> Habilitar los canales de redes sociales que le gustaría usar.

Terminando

Después de haber leído esta publicación, debería poder comenzar a construir su blog de estilo Medium que contiene algunas de las partes más relevantes de Medium. Tiene muchas posibilidades para mantenerlo simple como lo hace el blog de Medium, pero aún así infundirle algunos toques personales. Si tiene alguna pregunta o sugerencia; ¡asegúrese de dejar un comentario en la sección de comentarios a continuación para que podamos estar en contacto con nuestra increíble comunidad Divi!

¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!

Imagen destacada de Julia Tim / shutterstock.com