Cómo diseñar un blog con WordPress y Divi

Éste es un post de invitado de Pedro Suárez. Pedro es autor de la web pedrosuarezweb.com y se dedica al diseño web, estando especializado en WordPress y Divi.

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.

cabecera disenar blog divi

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.

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.

portada blog landing page
Formato tradicional versus landing page.

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.

¿Te dedicas al diseño web pero no consigues hacerlo rentable?

Pues entonces descubre el curso gratuito que te hubiese cambiado la vida cuando empezaste como diseñador web freelance.

Haz clic en el botón de abajo para descubrir:

  • En qué estás fallando. ¿Por qué otros viven de esto y a ti te cuesta tanto?
  • Los secretos para adelantar a tu competencia por la derecha.
  • Cómo multiplicar por tres tus ingresos sin hacer más webs, ni subir precios.
  • 16 palabras y mensajes de venta que todo diseñador debería borrar de su web.
  • Cómo hacer páginas web de 400€ en menos de 4 horas.

Y estos son sólo 5 ejemplos de un total de 18 vídeos con más de 5 horas de grabación totalmente gratis (sí, gratis de verdad).

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.

ejemplo inspiracion
Ejemplos de inspiración hay muchos en internet.

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:

  1. 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.
  2. Subtítulo:​ ​un​ ​texto​ ​que​ ​sirva​ ​de​ ​apoyo​ ​al​ ​título,​ ​reforzando​ ​su mensaje.
  3. 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.
  4. 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.
  5. 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.
  6. Testimonios:​ ​declaraciones​ ​de​ ​clientes​ ​y​ ​compañeros​ ​que avalan​ ​y​ ​dan​ ​autoridad​ ​y​ ​peso​ ​a​ ​tu​ ​proyecto.
  7. Refuerzo:​ ​una​ ​frase​ ​final​ ​poderosa​ ​que​ ​incite​ ​a​ ​la​ ​conversión inmediata.
  8. Call​ ​to​ ​action​ ​final:​ ​acceso​ ​final​ ​al​ ​producto​ ​con​ ​el​ ​que convertirás​ ​a​ ​tus​ ​lectores​ ​en​ ​suscriptores.
  9. 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:

  1. Cabecera​ ​y​ ​navegación.
  2. Contenido.
  3. 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:

  1. 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.
  2. 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:

  1. Crea​ ​un​ ​blog​ ​que​ ​funcione.
  2. Testimonios​ ​-​ ​Presentación
  3. ¿De​ ​qué​ ​hablamos​ ​aquí?
  4. Los​ ​contenidos​ ​más​ ​comentados.
  5. Ú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:

  1. Fila:​ ​formada​ ​por​ ​dos​ ​módulos​ ​de​ ​texto​ ​correspondiente​ ​al​ ​título​ ​y​ ​subtítulo.
  2. Fila:​ ​con​ ​un​ ​módulo​ ​de​ ​texto​ ​donde​ ​incluir​ ​el​ ​listado​ ​de​ ​beneficios​, ​más​ ​un​ ​botón con​ ​acceso​ ​al​ ​training​ ​gratuito.
crea blog imagen
Sección: Crea un blog.
crea blog divi builder
Sección: Crea un blog en Divi Builder.
2.​ ​Testimonios​ ​-​ ​Presentación

Formado​ ​por​ ​dos​ ​filas​ ​con:

  1. Fila:​ ​un​ ​módulo​ ​de​ ​imagen​ ​más​ ​dos​ ​módulos​ ​de​ ​textos,​ ​para​ ​incluir​ ​el​ ​primer testimonio​ ​y​ ​el​ ​nombre​ ​del​ ​co-fundador.
  2. Fila:​ ​exactamente​ ​igual​, ​pero​ ​los​ ​módulos​ ​tienen​ ​un​ ​orden​ ​invertido.
testimonios imagen
Sección: Testimonios - Presentación.
testimonios divi builder
Sección: Testimonios - Presentación en Divi Builder.
3.​ ​¿De​ ​qué​ ​hablamos​ ​aquí?

