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

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

Uno de los errores más comunes a la hora crear una página web es la mala lecció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.

Existen muchos otros errores, como diseñar nuestra web en plataformas como Wix, por ejemplo…, pero si queremos hacer nuestra web con WordPress y escogemos la opción de comprar un tema de estos tiraditos de precio en Themeforest la vamos a liar muy parda para luego levantar del suelo esa web…

Siento ser tan duro, pero la vida es así…

Es por ello que la elección de tu tema es una de las decisiones más determinantes.

En este post voy a hablarte de OceanWP, uno de los mejores temas para diseñar una página web en WordPress.

El creador de OceanWP es Nicolas Lecocq, un francés que allá por el año 2016 decidió crearse su propio tema, incluyendo opciones y características que echaba en falta en otros temas existentes.

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

Además cuenta con más de 2.200 valoraciones de 5 estrellas en el repositorio oficial de WordPress, prueba palpable de que la comunidad tiene a este tema en un lugar de privilegio.

A continuación puedes ver en Google Trends la popularidad de estos tres temas top en todo el mundo en el año 2018.

Como ves, OceanWP y GeneratePress están muy cerca uno del otro y también se aprecia que OceanWP estuvo a muuuuucha distancia de GeneratePress y Astra Theme entre septiembre y diciembre, aunque luego se fueron igualando…

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

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.

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 Unlimited, que además podrás adquirir con licencia anual o lifetime.

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

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

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.

A continuación te muestro el resultado de rendimiento y velocidad de una instalación virgen de WordPress que incluye tanto el tema padre como el tema hijo y no incluye ningún plugin de caché, compresión u optimización.

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.

En Refrescando Negocios siempre entrego las páginas web con todas las garantías a mis clientes.

Los análisis y resultados que verás a continuación los he llevado a cabo en dos de las plataformas de testeo más reputadas, Pingdom y GTmetrix:

Pingdom

Aquí te muestro el resultado del test en Pingdom, el cual he llevado a cabo contra sus servidores en Londres, los más cercanos a mi ubicación.

Aunque el Performance Grade está por debajo de 90, en cuanto instale un plugin de caché, que es lo recomendable siempre, el resultado mejorará notablemente, así que el test es más que satisfactorio.

La velocidad de la página de inicio de la web es de solo 0,3 segundos¡un disparo, vaya!

GTmetrix

En GTmetrix el resultado es prácticamente el mismo que en Pingdom: un resultado del 98% en PageSpeed y un 87% en YSlow son algo grandioso. La velocidad en este caso es de 0,5 segundos de carga, así que va igual de rápido que en el resultado de Pingdom… ¡un rayo!

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.

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! Abajo te cuento más…
  • 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.

Ocean Extra, la mejor extensión para OceanWP (¡y es GRATUITA!)

Como te contaba aquí encima, Ocean Extra es una extensión casi de obligada instalación…

… puedes no hacerlo, pero allá tú.

Es una de las extensiones más importantes que podrás añadir a OceanWP y además el propio tema te recomienda instalarla nada más activarlo.

Este plugin creará un apartado en el menú de WordPress llamado ‘Theme Panel’ que te dará la capacidad de personalizar el tema al máximo de manera general y además, podrás añadir personalizaciones específicas a cada página y entrada de manera particular.

Imagina que quieres poner un menú diferente del menú principal en alguna página, o que deseas que algunas lleven sidebar y otras no, o que quieres utilizar shortcodes en algunos lugares específicos de la web, y más cosas…

¿Te lo puedes creer?

¡Pues gracias a Ocean Extra podrás hacerlo, créetelo!

Instalación y configuración básica de Ocean Extra

Instalación

La extensión Ocean Extra podrás descargarla desde la web oficial de OceanWP y cargarla en tu WordPress subiéndola desde tu disco duro.

Para hacerlo tendrás que ir a la sección ‘Extensions’, buscar la extensión y descargarla en tu ordenador para luego cargarla en tu web a través del apartado Plugins.

