17 consejos de CSS para ahorrar tiempo para usuarios de WordPress
Publicado: 2023-03-13WordPress ofrece infinitas posibilidades para diseñar y personalizar tu sitio web. En este artículo, compartiremos algunos consejos prácticos de CSS específicamente para usuarios de WordPress, desde diseñar su encabezado hasta ajustar sus fuentes.
Si bien WordPress ofrece muchos temas y plantillas prefabricados, a veces debe tomar el asunto en sus propias manos y realizar personalizaciones con CSS.
Si alguna vez te has hecho alguna de estas preguntas mientras trabajas en tu sitio de WordPress:
- "¿Cómo elimino el botón 'leer más'?"
- "¿Cómo puedo cambiar el color de este enlace?"
- "¿Cómo hago para que no se pueda hacer clic en este enlace pero mantengo el texto en la página?"
…luego sigue leyendo para aprender algunos valiosos trucos de CSS para tu sitio web.
En este tutorial, cubriremos:
- Consejos de CSS de WordPress
- Centrar un elemento horizontal y verticalmente
- Cambiar el color del enlace
- Quitar 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 fijo con un 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 receptivo
- Lleve sus habilidades de CSS al siguiente nivel
Consejos de CSS de WordPress
Las únicas dos cosas que necesita saber para implementar estos consejos son:
- Cómo funciona CSS
- Cómo agregar CSS a WordPress
Nota: CSS no es arriesgado, por lo que si comete un error, simplemente puede eliminar su código o modificarlo... no romperá nada :)
Con eso fuera del camino, pasemos directamente a algunos consejos prácticos de CSS con ejemplos para que pueda probarlo en su 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, use el siguiente código CSS:
.element {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
En este código, la position: relative se usa para colocar 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 un 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 quizás 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 usar la herramienta Paletton. ¡Es muy útil!
Nota: si desea combinar elementos, es bastante fácil.
Por ejemplo, supongamos que desea deshabilitar el clic y volver a poner el enlace en negro.
Puedes usar este código:
.item-class{
pointer-events : none;
color : black;
}
Quitar un enlace
.item-class{
display : none;
}
Nota: a veces es posible que deba poner una a después de su clase para que funcione, así:
.item-class a{
display : none;
}
Intente agregar la a o experimentar sin ella para ver si su código funciona o no. Simplemente agregue su CSS, guarde 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 se dirige a todos los enlaces de la página sobre la que el usuario se desplaza actualmente. La propiedad color: red cambia el color del texto a rojo.
Enlaces de estilo
Para diseñar enlaces en su sitio web, use 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 selector a se usa para diseñar todos los enlaces en 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 se desplaza sobre el enlace. El selector a:hover se usa para diseñar el enlace cuando el usuario pasa el cursor sobre él.
Aplicar estilo a un botón
Use 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 aplicar estilo a un botón, incluidas las propiedades background-color y color de fondo 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 cuando se desplaza sobre el botón.
Cambiar la fuente de una sección
Cambia la fuente de una sección de tu 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 la 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 fijo con un efecto de sombra
Para crear un encabezado adhesivo con un efecto de sombra que permanezca 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 y 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 completo 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 usa para agregar relleno en la parte superior de la página para que el contenido no quede cubierto por el encabezado fijo.
Agregar un color de fondo a una sección
¿Quieres añadir un color de fondo a una sección de tu sitio web? Luego usa 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.
Agregue este código para cambiar el color de fondo del cuerpo de su sitio web:
body {
background-color: #f5f5f5;
}
En este código, la propiedad background-color establece el color de fondo en un 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 usar el siguiente código CSS:
p span {
color: red;
}
En este código, el selector p span apunta a cualquier elemento span que aparezca dentro de un elemento p . Luego puede envolver la palabra o frase a la que desea apuntar con un elemento span en su HTML, así:
<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
Aquí 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 sólida 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ña un formulario en tu 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, las diversas propiedades se utilizan 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 de formulario. La form input[type="text"], form input[type="email"], form textarea se utiliza para diseñar los diversos campos de entrada en el formulario. El selector form input[type="submit"] se utiliza para diseñar el botón de envío.
Crear un diseño receptivo
Si desea crear un diseño receptivo que se ajuste a diferentes tamaños de pantalla, use 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 usa 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 diversos 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 más de CSS...
Es posible que su código no funcione a pesar de que hizo 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 solo algunos ejemplos de formas prácticas en las que puede usar CSS para mejorar su sitio web de WordPress.
Con CSS, las posibilidades de personalizar la apariencia de su sitio web son prácticamente infinitas. Al aprender y aplicar estos consejos, puede crear un sitio web que no solo sea visualmente atractivo, sino que también esté optimizado para una mejor experiencia de usuario.
Lleve sus habilidades de CSS al siguiente nivel
Ya sea que sea un principiante o un desarrollador o diseñador web profesional experimentado, si desea profundizar en el uso de CSS con WordPress, estos tutoriales adicionales de CSS lo ayudarán a ampliar sus conocimientos y habilidades:
- 10 consejos simples para aprender CSS para WordPress: consejos prácticos para principiantes que desean aprender CSS específicamente para usar con WordPress. Cubre todo, desde la comprensión de la sintaxis CSS hasta el uso de marcos CSS.
- Aprender y hacer referencia a 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 código CSS e inspiración: ¿busca inspiración para su código CSS? Este artículo enumera siete sitios web que ofrecen fragmentos de CSS y ejemplos que puede usar 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 incorporado 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 herramientas geniales 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 geniales 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 visualmente más atractivo.
- 25 consejos de expertos para una codificación CSS más limpia para WordPress: si desea mejorar la limpieza y la legibilidad de su código CSS, este artículo ofrece 25 consejos de expertos para hacer precisamente eso.
- 25 consejos profesionales para mejorar su flujo de trabajo de CSS: consejos para mejorar su flujo de trabajo de CSS, desde el uso de preprocesadores de CSS hasta el uso de herramientas de desarrollo de 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 al miembro de WPMU DEV Antoine 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.
***
Nota: No aceptamos artículos de fuentes externas. Sin embargo, los miembros de WPMU DEV pueden aportar ideas y sugerencias para tutoriales y artículos en nuestro blog a través de Blog XChange.