Saltar al contenido

OceanWP theme | An谩lisis + Tutorial completo de configuraci贸n y gu铆a de uso 2021

Pero 驴por qu茅 el tema OceanWP est谩 tan bien valorado?聽

Pues ver谩s, en resumen, en mi opini贸n las principales ventajas del tema OceanWP son:

  1. Se pueden crear miles de dise帽os diferentes a partir de un mismo tema. No importa si necesitas algo tan b谩sico como un blog, o tan avanzado como la web y portfolio de este experto dise帽ador web freelance en Barcelona. Con el tema OceanWP podr谩s crear un sitio web profesional y 煤nico de forma f谩cil y sencilla.
  2. Es compatible con Elementor, el constructor visual de WordPress m谩s popular y potente a d铆a de hoy
  3. No hay problemas de mantenimiento ya que cuento con un equipo de soporte de 10
  4. Cuenta con una versi贸n gratuita totalmente funcional para la mayor铆a de webs… 驴qu茅 mas se puede pedir?

OceanWP es altamente personalizable, pero cuando se empieza con WordPress, este tipo de tema puede ser, quiz谩s, confuso. 聽隆Ofrece tantas opciones que los nuevos usuarios tienen problemas para entenderlo! OceanWP es un poco lo contrario del tema de Hestia聽del que ya hemos hablado.

Este art铆culo ha sido escrito en este sentido, para ayudarte a configurar la mayor铆a de sus muchas opciones sin perderte nada.

Resumen contenido

1 – Requisitos previos antes de instalar OceanWP theme

Antes de instalar cualquier tema, ya sea OceanWP o cualquier otro, es necesario que el sitio ya tenga alg煤n contenido y configuraci贸n b谩sica para facilitar la configuraci贸n del tema. De hecho, si tu sitio est谩 completamente vac铆o, tendr谩s problemas para comprobar la ejecuci贸n de las acciones de personalizaci贸n.

As铆 que, normalmente, deber铆as haber hecho los primeros ajustes b谩sicos de WordPress.

Una vez hechos, ya deber铆as haber publicado algunas p谩ginas que se utilizar谩n para construir la arquitectura de tu sitio, as铆 como el men煤 principal.

Aunque sus p谩ginas a煤n no tengan contenido 芦real禄, te permitir谩n navegar, pero sobre todo personalizar la cabecera del sitio con las opciones que ofrece el tema, y tambi茅n publicar dos o tres art铆culos y crear algunas categor铆as. Esto te ayudar谩 a personalizar la parte del blog de su sitio.

Ahora que tienes alg煤n material, puedes definir y personalizar f谩cilmente el dise帽o de tu web.

Todo lo que tienes que hacer es ir a la pesta帽a Apariencia > Temas > A帽adir para buscar, instalar y activar el tema OceanWP.

Una vez instalado el tema, notar谩s que ha aparecido un mensaje 芦este tema recomienda los siguientes plugins [….]禄 No es raro ver aparecer este tipo de mensaje y siempre es importante prestarle atenci贸n, a riesgo de perderse caracter铆sticas importantes.

Tendr谩s que hacer clic en 芦iniciar la instalaci贸n de las extensiones禄 para aprovechar al m谩ximo las ventajas de OceanWP. Este tema recomienda las extensiones Elementor, Ocean Extra y WPForm. Inst谩lalos y act铆valos.

Como resultado de estas acciones, ver谩s que ha aparecido una nueva pesta帽a en la barra lateral izquierda. Este es el Tema del Panel, una especie de tablero para la gesti贸n del OceanWP.

No vamos a detenernos aqu铆 porque, de hecho, se trata de varios atajos que conducen a las caracter铆sticas inicialmente presentes en el personalizador de WordPress, bajo la pesta帽a Apariencia > Personalizar.

Aqu铆 est谩n las muchas opciones de OceanWP disponibles en el personalizador:

Al menos, hay 14 pesta帽as:

La primera pesta帽a es una especie de 芦ad禄 para cambiar a la versi贸n Pro.

Las siguientes 4 pesta帽as son pesta帽as b谩sicas ofrecidas por WordPress:

  • Pesta帽a Identidad del sitio para gestionar el nombre y el tema del sitio (presente inicialmente bajo聽Ajustes > General)
  • Pesta帽a Men煤 para administrar las 谩reas del men煤 (este es un acceso directo a Apariencia > Men煤)
  • Pesta帽a Widgets para gestionar las 谩reas de widgets (que tambi茅n se gestionan desde la pesta帽aApariencia > Widget)
  • Pesta帽a Configuraci贸n de la p谩gina de inicio聽que no es otra cosa que el acceso directo a una opci贸n en la pesta帽a Ajustes > Lectura.

Las otras 9 pesta帽as son proporcionadas por OceanWP para establecer todos los ajustes por defecto del tema. Y aqu铆 es donde podr谩s personalizar todo tu sitio web.

