En la publicación del blog de Divi de hoy, vamos a compartir algunos consejos excelentes sobre cómo crear su propio sitio web de blogs con el mismo estilo que el blog de Medium .
Medium es conocido por ser una de las plataformas más utilizadas para bloguear. 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 todo blogger quiere. Quieren estar seguros de que transmiten el mensaje de forma clara y en un entorno en el que el lector se sienta cómodo.
Sin embargo, bloguear en Medium tiene 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 con esa sensación familiar que ya tienen con el blog de Medium y llevarlo a su propio sitio web.
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 mediano que puede usar para todas sus publicaciones. La plantilla se ve así:
También le mostraremos cómo agregar los complementos Worth The Read y Highlight and Share para que se vea aún más similar. El resultado Worth The Read se ve así:
Y el Resaltar y Compartir tendrá el siguiente efecto:
Una de las cosas que puedes 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 resaltadas en la página de inicio y continuar su estadía desde allí.
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 hacer 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 blanco y negro, son un poco más suaves a la vista. 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: Fuente 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 ícono de búsqueda en su menú principal, vaya a Encabezado y navegación > Elementos del encabezado > Mostrar ícono de búsqueda.
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 forma, 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.
Dale estilo a tu página de inicio Blog Módulos 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és creando, puedes crear diferentes secciones dentro de tu página de inicio que estén a la altura de lo que más les gusta leer a tus visitantes. 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 misma.
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 lograr eso, puede usar la cuadrícula de blog estándar en el constructor Divi o puede buscar algo un poco más avanzado. Hemos enumerado tres complementos a continuación 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 usa en este complemento es limpio y tiene un agradable efecto de desplazamiento. Es un efecto simple pero puede crear ese pequeño toque extra para tu blog.
El complemento es completamente gratuito, ¡solo ve a la publicación y descárgalo!
Módulo de blog personalizado de Divi
Otro complemento que creó un diseño de módulo de blog atractivo es el módulo de blog personalizado de Divi . Esta se parece más a las publicaciones de blog de Medium que la anterior al tener la imagen destacada colocada en el lado izquierdo.
El precio del plugin es de $20.
Extras del blog de 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 al por menor a $ 15 para la licencia de sitio único y $ 30 para 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 mediante el uso de la combinación de contenido escrito y medios que puede insertar a lo largo de la publicación.
Divi ofrece esas mismas posibilidades. Puede hacer que su publicación de blog sea tan simple o tan 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 la publicación Divi
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 la publicación Divi sea la siguiente:
- Diseño de página: ancho completo
- Navegación de puntos: Desactivado
- Ocultar navegación antes de desplazarse: predeterminado
- Título de la publicación: Ocultar
Para hacer el diseño, vamos a cambiar a 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 ‘#fbfcfd’ como 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 la 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:
|
01
02
03
04
|
-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: Fuente Sans Pro
- Tamaño de fuente de texto: 18
- Color del texto: rgba(0,0,0,0.8)
- Altura de línea de texto: 1,7 em
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 eslogan en el segundo Módulo de texto y realice los siguientes ajustes en la subcategoría Texto de la pestaña Diseño:
- Orientación del texto: Izquierda
- Fuente de texto: Fuente Sans Pro
- Tamaño de fuente de texto: 14
- Color del texto: rgba(0,0,0,0.44)
- Altura de línea de texto: 1,7 em
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 deshabilite la fila en teléfonos y tabletas en la subcategoría Visibilidad de la pestaña Avanzado.
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 queden centrados en la pantalla cuando alguien abra la página en el móvil o la 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 para 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 deshabilite la fila para escritorios.
Módulo de título de publicación
Dado que hemos deshabilitado el título de la publicación en nuestra configuración de publicación de 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 deshabilitado todo excepto el título.
Ademá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: Fuente Sans Pro
- Estilo de fuente del título: Negrita
- Tamaño de fuente del título: 47 px (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 utilizan 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, estamos usando la familia de fuentes ‘Cardo’ en lugar de ‘Georgia’ simplemente porque ‘Cardo’ es una familia de fuentes integrada.
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 del texto: Cardo
- Tamaño de fuente de texto: 25 px (escritorio), 19 px (tableta), 17 px (teléfono)
- Color del texto: rgba(0,0,0,0.8)
- Altura de la línea de texto: 1,8 em
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 vídeo
Lo último que puede dar valor añadido a tu entrada de blog es integrar un vídeo. Para ello, tienes que clonar la sección realizada previamente 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, vamos a agregar un módulo de video.
Así es como debería verse la estructura en el backend:
No hicimos ningún ajuste al 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 en Medium es la cantidad de minutos que se tarda en leer una determinada publicación de blog. Por lo general, aparece justo al comienzo de la página y brinda a los usuarios una estimación de cuánto tiempo les llevará terminar de leer. En una era donde el tiempo es lo más preciado, esto ayuda a las personas a decidir si quieren leer la publicación del blog o no.
Un complemento gratuito de WordPress que lo ayuda a llegar allí es Worth The Read de Well Done Marketing. Puede descargarlo en la página que vinculamos o buscarlo en los complementos. Lo bueno de este complemento es que puedes elegir dónde quieres que aparezca el tiempo de lectura; páginas, publicaciones o ambas. 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 haga los cambios que necesita hacer. 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 un código CSS personalizado si desea realizar modificaciones adicionales.
Otra cosa muy típica de Medium es la posibilidad de destacar algo, compartirlo o comentarlo si te gusta. Le da un valor agregado a la publicación del blog al permitir que interactúe con las personas que la leen. Encontramos un complemento que te ayuda a hacer algo similar; el complemento Highlight and Share , 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 crear 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úrate de dejar un comentario en la sección de comentarios a continuación para que podamos mantenernos en contacto con nuestra increíble comunidad Divi!
¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!
Imagen destacada de Julia Tim / shutterstock.com