OceanWP: tema para WordPress ligero, sencillo y MUY configurable [incluye Vídeo]

En este post vengo a hablarte de OceanWP, uno de los mejores temas para WordPress. Ligero, sencillo y muy configurable. O sea, una apuesta segura.

Uno de los errores al diseñar una página web es la mala elección del tema o plantilla que hará de contenedor de nuestro sitio. Solo con una decisión mal tomada en este punto tan crucial podemos tirar por la borda cualquier trabajo y esfuerzos posteriores para intentar mejorar el rendimiento de nuestra web.

Es por ello que la elección de tu tema es una de las decisiones más determinantes y OceanWP es una de las mejores opciones del mercado.

En el momento de redactar este post, OceanWP cuenta con la friolera de más de 700.000 instalaciones activas, que lo hacen uno de los temas más utilizados de todo el mundo WordPress, por encima de GeneratePress y de Astra Theme.

¿Quieres ver ya todo lo que da de sí este fantástico tema? ¡¡¡Vamos allá!!!

Fases para diseñar una web

Tema OceanWP para WordPress

OceanWP es uno de los temas más ligeros y versátiles del mercado. Tiene una estructura modular que consiste en un tema base al que se pueden agregar extensiones en función de tus necesidades.

Con esta filosofía, podrás instalar en tu web solo aquello que necesitas, obviando funcionalidades que no quieras utilizar, que además aumentarían el peso de la web e influirían en la velocidad de carga.

Por otra parte, OceanWP está totalmente pensado para trabajar codo con codo con los constructores visuales más conocidos y utilizados: Elementor, Beaver, Thrive, Visual Composer, Divi y otros cuantos…, así como con WooCommerce, el mejor plugin de WordPress para montar tiendas online.

Precios del tema OceanWP

En la página oficial de OceanWP, existe la posibilidad de descargar la versión Free del tema o comprar el pack OceanWP PRO con todas sus extensiones de pago en cualquiera de sus variantes: Personal, Business y Agency, que además podrás adquirir con licencia anual o lifetime.

precios oceanwp

Por si fuera poco, OceanWP pone también en tu mano un montón de plantillas free y PRO en su página oficial para que puedas hacerte con ellas.

Instalación completa del tema OceanWP

Para realizar la instalación completa del tema, te recomiendo que instales el tema padre de OceanWP y después instales también el tema hijo (child theme).

OceanWP themes

Instalando el tema hijo podrás hacer cambios a nivel código en tu web sin riesgo (al menos importante) de romper tu sitio web, ya que el tema padre es mucho más «sensible» a que metamos nuestras zarpas en él 😉

Instalación de OceanWP tema padre

Para instalar el tema padre de OceanWP podrás hacerlo de dos maneras:

  1. Desde el repositorio oficial de WordPress: dentro de tu WordPress, ve a ‘Temas/Añadir nuevo’ y busca el tema OceanWP en el buscador superior derecho. Cuando te aparezca el resultado, solo tienes que hacer clic en ‘Instalar’ y luego en ‘Activar’. De esta manera ya tendrás el tema instalado y listo para empezar.
  2. Desde WordPress.org: a través del enlace https://es.wordpress.org/themes/oceanwp/ podrás descargarte el tema a tu dispositivo y subirlo a tu web a través del apartado ‘Temas/Añadir nuevo’ y después haciendo clic en el botón superior ‘Subir tema’. Una vez subido, haz clic en ‘Instalar’ y luego en ‘Activar’.

Instalación de OceanWP tema hijo (Child Theme)

Por si desconoces lo que es un tema hijo, decirte a groso modo que es como si al tema principal le añadiésemos una nueva capa de información sobre la cual podremos hacer cambios sin que afecten para nada al tema padre.

El tema hijo viene con una serie de archivos que sobrescribirán esos mismos archivos nativos del tema padre, pero sin afectar para nada a su estructura.

En el tema hijo se suelen añadir estilos CSS, código PHP y otros parámetros que añaden funcionalidad a la web.

Y te preguntarás ¿y por qué no hacer los cambios ya sobre el propio tema padre?

Pues de hacerlo así, al actualizar el tema, podríamos perder esas variaciones que metamos y desconfigurar nuestra web y además, de esta forma mantendremos el tema padre a salvo de meter la pata en algún momento y romper todo.

Para instalar el tema hijo de OceanWP tendrás que ir al siguiente enlace https://github.com/oceanwp/oceanwp-child-theme, hacer clic en el botón verde de la derecha llamado ‘Clone or download’ y luego en ‘Download ZIP’. 

OceanWP tema hijo

Cuando lo tengas en tu disco duro, solo tienes que seguir los pasos del punto 2 de la instalación del tema padre, como si fuese un tema más.

Rendimiento y velocidad

OceanWP es uno de los temas más ligeros y sencillos del mercado para WordPress.