Para hacerlo bien, te recomendamos revisar todas estas pesta帽as y sus innumerables subpesta帽as. Una tras otra. Nada mejor que tener un tema en tus manos y hacerlo a tu gusto. Sin embargo, trataremos de facilitarte este aprendizaje.

Hemos clasificado las preguntas m谩s frecuentes por temas. Esperamos que encuentre las respuestas a sus preguntas en el resto de este art铆culo…

2 – Establecer el aspecto general del sitio

Antes de comenzar a configurar OceanWP en detalle, nos centraremos en los estilos generales a definir.

2.1 Definir colores globales

Es importante que tengas una carta gr谩fica a seguir, o colores relacionados con su identidad visual. Esto es muy importante para establecer la identidad visual.

Primero, ve a la pesta帽a Apariencia > Personalizar > Opciones generales > Estilo general para definir el color dominante de su sitio. Esto se usar谩 芦al tacto禄 aqu铆 y all谩. Por lo tanto, ser谩 el color predominante por defecto. Luego puedes actuar sobre algunos elementos para cambiarlo.

Tambi茅n es aqu铆 donde usted elegir谩:

  • El color general de sus enlaces.
  • El color de sus enlaces en el paso elevado.
  • El color de fondo.

2.2 Definir la disposici贸n del sitio

Definiremos un layout por defecto. Este ser谩 su dise帽o preferido, el que se aplicar谩 a todo tu sitio. M谩s adelante veremos c贸mo definir las excepciones, el prop贸sito de esta configuraci贸n es ahorrar tiempo, por lo que es aconsejable seleccionar el dise帽o que m谩s se utilizar谩s y que m谩s te guste.

En la pesta帽a Apariencia > Personalizar > Opciones generales > Configuraci贸n general聽puedes definir聽el estilo general del dise帽o:

  • Grande: Pantalla completa
  • Caja: El cuerpo del sitio ser谩 m谩s estrecho
  • Separado: Cada secci贸n estar谩 separada por un margen, es muy bueno si quieres a帽adir un color o una imagen de fondo (en este caso, la imagen de fondo se a帽adir谩 desde la pesta帽a聽Apariencia > Personalizar > Opciones generales > Estilo general).

Disposici贸n con disposici贸n separada, as铆 que barra lateral/barra lateral

El estilo de dise帽o de tus p谩ginas:

  • Barra lateral derecha.
  • Barra lateral izquierda.
  • Barra lateral derecha e izquierda.
  • Sin barra lateral.

Estamos hablando del esquema de sus p谩ginas, no afectar谩 a tu blog (archivo, categor铆a, art铆culo) que mantendr谩 su barra lateral.

Disposici贸n sin barra lateral/barra lateral:

Por defecto OceanWP a帽ade la barra lateral a las p谩ginas de su sitio, pocos usuarios quieren mantenerla, la verdad.

Las otras opciones de la ficha Parametrizaciones generales:

Siempre en la cuenta Apariencia > Personalizar > Opciones generales > Configuraci贸n general聽podr谩s configurar el dise帽o de las p谩ginas de resultados de b煤squeda pero tambi茅n activar el opengraph de Facebook.

Sin embargo, me viene a la mente una pregunta: 驴no duplica esta opci贸n la que ofrece Yoast SEO?

2.3 – Mostrar, ocultar o personalizar el t铆tulo de la p谩gina

De forma predeterminada, cuando habilites聽OceanWP, ver谩s un banner debajo del encabezado que muestra el t铆tulo de sus p谩ginas. Tendr谩s la opci贸n de mantener este banner o desactivarlo en todas sus p谩ginas.

Para ello, vaya a la pesta帽a Apariencia > Personalizar > Opciones generales > Opciones generales > Opciones generales > Opciones generales T铆tulo de la p谩gina.

Aqu铆, una opci贸n es confusa: 芦visibilidad禄. Tender铆amos a pensar que es esta opci贸n la que te permite actuar sobre el banner con el t铆tulo. Pero, no. Tendr谩s que ir a la opci贸n 芦estilo禄 y seleccionar el estado 芦oculto禄 en el men煤 desplegable si quieres deshabilitar por completo este banner que muestra el t铆tulo de tus p谩ginas.

Sin embargo, si seleccionas聽芦imagen de fondo禄 puedes a帽adir una imagen de fondo de sus t铆tulos… Aunque es una cuesti贸n de gustos.

Por favor, ten en cuenta lo siguiente:

  • Para influir en el color de sus t铆tulos, siempre est谩 en la pesta帽a Apariencia > Personalizar > Opciones generales > Opciones generales > Opciones generales > Opciones generales T铆tulo de la p谩gina.
  • Para cambiar la fuente de los t铆tulos, tienes que ir a la pesta帽a Apariencia > Personalizar > Tipograf铆a > Tipograf铆a > Tipografia > Titulaci贸n 1 (h1)

