Si hablamos de temas Premium de WordPress, tenemos que hablar de Elegant Themes, gracias a las continuas actualizaciones y mejoras de sus productos, podemos disfrutar de auténticas herramientas para crear un sitio web de cualquier tipo. Y eso vamos a realizar, un blog con el tema EXTRA en WordPress.
Construir un blog con el tema EXTRA paso a paso
Podemos hacer infinidad de sitios con esta plantilla, aunque se diseñó inicialmente para crear publicaciones, podemos configurarla como queramos para conseguir nuestro propósito.
En varios tutoriales que podéis encontrar en esta web, explico cómo personalizar distintos aspectos de este tema, uno de mis favoritos.
Pero no te preocupes, para los que han llegado a este artículo sin saber nada, voy a explicarte todo el proceso paso a paso.
El resto puede navegar por el menú para localizar lo que le interesa.
Requisitos antes de crear el blog en EXTRA
Extra es un buen tema de WordPress, y como tal, debemos tratarle como se merece. Necesitamos disponer de un hosting, y al ser posible que no sea gratuito, ya que estos carecen de la tecnología mínima necesaria para su buen funcionamiento.
Yo empecé desde cero contratando un hosting en Hostgator, para empezar considero que es de lo mejor que hay en calidad-precio, pero también podéis valorar otras posibilidades como Siteground o Webempresa, estos dos últimos con planes especializados en WordPress y en español.
Os dejo un vídeo para que podáis ver cómo contratar un hosting en Hostgator y los pasos a seguir para conseguirlo. Es fácil, sencillo y rápido. Recomiendo adquirir el dominio conjuntamente con el servidor la primera vez.
Utiliza los siguiente cupones si quieres conseguir descuentos a la hora de contratar el hosting en Hostgator:
- JSC1MESMENOS - Te descontarán el primer mes sobre el precio final
- JSC25DESCUENTO - 25% de descuento en cualquier plan que adquieras
Instalar WordPress en el servidor
Tras contratar el hosting y recibir la información necesaria para acceder al panel e control (cPanel), hay que realizar una instalación de WordPress. El proceso es automático y no requiere de conocimientos especiales paraiello.
PRIMERO: Accedemos a la aplicación de instalación, puede haber un enlace directo de WordPress o unas herramientas llamadas "QuickInstall" o "Softaculous" desde las que podemos WordPress para instalar.


SEGUNDO: Nos pedirá una serie de datos para realizar la instalación, de los cuales los imprescindibles son únicamente el dominio que vamos a utilizar en el sitio, el correo electrónico y el nombre de administración con su clave de acceso.
En algunos servidores puede que, la clave para acceder a la administración de WordPress, nos la proporcionen aleatoriamente. Si es así, la copiamos para poder utilizarla para acceder.
El resto de campos no es bueno rellenarlos, pero no es muy importante, ya que vamos a poder modificarlos con posterioridad si lo necesitamos.

Después de esto ya tenemos WordPress instalado en nuestro hosting, y tendríamos que poder acceder escribiendo el dominio en internet.
Configuración básica e WordPress
En la Zona Premium hay un curso básico de WordPress donde explico todo lo necesario para poner en marcha este gestor de contenidos, como manejarlo y que necesitas saber para controlarlo con soltura.
Antes de empezar a trastear con la web, debemos ir a la pestaña "Ajustes > Generales" y rellenar los siguientes campos:
- Título del sitio
- Descripción corta
- Dirección del correo electrónico
- Idioma (Muy importante)
- Zona horaria
- Formato de fecha
- Formato de hora

En esa misma pestaña de "Ajustes", seleccionamos "Enlaces permanentes". Y marcamos la opción de "Nombre de la entrada".
De esta forma convertimos las URLs de nuestra web en direcciones amigables, permitiendo a los buscadores indexar el contenido de forma que pueda ser localizado con una búsqueda normal.

Instalar el tema EXTRA en WordPress
Para instalar la plantilla en WordPress y poder tener un blog con el tema EXTRA, necesitamos descargar los archivos. La suscripción básica de Elegant Themes por un año cuesta 89$ (unos 75 euros), y tienes acceso a las actualizaciones durante ese periodo.
Instalar la plantilla Extra y el tema Hijo
No hay ningún misterio, vamos a la pestaña "Apariencia > Temas" y pinchamos primero en "Añadir un tema nuevo" y seguidamente en la pestaña "Subir tema".
Primero realizamos el proceso con el tema padre y luego el tema hijo. Sólo debemos activar el tema hijo para empezar a funcionar.

Si no disponemos del archivo del tema hijo, podemos crearlo instalando un plugin llamado "Child Theme Configurator".
En este enlace puedes ver cómo crear el Child Theme de EXTRA con este plugin.
El tema hijo nos va a permitir realizar cambios, como modificar los créditos del pie de la página que podéis ver en el enlace anterior, y no perder esos cambios con las actualizaciones de tema.