También podrás instalarla directamente desde el repositorio oficial de WordPress de manera gratuita.

Una vez la tengas instalada, te aparecerá en el menú de WordPress un nuevo apartado llamado ‘Theme Panel’.

Asistente de configuración

OceanWP es un tema pensado para cualquier tipo de usuario, con mayor o menor nivel técnico, y es muy fácil de configurar.

Pensando en los usuarios menos avanzados, una de las primeras cosas que suceden al instalar la extensión Ocean Extra es que se va a activar un asistente de configuración para que puedas dejar preparadas algunas de las opciones principales de tu tema.

Configuración avanzada de OceanWP a través de Theme Panel

A través de ‘Theme Panel’ vas a poder configurar un montón de opciones en OceanWP.

Gracias a la gran cantidad de posibilidades que te ofrece, vas a poder quedarte únicamente con aquellas funcionalidades que necesitas para tu web, obviando aquellas otras que no te hagan falta, ahorrando así recursos y mejorando el rendimiento de tu página:

  • Panel del tema: aquí podrás marcar y desmarcar algunas opciones del tema que te interese tener o no tener activas. También podrás hacer una configuración inicial.
  • ‘Mi biblioteca’: desde aquí podrás crear plantillas para luego utilizarlas en diferentes lugares del tema, añadir hooks, el código de Google Analytics, etc.
  • Scripts y Estilos: si hay opciones del tema que no vayas a utilizar, te recomiendo que las desmarques aquí, así ahorrarás recursos dejando solo aquello que utilices en tu web.
  • Importar/exportar: en este apartado podrás exportar o importar la configuración del tema para utilizar en otras webs.
  • Instalar demos: desde este apartado podrás añadir rápidamente plantillas creadas por el equipo de OceanWP.
  • Extensiones: aquí aparecerán diversas opciones de las extensiones gratuitas de OceanWP que tengas instaladas. Si tienes la versión OceanWP PRO de alguna extensión, esta opción será sustituida por el apartado ‘Licencias’.
  • Licencias: en esta sección podrás gestionar las claves de licencia de las extensiones de pago de OceanWP.

Personalización de páginas y entradas con Ocean Extra

Además de la configuración general de la web a través de ‘Theme Panel’, también podrás hacer personalizaciones avanzadas a nivel página y entrada.

Una vez instalada la extensión, en cada post te aparecerá una caja de opciones en la parte inferior del editor para poder customizarla y quedarte a gusto.

Las opciones que podrás gestionar por defecto son:

  • Principal: en esta pestaña podrás decidir si la página/entrada lleva o no sidebar, a qué lado, si es de ancho completo, si lleva o no márgenes en la parte superior e inferior de la página en cuestión…
  • Shortcodes: el tema te ofrece una buena cantidad de localizaciones en la web para añadir shortcodes. En la barra superior, en la cabecera, en el cuerpo, en el sidebar, en el footer, etc. y dentro de cada una de estas opciones, podrás meter contenidos en diferentes niveles.
  • Encabezado: aquí podrás decidir si el post lleva o no barra superior y/o cabecera. Si decides que sí lleve cabecera, podrás personalizar el estilo del menú (mínimo, transparente, centrado…).
  • Logo: añade logotipo personalizado en cada página/entrada y configúralo a tu gusto de manera independiente.
  • Menú: escoge qué menú quieres mostrar en cada post, las opciones de tipografías con todas sus opciones y todas las posibilidades de colores para enlaces, botones, etc.
  • Título: en esta sección podrás determinar si quieres mostrar el título que trae el tema y personalizar algunas opciones.
  • Migas de pan: activa/desactiva desde aquí las migas de pan y configura las opciones de los enlaces.
  • Pie: muestra u oculta en este apartado el apartado de widgets inferior y/o el pie inferior (donde suele ir el copyright y el menú legal). Podrás también seleccionar una plantilla de la biblioteca de ‘Theme Panel’ para sustituir el contenido por defecto.