2.4 – Definir fuentes en general

Aunque podr谩s actuar en todo tipo de fuentes, recuerde definir la fuente general de su sitio. Es decir, la fuente del cuerpo de la p谩gina, para ello, ve a la pesta帽a Apariencia > Personalizar > Tipograf铆a > Cuerpo de la p谩gina.

Otra opci贸n tambi茅n est谩 disponible en Apariencia > Personalizar > Tipograf铆a > Tipograf铆a > Tipografia >General. Si vives en Francia, el subconjunto 芦lat铆n禄 ser谩 suficiente.

Existen docenas de fuentes disponibles en OceanWP

2.5 – Configure los otros ajustes generales:

Dado que OceanWP es altamente personalizable, encontrar谩s una opci贸n para cada uno de los elementos de dise帽o. Aqu铆 est谩n los m谩s buscados:

  • 驴D贸nde modificar el bot贸n de copia de seguridad? Pesta帽a Apariencia > Personalizar > Opciones generales > Desplazarse聽hacia arriba
  • 驴D贸nde definir el estilo de los botones por defecto? Tabulador Apariencia > Personalizar > Opciones generales > Tema del bot贸n
  • 驴D贸nde personalizar la p谩gina de error 404? pesta帽a Apariencia > Personalizar > Opciones generales > P谩gina de error 404
  • 驴D贸nde definir la paginaci贸n? tabulador Apariencia > Personalizar > Opciones generales > Paginaci贸n

3 – 驴C贸mo personalizar el encabezado de un sitio con OceanWP?

El encabezadotambi茅n llamado header – es una parte del sitio que tiene su importancia en t茅rminos de dise帽o. Nos gusta poder personalizarlo a nuestro gusto: c贸mo organizar el men煤, si a帽adimos una barra superior, qu茅 fuentes y colores usar, d贸nde poner el logo, etc.

La mayor铆a de las opciones de personalizaci贸n de encabezados se encuentran en la secci贸n Apariencia > Personalizar > Encabezado

3.1 – Elige el estilo del men煤

Es en la pesta帽a General (Apariencia > Personalizar > Encabezado > General) es donde encontrar谩s la opci贸n de estilo de tu encabezado. Esta es sin duda la opci贸n m谩s importante. Puedes seleccionar uno de los 8 estilos proporcionados por OceanWP, a saber:

  • Minimal: este es el men煤 por defecto de OceanWP.
  • Transparente: el men煤 no tiene color de fondo.
  • Men煤 superior: el men煤 principal est谩 situado en una barra superior.
  • Pantalla completa: la navegaci贸n est谩 oculta, al hacer clic en el 芦sandwich禄, el men煤 cubre toda la pantalla.
  • Centrado: el logo, o el t铆tulo de su sitio si no usa un logo, ser谩 centrado.
  • Medio: el logo pasa sobre los elementos de navegaci贸n.
  • Vertical: el men煤 est谩 colocado a la izquierda por defecto pero las opciones le permitir谩n colocarlo a la derecha.
  • Custom: es un encabezado personalizado que puede importar desde su biblioteca.

Ten en cuenta que, dependiendo de tu elecci贸n, aparecer谩n nuevas opciones justo debajo. No dude en desplazarse para llegar a la totalidad de las opciones de cada estilo de men煤.

Puedes encontrar opciones comunes para cada men煤, como colores de fondo, colores de enlace, m谩rgenes, etc. Pero tambi茅n opciones espec铆ficas para cada tipo de opci贸n, como por ejemplo a帽adir contenido adicional a trav茅s de los atajos proporcionados por OceanWP聽que existen para el estilo m铆nimo y transparente, por ejemplo.

3.2 – A帽adir una imagen en el fondo del men煤 / encabezado

OceanWP聽te permite agregar un medio en el encabezado. Todo lo que tiene que hacer es ir a la pesta帽a Apariencia > Personalizar > Encabezado > Encabezado de medios. Cualquiera que sea tu soporte, las dimensiones recomendadas son 2000*1200 px:

  • Podr谩s insertar un v铆deo. Si lo deseas, puede a帽adir la opci贸n de a帽adir un enlace a YouTube.
  • Alternativamente, tambi茅n puedes insertar una imagen.

Las opciones muy interesantes te permiten a帽adir un filtro de color opaco sobre el soporte.聽Gracias a un men煤 desplegable, puedes elegir la posici贸n. Generalmente, es la posici贸n centrada la que se busca, pero puede ser una buena opci贸n escoger otra posici贸n.

Nota importante: cuando a帽adas sus medios, notar谩s que el men煤 es demasiado estrecho para distinguir su imagen o v铆deo. Si este es tu caso, entonces tendr谩s que jugar con los m谩rgenes internos del men煤. Para ello, deber谩s cambiar la pesta帽a y volver a la anterior Apariencia > Personalizar > Encabezado > General. Aqu铆 es donde encontrar谩s la opci贸n de a帽adir relleno en la parte inferior y superior (margen interno) para ampliar la caja que muestra el material.

