No importa 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 desee marcar la diferencia en algún momento. No demasiado, solo tal vez tómalo este barra lateral o hacer que el cuadro de texto desaparecerá. Pero por un lado, no en todas partes. Para hacer esto, debe comprender dos propiedades CSS específicas, visibilidad y monitorque puede ayudarlo a ocultar algunos elementos en diferentes páginas de una manera ligeramente diferente.
Suscríbete a nuestro canal de Youtube
¿Por qué quieres ocultar elementos?
Uno de los elementos más ubicuos que los propietarios de sitios web quieren ocultar es el encabezado del sitio web. O tal vez más precisamente, el menú de navegación del encabezado. Esto podría ser una sección de metadatos o un comentario de una publicación de blog. La pregunta es ¿por qué alguien haría esto? ¿Por qué no eliminar completamente los datos del diseño de su sitio web?
Básicamente, esto se debe a que este único elemento está en el camino, pero eliminarlo no vale la pena volver a escribir el motivo o la página que se va a cortar.. Su página Acerca de puede tener una lista de publicaciones de blog, pero no desea incluir metadatos allí. No tiene motivos para volver a escribir el archivo de plantilla para esta instancia. Entonces puedes eliminarlo con CSS.
O, como otro ejemplo, simplemente desea abandonar la sección de comentarios en una publicación o página sin usar un editor. CSS le permitirá ocultarlo o eliminarlo por completo sin afectar otras partes de su sitio web. Una razón popular para ocultar un elemento CSS en una página o publicación específica es ajustar el tamaño de la fuente o el encabezado. Cuando el tema y el diseño del blog aún se aplican, el cambio de fuente estacional para una página específica junto con metadatos ocultos y una barra lateral se puede realizar en unas pocas líneas de código en lugar de personalizar o rediseñar completamente la plantilla.
Independientemente del motivo, tiene muchas opciones para ocultar elementos.
Cómo encontrar un elemento para ocultar
Si sabe qué elemento desea ocultar pero no sabe cómo nombrarlo, siempre puede hacer clic con el botón derecho en él y seleccionarlo. Controlar. se abrirá Herramientas de desarrollo una ventana en su navegador que le permite encontrar el ID de CSS o la clase que está utilizando.
Una vez hecho esto, el elemento se resaltará cuando pase el mouse sobre él y haga clic en la línea correspondiente en la herramienta de inspección de la derecha.
Luego, solo usa estos selectores para personalizar a través de CSS. Observe que la sintaxis del selector adjunta al elemento al pasar el mouse (1) lo que entra en su archivo/campo CSS. Selectores en línea en (2) son representados por el navegador.
Uso de visualización CSS
La forma más fácil de ocultar un elemento es eliminarlo por completo. los no aparece bienes raíces hace precisamente eso. Elimina por completo cualquier elemento al que lo adjunte. Esa parte de la página ya no se representará más, el espacio que ocupa en la página se eliminará y el diseño se ajustará nuevamente.
Esta puede ser la forma más común de eliminar elementos de una página. Puede usarlo como una eliminación de todo el sitio, o puede apuntar a páginas específicas o tipos de publicaciones.
Uso de visibilidad CSS
los visibilidad: oculto CSS es muy similar a No aparece. En teoría, se pueden utilizar para lograr el mismo objetivo. Sin embargo, la gran diferencia es que no elimina el elemento en este caso. DE visibilidadsimplemente lo haces invisible. La mayor diferencia desde el punto de vista del diseño es que z visibilidadel elemento oculto seguirá ocupando espacio en el proyecto.
Si desea eliminar el encabezado de la página, pero desea mantener el espacio desde la parte superior CASAlo usarás
Cuando la página se represente, el espacio seguirá estando allí, pero el elemento no.
Cuándo usar la visibilidad y cuándo usar la pantalla
La razón principal para usar un bit si oculta el elemento CSS sobre el otro es bastante simple. cuando usas no aparece, toda la herencia de elementos secundarios está oculta. Todo lo que tenga estilo o esté anidado dentro de un elemento simplemente desaparecerá. DE visibilidad: ocultodado que el espacio del elemento permanece, todos los elementos secundarios del elemento seleccionado permanecen visibles.
Por ejemplo, si desea ocultar el fondo de la fila y una sola columna, utilizará visibilidad: oculto para conservar el formato y la representación de otros elementos, elimine sólo los que especificó. Por no aparece en este caso, eliminará 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 de WordPress utilizando uno de estos métodos, lo más probable es que tenga que encontrarlos La clase de ID de página para cualquier página específica en la que desee ocultar un elemento. Tenga en cuenta que esto es simplemente una ID de página, no una ID de CSS. En realidad es un selector de clase CSS: .ID-paginas-1337por 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 pasar el cursor sobre el enlace y mostrar la URL de vista previa.
También puede encontrar este ID mirando cualquier barra de URL Editar o Anuncio lado. El número proporcionado en estas URL es el ID de la página que usará en el selector de CSS para orientar elementos en esa página en particular y en ningún otro lugar de su sitio.
.page-id-55341 header#main-header {
display:none;
}
El código anterior eliminará el encabezado solo en la página con ese identificador en particular. Donde el siguiente CSS lo eliminará de cada página y publicará en el sitio.
header#main-header {
visibility:hidden;
}
Envolviendo con CSS Hide Element
Sea cual sea el motivo, saber cuándo y cuál es la diferencia entre las propiedades CSS visibilidad y monitor (y cuándo usarlos) 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 la página. O tal vez una publicación de blog no tiene que incluir metadatos o una fecha. Independientemente del elemento que intente eliminar, hay alguna variante de CSS del elemento oculto que puede usar para lograr su objetivo.
¿Por qué razones tuviste que ocultar elementos en ciertas páginas de WordPress con CSS?
Artículo destacado con una imagen de maryliflower / shutterstock.com