Su rendimiento es tremendamente bueno y si te decides por utilizarlo como esqueleto de tu web, dispondrás de una sólida base para conseguir webs que carguen en menos de 3 segundos.

Evidentemente, a medida que tú vayas incluyendo cosas en tu web, tales como plugins, imágenes, vídeos, etc. el resultado de los tests podrá verse afectado, por eso depende exclusivamente de ti utilizar plugins de buena calidad y optimizar lo mejor posible todos los recursos que utilices en tu página web para obtener resultados óptimos.

Demos del tema OceanWP

OceanWP pone a tu disposición más de 70 demos entre gratuitos y PRO para que puedas utilizar en tu web y que puedas montar una web profesional en poco tiempo.

En el siguiente enlace tienes las demos: https://oceanwp.org/demos/

Extensiones gratuitas de OceanWP

OceanWP dispone en su página oficial de un amplio abanico de extensiones gratuitas que te permitirán añadir más funcionalidades a tu tema.

OceanWP free extensions

Estas extensiones son muy ligeras y están perfectamente optimizadas para que afecten lo mínimo posible a la velocidad de la web.

Aparte de poder descargarte cada una de estas extensiones desde la web oficial, también podrás hacerlo desde el repositorio oficial de WordPress, algo que te facilitará la tarea. Aquí te explico para qué vale cada una:

  • Custom Sidebar: con esta extensión vas a poder crear tantos sidebars personalizados como desees y utilizarlos en cualquier página y/o entrada de manera independiente.
  • Demo Import: importa cualquier demo de OceanWP fácilmente con esta extensión.
  • Modal Window: esta extensión te permitirá lanzar un popup al hacer clic en algún botón de tu página web. Permite insertar cualquier contenido, incluyendo shortcodes. Muy útil para popups de captación de suscriptores, promociones, etc.
  • Ocean Extra: la instalación de esta extensión podría decirte que es casi OBLIGATORIA si quieres tener el control absoluto sobre OceanWP. ¡Es la extensión más importante de OceanWP!
  • Posts Slider: plugin para crear sliders con entradas de tu blog o con imágenes de la biblioteca de medios.
  • Product Share: esta extensión permite insertar en las páginas de productos de WooCommerce un módulo con opciones para compartir en redes sociales.
  • Social Sharing: con esta extensión podrás añadir a tus posts un módulo para compartir en redes sociales con diversas opciones de diseño y configuración.
  • Stick Anything: este plugin te va a dar la posibilidad de hacer que algunos de los elementos del tema OceanWP puedan convertirse en sticky o pegajosos, efecto que hará que se desplacen al mismo tiempo que hacemos scroll con el ratón.

Extensiones de pago de OceanWP

Adicionalmente a las extensiones free, OceanWP te da la posibilidad de hacerte con una serie de extensiones de pago para tener en tu mano un abanico mucho más amplio con el que poder tener el pack completo.

Estas extensiones puedes adquirirlas por separado o en un paquete único, llamado Core Extensions Bundle desde 39 dólares.

OceanWP premium extensions

Las extensiones son las siguientes:

  • Cookie Notice: esta extensión te permitirá añadir el típico mensaje de aceptación de cookies para mostrar a tus visitantes.
  • Elementor Widgets: el equipo de OceanWP ha desarrollado un paquete de addons para Elementor que aportarán más potencia a tu editor visual favorito. Aquí te dejo un vídeo que he montado.
  • Footer Callout: esta extensión te permitirá crear un espacio adicional en la parte inferior de tu web para añadir información relevante sobre tu negocio: un banner, un formulario, etc.
  • Full Screen: esta extensión es muy interesante para crear tipos de web a tamaño completo, las cuales, al hacer scroll, van pasando como si fuese un slider vertical.
  • Hooks (Ganchos): gracias a esta extensión vas a poder añadir contenido personalizado en diversas áreas de tu página web sin tener que tocar el archivo functions.php del tema hijo, en el cual suelen incluirse órdenes de PHP generales para toda la instalación de WordPress.

    A través del apartado ‘Theme Panel/Mi biblioteca’, vas a poder insertar diferentes contenidos en diversas áreas de la web en general y, en cada página, entrada y/o taxonomía en particular.

    Podrás añadir PHP, shortcodes, contenido personalizado por roles de usuario, añadir varios códigos en la misma ubicación, contenido solo para usuarios logueados o deslogueados, y otras opciones…

  • Instagram: añade a tu web una sección para mostrar el contenido de tu perfil de Instagram donde tú quieras.
  • Popup Login: diseña un popup para que tus usuarios registrados puedan loguearse en tu web de manera atractiva.
  • Portfolio: podrás crear portfolios atractivos gracias a esta extensión muy ligera.
  • Side Panel: esta extensión te permite añadir un sidebar oculto en el lateral de tu web que se despliega al hacer clic en un botón.
  • Sticky Footer: igual que el típico sticky header, Sticky Footer te permitirá crear un footer pegajoso.
  • Sticky Header: con esta extensión podrás añadir un menú “pegajoso” que acompañe al scroll mientras se desciende por el contenido de tu página web. Las opciones que te ofrece OceanWP te van a dar un montón de libertad para adaptar tu encabezado a tus necesidades.
  • White Label: gracias a esta extensión podrás personalizar la apariencia del tema OceanWP con tu propia imagen corporativa en la sección Apariencia/Temas de WordPress.
  • Woo Popup: extensión para WooCommerce que hará que salte un popup cada vez que tus visitantes compren un producto en tu tienda online, con información del producto seleccionado.