3.3 – Agregar un logo en el encabezado o cambiar el color y la fuente del t铆tulo en el encabezado

OceanWP llama 芦Logo禄 a la ubicaci贸n para agregar el logotipo de su empresa. Si no importa un logotipo, el nombre de su sitio, normalmente el mismo que el de tu marca o empresa, se mostrar谩 en esta ubicaci贸n.

Por lo tanto, es necesario Apariencia > Personalizar > Encabezado > Logotipo a qui茅n encontrar谩 estas caracter铆sticas.

Si decides conservar el t铆tulo en lugar de importar un logotipo, es aqu铆 donde puede cambiar el color del t铆tulo y el color del mismo. Sin embargo, si desea cambiar la fuente de este t铆tulo, tendr谩 que ir a Apariencia > Personalizar > Tipograf铆a > Logotipo

3.4 – Perfeccionar el estilo del men煤: efectos, colores, submen煤 y tipograf铆a…

Por 煤ltimo, una vez que haya identificado el tipo de encabezado que mejor se adapta a tu proyecto, puede refinar el estilo de su men煤 principal.

Est谩 en el Apariencia > Personalizar > Encabezado > Men煤 que puedes jugar con efectos muy bonitos: a帽ade una animaci贸n y un color al pasar el rat贸n por encima de los enlaces de tu men煤.

Un poco m谩s abajo en las opciones, acceder谩s a muchos ajustes para decidir los colores de los enlaces activos, los enlaces flotantes, los colores de fondo e incluso para los subelementos si su men煤 est谩 compuesto de ellos.

Incluso con todas estas opciones, no encontrar谩s d贸nde administrar las fuentes. Para ello, tendr谩s que ir a la pesta帽a Apariencia > Personalizar > Tipograf铆a > Men煤 principal y[…] Men煤 principal: lista desplegable

3.5 – Agregar iconos de redes sociales en el encabezado

Una opci贸n te permite a帽adir iconos de muchas redes sociales. Tendr谩s que ir a聽Apariencia > Personalizar > Encabezado > Men煤 social y hacer clic en 芦Habilitar Men煤 Social禄. Todo lo que tienes que hacer es a帽adir los enlaces a tus redes sociales para que aparezcan en el men煤. Puedes elegir entre 4 estilos diferentes.

Advertencia: si usas el estilo M铆nimo o el estilo Transparente para tu tipo de cabecera, no busques m谩s, los iconos de las redes sociales no aparecer谩n en tu men煤.

3.6 – Personalizar el men煤 en versi贸n m贸vil

A煤n en las personalizaciones de cabecera, la 煤ltima pesta帽a te permitir谩 definir el estilo de su men煤 m贸vil (Apariencia > Personalizar > Encabezado > Men煤 M贸vil).

En esta pesta帽a, la primera opci贸n le permitir谩 definir el 芦breakpoint禄, es decir, el tama帽o de la pantalla desde la que debe mostrarse el men煤 de su sitio en forma de 芦hamburguesa禄.

Es al desplazar el rat贸n hacia abajo que ver谩 un mont贸n de otras opciones como el color del enlace, el color del cursor, el estilo del icono, etc.

3.7 – Personalizar la 芦barra superior禄

La barra superior es un 谩rea que se colocar谩 en la parte superior de la pantalla, encima del men煤 principal y el logotipo. OceanWP ha proporcionado una nueva 谩rea de men煤 aqu铆, pero no s贸lo eso.

Primero, puedes crear un nuevo men煤 en la pesta帽a Apariencia > Men煤 > Crear. Tienes que a帽adir los elementos que desee, como por ejemplo la p谩gina de contacto.

Entonces, ser谩 necesario asegurarse de que esta barra superior est茅 visible, para ello, vaya aApariencia > Personalizar > Barra superior > General y marque 芦activar la barra superior禄 (o desmarcarla si no desea que aparezca). Aprovechar谩 la oportunidad para definir el estilo de la barra y los diferentes colores.

En la pesta帽a Apariencia > Personalizar > Barra superior > Contenido聽puedes a帽adir un texto que no sea un elemento del men煤. Un simple texto para a帽adir un n煤mero de tel茅fono, una direcci贸n de correo electr贸nico o incluso un texto promocional, por ejemplo.

Finalmente, en la pesta帽a Apariencia > Personalizar > Barra superior >聽Redes Sociales podr谩s insertar iconos de redes sociales. Necesitar谩s a帽adir enlaces a sus redes para visualizarlos.

Ten cuidado de que estos iconos no sean redundantes con los insertados en el men煤 principal, seguramente tendr谩s que hacer una elecci贸n.

