17 consejos CSS para ahorrar tiempo a los usuarios de WordPress
Publicado: 2023-03-13WordPress ofrece infinitas posibilidades para diseñar y personalizar su sitio web. En este artículo, compartiremos algunos consejos prácticos de CSS específicamente para usuarios de WordPress, desde diseñar el encabezado hasta modificar las fuentes.
Si bien WordPress ofrece muchos temas y plantillas prediseñados, a veces es necesario tomar el asunto en sus propias manos y realizar personalizaciones con CSS.
Si alguna vez ha hecho alguna de estas preguntas mientras trabaja en su sitio de WordPress:
- "¿Cómo elimino el botón 'leer más'?"
- "¿Cómo puedo cambiar el color de este enlace?"
- "¿Cómo puedo hacer para que no se pueda hacer clic en este enlace pero mantengo el texto en la página?"
…luego sigue leyendo para aprender algunos trucos CSS valiosos para tu sitio web.
En este tutorial, cubriremos:
- Consejos CSS de WordPress
- Centrar un elemento horizontal y verticalmente
- Cambiar el color del enlace
- Eliminar un enlace
- Deshabilitar un enlace (el enlace permanece visible pero los usuarios no pueden hacer clic en él)
- Cambiar el color de los enlaces al pasar el mouse
- Enlaces de estilo
- Aplicar estilo a un botón
- Cambiar la fuente de una sección
- Crear un encabezado fijo
- Crea un encabezado adhesivo con efecto de sombra
- Agregar un color de fondo a una sección
- Cambiar el color de fondo del cuerpo.
- Cambiar el color de una palabra o frase específica
- Crear un borde alrededor de una imagen
- Crear un efecto de desplazamiento sobre una imagen
- Aplicar estilo a un formulario
- Crear un diseño responsivo
- Lleva tus habilidades CSS al siguiente nivel
Consejos CSS de WordPress
Las únicas dos cosas que necesitas saber para implementar estos consejos son:
- Cómo funciona CSS
- Cómo agregar CSS a WordPress
Nota: CSS no es riesgoso, por lo que si cometes un error puedes simplemente eliminar tu código o modificarlo... no romperá nada :)
Dejando eso de lado, pasemos directamente a algunos consejos prácticos de CSS con ejemplos para que puedas probarlo en tu propio sitio de WordPress:
Centrar un elemento horizontal y verticalmente
Para centrar un elemento (como una imagen, texto o un div) tanto horizontal como verticalmente, utilice el siguiente código CSS:
.element {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
En este código, la propiedad position: relative se utiliza para posicionar el elemento en relación con su ancestro posicionado más cercano. Las propiedades top: 50% e left: 50% mueven el elemento al centro de su contenedor. Finalmente, la transform: translate(-50%, -50%) centra el elemento tanto horizontal como verticalmente moviéndolo hacia atrás el 50% de su propio ancho y alto.
Cambiar el color del enlace
.item-class{
color : blue;
}
Puedes usar colores como blanco, negro, azul, rojo… pero es posible que quieras usar colores específicos.
En este caso, puedes hacerlo así:
.item-class{
color : #F7F7F7;
}
Si está buscando crear una paleta de colores para el diseño de su sitio web, intente utilizar la herramienta Paletton. ¡Es muy útil!
Nota: Si quieres combinar elementos, es bastante fácil.
Por ejemplo, digamos que desea desactivar el clic y volver a poner el enlace en negro.
Puedes usar este código:
.item-class{
pointer-events : none;
color : black;
}
Eliminar un enlace
.item-class{
display : none;
}
Nota: A veces es posible que necesites poner una a después de tu clase para que funcione, así:
.item-class a{
display : none;
}
Intente agregar a o experimentar sin él para ver si su código funciona o no. Simplemente agregue su CSS, guárdelo y verifique su interfaz.
Deshabilitar un enlace (el enlace permanece visible pero los usuarios no pueden hacer clic en él)
Nota: Siempre es mejor modificar HTML para hacer esto, pero si CSS puede ser más fácil o la única solución posible, use este código:
.item-class{
pointer-events: none;
}
Cambiar el color de los enlaces al pasar el mouse
Puede hacer que los enlaces cambien de color cuando un usuario pasa el cursor sobre ellos utilizando el siguiente código CSS:
a:hover {
color: red;
}
En este código, el selector a:hover apunta a todos los enlaces de la página sobre la que el usuario se encuentra actualmente. La propiedad color: red cambia el color del texto a rojo.
Enlaces de estilo
Para diseñar enlaces en su sitio web, utilice el siguiente código CSS:
a {
color: #0077cc;
text-decoration: none;
border-bottom: 1px solid #0077cc;
transition: all 0.2s ease-in-out;
}
a:hover {
color: #005299;
border-bottom: 1px solid #005299;
}
En este código, el a a se utiliza para diseñar todos los enlaces de la página. La propiedad color establece el color de los enlaces y la propiedad text-decoration elimina el subrayado predeterminado. La propiedad border-bottom añade un sutil efecto de subrayado. La propiedad transition crea un efecto de transición suave cuando el usuario pasa el cursor sobre el enlace. El selector a:hover se utiliza para aplicar estilo al enlace cuando el usuario pasa el cursor sobre él.
Aplicar estilo a un botón
Utilice el siguiente código para diseñar un botón:
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
En este código, las diversas propiedades se utilizan para diseñar un botón, incluidas las propiedades background-color y color para la apariencia del botón, la propiedad padding para el tamaño del botón y la propiedad del cursor para cambiar el puntero del mouse al pasar el cursor sobre el botón.
Cambiar la fuente de una sección
Cambie la fuente de una sección de su sitio web usando el siguiente código CSS:
.section {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
En este código, la propiedad font-family establece la fuente en Arial o una fuente sans-serif similar, la propiedad font-size establece el tamaño de fuente en 16 píxeles y la propiedad line-height establece el espacio entre líneas de texto en 1,5. veces el tamaño de fuente.
Crear un encabezado fijo
Si desea crear un encabezado que permanezca fijo en la parte superior de la página mientras el usuario se desplaza, puede usar el siguiente código CSS:
.header {
position: fixed;
top: 0;
left:0;
width: 100%;
background-color: #333;
color: #fff;
z-index: 9999;
}
En este código, la propiedad position: fixed fija el encabezado en la parte superior de la ventana gráfica, y la propiedad top: 0 lo coloca en la parte superior de la página. La propiedad width: 100% garantiza que el encabezado abarque todo el ancho de la ventana gráfica. El background-color color se utilizan para diseñar el encabezado y la propiedad z-index: 9999 garantiza que el encabezado aparezca encima de todos los demás elementos de la página.
Crea un encabezado adhesivo con efecto de sombra
Para crear un encabezado fijo con un efecto de sombra que permanece fijo en la parte superior de la página mientras el usuario se desplaza, use este código CSS:
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 999;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.content {
padding-top: 100px;
}
En este código, la propiedad position: fixed se utiliza para fijar el encabezado en la parte superior de la página. Las propiedades top: 0 e left: 0 colocan el encabezado en la esquina superior izquierda de la página. La propiedad width: 100% establece que el ancho del encabezado sea el ancho total de la página. La propiedad background-color establece el color de fondo del encabezado y la propiedad z-index garantiza que el encabezado aparezca encima de otros elementos de la página. Finalmente, la propiedad box-shadow agrega un sutil efecto de sombra al encabezado. El selector .content se utiliza para agregar relleno en la parte superior de la página para que el contenido no quede cubierto por el encabezado fijo.
LIBRO ELECTRÓNICO GRATIS
Su hoja de ruta paso a paso hacia un negocio de desarrollo web rentable. Desde conseguir más clientes hasta escalar como loco.
LIBRO ELECTRÓNICO GRATIS
Planifique, cree y lance su próximo sitio WP sin problemas. Nuestra lista de verificación hace que el proceso sea fácil y repetible.
Agregar un color de fondo a una sección
¿Quieres agregar un color de fondo a una sección de tu sitio web? Luego use el siguiente código CSS:
.section {
background-color: #f2f2f2;
padding: 20px;
}
En este código, la propiedad background-color: #f2f2f2 establece el color de fondo en gris claro y la propiedad padding: 20px agrega 20 píxeles de espacio alrededor del contenido dentro de la sección.
Cambiar el color de fondo del cuerpo.
Agrega este código para cambiar el color de fondo del cuerpo de tu sitio web:
body {
background-color: #f5f5f5;
}
En este código, la propiedad background-color establece el color de fondo en gris claro.
Cambiar el color de una palabra o frase específica
Para cambiar el color de una palabra o frase específica dentro de un bloque de texto, puede utilizar el siguiente código CSS:
p span {
color: red;
}
En este código, el selector p span apunta a cualquier elemento span que aparece dentro de un elemento p . Luego puedes envolver la palabra o frase a la que deseas dirigirte con un elemento span en tu HTML, como este:
<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Esto haría que la frase “consectetur adipiscing elit” apareciera en rojo.
Crear un borde alrededor de una imagen
A continuación se explica cómo agregar un borde alrededor de una imagen:
img {
border: 2px solid #ccc;
}
En este código, la propiedad border establece el ancho, el estilo y el color del borde. El valor 2px establece el ancho del borde en 2 píxeles, solid establece el estilo en una línea continua y #ccc establece el color en gris claro.
Crear un efecto de desplazamiento sobre una imagen
Utilice este fragmento de código para crear un efecto de desplazamiento sobre una imagen:
img:hover {
opacity: 0.8;
}
En este código, el selector img:hover apunta a la imagen cuando el usuario pasa el cursor sobre ella. La propiedad opacity establece la transparencia de la imagen. En este caso, el valor se establece en 0,8, lo que hace que la imagen sea ligeramente transparente cuando el usuario pasa el cursor sobre ella.
Aplicar estilo a un formulario
Diseñe un formulario en su sitio web con el siguiente código CSS:
form {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
}
form label {
display: block;
margin-bottom: 10px;
}
form input[type="text"], form input[type="email"], form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 3px;
box-shadow: 0 0 5px #ccc;
}
form input[type="submit"] {
background-color: #4CAF50;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}
En este código, se utilizan diversas propiedades para diseñar un formulario, incluidas las propiedades background-color , padding y border-radius para la apariencia general del formulario. El selector form label se utiliza para diseñar las etiquetas asociadas con cada campo del formulario. El form input[type="text"], form input[type="email"], form textarea del formulario se utiliza para diseñar los distintos campos de entrada del formulario. El selector form input[type="submit"] se utiliza para diseñar el botón de envío.
Crear un diseño responsivo
Si desea crear un diseño responsivo que se ajuste a diferentes tamaños de pantalla, utilice el siguiente código CSS:
@media (max-width: 768px) {
/* Styles for screens smaller than 768px */
.container {
width: 100%;
}
.menu {
display: none;
}
.mobile-menu {
display: block;
}
}
@media (min-width: 769px) {
/* Styles for screens larger than 768px */
.container {
width: 768px;
margin: 0 auto;
}
.menu {
display: block;
}
.mobile-menu {
display: none;
}
}
En este código, la regla @media se utiliza para especificar diferentes estilos para diferentes tamaños de pantalla. La primera regla @media apunta a pantallas con un ancho máximo de 768 px, y la segunda regla @media apunta a pantallas con un ancho mínimo de 769 px. Los distintos selectores dentro de cada regla @media se utilizan para ajustar el diseño y la apariencia de la página según el tamaño de la pantalla.
Un consejo CSS más...
Es posible que descubra que su código no funciona aunque haya hecho todo correctamente. Esto podría deberse a que ya existe un código CSS que dice algo diferente a su código.
Para anular esto, simplemente agregue !important así:
.item-class{
pointer-events: none !important;
}
Estos son sólo algunos ejemplos de formas prácticas en las que puedes utilizar CSS para mejorar tu sitio web de WordPress.
Con CSS, las posibilidades para personalizar la apariencia de su sitio web son prácticamente infinitas. Al aprender y aplicar estos consejos, puede crear un sitio web que no sólo sea visualmente atractivo sino que también esté optimizado para una mejor experiencia de usuario.
Lleva tus habilidades CSS al siguiente nivel
Ya sea que sea un principiante o un desarrollador web o diseñador web profesional experimentado, si desea profundizar en el uso de CSS con WordPress, estos tutoriales de CSS adicionales lo ayudarán a ampliar sus conocimientos y habilidades:
- 10 consejos sencillos para aprender CSS para WordPress: consejos prácticos para principiantes que quieran aprender CSS específicamente para usar con WordPress. Cubre todo, desde comprender la sintaxis CSS hasta el uso de marcos CSS.
- Aprendizaje y referencia de CSS para WordPress: una guía completa para aprender y hacer referencia a CSS específicamente para usar con WordPress. Cubre temas como el uso del Personalizador de WordPress, la comprensión de los selectores de CSS y el trabajo con temas secundarios.
- Los 7 mejores sitios para encontrar fragmentos de CSS e inspiración: ¿buscas inspiración para tu código CSS? Este artículo enumera siete sitios web que ofrecen fragmentos de CSS y ejemplos que puede utilizar en su propio sitio web de WordPress.
- Cómo diseñar imágenes en su sitio web de WordPress con CSS: las imágenes son una parte importante de cualquier sitio web y este artículo ofrece consejos sobre cómo diseñarlas usando CSS. Aprenderá cómo agregar bordes, cambiar el tamaño y la alineación de la imagen, y más.
- Cómo agregar CSS personalizado a su sitio de WordPress: este artículo lo guía a través del proceso de agregar CSS personalizado a su sitio web de WordPress, utilizando tanto el Personalizador integrado como los complementos.
- Complementos de CSS gratuitos para editar en vivo su sitio de WordPress: este artículo enumera algunos complementos de CSS gratuitos que le permiten editar en vivo su sitio web de WordPress, lo que facilita ver los efectos de sus cambios de CSS en tiempo real.
- 14 excelentes herramientas de animación CSS para WordPress: si desea agregar algunas animaciones a su sitio web de WordPress usando CSS, este artículo enumera algunas herramientas interesantes que puede usar para hacerlo.
- Agregue diseños de mampostería y cuadrícula a su sitio de WordPress usando CSS: este artículo explica cómo usar CSS para agregar diseños de mampostería y cuadrícula a su sitio web de WordPress, creando un diseño más atractivo visualmente.
- 25 consejos de expertos para una codificación CSS más limpia para WordPress: si desea mejorar la limpieza y legibilidad de su código CSS, este artículo ofrece 25 consejos de expertos para lograr precisamente eso.
- 25 consejos profesionales para mejorar su flujo de trabajo CSS: consejos para mejorar su flujo de trabajo CSS, desde el uso de preprocesadores CSS hasta el uso de herramientas de desarrollo del navegador para depurar su código.
Haga clic en los enlaces para obtener más información y comenzar a mejorar su sitio web de WordPress hoy.
Colaboradores
Gracias a Antoine , miembro de WPMU DEV, de Incensy, por contribuir con la idea de esta publicación y varios de los ejemplos de CSS utilizados anteriormente. Consulte el perfil de socio de la agencia de Incensy para obtener más detalles.