Ten en cuenta que si dispones de alguna de las extensiones OceanWP FREE o PRO, las opciones de configuración se verán incrementadas y podrás configurarlas también desde la caja de opciones de Ocean Extra.

Electrizanteee!!!!!

En el vídeo que he añadido más abajo te muestro todas las opciones del plugin Ocean Extra 🙂

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.

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.

Personalización completa 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.

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.

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 por defecto de WordPress

Las siguientes opciones vienen por defecto con WordPress y las tendrás disponibles en el apartado ‘Personalización’ independientemente del tema que utilices. De todas formas, voy a enseñarte cómo utilizarlas:

  • Identidad del sitio: en este apartado podrás añadir el título de tu web, la descripción corta y el favicon, que es el icono que se verá en la pestaña del navegador.
  • Menús: aquí vas a poder crear y gestionar tus menús, añadir elementos, reordenarlos y controlar las ubicaciones de cada uno de ellos. De todas formas, te recomiendo que la gestión de menús la realices desde el apartado de WordPress ‘Apariencia/Menús’, ya que es bastante más intuitivo que este.

    En OceanWP vas a poder colocar menús en la barra superior, en la cabecera, en el pie de página e incluso vas a poder crear menús personalizados para móvil.

  • Widgets: en esta sección podrás gestionar los widgets que aparecen en las zonas del tema habilitadas para incluirlos, que son 3 sidebars y 4 zonas del pie de página.
  • Ajustes de portada: la información que aparece en este apartado sirve para configurar el tipo de contenido que se mostrará en la página de inicio de tu web y para decidir cuál será la página de tu sitio que albergará tus entradas (suele ser el Blog o una página de Noticias).

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’:

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

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

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

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

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

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.

  • 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 personalizaciones avanzadas con 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 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.

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.

¡Hey! ¿Te apetecería recibir CONTENIDOS FRESQUITOS en tu correo?

Si buscas info sobre Diseño Web, Elementor, WordPress, Marketing Digital, Redes Sociales y otros temillas refrescantes... ¡apúntate ahora y TE REGALO UN CHECKLIST de comprobaciones que deberías hacer antes de publicar tu web!

Conclusión y opinión personal

En el tiempo que llevo en el diseño de páginas web con WordPress (que no es demasiado, también he de decirlo) 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 🙂

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (5 votos, promedio: 5,00 de 5)
Cargando…

Edu Rubianes

Soy Diseñador Freelance de Páginas Web con WordPress. Mi misión es ayudar a EMPRENDEDORES y PEQUEÑAS EMPRESAS a tener una web moderna y fresca para mejorar su imagen y sus ventas.

Esta entrada tiene 12 comentarios

  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. MUY confiables los post que haces, estimado Edu.
    Muchas gracias por tan buen contenido, bien condensado.
    Un abrazo

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

    1. Thanks to you, Nick, for coming to my humble blog!!! I hope this would be the first of many other more especific posts about OceanWP Theme 🙂

      Have a nice day!!!

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

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

Deja un comentario

Información básica sobre protección de datos

  • Responsable Eduardo Rubianes .
  • Finalidad Moderar los comentarios.
  • Legitimación Tu consentimiento.
  • Destinatarios RAIOLA NETWORKS, S.L..
  • Derechos Acceder, rectificar y suprimir los datos.
  • Información Adicional Puedes consultar la información detallada en el Aviso Legal.

Cerrar menú

Diseña tu web en 7 días

Responsable del fichero: Refrescando Negocios. Finalidad: envío de contenidos e información comercial. Legitimación: gracias a tu consentimiento. Tus datos se encuentran alojados en la plataforma de email marketing Sendinblue, cuyo titular es SendinBlue, Sociedad por Acciones Simplificada, alojada en Francia. Podrás acceder, rectificar, limitar y suprimir tus datos a través del email info@refrescandonegocios.com, así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar mi Política de Privacidad en https://refrescandonegocios.com/aviso-legal.

Minicurso gratuito