En el post anterior sobre Divi te mostré las razones por las que siempre es mejor invertir en un tema premium de calidad frente a uno gratuito y cómo, Divi, dentro de la gran variedad de plantillas para WordPress, será sin lugar a duda una de tus opciones más acertadas.
Imagen de Shutterstock - © Africa Studio
Para que conozcas más en profundidad la características de este gran producto, en este artículo te enseñaré con detalle cómo diseñar la portada o home page de tu blog siguiendo un diseño basado en la estructura de las famosas landing pages.
¿Qué encontrarás aquí?
Como bien sabrás, la portada de tu blog será la página de tu web que reciba mayor número de visitas, por lo que un diseño optimizado atendiendo a aspectos tan importantes como el diseño y la creación de textos basados en técnicas de copywriting, aumentarán tus tasas de conversión mucho más.
Veremos paso a paso cómo lograr todo esto con Divi de forma sencilla e intuitiva, simulando la creación de la portada de este mismo blog.
Además, como complemento extra, terminaremos con una guía que te servirá de utilidad a la hora de crear y diseñar tanto tus páginas como los artículos de tu blog con Divi, así como con la ayuda de su constructor visual Divi Builder. De forma fácil y sin complicaciones.
Diseñar la portada del blog
La portada de tu blog o home page será la página que canalizará la mayor parte de tu tráfico y, por tanto, reciba mayor número de visitas mensuales.
Debido a esto, este tipo de página cobrará mayor importancia en todos los aspectos (comercial, marketing, marca personal, etc.. ), por lo que es vital plasmar en ella con claridad todo tu contenido, para transmitirle a tu lector el mensaje correcto desde el primer momento que aterriza en ella.
Para lograr con éxito este cometido no hay mejor enfoque que considerar la portada de tu blog como una landing page e incluir en ella todos y cada uno de los elementos que ésta debe tener.
Para ello, a continuación veremos el enfoque que este tipo de páginas debe tener, algunos elementos imprescindibles, consejos para inspirarte y un tutorial para componer tu portada con Divi con éxito.
Formato tradicional versus landing page
El objetivo primordial de una landing page no es otro que la de captar la atención de tus nuevos lectores desde el primer momento, a la vez que eliminamos cualquier tipo de distracción.
De esta forma podrás guiarlos sutilmente por cada una de las áreas de tu página, generando empatía, “atacando” a sus zonas de dolor para, finalmente, hacerle saber que lo que les ofreces será la solución real a los problemas e inquietudes que se les plantea.
El uso de las landing pages se lleva utilizando desde hace bastante tiempo y su porcentaje de conversión con respecto al formato tradicional del blog es bastante mayor.
Es por eso que, desde mi punto de vista, es siempre mucho mejor hacer uso de este tipo de páginas como portada para tu blog, frente a otras con formatos más clásicos que muestran un simple listado arbitrario de posts.
Inspírate en otros bloggers y replícalos con Divi
Diseñar la portada de tu blog desde el principio no es tarea fácil puesto que, como habrás visto, no sólo tendrás que aprender a utilizar diversas herramientas de diseño, sino también tener muy claras la estructura y apariencia que ésta debe poseer.
Y es que debes tenerlo muy claro desde el principio: cada elemento debe tener un propósito específico orientado al 100% a aumentar la tasa de conversión al máximo.
Por eso, lo mejor que puedes hacer desde el primer momento es hacer un estudio exhaustivo, analizar a otros bloggers, influencers e incluso a tu competencia, para extraer sus puntos fuertes y a la vez inspirarte.
Información hay a raudales; solo tienes que saber dónde buscar, empezando por la temática principal de tu blog, tu nicho o especialización.
A modo de ejemplo, tomemos Ciudadano 2.0; un blog que, como bien sabes, trata todo lo relacionado con el blogging, WordPress, optimización, SEO, redes sociales y marca personal.
¿Qué hace de esta portada un ejemplo de inspiración? ¿Qué te podría aportar? Analicémosla un poco más:
- Mensaje: una landing page minimalista, sencilla y que transmite todo lo que te puede aportar con un mensaje claro y directo: Crear un blog que funciona.
- Empatía: Berto y Raquel son los creadores de Ciudadano 2.0. Mostrarse directamente ante su audiencia genera desde el primer momento cercanía, empatía y confianza, aumentando así las probabilidades de convertir.
- Especialización: 9 temáticas principales con las que consiguen posicionarse como una autoridad en su nicho, a la vez que facilitan al lector el acceso a las secciones que más le interese.
- Blog: el “core” de su web es el blog y lo demuestran poniéndote muy fácil su acceso a través de sus categorías, enlaces a sus posts más comentados, los más recientes junto con botón directo hacia el mismo,...
- Seguimiento: un despliegue de todas las redes sociales más importantes vinculadas a su proyecto para que puedan estar al tanto de todas sus novedades.
Elementos que debería tener tu portada
Ya que has visto de primera mano algunas de las características que posee un blog de éxito como Ciudadano 2.0, te resumo brevemente algunos de los elementos claves para que los tengas muy en cuenta a la hora de diseñar tu portada de tu blog:
- Título: que resuma a la perfección la esencia de tu blog, que llame la atención del lector y le invite a seguir leyendo el contenido por completo.
- Subtítulo: un texto que sirva de apoyo al título, reforzando su mensaje.
- Hero shot: una imagen, un vídeo, en definitiva, un contenido multimedia que vaya en concordancia con el mensaje que transmite el blog y sea una representación del mismo.
- Call to action: también conocido como “Llamada a la acción”, es decir, la acción que deseas que tus lectores lleven a cabo. Normalmente asociado a la descarga de un producto gratuito o Lead Magnet como parte del proceso de suscripción a tu newsletter.
- Beneficios: un área dedicada a resumir brevemente el valor de tu blog a través de un listado de puntos con acceso a las diversas temáticas que encontrarás en él.
- Testimonios: declaraciones de clientes y compañeros que avalan y dan autoridad y peso a tu proyecto.
- Refuerzo: una frase final poderosa que incite a la conversión inmediata.
- Call to action final: acceso final al producto con el que convertirás a tus lectores en suscriptores.
- Redes Sociales: una vía directa de conexión a través de tus redes sociales favoritas.
Nota: no tienes por qué seguir todas estas recomendaciones a rajatabla, aunque sí que te aconsejo seguir una estructura similar. El caso de Ciudadano 2.0 te puede servir de ejemplo ya que, si bien no incluye elementos como el Refuerzo y un Call to action final, sí tiene la mayoría de los componentes básicos en su portada.
Una vez tengas tu portada lista no pares; haz pruebas con herramientas de test A/B como las que te ofrece Divi, para finalmente quedarte con tu portada perfecta.
Cómo diseñar tu portada con Divi Builder
Para componer la portada de tu blog con Divi Builder dividiremos el proceso en 3 secciones bien diferenciadas:
- Cabecera y navegación.
- Contenido.
- Pie de página.
Te explicaré a continuación el proceso de forma resumida para, posteriormente a través de un vídeo, analizar paso a paso como lo he llevado a cabo.
1. Cabecera y navegación
En esta etapa simplemente seleccionaremos la disposición de nuestro logotipo y el menú en la cabecera.
Gracias a la pestaña “Cabecera y navegación” hemos elegido que el logotipo esté centrado, quedando justo sobre el menú de navegación.
Una vez hecho, en la “Barra de menú principal” seleccionamos la altura del logotipo y del menú para luego pasar a ajustar los estilos de los textos de éste último.
2. Contenido
El desarrollo del contenido de la portada correrá de la mano de Divi Builder.
Para empezar a diseñar tendrás que activar el constructor y para ello tienes dos opciones:
- Back-end: desde el editor de WordPress de la propia página. Pulsa el botón “Usar el constructor Divi” y se te mostrará la interfaz de Divi Builder.
- Front-end: desde la propia página. Para ello, desde el editor de WordPress de la página pulsa “Usar el Constructor Visual”. Otra opción es pulsar el botón “Habilitar el Constructor Visual” que se encuentra en la propia página.
Para el diseño de la portada en sí mismo lo que he hecho es dividir en contenido en 5 secciones diferentes:
- Crea un blog que funcione.
- Testimonios - Presentación
- ¿De qué hablamos aquí?
- Los contenidos más comentados.
- Últimos artículos publicados.
Nota: como veremos, las secciones son los elementos básicos desde los que el diseño con Divi Builder comienza y que nos permite incluir filas con determinadas columnas, para terminar implementando los módulos.
1. Crea un blog que funcione
Dentro de la sección hemos incluido dos filas:
- Fila: formada por dos módulos de texto correspondiente al título y subtítulo.
- Fila: con un módulo de texto donde incluir el listado de beneficios, más un botón con acceso al training gratuito.
2. Testimonios - Presentación
Formado por dos filas con:
- Fila: un módulo de imagen más dos módulos de textos, para incluir el primer testimonio y el nombre del co-fundador.
- Fila: exactamente igual, pero los módulos tienen un orden invertido.
3. ¿De qué hablamos aquí?
Esta vez tendríamos 5 filas:
- Fila: con 3 módulos relativos a los textos de introducción.
- Fila: 3 filas con 3 columnas donde se han instalado 3 módulos de anuncio para cada una de las categorías del blog.
- Fila: la última con un módulo de búsqueda de artículos del blog y su texto correspondiente.
4. Los contenidos más comentados
Sección dos filas:
- Fila: formada por dos módulos de texto correspondientes al título de la sección y al subtítulo.
- Fila: con un módulo de blog donde se muestran las entradas con mayor número de comentarios y un botón de acceso al blog.
5. Últimos artículos publicados
Misma estructura que en el caso anterior, con la salvedad de que el módulo del blog en este caso muestra los últimos artículos publicados.
3. Pie de página
Para el pie de página hemos creado una sección, en lugar de configurarlo mediante la pestaña “Pie” que se encuentra en el Personalizador de temas.
El motivo se debe a que esta no posee aún opciones que nos permita añadir iconos y una serie de textos de forma mucho más personalizada.
Para ello hemos creado una sección con la categoría global de forma que cada cambio que realicemos en ella se mostrará en todas esas páginas en que se haya instalado.
Lo único que hay que hacer es, una vez creada, instalarla en todas y cada una de las páginas, como si fuera un pie de página.
Esta sección está formada por una sola fila con 4 módulos de textos.
En uno de ellos hemos introducido los iconos sociales vía un shortcode, creado a partir del plugin social de Elegant Themes: Monarch.
Si quieres verlo todo de forma mucho más visual, aquí tienes un vídeo donde te lo muestro todo paso a paso, sin complicaciones:
Y para terminar esta sección, me gustaría también mostrarte cómo crear una página "Acerca de" siguiendo los mimos principios que en el vídeo anterior, donde te mostraba cómo diseñar la portada de tu blog:
Crea tus posts y páginas
Esquema de colores
Con independencia del tipo de página que quieras crear en tu blog, ya sea una landing page, tu home page, una página específica o una entrada, tienes que tener muy claro desde el principio el esquema de colores de tu blog.
Debes saber que los colores afectarán a tu tasa de conversión, puesto que cada uno de ellos transmite un mensaje distinto y deben estar en completa armonía.
Dado que la elección de tus colores preferidos es algo totalmente subjetivo que nacerá de tus gustos y necesidades, te recomiendo que indagues más con este artículo sobre la elección de los colores de tu blog donde obtendrás toda la información que necesitas.
Si te has leído el artículo o ya sabías algo sobre la teoría del color verás cómo por ejemplo, para el logotipo de Ciudadano 2.0 se han escogido dos colores complementarios que casan muy bien el uno con el otro: un azul oscuro (#2C3E50) y un naranja (#D96709).
Para escoger tus colores favoritos te recomiendo algunas de las siguientes herramientas:
- Adobe Kuler: aplicación de Adobe para crear tu paleta de colores.
- Paletton: otra herramienta muy útil y similar a Adobe Kuler.
- Color Zilla: aplicación de Chrome para detectar el color de cada uno de los elementos de cualquier página.
Una vez tienes tus colores seleccionados, solo es cuestión de definir qué función jugará cada uno, para saber dónde implementarlos.
Un ejemplo podría ser utilizar ese color naranja para los enlaces activos de tu blog y el azul para determinadas secciones de tu blog como, por ejemplo, tu pie de página:
Esquema de colores en Divi
Como comprobarás, Divi te ofrece muchísimas herramientas para la elección de tus colores en todas las localizaciones de tu blog, que van desde la cabecera y pie de página a través del Personalizador de temas hasta las secciones, filas y módulos, que podrás implementar con Divi Builder.
Incluso a través del diseño responsive podrás seleccionar un color de texto y uno de fondo para el menú de tus dispositivos móviles:
Tipos de letra
La elección de la tipografía en tu blog es algo fundamental en el proceso de diseño y creación. Tendremos que buscar alcanzar un equilibro entre los distintos tipos de letras de forma que realcen la apariencia de nuestra web, sin llegar a sobrecargarla.
Para una correcta elección seguiremos una serie de principios básicos:
Colores
Intenta elegir siempre un color de fuente que ofrezca un contraste adecuado entre ella y el color de fondo, con el objetivo de facilitar la lectura.
A su vez, procura elegir variaciones de colores básicos más suaves que hagan sentir cómodo al lector, invitándole a permanecer en tu web el mayor tiempo posible.
Un ejemplo de ello sería la elección de un colores oscuros suaves (#44444 y #090909) para un fondo blanco, en lugar del tipo color negro (#000):
Tamaño
Seleccionar el tamaño de fuente correcto dependiendo del tipo de fuente, es algo a tener también muy en cuenta.
Por ejemplo: en los textos de cabecera o elementos <h> mantendremos una estructura jerárquica donde un texto <h1> tendrá un tamaño mayor que su respectivo <h2> y así sucesivamente.
Si necesitas más información, aquí tienes un ejemplo de escala tipográfica aplicada al diseño web.
Altura de línea
La altura de línea o interlineado es otro elemento clave a considerar puesto que ofrecerá un margen adecuado que permitirá que tu texto respire haciendo del proceso de lectura algo mucho más agradable.
En el ejemplo anterior también encontrarás información suficiente sobre este parámetro.
Espaciado
Elegir un espaciado correcto entre caracteres hará que la legibilidad mejore mucho más.
Normalmente es algo que no debe preocuparte, ya que se ha tenido en cuenta durante el desarrollo de cada tipografía, pero sí que podrás controlar este parámetro a través de los estilos de Divi y Divi Builder.
Combinación
Encontrar la combinación perfecta entre diferentes tipos de fuentes puede llegar a ser un auténtico quebradero de cabeza.
Especialmente importante es encontrar tipografías diferentes entre los textos de cabecera y el de cuerpo, ya que de esta forma obtendrás un contraste adecuado.
La solución pasa por investigar en webs que aporten información de este tipo, observar la tipografía en otros blogs y poner en práctica lo aprendido.
Para ello te recomiendo estas dos herramientas:
- Canva Fonts Combinations.
- Font Pair.
Uso de tipografías y estilos en Divi
Divi, a diferencia de otros productos gratuitos, cuenta en la actualidad con más de 90 tipos de fuentes, tanto para los textos de cabecera como para los del cuerpo.
Podrás seleccionar la que necesites a través del Personalizador de temas:
Una vez hecho, siempre podrás seleccionar otras fuentes de forma específica en lugares como la Barra de menú principal y secundario de tu Cabecera y en todos aquellos módulos que tengan incorporados textos como, por ejemplo, el Módulo de texto y el de Anuncios.
Recursos
Para ayudarte más durante el proceso de elección de tus fuentes te recomiendo:
- Google Fonts: el directorio de fuentes de Google para que te sirva de inspiración así como para que selecciones las que más te gusten.
- WhatFont: una extensión de Chrome para identificar la tipografía de cualquier web, su color, etc..
¿Cuántas columnas queremos utilizar?
Una vez aclarados los elementos anteriores, podrás comenzar con el diseño del contenido de tus páginas y entradas.
Para ello, el constructor Divi Builder te ofrece un sistema de diseño o layout basado en dos elementos claves: las secciones y las filas.
Secciones
Las secciones son los fundamentos del diseño de Divi Builder, ya que a partir de ellos podrás comenzar a aportar contenido a tus páginas y entradas.
A través de ellas, implementarás distintas filas que darán la variedad de diseño que la construcción de tu blog requiere.
Las secciones están clasificadas en varios tipos:
- Estándar: es el tipo de sección más común y cuenta con hasta 11 tipo de filas diferentes.
- Ancho completo: para implementar módulos de ancho completo.
- Especiales: te permite crear combinaciones de filas y, por tanto, diseños más complejos.
Filas
Las filas son los elementos secundarios del diseño con Divi Builder y se encargan de organizar tu contenido a través de sus columnas.
Estas columnas serán los lugares exactos donde podrás instalar los módulos que dotarán a tu blog con toda la funcionalidad que necesita.
¿Cuántas columnas utilizar entonces?
El número de columnas a utilizar dependerá realmente de tus necesidades.
Existirán páginas donde determinadas secciones requieran de un diseño de 3 columnas, mientras en otras con una sola bastará.
En el caso particular de las entradas de tu blog tendrás la oportunidad de elegir si el contenido tendrá un ancho completo o si, por el contrario, cederá parte de éste para usar una barra lateral o sidebar donde podrás incluir tus widgets, formularios opt-in, etc…
Para configurarlas solo tendrás que acceder a la entrada en cuestión a través del administrador de WordPress y en “Ajustes de publicación de Divi” seleccionar el diseño de página.
Páginas de listado de posts, categorías y metadatos
Para la página principal de tus entradas, es decir, aquella en la que se muestre un listado de todas ellas, Divi Builder te ofrece su Módulo de Blog.
Con este módulo podrás realizar, entre otras muchas cosas:
- Número de artículos: elegir cuántos artículos se mostrarán por página.
- Categorías: incluir o excluir determinadas categorías
- Contenido: mostrar el extracto de tu artículo o todo el contenido.
- Imagen destacada: habilitar o deshabilitar tu imagen destacada.
- Metadato: mostrar información útil como fecha del post, autor, categorías, números de comentarios, etc...
- Diseño: disposición de los artículos (en formato rejilla o ancho completo).
Además de esto podrás aplicarle otros efectos como, por ejemplo: superponer una serie de colores con iconos, controlar todos los estilos de las diferentes fuentes y añadir estilos CSS.
Galería de imágenes
Si tu blog está orientado a temáticas como la fotografía, la moda, viajes, etc…, las imágenes cobrarán obviamente un papel determinante.
Divi te ofrece un módulo llamado Galería que te permitirá crear tantas galerías como quieras, así como ajustes, para que puedas personalizarlas a tu gusto.
A través de este módulo podrás definir el número de imágenes a mostrar por página, habilitar la paginación, aplicar estilos a los títulos y leyendas, etc…
Además, al igual que en el caso del módulo de Blog, podrás disponer de un diseño tipo rejilla y un slideshow de imágenes, pudiendo añadir también una superposición de iconos con colores personalizados.
Perfil de usuario
Probablemente, a medida que avanza el diseño de tu blog, necesites incluir información sobre ti o sobre cualquier otra persona que colabore contigo.
Con Divi podremos crear este tipo de perfiles mediante su módulo Persona ya que te ofrece bastantes opciones de configuración, pudiendo añadir:
- Nombre del usuario.
- Puesto de trabajo.
- Dirección de perfil de redes sociales.
- Iconos sociales.
- Descripción.
- Imagen.
Antes de concluir, me gustaría enseñarte cómo diseñar la página del Blog para personalizar tus entradas a tu gusto:
Conclusión
Damos por terminado este artículo, que espero de corazón hayas encontrado de utilidad.
Aparte de animarte a colaborar compartiendo tu feedback y tus experiencias con el tema Divi a través de los comentarios, pronto tendrás a tu disposición un tercer artículo donde veremos con detalle cómo diseñar landing pages con este producto, así como implementar otra serie de elementos fundamentales en cualquier web, como son los iconos sociales y los formularios de suscripción.
¡Seguimos en contacto!
Uso divi desde hace un par de años, creedme que ahora ya no sabría usar otro constructor....es genial!
Hola Nuria,
Muchas gracias por tu comentario.
Un saludo,
Lucía
¡Me alegro que estés contenta con Divi!
La verdad es que cada año mejora aún más.
¡Un saludo!
Compre la versión lifetime del tema DIVI y me encanta simplifica mucho la labor de creación de la web y aporta grandes diseños
Hola José María,
Me alegro de que te haya sido útil 🙂
¡Un saludo!
Lucía
¡Me alegro mucho!
Divi es un gran tema sin lugar a dudas 😉
I like what is taught in the article, very excellent
Hola Tati,
Muchas gracias a ti por leernos 🙂
¡Un saludo!
Lucía
Buenas Pedro.
Ayer hice un comentario que no se si está pendiente de aprobación, la consulta que hago hoy va en consonancia con la de ayer, ya que estuve investigando un poco y creo que hoy la puedo hacer un poco más clara.
Por lo que pude ver mediante el inspector del navegador, el pie de página creado en el tutorial, en vuestra página aparece con la class="site-footer" y en el mío aparece com class="et_pb section"
Como habría que hacer para convertirlo en footer?
Muchas gracias de nuevo. Recibe un cordial saludo
Hola,
Acabo de darte respuesta en tu otro comentario.
Un abrazo!
Hola Pedro.
Me ha sido de mucha, muchísima utilidad esta guía, de echo gracias a ella estoy rediseñando mi web.
Estoy diseñando mi página de inicio y todo correcto. El problema lo tengo cuando quiero crear una entrada, la sección de pie de página creada siguiendo esta guía no se me queda en la parte de abajo, de echo los comentarios aparecen después. Y por otro lado en las páginas ocupa todo el ancho, pero en las entradas no. No se si esto se debe a que en algún lugar debería de decirle a Divi que esa sección es el pie de página o algún tipo de configuración de divi relativa a las entradas.
Espero haberme explicado bien.
Un saludo, muchas gracias
Hola José Enrique,
Me alegro mucho 😉
Me es difícil visualizarlo todo y ayudarte por aquí. Pero te comento:
El pie de página esta formado por un área de widgets, menú inferior y una barra inferior. Si añades elementos en esas áreas se mostrarán esas secciones. Por ejemplo, si creas widgets en el área de widgets se mostrarán, de lo contrario esa área permanecerá digamos invisible.
Lo ideal es añadir esos elementos desde el Personalizador de temas de Divi. No tienes que añadir nada con Divi Builder para esta tarea.
Espero haberte ayudado
Muchas gracias Pedro.
Voy a echar un vistazo haber si me aclaro, pero solo hay una cosa que no me queda muy clara, me comentas que lo haga desde el personalizador de temas de Divi, en los widgets que coloque se pueden poner secciones del propio Divi?
Voy a pelearme un poco, malo será que no acabe resolviendo!!!
Muchas gracias de nuevo
Hola Pedro, muy instructivo el artículo. Sin embargo, me queda la duda de si puedo utilizar divi en una web secundaria que tengo con otro usuario, a pesar de ser yo el dueño.
Muchas gracias.
Hola Miguel,
Encantado de conocerte.
Si tienes una de las dos licencias de Elegant Themes podrás instalar tanto Divi como cualquiera de sus productos en tantas webs como quieras.
Espero haberte ayudado.
Abrazos
Hola Pedro, muy bueno el tutorial, pero tengo una duda que me esta volviendo loco. Dentro de la configuracion del modulo de blog \ diseño \ rejilla. Al seleccionar esa opcion, me genera una expansion de la imagen al hacerle click, pero como se puede cambiar la dimesion de esa expansion, debido a que divi lo expande a 1080 x 675 (sin importar el tamaño de la imagen destacada que exista) Probe modificando un archivo php del tema padre e hijo donde esta la funcion y esos valores y no me muestra ningun cambio. Que otra alternativa puede existir dentro de los estilos que trae el modulo de blog?, me ocurre con cualquier template de blog que utilice. Gracias
Hola Lucas,
Encantado!
No recuerdo que al seleccionar el módulo rejilla del blog y al hacer click en él te muestre una imagen. Eso ocurre con el módulo de imagen pero sólo tras aplicar ciertas configuraciones. Aún así el tamaño de la imagen que muestra es el que tiene esa propia imagen.
Creo que te refieres al módulo de blog pero con el diseño ancho completo en lugar de rejilla . Cuando lo seleccionas el módulo toma el ancho del ancho de la fila, la cual por defecto es 1080px. Tienes dos opciones: reducir el tamaño del módulo del blog al que quieras o reducir el de la fila. Particularmente prefiero la primera ya que puede que necesites implementar más módulos en esa fila quedando limitado su ancho al de la fila.
Espero haberme explicado 😉
Un abrazo!
Gracias por la respuesta.
Disculpa no me explique bien, necesito cambiar el tamaño de la imágen destacada que wordpress trae por defecto, "no me refiero a una imagen para slider"
Resulta que instalé la plantilla divi theme y la imagen destacada es exageradamente grande para cualquier template que instales cuando agregas el modulo de blog (las entradas ya estan hechas con los textos). Al hacer click en la imagen ocupa todo el ancho de la columna (siempre en modo rejilla por que uso un sidebar en la derecha).
Parte del codigo veo esto (ver abajo). Pude reducir al 50% y esta mejor a nivel de imagen pero me queda del lado izquierdo por default, sumado a un espacio vacio (el texto lo tengo abajo de la imagen) hasta ver del lado derecho el sidebar.
Ahora como puedo centrar esa imagen?
img {
max-width: 100%;
height: auto;
}
Gracias Lucas.
Hola, Lucas.
Pásame la url donde tienes ese problema con la imagen y le echo un vistazo por aquí.
¡Gracias!
Lamento la demora en la respuesta y gracias, Pedro, por tu tiempo:
https://drive.google.com/open?id=1i-r0Uz2RSMct1otjobBsshOsOUD9zH13
Saludos.
Hola, Lucas.
Para centrar la imagen y que de paso tome la mitad de tamaño que esos 1080 px, aplica lo siguiente :
.single-post #left-area .et_post_meta_wrapper img {
width: 540x;
margin: 0 auto;
display: block;
}
Saludos.
Buenas noches Pedro. Gracias por esta serie de posts que nos facilitan tanto las cosas. En tu último vídeo he visto que utilizas Divi builder para diseñar la página blog con un módulo blog y otro con barra lateral. Estoy diseñando mi blog con Divi y cuando asigno la página a la que irán las entradas del blog, esa página queda deshabilitada para utilizar Divi Builder. ¿Cuál puede ser el problema? Un saludo y enhorabuena por tu trabajo.
Hola Jorge,
¿Qué tal? Me alegro que te haya sido de utilidad 😉
Como sabrás WordPress te ofrece la posibilidad de elegir una página de tu web para mostrar el listado de las entradas de tu blog junto con una barra lateral.
El inconveniente es que el cambio de diseño de cada uno de sus elementos está limitado y tendrías que recurrir al lenguaje CSS para modificarlo.
Lo lógico, si tienes Divi Builder es querer utilizarlo para editar esos elementos pero el plugin no está diseñado para tal caso.
Lo que tienes que hacer es:
1. No seleccionar con WordPress ningún página para que muestre tus entradas. Es decir, tendrás que ir a “Ajustes > Lectura > Página Estática > Página de entradas “ y dejarla sin seleccionar, en estado “-Elegir-”.
2. Instalar en esa página el módulo de blog más el de barra lateral como muestro en el video.
3. Una vez hecho esto sólo tienes que configurar ambos módulos y listo .
Un fuerte abrazo
Hola Pedro, excelente post, muy didáctico.
Por favor podrías poner el css que has utilizado para los post de la sección de artículos más comentados, donde los comentarios y el autor pasan a la parte inferior.
Gracias
Un saludo
Hola Mar,
Me alegro que te haya servido de utilidad.
Copia y pega este código en la opción CSS personalizado que encontrarás en las "Opciones de tema >General":
.modulo-blog .et_pb_post {
position: relative;
overflow: hidden;
box-shadow: 0 5px 10px rgba(0,0,0,.3);
border-radius: 10px;
padding: 19px 0;
}
.modulo-blog .et_pb_post .et_pb_image_container {
margin: -20px 0 25px;
}
.modulo-blog .et_pb_post .entry-title, .modulo-blog .et_pb_post .post-content, .modulo-blog .et_pb_post .post-meta {
padding-left: 19px;
padding-right: 19px;
}
.modulo-blog .et_pb_post .post-content {
margin-top: 5px;
margin-bottom: 40px;
}
.modulo-blog .et_pb_post .post-meta {
width: 100%;
position: absolute;
margin-bottom: 0;
bottom: 0;
border-top: 1px solid #eaeaea;
background-color: #f2f4f7;
padding: 7px 5px;
}
.modulo-blog .et_pb_post .post-meta .author a {
font-weight: bold;
}
Posteriormente añade la clase: modulo-blog a tu módulo de blog y listo.
Un saludo.
Hola pedro, buen día.
Implementé este mismo código en mi blog, pero resulta que al visualizar en modo smartphone , los módulos me aparecen sin separación (arriba y abajo) el uno del otro, no sé su me explico. sé poco de CSS y quería saber si puedes ayudarme.
Muy interesante el blog, muchas gracias por compartir esta muy útil información. Saludos
Hola Gustavo,
Encantado de verte por aquí.
Me alegro mucho que lo hayas encontrado interesante.
Un abrazo
¡Hola Rosa!
Encantado de verte por aquí.
Me alegro que uses Divi y que te haya permitido diseñar tu web de una forma sencilla, elegante y sin complicaciones.
Los chicos de Elegant Themes lo están haciendo realmente bien y no paran de añadir nuevas actualizaciones y mejoras mensualmente.
Te recomiendo que le eches un vistazo de vez en cuando a su sección del blog "Theme Releases" para estar al tanto de esas mejoras.
Puedes encontrar esa sección aquí: https://www.elegantthemes.com/blog/category/theme-releases
En elegantthemes el costo es por una sola vez o por el tema???
Gran post como siempre, saludos desde Ecuador.
Hola Rodrigo,
Elegant Themes tiene dos licencias. La Yearly Access por 89$ al año (tienes que renovar cada año)y la Lifetime Acesss por 249$ de un sólo pago (no tienes que renovar).
En ambas te viene todo: acceso a Divi, todos los demás temas (casi 90), sus plugins (Divi Builder, Monarch y Bloom) , soporte técnico y actualizaciones.
Además podrás instalar todos sus productos en tantos sitios web como quieras.
Un abrazo
Pedro muchísimas gracias, mas clara tu explicación no pudo ser. .. La parte "Además podrás instalar todos sus productos en tantos sitios web como quieras." es fabulosa, así podre utilizar todos esos recursos en mas de un blog.
Saludos y éxitos.
Hola, Pedro. Tus posts sobre Divi me han sido de mucha ayuda e inspiración en estos momentos en que estoy desarrollando mi primer sitio web con este tema fenomenal. Sin embargo, he tenido cierta frustración debido a que no he podido personalizar con CSS. He hecho de todo, hasta desactivar el tema hijo y volverlo a activar, pues quise probar directamente en el tema padre y nada ha funcionado. No entiendo por qué. Otra cosa que quería consultarte: ¿Cómo haces para que en el módulo blog no te aparezca la frase en inglés "Read more" al final de cada extracto? No consigo la opción para modificarlo, y de paso, en el módulo blog que también instalé para la página de inicio me sale "Older posts".
Hola Moisés,
Encantado de ver como este tipo de post animan a personas como tú a crear su primer sitio web. 😉
Te respondo:
1. Si implementas CSS y no se visualiza debes asegurarte que la caché está vacía. Para ello si tienes un plugin caché tipo WP Rocket límpiala. Después, para la caché de tu navegador utiliza alguna extensión para limpiar como Clear Cache. Por último, si tras eso no se visualizaran los estilos de tu CSS contacta con tu proveedor posting para comprobar si han implementado algún sistema caché que impidan que se visualicen tus cambios. Si no funciona habría que ir descartando otras cosas pero la verdad es que no he tenido ningún problema con Divi y el CSS.
2. Normalmente, si tienes tu WordPress configurado en castellano el texto debería ser: Leer más. Prueba a cambiar el idioma de WordPress en caso de tenerlo en inglés. Si no puedes cambiarlo tendrías que implementar algo de código ya que por ahora no tienen la funcionalidad de cambiar ese texto directamente. Te dejo un enlace para que veas como hacerlo: https://bit.ly/2zKWlxo.
3. Si lo tienes en castellano te saldrán “Entradas más antiguas“. Si quieres algo más completo puedes utilizar el módulo de Divi: “Divi Post Navigation”: https://www.elegantthemes.com/documentation/divi/post-navigation/
Otra opción sería usar un plugin que recomienda Elegante Themes: WP - PageNavi: https://www.elegantthemes.com/blog/tips-tricks/how-to-add-pagination-to-wordpress
Espero haberte ayudado,
Un abrazo
Hola, muy bien explicado!!! DIVI ha cambiado por completo la manera de diseñar o crear un blog, e-commerce...