Cómo ocultar elementos con CSS en tu sitio web

Independientemente de cuán sorprendente sea su tema, cuán talentosos sean sus desarrolladores o cuán perfecto sea el diseño de su sitio web, es probable que en algún momento desee cambiar algo. No mucho, solo tal vez eliminar  esta barra lateral o hacer que desaparezca ese cuadro de texto. Pero en una sola página, no en todas partes. Para hacer esto, deberá comprender dos propiedades CSS específicas, visibilidad y visualización , que pueden ayudarlo a lograr ocultar ciertos elementos en páginas particulares por medios ligeramente diferentes.

Suscríbete a nuestro canal de Youtube

¿Por qué querrías ocultar elementos?

Uno de los elementos más omnipresentes que los propietarios de sitios web quieren ocultar es el encabezado del sitio. O quizás más específicamente, el menú de navegación del encabezado. Tal vez la sección de comentarios o metadatos de una publicación de blog. La pregunta es, ¿por qué alguien querría hacer eso? ¿Por qué no eliminar por completo los datos del diseño del sitio?

En general, es porque ese elemento singular está en el camino, pero su eliminación no vale la pena volver a escribir el tema o la página para cortar . Tal vez su página Acerca de tenga una lista de publicaciones de blog, pero no desea publicar metadatos allí. No tiene motivos para volver a escribir un archivo de plantilla para esa instancia. Entonces puedes eliminarlo por CSS.

O, como otro ejemplo, desea simplemente eliminar la sección de comentarios en una sola publicación o página sin usar un editor. CSS le permitirá ocultarlo o eliminarlo por completo sin afectar ninguna otra parte del sitio. Una razón popular para ocultar un elemento con CSS en una página o publicación específica es ajustar la fuente o el tamaño del título. Cuando el tema y el diseño del blog aún se aplican, se puede realizar un cambio de fuente estacional para una página específica junto con metadatos ocultos y una barra lateral en unas pocas líneas de código, no un ajuste o rediseño completo de la plantilla.

Sin embargo, sea cual sea el motivo, tiene varias opciones para ocultar elementos.

Cómo encontrar el elemento para ocultar

Si sabe qué elemento desea ocultar pero no cómo llamarlo, siempre puede hacer clic derecho sobre él y seleccionar  Inspeccionar . Esto abrirá el  panel Herramientas de desarrollo en su navegador, lo que le permitirá encontrar el ID de CSS o la Clase que utiliza.

Al hacerlo, el elemento se resaltará al pasar el cursor por encima y hacer clic en la(s) línea(s) correcta(s) en la herramienta de inspección a la derecha.

Después de eso, solo usa esos selectores para ajustar con CSS. Tenga en cuenta que la sintaxis del selector adjunta al elemento al pasar el mouse  (1) es lo que irá en su archivo/campo CSS. Los selectores en línea en (2) son lo que representa el navegador.

Uso de visualización CSS

El método más sencillo para ocultar un elemento es eliminarlo por completo. La  propiedad display:none hace justamente eso. Elimina cualquier elemento al que lo adjunte por completo. Esa parte de la página simplemente ya no se renderizará, y el espacio que ocupa en la página se eliminará y el diseño se reajustará.

Esta podría ser la forma más común de eliminar elementos en una página. Puede usarlo como una eliminación de todo el sitio, o puede apuntar a páginas individuales o tipos de publicaciones.

Usando visibilidad CSS

El CSS de visibilidad: oculto  es muy similar a mostrar: ninguno. En teoría, se pueden utilizar para lograr el mismo objetivo. La gran diferencia, sin embargo, es que con este, no estás eliminando el elemento. Con  la visibilidad , simplemente lo estás haciendo invisible. La mayor diferencia desde el punto de vista del diseño es que con la visibilidad , el elemento oculto seguirá ocupando espacio en el diseño.

Si desea eliminar el encabezado en una página, pero desea mantener el espacio desde la parte superior del DOM , usará esto.

Cuando la página se represente, el espacio seguirá estando allí, pero el elemento no.

Cuándo usar Visibilidad y Cuándo usar Pantalla

La razón principal para usar un bit si oculta el elemento CSS sobre el otro es bastante sencillo. Cuando usa display:none , se oculta toda la herencia de los elementos secundarios. Todo lo que tenga su estilo o esté anidado dentro del elemento simplemente desaparecerá. Con  visibilidad: oculto , debido a que el espacio del elemento permanece, cualquier elemento secundario del elemento seleccionado permanece visible.

Si, por ejemplo, quisiera ocultar el fondo de una fila y una sola columna, usaría  la visibilidad: oculto para mantener el formato y la representación de los otros elementos, eliminando  solo los que especificó. Usar display:none en este caso eliminaría toda la fila o columna, reorganizando el contenido de la página.

Cómo ocultar elementos en páginas específicas en WordPress

Cuando se trata de ocultar elementos en páginas específicas en WordPress con cualquiera de estos métodos, lo más probable es que necesite encontrar la  clase de ID de página para cualquier página específica en la que desee ocultar el elemento. Tenga en cuenta que es simplemente un número de identificación de página, no una identificación de CSS. De hecho, es un selector de clase CSS:  .page-id-1337 , por ejemplo.

Puede encontrar la página o el ID de la publicación en la URL de la página de edición. La forma más rápida es simplemente pasar el cursor sobre el enlace y ver la URL de vista previa.

También puede encontrar este ID en la barra de direcciones URL de cualquier  página de ediciónvista previa . El número que aparece en estas URL es el ID de la página que utilizará en el selector de CSS para orientar elementos en esa página específica y en ningún otro lugar del sitio.

01
02
03
.page-id-55341 header#main-header {
display:none;
}

El código anterior eliminará el encabezado solo en la página con esa ID específica. Donde el siguiente CSS lo eliminaría de cada página y publicaría en el sitio.

01
02
03
header#main-header {
visibility:hidden;
}

Terminando con Hide Element CSS

Independientemente de su razón, saber cuándo y la diferencia entre la visibilidad y la visualización  de las propiedades CSS (y cuándo usarlas) puede ayudarlo a personalizar y resaltar diferentes páginas en sus sitios de WordPress. A veces, es posible que necesite una imagen para que simplemente no aparezca en una página. O tal vez una publicación de blog no necesita mostrar los metadatos o la fecha. Independientemente del elemento que intente eliminar, hay alguna variante de CSS de elemento oculto que puede usar para lograr su objetivo.

¿Qué razones has tenido para ocultar elementos en páginas específicas de WordPress con CSS?

Imagen destacada del artículo por maryliflower / shutterstock.com