Tutorial: personalización de OceanWP con vídeo

El tema OceanWP es muy completo en lo que se refiere a configuración. Ofrece un sinfín de posibilidades en su versión gratuita que no ofrecen otros temas.

Podrás configurar tipografías, colores, la barra superior, la cabecera, el archivo del blog y las entradas, los sidebars, los widgets del footer y el pie inferior.

Y dentro de cada uno de estos apartados, podrás ir al detalle para poner a tu gusto absolutamente todo el tema sin necesidad de tocar una línea de código.

«¡Me parece grandioso!»

Para acceder a la personalización del tema, deberás ir a ‘Apariencia/Personalizar’, en el menú lateral de WordPress.

oceanwp apariencia personalizar

Una vez dentro, te aparecerán a la izquierda todas las opciones y, a la derecha, podrás ir viendo el resultado de los cambios que vayas haciendo en la previsualización antes de publicarlos.

OceanWP personalizar barra lateral

Aquí te dejo un vídeo-tutorial donde te cuento los aspectos principales de la personalización del tema OceanWP y aquí, en el propio post, a continuación del vídeo puedes ver todos las subsecciones que te cuento en él con sus funciones:

Cómo personalizar las opciones generales del tema OceanWP

Aparte de algunas configuraciones más específicas, OceanWP te da la posibilidad de adaptar a tus necesidades un montón de parámetros a través del apartado ‘Opciones Generales’:

oceanwp personalizar opciones generales

  • Estilo general: en esta sección podrás asignar a tu web los colores generales, una imagen de fondo para toda la web si lo deseas y los colores de los enlaces.
  • Configuración general: en este apartado podrás cambiar el aspecto visual general de tu web. Podrás cambiar aspectos estructurales, añadir o quitar sidebars, configurar cómo se mostrarán los diferentes tipos de páginas del sitio y alguna opción extra.
  • Titulo la página: aquí podrás configurar un montón de aspectos relacionados con los títulos de tus páginas y entradas: estilos, colores, migas de pan, etc.
  • Desplazamiento hasta el principio: podrás configurar la flechita que aparece en la parte inferior de tu web que sirve para volver hacia la parte superior de la página tras haber hecho scroll.
  • Paginación: configura aquí el aspecto del módulo de paginación que aparecerá en el blog cuando tengas varias páginas con artículos.
  • Formatos (Entrada – Área de texto): aunque aquí pone «Formatos», realmente quiere decir «Formularios». En este apartado podrás cambiar varios parámetros de los formularios que insertes en tu página web.
  • Botón del tema: los botones de la web que estén gestionados por el tema (no por un maquetador visual, por ejemplo) los puedes personalizar desde aquí.
  • 404 error: personaliza la página de ‘Error 404’ a tu gusto desde este apartado. Podrás incluso utilizar una página de error diseñada con un maquetador visual como Elementor.

Cómo personalizar las tipografías del tema OceanWP

Dentro de un tema existen diversas formas de personalizar tus tipografías, y en este punto, OceanWP es de lo más completo del mercado: encabezados, blog, header, footer, sidebar, colores, márgenes, todos los estados del ratón y una gran cantidad de opciones más.

Te muestro a continuación todas las opciones que te ofrece el tema:

oceanwp personalizar tipografias

  • General: sección en la que podrás activar/desactivar Google Fonts y asignar el tipo de subconjuntos de las tipografías de la web (latino, cirílico, griego…).
  • Cuerpo: aquí podrás personalizar la tipografía general de la web.
  • Todos los encabezados (H1 – H6): configura desde aquí todos los encabezados de la web de manera conjunta.
  • Encabezados H1 a H4: OceanWP dispone de 4 subsecciones para asignar estilos propios a los encabezados desde el H1 al H4.
  • Logo: si no has utilizado una imagen como logo en tu web, aquí podrás personalizar el aspecto del texto que aparece en la cabecera de tu web.
  • Barra superior: personaliza los textos de la barra que aparece por encima de la cabecera principal de la página web.
  • Menú principal: aquí podrás modificar el aspecto de los textos del menú principal.
  • Menú principal / Lista desplegable: si estás utilizando desplegables en tu menú principal, podrás personalizar sus textos desde aquí.
  • Menú en móvil: ajustes para los textos del menú versión móvil.
  • Título de la página: puedes asignar estilos al título de tus páginas y entradas desde aquí.
  • Título de la página / Sub-encabezado: OceanWP te da la posibilidad de asignar subtítulos a tus páginas y entradas. Personalízalos desde este apartado.
  • Migas de pan: todos los ajustes tipográficos de las migas de pan, hazlos aquí.
  • Título de la entrada del blog (Archivo): personaliza desde este apartado los textos de la página principal de tu blog.
  • Título de la entrada del blog (Entrada única): en esta sección puedes cambiar el aspecto del título de cada entrada única de tu blog,
  • Cabecera del widget de la barra lateral: los títulos de los widgets de tus sidebars puedes también personalizarlos. ¡Este es el lugar!
  • Widgets: modifica aquí los textos del cuerpo de todos los widgets de la web, tanto los de los sidbars como los del pie de página.
  • Encabezado del widget del pie de página: ajusta desde esta sección los títulos de los widgets del footer, si los tienes activados.
  • Copyright del pie de página: cambia el aspecto de los textos de la barra inferior del copyright desde aquí.
  • Menú del pie de página: si has añadido un menú en la barra del pie de página (normalmente se añade el menú legal), puedes configurarlo en este lugar.

Cómo personalizar la barra superior del tema OceanWP

En la parte superior de tu web, sobre la cabecera donde se encuentran el logo y el menú, podrás habilitar una barra en la que insertar alguna información interesante, como tus redes sociales, el teléfono de tu negocio, un email u otra serie de detalles que puedan ser relevantes para tus visitantes.

Vamos a ver cómo sacarle partido:

oceanwp personalizar barra superior

  • General: habilita desde aquí la barra superior y asígnale el aspecto general: estilos, márgenes, colores…
  • Contenido: si quieres añadir algunos datos como tu email, teléfono o incluso asignar una plantilla diseñada con un editor visual como Elementor, hazlo aquí.
  • Redes Sociales: habilita aquí el uso de iconos de redes sociales y personaliza su funcionamiento.

Cómo personalizar el encabezado del tema OceanWP

En el encabezado o header, vas a poder añadir cosas como el logo de tu negocio, el menú, un campo de búsqueda y un menú social. Además, verás que OceanWP tiene un listado de diseños para tu menú que no te van a dejar indiferente.

oceanwp personalizar encabezado

  • General: este apartado es de los más potentes de OceanWP a nivel personalización. Desde él podrás asignar el aspecto general al menú de tu web. Tienes hasta 8 opciones diferentes con sus personalizaciones propias:
      • Mínimo
      • Transparente
      • Menú superior
      • Pantalla completa
      • Centro
      • Medio
      • Vertical
      • Personalizado
  • Media del encabezado: aquí puedes añadir un vídeo como fondo de tu cabecera y aplicarle algunas personalizaciones.
  • Logo: sube el logo de tu web desde aquí. Admite versión retina.
  • Menú: personaliza el comportamiento de los elementos de tu menú desde aquí: efectos on-mouse-over, estilos, icono de búsqueda, etc.
  • Menú social: si quieres añadir un menú social en tu menú principal, puedes activarlo y configurarlo desde este apartado.
  • Menú en el móvil: si deseas configurar el aspecto y comportamiento del menú en la versión móvil, hazlo desde aquí.

Cómo personalizar el blog del tema OceanWP

El blog es una de las partes más importantes de una página web. En él, tus usuarios van a poder leer los contenidos que hayas creado.

Es muy importante que este apartado crucial de tu página tenga el aspecto adecuado para que los visitantes queden atrapados en él.

oceanwp personalizar blog

  • Entradas del blog (Archivo): en esta sección vas a poder configurar completamente el aspecto de tu blog: con o sin sidebar, disposición de las entradas, columnas, metadatos, paginación, etc. 
  • Entrada única: apartado muy similar al de entradas del blog… Podrás configurar el aspecto de cada entrada única: sidebar, imagen destacada, metadatos, etc.

Cómo personalizar la barra lateral (Sidebar) del tema OceanWP

En el apartado de ‘Barra lateral’ (también conocido como sidebar), vas a poder personalizar una serie de parámetros relacionados con los sidebars de tu página web, como son el color de fondo, los márgenes de separación con otros elementos del tema y algunos detalles relacionados con los widgets.

oceanwp personalizar barra lateral

Cómo personalizar el footer y el pie inferior del tema OceanWP

La zona inferior de la maquetación con OceanWP tiene dos lugares donde podremos incluir información. Esas localizaciones son la zona de widgets del pie de página y el pie inferior en el tema OceanWP.

