Como sabes, en Raiola nos gusta hacer reviews sobre los diferentes themes del mercado, con el fin de poder ayudarte a escoger la plantilla correcta. WordPress ofrece una gran variedad de opciones y muchas veces no sabes por cuál decantarte. Por eso, hoy te voy a hablar de Jupiter X.
Índice del artículo
No te enviaremos spam, ¡te lo prometemos!. A nuestros suscriptores les enviamos nuestros contenidos sobre WordPress, hosting, marketing digital y programación.
Qué es Jupiter X y cuáles son sus características
Jupiter X es un tema de código abierto o 100% GPL desarrollado para WordPress por la compañía Artbees, fundada en 2008. Esta compañía ha creado 3 themes desde ese momento. Sin duda, Júpiter theme es el más conocido.
La versión gratuita de este tema, Jupiter X Lite, está disponible a través de su web oficial: https://themes.artbees.net/ y trae contenido adicional. La versión de pago, Jupiter X Pro, se puede adquirir también en Themeforest Marketplace. Como pasa con otras plantillas de WordPress, la versión Pro es igual que Jupiter X Lite pero con complementos premium. Si no quieres pagar el theme premium pero quieres utilizar estos complementos, tendrás que comprarlos por separado. Porque… no son gratis.
La versión nueva de Jupiter theme, Jupiter X, se lanzó en diciembre de 2018, por lo que es un tema relativamente nuevo. Sin embargo, no es más que una gran actualización del tema original. Los cambios fueron tantos que los mismos autores consideraron que era mejor clasificarlo como un tema nuevo.
Lo importante de esta actualización fue la optimización de recursos. Con la instalación original de Jupiter theme se recomendaba instalar varios plugins. Ahora se cubren esas necesidades con tan solo uno: Elementor. Aun así, en la versión de Jupiter X Pro se incluyen plugins que complementan a este page builder y que los autores recomiendan, como el Layer Slider o el pack de los diferentes Jet.
Antiguamente, la instalación del Jupiter Theme sobrecargaba la barra de herramientas del escritorio de WordPress con un montón de aplicaciones. Con esta actualización se consiguió reducir esto al mínimo.
Jupiter X es un tema muy bien valorado gracias a la rapidez de carga y a la versatilidad para crear distintos entornos web. Está muy solicitado por su gran optimización y por la inmensa cantidad de templates que ofrece su servicio pro. Se trata de páginas previamente hechas y con diseños muy bien trabajados, en los cuales solo es necesario cambiar el tipo de contenido. Una herramienta perfecta si estás buscando agilizar la creación de tu web y si no dispones de muchos recursos o tiempo. Además, los creadores ofrecen una documentación perfectamente detallada sobre el uso de su plantilla. Asimismo, puedes encontrar en su web y en YouTube una buena cantidad de videotutoriales que te explican paso a paso desde la implementación del tema hasta cómo optimizarlo y exprimir sus recursos al máximo.
Jupiter X es un tema que abarca todo lo necesario para crear tu propia web de una manera rápida y sencilla. Para que esto sea posible, incluye varios plugins imprescindibles actualmente. El más destacado es Elementor: el plugin líder en cuanto a construcción de páginas web. Además, cuenta con herramientas propias que permiten la personalización de tu portfolio, tienda online y la creación de tus propios headers y footers.
¿Por qué Jupiter X?
Una vez que tengas instalado el tema en tu WordPress y comiences con la personalización de tu web, te darás cuenta de lo mucho que ayuda esta versión. Da igual lo que quieras montar: un WooCommerce, blog o portfolio. Contarás con herramientas específicamente creadas e incluidas en este tema para una mejor personalización y optimización. Además, incorpora un creador de headers y footers, algo que suele ser muy tedioso si estás empezando con WordPress. Este tema te hace sentir como si estuvieras creando tu web en lápiz y papel. Por algo tiene más de 130.000 usuarios.
Respecto a otros themes, cuenta con muchísimas más ventajas. Está optimizado para favorecer el SEO de tu web y es muy responsive, algo que no se consigue fácilmente y suele dar muchos quebraderos de cabeza. Jupiter theme también te permite escoger diferentes idiomas para trabajar con él fácilmente. Y además implementa muy bien Elementor.
Actualmente, cuentan con más de 150 templates y cientos de plantillas para las diferentes secciones de una web, para que el usuario no se tenga que preocupar de diseñar y darle forma. Eso sí, no todo van a ser ventajas… Jupiter X consume bastantes recursos. Al usarlo, me di cuenta de que tiene un pequeño problema debido a esto. Te obliga a tener un servicio de hosting superior al básico si quieres aprovechar al máximo su potencial y probar todas las herramientas que te aporta. Un hosting SSD Inicio se te quedaría un poco corto.
Cómo instalar Jupiter X
Primeramente, deberías haber instalado el CMS WordPress en tu hosting. Si todavía no lo has hecho, no sabes cómo hacerlo o quieres saber más sobre otros CMS, te recomiendo que leas nuestro artículo del blog sobre los gestores de contenido más usados. Seguidamente deberás instalar la plantilla en tu WordPress.
Cómo instalar un tema hijo o child theme en Jupiter X
Una vez instalada la plantilla, repite el mismo proceso de instalación pero esta vez con el tema hijo de Jupiter X. No es obligatorio, pero te recomiendo que lo instales. Si realizas cambios directamente en el código fuente (por ejemplo, en el functions.php) de la plantilla original y esta se actualiza, perderás todas esas modificaciones. Si dudas porque no sabes lo que es un child theme, te recomiendo que leas nuestro artículo sobre temas hijo publicado en este mismo blog.
Con la instalación del tema hijo terminada y activada, deberías comprobar que todo está en orden en la pestaña Apariencia → Temas.
Plugins para Jupiter X
Ahora voy a hablar brevemente de los plugins de Jupiter Theme. A pesar de ser unos cuantos, los que considero más importantes son 2: Jupiter X core y Elementor.
Jupiter X core es un complemento imprescindible para Jupiter X que está desarrollado por Artbees. Con él, podrás activar todas las características del theme, entre las que se encuentra la personalización de apariencia en el panel de WordPress.
Por otro lado, tienes Elementor. Un page builder muy famoso que, aunque no es obligatorio para el funcionamiento del theme, personalmente te recomiendo al 100%. Te aportará todas las herramientas posibles para maquetar la apariencia de tu página fácilmente. Si quieres saber más sobre este componente, visita nuestro artículo sobre Elementor.
Como ya dije anteriormente, la versión pro incluye una cantidad de plugins súper útiles para la personalización y optimización de tu web. Sin embargo, yo no pude utilizarlos ni testearlos, por lo que no puedo decir mucho acerca de ellos. Te dejo un enlace a la página oficial donde puedes informarte más acerca de estos plugins.
Cómo personalizar el aspecto de tu web con Jupiter X
Todos queremos que nuestra web sea agradable, vistosa y útil, pero para que esto ocurra tiene que haber mucho trabajo por detrás. Seguro que como me pasa a mí, a veces no puedes invertir todo el tiempo que te gustaría a una tarea. Si esta tarea es el aspecto de tu web, quizás no quede como te gustaría o igual a la idea que tenías en un principio.
Por suerte para ti, actualmente tienes un abanico bastante amplio de herramientas que te pueden ayudar a que tu web se vea profesional de una forma más sencilla. Y esto es lo que te voy a mostrar a continuación. Voy a hacerte un pequeño ejemplo de una web creada con Jupiter X. Voy a enseñarte cómo ha sido el proceso de creación de una página de carácter personal, qué herramientas usé y qué ventajas me ha proporcionado Jupiter X.
Sitio web hecho con la plantilla Jupiter X
Jupiter X te permite personalizar tanto tu header como tu footer. Como dije antes, esta es una de las ventajas más apreciables respecto a otros temas. Crear estas estructuras es tan fácil como acceder al apartado de personalización en la ventana apariencia. A este menú accedes desde Panel de WordPress → Apariencia → Personalización.
Como ves en la siguiente imagen, no tengo disponible todas las opciones porque estoy trabajando con la versión gratuita. Aun así, sigo teniendo muchas posibilidades:
Recuerda tener en cuenta que aquí se cambian los ajustes para toda tu página web, es decir, configuras la plantilla a tu gusto.
A continuación, te voy a explicar rápidamente los apartados que me parecen más relevantes a la hora de empezar a construir tu web.
- Identidad del sitio: Puedes configurar el favicon, título y descripción de tu web.
- Site Settings: Te permite ajustar el cuerpo de la página, tamaño de la caja, borde, color de fondo, etc.
- Menús: Configuración de la estructura del menú de la web.
- Fonts & Typography: Configuración y adición de las fuentes o tipografías para toda la web o para cada sección.
- Ajustes de portada: Escoge la página de inicio, entradas…
- Header y Footer: Aquí puedes editar el header de tu web y el footer. Estas son las herramientas en las que más profundicé. Explico su funcionamiento más abajo.
- CSS adicional: Puedes añadir código CSS nuevo para matizar pequeñas cosas que desde la interfaz no puedes llegar a hacer.
Estas fueron las herramientas de personalización que usé para crear la plantilla de mi web. Es algo sencillo, pero que sirve perfectamente para demostrar cómo se puede usar este tema. Recuerda que este post está pensado para gente que es principiante o que aún no tiene los conocimientos suficientes para aprovechar absolutamente todos los recursos disponibles.
Personalización del header
En la imagen siguiente te muestro las opciones principales que ofrece. Como puedes ver, la versión gratuita solo te permite modificar ciertos ajustes:
Vamos a ver cuáles son esos ajustes y qué puedes hacer con ellos:
- Behavior. Permite cambiar el comportamiento del header.
- Fixed o Fijo: El header no se mueve de su posición inicial. Es decir, se queda en la parte superior de la web y si haces scroll dejas de ver el menú.
- Sticky o adhesivo: Es un tipo de menú muy popular hoy en día, dado que permite que el usuario tenga siempre visible el menú de la página. De esta manera, el usuario no se pierde durante la navegación y puede cambiar de contenido sin tener que volver a la parte superior de la web. Esta no es su única ventaja: el logotipo de tu marca corporativa siempre está visible, por lo que el usuario siempre lo tiene presente. Se trata de uno de los temas más responsive, por lo que se encarga de ajustar este header automáticamente para el móvil y tablet.
En la imagen siguiente te muestro un ejemplo de cómo serían estos comportamientos. Empezando desde arriba, el header de mi web fijo. Abajo, el header de raiola siendo adhesivo.
- Overlap content: Permite que el header sea transparente, es decir, hace que tenga un fondo transparente y se ponga por encima de la imagen o sección que hayas creado previamente.
- Align o alineación: Puedes mover a diferentes posiciones tu header: izquierda, derecha o centro.
- Full width o ancho completo: El header se ajusta a toda la web y no solo a la caja o sección.
- Display Elements o elementos visibles: En esta sección puedes personalizar qué elementos quieres que se muestren en tu header. En mi caso, solo necesito el menú y el logo.
Artbees nos ofrece un personalizador de estilo tope de gama. Puedes ponerlo de la manera que más te gusta sin complicación alguna, desde ajustar tu logo a la perfección en la barra del header, hasta crear tu propio carrito de compra si te montas un e-commerce. Desde esta pestaña puedes cambiar cualquiera de esos elementos. Para que se apliquen esos cambios, sólo tienes que volver al panel de control y publicarlos.
Si te fijas en la imagen, me salta un aviso sobre que el Elementor pro puede crear conflictos con el propio builder de Jupiter X. Yo en este caso lo tenía instalado y sin desactivar. No ocurrió ningún problema. Sin embargo, los creadores aconsejan usar la versión gratis de este plugin, porque este mismo tema ya incluye muchas de las funciones que Elementor pro aporta y puede ocasionar errores. Te recuerdo que yo estoy trabajando con la versión gratuita, por lo que hay características que no te podré enseñar.
La personalización del footer funciona de la misma manera que el header y tiene prácticamente las mismas opciones (behavior, display elements, etc).
Recuerda que, para todos los cambios que apliques a la plantilla con estas herramientas, tienes que usar la plantilla Elementor canvas o full width como usé yo.
Una vez aplicada la plantilla, solo falta que montes tu web arrastrando los widgets desde la sidebar de Elementor.
Es cierto que tuve que modificar alguna cosa del diseño original que tenía pensado, por las limitaciones que tenía, pero a pesar de eso los cambios no fueron radicales y estoy contento con el resultado final. Ahora te dejo unas imágenes de muestra.
Conclusión
Por último, quería darte mi más sincera opinión sobre la plantilla y es que, aun empezando de cero con ella, se siente muy cómoda y fácil desde el primer momento. No tuve ningún problema a la hora de configurarla a mi gusto.
Poco que decir sobre Elementor, que es un page builder que uso constantemente y sobre el que no tengo queja alguna. Junto con las herramientas que te aporta Jupiter theme, hace que tu web sea responsive en todos los dispositivos de una manera eficiente. Algo que es muy agradable, ya que suele frustrar al tener que hacerlo manualmente.
Además, Júpiter theme te ofrece alternativas para las páginas de búsqueda, error 404 y mantenimiento, fácilmente te permite solventar este tipo de imprevistos. Sin embargo es algo que solo te encontrarás en la versión de pago. Otra ventaja de esta versión es que te permite hacer diferentes headers y asignarlos a una o más páginas. Algo realmente útil, porque al hacerlo con WordPress automáticamente te asigna el header como primario para todas las páginas que crees.
Finalmente, me gustaría decirte que los creadores ofrecen una atención muy personalizada. A través de su web, ellos contactan contigo directamente vía email, resolviendo todas las dudas que tengas. En resumen, me quedo con la espina de no haber podido disfrutar la plantilla al 100% por tener solo la versión Lite.
¡Espero haberte servido de ayuda!
Checklist de mantenimiento GRATIS
¡Mejora la salud de tu WordPress!
Gracias, muy interesante. A veces enfrentarse a themes sin conocimiento de programación ni de optimización más que a nivel básico hace que muchos andemos perdidos en las elecciones. Me gustaría saber cual es vuestra opinión sobre sites multi lenguaje en wordpress y cuál es la mejor opción, un plugin? He leído que Google no lo recomienda.
Muchas gracias Maria, esa era la intención :D! Respecto a lo del plugin multi lenguaje no te puedo ayudar demasiado, pero quizás este post te interese https://raiolanetworks.es/blog/polylang/.
¡Espero que te sirva de ayuda!
Hola! Que buen artículo! Muchas gracias por la info 😉
Habláis de un tema gratis de Jupiter, pero no lo encuentro por ningún lado. ¿Dónde lo puedo descargar?
Gracias!
Hola Trini! Muchas gracias!
Respecto a lo del tema gratuito, tienes razón, la descarga no aparece en el link ni en ningún lado. No sé si cambiaron el enlace de descarga o lo privatizaron. Por ello, me he puesto en contacto con ellos.
Espero darte buenas noticias en breve! 🙂
Hola Javi
Genial tu artículo. Tengo una consulta para hacerte. Tengo instalado Jupiter hace unos cuatro años e hice mi desarrollo con WPBackery. Me gustaría migrar todo a Jupiter X y Elementor ya que me parece más amigable que WPBackery a la hora de trabajar. Puedes darme algunos consejos para no liarla en el proceso? Muchas gracias! Gustavo