Para la fuente de texto que se encuentra en esta barra superior, deber谩s ir a聽Apariencia > Personalizar > Tipograf铆a > Barra superior para cambiarlo.

4 – Personalizar la parte del blog con OceanWP

Si est谩s considerando mantener una parte de 芦blog禄 dentro de tu sitio WordPress, o incluso si simplemente desea iniciar un blog en s铆 mismo, estar谩s encantado de poder personalizar esta parte del sitio. Cuando vayas a la pesta帽a Apariencia > Personalizar > Blog聽s贸lo ver谩 dos subpesta帽as:

4.1 – Entradas de blog

Aqu铆 es donde definir谩s el dise帽o de tu p谩gina de blog y los archivos de tu blog (como la p谩gina de categor铆as, por ejemplo).

Como regla general, no solemos tener la posibilidad de elegir el dise帽o de esta p谩gina, que son p谩ginas din谩micas en las que se colocar谩 cada nuevo art铆culo publicado.

En esta pesta帽a 芦entradas de blog禄聽puedes elegir:

  • Disposici贸n: posici贸n de la barra lateral o anchura total (sin barra lateral)
  • El tipo de etiquetado HTML de los t铆tulos: H2 por defecto
  • El estilo del blog: imagen grande, cuadr铆cula o miniatura

Adem谩s, tendr谩s el lujo de poder elegir la posici贸n de cada elemento que puedes arrastrar y soltar y activar/desactivar.

Lo mismo se puede hacer con las 芦Metas禄, esta informaci贸n que est谩 presente en cada art铆culo del blog (autor, fecha de publicaci贸n, categor铆a y n煤mero de comentarios).

4.2 – Art铆culo 煤nico

Aqu铆 definir谩s聽el dise帽o de la p谩gina de tus art铆culos (la que utiliza el singular archivo.php de OceanWP).

En esta pesta帽a art铆culo exclusivo聽encontrar谩 muchas opciones que te permitir谩n crear un dise帽o ultra personalizado:

  • La disposici贸n: barra lateral a la derecha, a la izquierda, a ambos lados o sin barra lateral…
  • El marcado de los t铆tulos.
  • La elecci贸n del t铆tulo a mostrar: 芦blog禄 o 芦t铆tulo del art铆culo禄.
  • La opci贸n de mostrar la imagen del art铆culo en el fondo de la cabecera.
  • La posici贸n del t铆tulo y la ruta del pan rallado: derecha, centro o izquierda.
  • La posici贸n: aqu铆 estamos hablando de la posici贸n de la imagen de fondo del t铆tulo.
  • La posici贸n de los elementos a visualizar: haga clic en el icono del ojo para activarlos/desactivarlos
  • La meta-caja (informaci贸n del art铆culo).
  • Art铆culos relacionados

4.3 – Borrar o personalizar la ruta del pan rallado

No es en las opciones del blog donde podr谩s actuar en el camino de la miga de pan, no, lo encontrar谩s en Apariencia > Personalizar > Personalizar Opciones generales > T铆tulo de la p谩gina.

A medida que te desplazas con el rat贸n, ver谩s una casilla de verificaci贸n o desmarque para habilitar o deshabilitar la ruta de la miga de pan.

Tambi茅n podr谩 elegir su posici贸n, el color de los enlaces y el color cuando el rat贸n pase el rat贸n por encima.

5 – Personalizar el pie de p谩gina con OceanWP

El pie de p谩gina es el footer de su sitio WordPress. Aparece en todas las p谩ginas y art铆culos de su sitio. Este es el lugar ideal para a帽adir cr茅ditos/copyright y widgets para ayudar a la gente a contactarte o encontrarte.

El pie de p谩gina tem谩tico del OceanWP se divide en dos partes:

  • el pie de p谩gina de la parte Widget: para mostrar los famosos widgets
  • la parte inferior del pie de p谩gina: para mostrar los cr茅ditos pero tambi茅n el men煤 del pie de p谩gina.

5.1 – Widgets de pie de p谩gina

Si no est谩s considerando a帽adir widgets al pie de p谩gina de su sitio, ser铆a una buena idea desactivar esta ubicaci贸n. Para ello, ve a Apariencia > Personalizar > Personalizar Widgets de pie de p谩gina y desactive la opci贸n 芦Habilitar widgets de pie de p谩gina禄.

Si, por otro lado, deseas mostrar widgets en la parte inferior de la p谩gina, mant茅n la marca de verificaci贸n en esta casilla y configura las pocas opciones disponibles para usted:

  • Visibilidad: en todos los dispositivos o s贸lo en las versiones para PC
  • Hacer que el 谩rea de widgets sea fija
  • A帽adir un efecto de paralaje
  • Definir el n煤mero de columnas: 1, 2, 3 o 4
  • A帽adir margen interno (acolchado)
  • Definir el fondo, el texto y los colores de los enlaces

