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.

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.

Multiplica el Nº de gente que lee tu blog

Con este eBook gratuito de plantillas de copywriting crearás titulos que dispararán los clics en tus contenidos:

  • 77 Plantillas de títulos probadas que multiplicarán los clics.
  • Sacaras infinitas ideas crear tus propios títulos.
  • Con las palabras "mágicas" redactarás textos irresistibles.
¡Buenas! ¿Me dices tu nombre?

¡Un placer conocerte!

Apuntáte aquí y recibirás gratis una copia del eBook.

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.

Como hosting te recomiendo Webempresa, Raiola, SiteGround o Hostgator

(accede a descuentos especiales en los enlaces)

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:

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!

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 ?


Comentarios

  1. Muy interesante el blog, muchas gracias por compartir esta muy útil información. Saludos

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

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

  4. 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: http://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

  5. Hola, muy bien explicado!!! DIVI ha cambiado por completo la manera de diseñar o crear un blog, e-commerce…

Deja un comentario

Para ello, por favor, sigue estas pautas, por respeto a nuestra comunidad (y a nosotros):

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

*

 

Rellena el formulario y accede a nuestro training rápido de pro-blogging

Aprenderás paso a paso y desde cero cómo usar las mejores técnicas, trucos y secretos de los top bloggers para dar el salto al siguiente nivel

Y todo 100% gratis :)