Traducir el tema EXTRA al español
Si os manejáis bien con el inglés, puede que sólo necesitéis traducir algunas cadenas de palabras de cara al usuario que visitará nuestra web. Para eso podéis seguir el tutorial que tengo en este enlace.
Pero si os descargáis los archivos completos de traducción, que también podéis encontrar en el enlace anterior, tendremos traducido el 99% de una sola atacada.
PRIMERO: Descomprimimos el archivo de las traducciones en el escritorio del ordenador.
SEGUNDO: Instalamos un plugin llamado "File manager", con el que podremos manejar los archivos del servidor sin necesidad de acceder a cPanel o de FTP.

TERCERO: Abrimos el plugin desde la nueva pestaña y buscamos la ruta "wp-content > languages > themes". Aquí subiremos los archivos .mo, ya que los .po son para editar las traducciones y no lo vamos a hacer.
Si el servidor que hemos contratado es Linux, también subiremos al mismo sitio el archivo .mo que hay en la carpeta "theme".

CUARTO: Vamos a plugins, desactivamos y borramos el plugin "File Manager" que ya no necesitaremos y refrescamos la página para ver los cambios.
Al cambiar el idioma, puede que tengamos que decirle a WordPress que recuerde los "Enlaces permanentes". Para eso vamos a:
- Ajustes > Enlaces permanentes: Elegimos la opción "Nombre de la entrada" y guardamos.
- Extra > Opciones del Tema: Sólo pinchamos en guardar cambios.
- Apariencia > Widgets: Elegimos de nuevo los widgets que queremos utilizar y los colocamos en la barra lateral.
Otras instalaciones necesarias para el blog con el tema EXTRA
Aunque pensemos que con tener un tema bonito, y que se vea bien en internet, está todo hecho, no es así. Hay que tener algunos puntos en cuenta como la seguridad y la optimización.
Piensa que internet es una plaza llena de gente de todo tipo, buenas y malas personas, y que tu web ahora mismo es un niño pequeño sólo en medio de todas ellas. Hay que enseñarle a protegerse.
Entre los plugins más básicos que todo WordPress debe tener están:
- Seguridad: "Akismet" para evitar el spam de los comentarios y "Sucuri" para proteger el blog o la web de ataques.
- Optimización: "Yoast seo" nos ayudará a definir la forma de indexar las páginas y optimizarla.
- Cookies: Debemos avisar de la utilización de cookies con "Cookie notice".
Configurar el layout de la página de inicio del blog en el tema EXTRA
Vamos a empezar por olvidarnos de la opción que trae EXTRA de crear la página de inicio con una categoría. Si quieres utilizar esa opción me parece bien, pero no es la que voy a usar yo, ya que está muy limitada la utilización de los módulos.
Lo primero que vamos a crear son dos páginas, una la llamaremos "Inicio" y la otra "Blog", y las publicamos sin hacer nada más.
Vamos al menú "Ajustes > Lectura" y elegimos la opción de una "página estática" para elegir la página principal y el blog.

Configuración básica de los módulos para crear un blog
Existen miles de formas de configurar la página de inicio para crear un blog con el tema Extra, las distintas combinaciones que podemos hacer con los módulos es muy variada. Pero todas las haremos desde el "Constructor DIVI".
Para ir viendo el resultado tenemos que haber escrito varios artículos, al principio no tienen porque ser con contenido real, ya los cambiarás cuando escribas en serio.
La más básica sería añadir dos módulos "Blog", el primero mostraría sólo el último artículo a una anchura completa y el segundo lo configuraríamos como "Grilla" o rejilla, para que muestre el resto de artículos en tres columnas.


No voy a explicar cómo se configuran los módulos para esta composición, voy a explicar otro formato del que podéis extrapolar la configuración si os gusta la de arriba.
Configuración del blog en el tema EXTRA a dos columnas
PRIMERO: Al editar la página de inicio, tenemos a la derecha unos paneles. Vamos a marcar la casilla "Ocultar título e información meta en la entrada" en el panel "Ajuste de EXTRA".
SEGUNDO: Vamos a componer con el "Constructor Divi" la siguiente configuración sobre una única sección estándar.