Para cambiar la fuente (typo) de los t铆tulos de tus widgets, estar谩s en la pesta帽a Apariencia > Personalizar > Tipograf铆a > Tipograf铆a > Tipografia > T铆tulo del widget de pie de p谩gina que ser谩s capaz de realizar esta acci贸n.

Para definir los widgets que se mostrar谩n en la parte inferior de la p谩gina, puedes utilizar la pesta帽a Apariencia > Widgets. Arrastra los widgets a las ubicaciones apropiadas. Lee este art铆culo sobre los widgets para obtener m谩s informaci贸n.

5.2 – Los cr茅ditos del pie de p谩gina

Por defecto, los cr茅ditos que aparecen en el pie de p谩gina del OceanWP son 芦Copyright 2018 – OceanWP Theme by Nick禄.

Obviamente, querr谩s cambiar este texto.

Para ello, un campo dedicado te dar谩 la bienvenida a tus cambios en la pesta帽a Apariencia > Personalizar > Personalizar Parte inferior del pie de p谩gina. Podr谩s ingresar no s贸lo sus propios derechos de autor, sino tambi茅n un c贸digo abreviado proporcionado por OceanWP que se enumera aqu铆.

Por ejemplo, introduciendo[oceanwp_date] el a帽o se mostrar谩 en tiempo real: 2018, 2019, 2020… y no tendr谩 que cambiar tu cada a帽o nuevo.

Para cambiar el tipo de letra (typo) de los cr茅ditos del pie de p谩gina, estar谩 en la pesta帽a Apariencia > Personalizar > Tipograf铆a > Tipograf铆a > Tipografia > Derechos de autor del pie de p谩gina que usted ser谩 capaz de realizar esta acci贸n.

5.3 – El men煤 de pie de p谩gina

OceanWP ha proporcionado una ubicaci贸n para un men煤 en la parte inferior de la p谩gina. El men煤 debe crearse en la pesta帽a Apariencia > Men煤 como siempre lo haces. Este men煤 s贸lo necesita ser asignado a la posici贸n 芦Pie de p谩gina禄.

Para cambiar los colores, tambi茅n estar谩 en la pesta帽a Apariencia > Personalizar > Personalizar Parte inferior del pie de p谩gina.

Para cambiar el tipo y tama帽o de fuente, estar谩 en la pesta帽a Apariencia > Personalizar > Tipograf铆a > Tipograf铆a > Tipografia > Men煤 de pie de p谩gina

Ten en cuenta que no hay posibilidad de a帽adir iconos de redes sociales en el pie de p谩gina. Los 煤nicos lugares donde puedes mostrarlos son el men煤 principal y la barra superior (como se ha visto anteriormente en este art铆culo)

6 – Diferenciar entre personalizaciones por defecto y 煤nicas con Ocean Extra

Hasta esta parte del art铆culo, hemos configurado el dise帽o del sitio como un todo. Esto significa que todos los ajustes seleccionados ser谩n nuestros ajustes por defecto.

Sin embargo, por algunas razones, es posible que necesites definir ajustes 煤nicos en algunas p谩ginas solamente.

Esta funcionalidad es posible gracias a la activaci贸n de la extensi贸n Ocean EXTRA, disponible despu茅s de la instalaci贸n del tema OceanWP (v茅ase el cap铆tulo 1 – requisitos previos)

Este plugin a帽ade una caja en la parte inferior del editor de WordPress, que variar谩 ligeramente dependiendo de si est谩 editando una p谩gina o un art铆culo (la tableta nr. 9 no estar谩 presente en sus p谩ginas):

Con este cuadro, puedes sustituir la configuraci贸n predeterminada para especificar una sola regla para el art铆culo o la p谩gina que est谩 editando.

Para ello, EXTRA te ofrece de 8 a 9 fichas:

  1. Principal: aqu铆 puedes modificar el dise帽o de esta p谩gina o art铆culo en particular. El ajuste por defecto es el ya especificado en el cap铆tulo 2.2 de este art铆culo.
  2. C贸digos cortos: los campos est谩n disponibles para a帽adir c贸digos cortos en lugares espec铆ficos de su sitio. Como recordatorio, aqu铆 est谩 la lista de atajos.
  3. Encabezado: puedes cambiar el dise帽o del encabezado, como quitar la barra superior s贸lo para esta p谩gina.
  4. Logo: gracias a este campo, puede considerar la posibilidad de mostrar un logotipo diferente en cada p谩gina de su sitio.
  5. Men煤: aqu铆 se puede redefinir todo en los ajustes del men煤, tales como colores, fuentes, tama帽os, etc.
  6. T铆tulo: puedes mostrar o desactivar el t铆tulo de la p谩gina. O mejor a煤n, puede personalizar el texto, a帽adir un subt铆tulo, etc.
  7. Ruta de la miga de pan: Modifica f谩cilmente la ruta de la miga de pan s贸lo para esta p谩gina o art铆culo.
  8. Pie de p谩gina: puede mostrar o desactivar las 谩reas de widgets o incluso los derechos de autor.
  9. Art铆culo: esta pesta帽a s贸lo estar谩 presente cuando edites tus art铆culos. Puede a帽adir contenido espec铆fico para cada art铆culo como, por ejemplo, una cita.