oceanwp personalizar footer y pie

  • Widgets del pie de página: el pie de página es una zona del tema donde podrás incluir diferentes contenidos y configurarlos a tu gusto.

    Si decides utilizar widgets para llenar este espacio, aquí podrás gestionar diversos aspectos que harán que se adapten lo mejor posible a tus necesidades.

  • Pie inferior: en el pie inferior podrás insertar alguna información adicional sobre tu página, como puede ser por ejemplo el copyright, el nombre del negocio, etc.. También suele ser el lugar idóneo para insertar el menú legal, con las páginas que deberías crear para el Aviso legal, la Política de privacidad y la Política de cookies.

    Podrás también insertar cierta información a través de shortcodes que el tema pone a tu disposición aquí.

Cómo añadir CSS y JavaScript en el tema OceanWP

OceanWP te ofrece la posibilidad de personalizar algunos aspectos específicos del tema que no puedas modificar con las opciones que vienen por defecto, gracias a este panel para insertar código CSS y JavaScript, con los que podrás añadir personalizaciones avanzadas sin límite.

oceanwp personalizar css y js

OceanWP PRO y Elementor PRO: ¡combinación letal para diseñar páginas web!

OceanWP es un tema muy pensado para trabajar con diversos maquetadores visuales, como Visual Composer, Divi, Beaver, Thrive… pero sin duda el pack que hace con el editor visual Elementor es sin duda ¡IMPRESIONANTE!

OceanWP ha sido diseñado para que la integración de los contenidos de Elementor sea óptima y para que ambas herramientas se complementen completamente.

Además, desde el apartado ‘Theme Panel/Mi Biblioteca’ podrás crear plantillas diseñadas con el propio Elementor que luego podrás utilizar en diversos lugares de tu tema, seleccionándolos fácilmente desde diferentes lugares del personalizador.

OceanWP Mi biblioteca

Así podrás insertar diseños de Elementor en la cabecera, el sidebar, el footer y otros lugares de tu página web.

¡Genial! ¿no? ¡Pues sí!!!

Además, como te he contado más arriba, el equipo de OceanWP ha desarrollado una extensión PRO llamada ‘‘Elementor Widgets’, que incluye un buen número de addons muy versátiles para utilizar en tu maquetador visual.

OceanWP PRO y WooCommerce: ¡el pack perfecto para diseñar tiendas online!

Otro de los puntos fuertes de OceanWP es su integración con WooCommerce, el plugin para crear tiendas online más potente para WordPress.

OceanWP te permitirá gestionar y personalizar de manera muy ágil y sencilla un montón de aspectos del plugin de ecommerce más reputado.

Y, al igual que con Elementor, desde el equipo de OceanWP han optimizado el tema para trabajar conjuntamente con WooCommerce y obtener los mejores resultados, desarrollando además alguna extensión específica para sacar jugo a tu tienda.

Conclusión y opinión personal

En el tiempo que llevo en el diseño de páginas web he trabajado únicamente con los temas Generate Press y OceanWP.

Realmente no estoy autorizado a decir que OceanWP es el mejor tema del mercado ni cosas de esas, pues no puedo argumentarlo de manera objetiva al no haberlo comparado con muchos otros…

Lo que sí puedo decirte es que habiendo probado OceanWP y teniendo tantas posibilidades de personalización en mi mano, tanto control y una versatilidad tan amplia, no me apetece probar otros (Astra lo probaré algún día igualmente, pues lo usa mucha gente y quiero saber porqué tiene tanto éxito).

Resumiendo, puedo decirte con mi experiencia propia que OceanWP es seguramente uno de los temas que más posibilidades ofrece para crear una web sin tener que utilizar código ni demasiados plugins extra, pues las propias extensiones que ofrece el desarrollador son brutales y están totalmente testadas para rendir como dios manda junto al propio tema.

¿Y tú qué opinas? ¿cuál es tu tema favorito y por qué? ¿has probado OceanWP y no te gusta? ¿por qué?… ¡Venga, anímate a darme tus impresiones y charlamos un rato! 🙂

Y ya que has llegado hasta aquí, ¡qué te parece si compartes este post con los amigos que creas que lo pueden necesitar! ¡y qué te parece si te pido que lo compartas en Redes Sociales!…

Venga, hazme ese pequeño guiño y un oso polar se salvará de la extinción por nuestra culpa 🙂

¡Haz clic para puntuar esta entrada!
(Votos: 4 Promedio: 4.5)