Esta​ ​vez​ ​tendríamos​ ​5​ ​filas:

  1. Fila:​ ​con​ ​3​ ​módulos​ ​relativos​ ​a​ ​los​ ​textos​ ​de​ ​introducción.
  2. Fila:​ ​3​ ​filas​ ​con​ ​3​ ​columnas​ ​donde​ ​se​ ​han​ ​instalado​ ​3​ ​módulos​ ​de​ ​anuncio​ ​para cada​ ​una​ ​de​ ​las​ ​categorías​ ​del​ ​blog.
  3. Fila:​ ​la​ ​última​ ​con​ ​un​ ​módulo​ ​de​ ​búsqueda​ ​de​ ​artículos​ ​del​ ​blog​ ​y​ ​su​ ​texto correspondiente.
de que hablamos imagen
Sección: De qué hablamos aquí.
de que hablamos divi builder
Sección: De qué hablamos aquí en Divi Builder.
4.​ ​Los​ ​contenidos​ ​más​ ​comentados

Sección​ ​dos​ ​filas:

  1. Fila:​ ​formada​ ​por​ ​dos​ ​módulos​ ​de​ ​texto​ ​correspondientes​ ​al​ ​título​ ​de​ ​la​ ​sección​ ​y al​ ​subtítulo.
  2. 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.
mas comentados imagen
Sección: Artículos más comentados.
mas comentados divi builder
Sección: Artículos más comentados en Divi Builder.
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.

ultimos articulos imagen
Sección: Últimos artículos.
ultimos articulos divi builder
Sección: últimos artículos en Divi Builder.

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.

pie pagina imagen
Sección: Pie de página.
pie de pagina divi builder
Sección: Pie de página en Divi Builder.

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:

pie de pagina
Ejemplo de elección de color para 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:

esquema color responsive
Esquema de color en 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):

contraste color fuentes
Contraste de color en las fuentes.

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.

Si necesitas un hosting para tu web o tienda online, ¡actúa!

Aviso: estas ofertas son válidas ahora, pueden vencer en unos pocos días.

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:

tipografias personalizador temas
Uso de tipografías en el 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.

diseño columnas divi builder
Diseño de columnas con Divi Builder.

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.

ajaustes ancho completo pagina
Ajustes de ancho completo en una 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).
ajustes modulo blog
Ajustes en el módulo de Blog.

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.

ajustes modulo galeria
Ajustes en el módulo de Galería.

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.

ajustes modulo persona
Ajustes en el módulo de Persona.

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!

¿Te gustaría leer más sobre esta temática? Busca aquí:

Acerca del autor: Pedro Suárez

Soy diseñador web. especializado en WordPress y Divi. Trabajo ayudando a aquellas personas que quieren mejorar sus vidas gracias al potencial de internet y las nuevas tecnologías implementando la web que realmente necesitan.

Descarga ahora mi guía gratuita para comenzar a diseñar tu web con WordPress sin complicaciones.


35 comentarios en «Cómo diseñar un blog con WordPress y Divi»

  1. 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

    Responder
  2. 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

    Responder
    • 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

      Responder
      • 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

        Responder
  3. 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.

    Responder
  4. 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

    Responder
    • 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!

      Responder
      • 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.

        Responder
  5. 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.

    Responder
    • 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

      Responder
  6. 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

    Responder
    • 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.

      Responder
      • 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.

        Responder
  7. ¡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

    Responder
    • 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

      Responder
      • 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.

        Responder
  8. 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".

    Responder
    • 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

      Responder

Deja un comentario

⚠️ Importante: por respeto a esta comunidad, sigue estas pautas al dejar tu comentario:

  • Usa tu nombre personal, ni nombres inventados, ni el de tu web, ni el de tu empresa.
  • Cuida la redacción: separa párrafos y no escribas en mayúsculas (equivale a gritar).
  • No dejes enlaces a tu web en el comentario, dispones del campo "sitio web" para ello.
  • Eliminaremos comentarios con insultos, ofensivos o con lenguaje soez.

Al rellenar el formulario estás dando el consentimiento expreso al tratamiento de tus datos (guardar tu comentario y datos del formulario en el blog) conforme al Reglamento General de Protección de Datos (RGPD).

El responsable de este sitio es Wenova Online S.L.. La finalidad de este formulario es la divulgación en marketing online y emprendimiento, legitimado con tu consentimiento expreso.

El destinatario de tus datos es Webempresa (el hosting de este blog, ubicado en España) y podrás ejercer tus derechos de acceso, rectificación, limitación o supresión de tus datos (ver la política de privacidad).