Importante: las opciones ofrecidas por Ocean Extra est谩n dise帽adas para reescribir las reglas de dise帽o por defecto, ya configuradas de antemano… Ser铆a contraproducente no configurar los ajustes por defecto y tener que configurar el cuadro extra en cada p谩gina o art铆culo… Si tu dise帽o b谩sico es suficiente, no tendr谩s casi nada que introducir en este cuadro.

7 – Extensiones para OceanWP

OceanWP recomienda usar Elementor, Ocean Extra (que acabamos de ver) y WPForm, sin embargo, puede optar por usar otras extensiones.

Aparte de Ocean Extra, que es irremplazable para este tema, Elementor podr铆a ser reemplazado por su constructor favorito e incluso por Gutenberg ya que ambos son compatibles, para los formularios, puede probar OceanWP con Caldera Forms o Gravity Form. No debe haber conflictos.

OceanWP tambi茅n ofrece un paquete de extensiones premium incluyendo muchos plugins para mejorar las caracter铆sticas nativas. El precio de este paquete premium es de 39鈧/a帽o:

  • Portfolio es una extensi贸n que te permite agregar un portafolio a su sitio. Puedes mostrarlo en cualquier p谩gina utilizando un c贸digo abreviado. Adem谩s, la cartera incluye una barra de filtros.
  • Woo Popup es una extensi贸n de WooCommerce que te permite mostrar un mensaje personalizado cuando haces clic en el bot贸n 芦A帽adir al carrito禄.
  • El plugin Sticky Footer聽te permite personalizar su pie de p谩gina. Puedes a帽adir un men煤 en la barra de pie de p谩gina o texto, personalizar su color, hacer que sea fijo, etc.
  • Ocean Hooks es una extensi贸n que te permite usar c贸digos abreviados y a帽adir c贸digo a su tema para controlar los diferentes elementos del tema sin tener que crear un tema hijo.
  • Elementor Widgets es una extensi贸n para mejorar Elementor a帽adiendo nuevos elementos al creador de p谩ginas.
  • Side Panel es un plugin que le permite a帽adir una barra lateral altamente personalizable a su sitio web.
  • El plugin Sticky Header propone a帽adir un encabezado fijo (sticky = sticky) y determinar su visualizaci贸n y comportamiento.
  • Con el pie de p谩gina, puedes a帽adir una secci贸n en la parte superior de su pie de p谩gina. Ser谩s libre de a帽adirle un enlace o un bot贸n de llamada a la acci贸n.

La versi贸n gratuita de OceanWP ya es muy rica en caracter铆sticas, encontrar谩 muchas extensiones gratuitas en el repositorio oficial, si茅ntete libre de navegar por ellas =>descubra todas las extensiones gratuitas de OceanWP.

8 – Optimizar OceanWP

Es cierto que con todas estas opciones, uno podr铆a preguntarse si OceanWP ralentizar谩 tus sitios de WordPress. Por supuesto, cuantas m谩s opciones haya, m谩s c贸digo habr谩 en los archivos de tema.

Precisamente, podr谩 actuar sobre algunas optimizaciones yendo a la pesta帽a聽Panel tem谩tico > Guiones y estilo. Puedes desactivar los scripts y estilos que no necesites. Esto mejorar谩 la velocidad de carga de tu sitio web. Todo lo que tienes que hacer es desmarcar las opciones no utilizadas.

[Volver al resumen]

9 – Funcionalidades de importaci贸n/exportaci贸n

Adem谩s de todas las opciones que ofrece OceanWP, tambi茅n puedes ahorrar mucho tiempo importando o exportando configuraciones o demostraciones. OceanWP tambi茅n te permite hacer esto.

9.1 – Importar una demo de OceanWP

Aunque no siempre es bueno importar un dise帽o completo, puede ser tu elecci贸n. Si deseas realizar esta acci贸n, deber谩s agregar un plugin: Importaci贸n de Demo de Ocean.

Gracias a 茅l, 隆puede instalar un dise帽o predefinido con un solo clic!

Despu茅s de instalar Ocean Demo Import, una nueva subpesta帽a estar谩 disponible bajo 芦Theme Panel禄, esta es la pesta帽a 芦install demos禄. A continuaci贸n, descubrir谩s 13 dise帽os para importar de forma gratuita y que podr谩 previsualizar en directo.