54 comentarios en “OceanWP: tema para WordPress ligero, sencillo y MUY configurable [incluye Vídeo]”

  1. Excelente guía Edu, probaré el tema y después te compartiré mis experiencias. Yo suelo usar Generate Press pero después de leer este articulo me dan ganas de probarlo. Saludos.

    1. Hola Jonathan!!! Gracias por pasarte a comentar!!!

      GeneratePress es también un gran tema, pero a mi me gusta más OceanWP (para gustos, colores, claro!). Me parece mucho más sencillo de configurar y ofrece un abanico de personalizaciones que van desde lo global a lo más específico de todas las partes de una web. Además está muy bien integrado con Elementor y WooCommerce, así que está en una gran posición. Si lo pruebas, instala el plugin Ocean Extra y ya con eso podrás hacer un montón de cosas…

      Un abrazote 🙂

  2. Edu! Tremendo post 🙂

    Siempre desconfié de otros temas aparte de GP, porque me he llevado varios chascos, pero se que eres el rey en esto. Muy bueno y muy completo.

    Llegada la hora de experimentar, claro que buscaré este post nuevamente!

    Un gran abrazo!

    1. Qué tal, Esteban, compañero!!!!

      Me alegra mucho que el post te haya abierto los ojos antes este magnífico tema. Hay otros, como sabes… GP, Astra… pero desde que he descubierto OceanWP, ahora mismo no veo razones para cambiar. Me ofrece todo lo que necesito sin depender apenas de otros proveedores (sin contar plugins de seguridad, optimización, etc.).

      Si le das una oportunidad algún día, no te defraudará. Y si necesitas ayuda con alguna cosilla, ya sabes dónde me tienes.

      Abrazos, amigo y sigue así con tu proyecto, que me encanta cómo haces las cosas!!! 🙂

  3. Un post verdaderamente largo, pero muy detallado sobre OceanWP que se mantuvo fiel a lo que se ha hecho hasta ahora, y muy agradable de leer.

    Apreciamos el tiempo que tomó para evaluar OceanWP de cerca y hay nuevas características que se añadirán próximamente. Estoy seguro de que la mayoría de los usuarios les encantará.

    Una vez más, gracias por revisar OceanWP.

    1. Muchas gracias, Alex, por pasarte por mi blog a echar un vistazo al post!

      Realmente el tema OceanWP es muy ágil y versátil. Espero con ganas las nuevas actualizaciones.

      Un abrazo!!!

  4. Me ha gustado mucho el post y me ha ayudado a decidirme a instalar el tema OceanWP.

    Estoy trasteándolo un poco y no encuentro la forma de que la cabecera de los menus salga y se esconda como lo tiene usted en esta web.
    Esa opción no se puede modificar? donde se hace que no lo encuentro.
    Gracias y un saludo.

    1. Muchas gracias por escribir, Víctor!!!

      El efecto que tú buscas es Sticky Header, y es uno de los módulos de pago de OceanWP. Puedes comprarlo en su web por un precio muy muy asequible 🙂

  5. Excelente guía! Muchas gracias Víctor.

    A ver si alguien me puede ayudar por favor, me encuentro con que no puedo cambiar el tamaño de la tipografía. Esta la opción de ponerlo pero lo pongo en px y no hay ningún cambio.

    Necesito hacerlo ya que Search console me recomienda agrandar el tamaño, y la verdad que no sé hacerlo.

    Si Víctor o alguien me puede indicar le estaré muy agradecido.

    Muchas gracias de antemano y saludos

    1. Hola Íñigo!!!

      Entiendo que Víctor soy yo :D…

      A veces OceanWP no «responde» bien a algunos cambios en el panel Personalizar. Te sugiero que borres la caché si la tienes activada y que salgas y vuelvas a entrar en WP. Si no se arregla, escribe al soporte del theme y deberían responderte.

      Gracias por pasarte, Manuel… digo, Íñigo, jejeje! 😉

      Un abrazo!

  6. Hola Manuel!!

    Perdona por cambiarte el nombre, me suele pasar a menudo jeje
    Lo de la cache ya probé y no dio resultado. No sé si igual tendrá que ver con el cambio del menú. De todas formas haré caso a tu recomendación y escribiré a soporte a ver que me dicen 😉

    Muchas gracias por la atención y por la información, el tutorial de Youtube ahí lo tengo guardado, que por cierto, MUY BUENO! https://www.youtube.com/watch?v=ptQuiknM-60

    Un abrazo y muchas gracias Víctor, upss, Manuel.. jajajaja 😉

  7. Hola Edu, se te debe dar fenomenal pelar granadas, porque lo de desgranar OceanWP lo has bordado. Llevo usando el tema un año y estoy contento; y con ganas de pasarme a la opción PRO.

    Tengo una pregunta… uso algún pluging adicional para galerías de fotos, formularios y textos, botones, secciones… enriquecidos. ¿Podría sustituirlos con la versión PRO o añadiendo Elementor?

    Un saludo 😉

    1. Hola Miguel,

      Yo utilizo OceanWP como base o «esqueleto» de la web. Luego todo el contenido, funcionalidades, etc. intento materializarlas siempre con Elementor PRO y si me falta algo, lo complemento con otros plugins.

      Y si piensas en pasarte a OWP Pro, tendrás un buen puñado de extras que te vendrán genial: Hooks, Sticky Header, etc. Yo uso varias opciones y el tema va como un tiro!!!

      Muchas gracias por animarte a comentar 😉

      Un saludo!!!

    1. Hola Nils,

      Deberías ir a la opción Personalizar del tema, buscar las opciones de WooCommerce (si usas WC) y subir el tamaño de las imágenes de las miniaturas por defecto.

      Un saludo.

  8. Hola!!! Tengo un problema, no se ven las imagenes de las redes sociales ni el el top menu ni en el footer.
    Como podria solucionarlo?
    Gracias!!

    1. Hola Isa,

      Para que te aparezcan los iconos de redes sociales en la barra superior, debes añadir las URLs de tus perfiles aquí: Apariencia/Personalizar/Barra superior. Para que lo hagan en el footer, si has añadido este con OceanWP, debes ir a Apariencia/Widgets y añadir el widget de redes sociales en la columna que desees.

      Un saludo

  9. Hola Edu,
    Tocando el código header.php de mi tema OceanWP: Cabecera del tema (header.php), no se de que forma parte del código Body, a desaparecido, o eso creo. Aquí te envío el código header.php para ver como se completa o bien, si me pudieras enviar el código completo para yo poder terminarlo de completar. Muchas Gracias y un saludo.

    <html class="» >

    <meta charset="»>

    <body >

    <main id="main" class="site-main clr">

    1. Hola Pedro,

      Lo siento, pero no puedo ayudarte en eso. Contacta con el soporte de OceanWP y ellos te ayudarán encantados.

      Gracias por pasarte por este humilde blog 😉

  10. Hola Edu, no conocía este theme y tiene muy buena pinta. Llegue aquí por GeneratePress y quizás me voy con OceanWp. Gracias por este cacho de post.

    Saludos!

  11. Francisco Gasco

    Espectacular! Simplemente espectacular post. Muy pero muy completo. Te felicito por ello Edu.

    Tengo experiencia con Divi Astra y Ocean WP.

    A Divi ya casi no lo uso, sólo mis primeras webs fueron desarrolladas con Divi. Me parecía muy bueno cuando lo usaba, estaba encantado. Pero claro… era muy novato jaja.

    Luego probé Astra + Elementor Pro, y debo decir que me enamoré totalmente. No solo de Astra, sino también de Elementor. INCREIBLE la cantidad de variantes de personalización que ofrecen estas dos bestias conjuntamente, x100 veces mejor que Divi, un mundo aparte literalmente.

    Despues de esto, adquirí un curso de desarrollo de tiendas online, donde usaban Ocean WP + Elementor. Y sencillamente ME ENCANTÓ, es realmente una maravilla (y leer este EXCELENTE post hace que lo reconfirme). Me ocurrió exactamente lo mismo que con Astra + Elementor.

    Hoy en día tengo mi corazon partido en dos: Astra + Elementor por un lado, y Ocean WP + Elementor por el otro.
    Mi modalidad a la hora de emplear una opción por sobre la otra es tan sencilla como esto:
    Tienda Online: Ocean WP + Elementor
    Web Intitucional (o cualquier otra que NO incluya WooCommerce): Astra + Elementor
    Y así me manejo hoy en día con cada una de mis webs. Progresando, mejorando y aprendiendo día a día a crear mejores web. Y dejame decirte Edu, que este post ayuda muchísimo a que eso sea posible.
    GRACIAS! Espero mi experiencia sirva para los lectores (yo encanto de narrarla (: )

    PD: este es el primero de tus post que descubro y me encantó. Estoy ansioso por leer todos los que tengas y hagas a futuro!!!

    1. Guauuuu, Francisco!!!!

      Muchas gracias por tu pedazo comentario!!! Me alegra que te haya gustado. Se ve que tienes rodaje y conoces las buenas herramientas. Yo antes de OceanWP utilicé GeneratePress en un par de proyectos, pero me quedo con Ocean de calle… Mucho más personalizable y más sencillo todo, desde mi punto de vista 😉

      Un saludo!!!!

  12. Hola Edu,
    Antes que nada felicidades por este post porque me ha servido muchísimo!
    Tengo una duda: Al añadir la descripción del web (Ajustes- Generales- Descripción corta) me aparece automáticamente en la cabecera…
    Hay alguna manera de quitarla de allí?

    Muchas gracias! Un abrazo!

  13. Hola! Estoy tratando de montar mi empresa por internet y tengo dudas entre utilizar wordpres o IONOS, ¿cual me recomiendas?

    1. Hola M. José,

      Pues sinceramente nunca te recomendaría Ionos. Si algún día quieres cambiar de empresa de hosting perderás todo y tendrás que empezar de cero.

      Un saludo.

  14. Hola he puesto un footer en OcenWp con elementor, cree una plantilla y la colcoque en el footer, pero no me sale en pie inferior y está activo como debo hacerlo para que salga. Gracias

    1. Hola José María,

      Con OceanWP puedes crear el footer como plantilla en Elementor y luego seleccionarla en ‘Apariencia > Personalizar > Widgets de pie de página’. Así debería verse.

      Espero haberte ayudado 😉

      Un saludo.

  15. Muy buen análisis sobre el theme OceanWP, hace tiempo vi en otro blog que hablaban de ese tema pero no tan bien explicado como en este post. Muchas Gracias Edu Rubianes por un contenido con tanta calidad. De seguro seguiré leyendo otros posts de esta web.
    Saludos desde Cuba.

  16. Lo primero felicidades por el buen post, explicado todo perfecto!!
    Uso OceanWP y va genial, pero estoy teniendo problemas ahora porque me dice: Tu tema (OceanWP Child) contiene copias obsoletas de algunos archivos de plantilla de WooCommerce.
    Y me dice que actualice mi tema.
    Qué hago? voy a Ocean y pido otra vez que me envíen enlace de descarga de la nueva versión?
    y luego cómo se actualiza el tema sin perder nada de mi web?
    S.O.S. jeje gracias!!

  17. Hola Edu, desde hace una semana utilizando elementos para maquetas y ocean como maqueta
    el icono de redes sociales todos se me han justificado a mano izquierda??? no se el motivo alguna indicación

  18. Hola buenas tardes a todos, ojala alguien me pueda ayudar si es que le paso lo mismo.
    Yo ya instale el Tema Ocean en WP y también estoy integrando Woocommerce para una tienda en línea.
    El problema que tengo es que al momento de acceder para hacer el pago la pagina se queda congelada procesando la info. y ya no deja activar la forma de pago y realizar el pago.
    Alguien me podría ayudar con este detalle?

    1. Hola Hugo,

      Prueba a desactivar todos los plugins menos los necesarios para realizar la transacción, por ir descartando posibles conflictos. A ver si con eso solucionas…

      Muchas gracias por comentar y suerte!

  19. Hola! Me encantó tu post, pero tengo un problema. Empecé a trabajar en un lugar con un WP que no lo actualizaban de hacía bastante. Empecé actualizando los plugins y ahora me encuentro con que me aparece todo el contenido doble, probé desactivando algunos y nada… Y ahora leyendo esto, veo que tengo el tema desactualizado, tengo la versión 1.8.2 y me pide la 2.0.7, pero no está bajado el tema hijo, y tengo miedo de actualizar y que se me rompa el sitio. Lo único que sé es que lo cambiaron de .com.ar a .ar, no sé si eso pudo haber sido un problema también. Dejo el sitio, POR FAVOR, cualquier ayuda es bienvenida! Muchas gracias.

  20. Hola Edu, excelente post!

    Hace tiempo uso Ocean WP y este post me hace valorarlo aún más. Excelente trabajo!

    Tengo una consulta… ¿es posible importar y exportar los settings aplicados al theme para poder aplicarlos en otra web? ¿Existe alguna manera de poder hacer eso?

    Espero tu respuesta,
    Desde ya, muchas gracias!

    1. Hola Francisco,

      Claro que puedes!!! Primero debes instalar el plugin gratuito Ocean Extra, que es del mismo desarrollador. Este plugin te va a crear en el menú de tu WordPress una opción llamada Theme Panel. Ahí encontrarás una sub-opción llamada Importar/Exportar.

      Un saludo y gracias por comentar!!!

  21. Muy bueno su video de configuración de OceanWP. Pregunto, si compro la licencia business de oceanwp, también deberia instalar el tema hijo de ocenawp para hacer las modificaciones de mi web? o cuando se usa la liecencia paga de business no se debe instalar el tema hijo???

    1. Hola Franck,

      Sí, independientemente de que tengas la versión free o la de pago, es muy recomendable instalar el tema hijo. Si añades cambios en el tema padre, una vez se actualice, se van a borrar.

      Un saludo.

  22. Hola Edu,

    Muy buen post!

    Una consulta, ¿cómo puedo retirar los íconos que vienen por defecto en la página principal del tema OceanWP?, ya que con la personalización ya no pude hacerlo…

    Saludos,
    Claudio

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  • Responsable: Eduardo Rubianes.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a FastComet INC que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.
Scroll al inicio

Las 9 fases cruciales para diseñar una web atractiva y efectiva.

pasos para diseñar una página web

Guía GRATUITA por entregas con la que aprenderás a diseñar una web profesional y a conseguir resultados reales para vivir de ella.