El módulo "Blog", de la primera fila, tiene la siguiente configuración básica:
- PESTAÑA CONTENIDO:
- Número de entradas: 1
- Contenido: Mostrar extracto
- Número de compensación: 0
- Mostrar imagen destacada: SI
- Mostrar paginación: NO
- (El resto de las opciones son libres de configuración)
- PESTAÑA DISEÑO:
- Diseño: Ancho completo
- (Lasa demás opciones las configuráis para adaptarlas a vuestros gustos, tipografías, colores...)
- PESTAÑA AVANZADO:
- Clase CSS: margenblog colorfondoblog
El módulo de "Texto" es únicamente para añadir una línea horizontal y crear una separación entre las filas. es totalmente prescindible si no queréis ponerlo.
En la segunda fila vamos a configurar una vez el módulo "Blog", y después lo duplicaremos las veces que queramos cambiando el valor del apartado "Número de compensación" por un número cada vez mayor para evitar que se repitan las entradas:
- PESTAÑA CONTENIDO:
- Número de entradas: 1
- Contenido: Mostrar extracto
- Número de compensación: 1
- Mostrar imagen destacada: SI
- Mostrar paginación: NO
- (El resto de las opciones son libres de configuración)
- PESTAÑA DISEÑO:
- Diseño: Ancho completo
- Usar borde: SI y elegir un color
- (Lasa demás opciones las configuráis para adaptarlas a vuestros gustos, tipografías, colores...)
- PESTAÑA AVANZADO:
- Clase CSS: margenblog
La "Llamada a la acción" es un simple botón que nos llevará a la página del fedd del Blog, donde se encuentran la totalidad de los artículos.
Podéis colocar un simple link con un módulo de texto, o no ponerlo si tenemos el acceso en el menú.
Añadir código CSS para ajustar los márgenes de las entradas del blog
Suena a lago complicado, pero no hay que asustarse, si habéis puesto bien los nombres en el apartado "Clase CSS" como os indicaba, es coser y cantar.
Abrimos el "Personalizador de Tema" desde "Apariencia > Personalizar", nos dirigimos a la pestaña "CSS adicional" y copiamos las siguientes líneas de código tal cual.
1 2 3 4 5 6 7 8 9 |
.margenblog .entry-title, .margenblog .post-meta, .margenblog .post-content { padding-left: 15px; padding-right: 15px; } .colorfondoblog .post { background-color: #e5e5e5; } |
El "layout" de la página de inicio debería quedarnos de la siguiente manera:


Configuraciones adicionales para el blog con el tema EXTRA
Con esto ya podéis poneros a escribir como locos y publicar contenido en internet, cuanto más interesante sea más visitas recibiréis.
Pero, aunque el blog funcione a la perfección, debéis personalizarlo a nivel de diseño. Añadir imágenes, poner una cabecera única, añadir un formulario de contacto con el que interactuar con tu público...
Una serie de cosas, que según te vayan surgiendo, puedes consultar en muchos de los tutoriales que tengo en esta web sobre el tema EXTRA.
Y si no están, puedes sugerirlo en los comentarios y probaremos a buscar la solución.

Gracias pues justo estoy configurando este tema en mi blog u no le iba entendiendo. Ya oculte los créditos gracias a otro post tuyo pero no me funcionó lo del footer con un widget de texto. Gracias por las explicaciones enserio y intentare modificar un poco más esto
Hola Marcelle,
Me alegro que pudieras utilizar la información para tu blog, para el footer tengo un artículo donde explico cómo poder crear uno de diferentes formas, con los widgets y con módulos del constructor. Está basado en el tema Divi, pero es prácticamente igual, y si tienes alguna duda puedes consultármela.
Con módulos: https://www.ingresosviaweb.com/footer-en-divi-con-modulos/
Con widgets: https://www.ingresosviaweb.com/crear-un-footer-en-divi/
¡Hola, Juan! He pasado por aquí a darte las gracias porque esta guía me ha resultado muy útil. Andaba buscando por todas partes esta información, pero con tu post me ha quedado claro enseguida 🙂 Es una maravilla encontrar artículos tan útiles y prácticos por ahí, sobre todo cuando andamos desesperados buscando la manera de hacer algo en concreto.
Así que, eso, ¡muchas gracias! Me guardo este blog para futuras consultas.
Hola CubeNode, encantado de poder ayudar
Me lo imaginaba. Muchas gracias, Juan
Hola Juan,
Primero felicitarte por tu trabajo. Me gustaría conseguir en el tema Extra lo mismo que Elegant Themes hizo en su tema gratuito Serene que es poder asignarle a cada entrada un color de fondo (pongamos por caso de un blog) y que este fondo aparezca también en la página Inicio.¿Cómo se podría hacer? Gracias
Hola Alfonso, poder se puede hacer, pero también es complicado y lioso, tendrías que editar el código cada vez que escribieras una entrada para asignar un color diferente, y la página de inicio para que ese color quedara reflejado en la página principal. No lo recomiendo, estaríamos poniendo en peligro la integridad de la web continuamente.
Extra tiene la opción de elegir un color diferente para cada categoría, que se ve en una pequeña banda que aparece en la parte superior cuando mostramos los post de esa categoría y en el color del título en la página principal.
Hola e seguido tus pasos para Traducir el tema EXTRA al español y no se me a traducido todo algunas cosas se a quedado en ingles. Que puedo hacer