Al hacer clic en una demo, se abrir谩 una ventana emergente que le propondr谩 a帽adir nuevas extensiones para que la importaci贸n de la maqueta sea coherente con la demo inicial.

Cuando el bot贸n muestra 芦install now禄 (instalar ahora), significa que el m贸dulo est谩 libre. Cuando el bot贸n muestra 芦get this module禄, significa que se trata de una extensi贸n premium. Pero ese no es el problema.

Se aconseja precauci贸n si deseas聽instalar una demo en un sitio que ya tiene contenido y el siguiente paso de la importaci贸n ser谩 decisivo.

Si comprueba las 3 opciones de importaci贸n en un sitio que ya tiene su propio contenido, la importaci贸n podr铆a eliminar sus antiguas configuraciones de personalizaci贸n, men煤s, p谩ginas, arquitectura, etc….

En cualquier caso, el tema recomienda encarecidamente instalar estas demos en sitios de prueba o en sitios 芦nuevos禄.

Si茅ntete libre de instalar un WordPress en un entorno local para hacer sus pruebas de importaci贸n, es m谩s prudente.

9.2 – Importar o exportar la configuraci贸n del tema

Otra posibilidad: si utiliza OceanWP regularmente, puede realizar r谩pidamente las parametrizaciones b谩sicas del Customizing importando las parametrizaciones de un centro A para insertarlas en un centro B.

Luego vaya a la pesta帽a Importar/Exportar situado debajo de Panel tem谩tico.

Desde la inserci贸n derecha (caja azul), puedes exportar los ajustes en formato.json. Cuando configures un nuevo sitio, utilizar谩 la funci贸n de importaci贸n (cuadro rosa) que te permitir谩 imprimir el archivo.json exportado anteriormente.

10 – VideoTutorial OceanWP en YouTube

Un video que habla mejor que 1000 palabras, te sugiero que descubras en el video el tema gratuito de OceanWP (unos 25mn), lo que me gusta, lo que no me gusta y c贸mo usarlo lo mejor posible.

Conclusi贸n

Aquellos que est茅is buscando un buen dise帽o gratuito de WordPress apreciar茅is lo que OceanWP ofrece.

El tema coloca la mayor铆a de las opciones de dise帽o y estilo en el personalizador de temas de WordPress para que puedas ver c贸mo se ven las modificaciones en tiempo real.

Los principiantes apreciar谩n lo mucho que esto ayuda a hacer cambios.

Los ajustes adicionales que se muestran en el editor visual de WordPress se pueden utilizar para personalizar de forma 煤nica cada una de las p谩ginas de su sitio web. Esto abre un n煤mero ilimitado de posibilidades sobre c贸mo construir su sitio web.

Los creadores de p谩ginas tambi茅n son compatibles, ya que puede deshabilitar elementos de la p谩gina como el encabezado, el pie de p谩gina y las barras laterales con s贸lo hacer clic en un bot贸n. Cabe se帽alar, sin embargo, que OceanWP tiene mejor integraci贸n con Elementor que otros creadores de p谩ginas.

Creo que los desarrolladores deber铆an mejorar el proceso de instalaci贸n de OceanWP para principiantes y quiz谩s a帽adir la funcionalidad de Ocean Extra directamente en el tema en s铆; sin embargo, una preocupaci贸n mayor es la implementaci贸n de las demostraciones de temas libres de OceanWP.

El sistema de demostraci贸n tem谩tica es sin duda una de las mejores caracter铆sticas de OceanWP, ya que permite a los usuarios acceder a un cat谩logo de dise帽os de alta calidad.

Por lo tanto, es decepcionante que cada demo de tema libre requiera una extensi贸n de plugin premium para funcionar correctamente.

A este respecto, la versi贸n completa de OceanWP es una mejor representaci贸n de lo que OceanWP puede hacer.

Cada extensi贸n de plugin premium tiene un precio competitivo de $9.99 por a帽o, sin embargo, la licencia personal que est谩 disponible por 34.99鈧 es la mejor compra.

Al comprar el paquete de extensiones principales obtendr谩 un a帽o completo de soporte y actualizaciones, acceso a todas las extensiones de plugins premium y acceso a todas las demostraciones de temas profesionales.

Si deseas obtener m谩s informaci贸n sobre OceanWP,聽te recomiendo que instales la versi贸n gratuita para ver por s铆 mismo c贸mo funciona.

Puedes obtener m谩s informaci贸n sobre el tema, las demostraciones de temas disponibles y las extensiones de plugins disponibles en el sitio web oficial de OceanWP.

Echa un vistazo a su extensa 谩rea de documentaci贸n tambi茅n. Incluye tutoriales en v铆deo y tutoriales escritos de las principales caracter铆sticas de OceanWP y explica c贸mo funciona cada extensi贸n de plugin.

OceanWP theme | An谩lisis + Tutorial completo de configuraci贸n y gu铆a de uso 2021, 5 / 5 (3 votos)