homefinance blog
Uno de los mayores beneficios de WordPress es la capacidad de crear un sitio web hermoso y convincente, con pocos conocimientos de codificación. Con cientos de temas profesionales y el editor de Flexible, Drag-and-Drain Block Editor, es una excelente solución para los propietarios de sitios de bricolaje. ¿Pero si desea dar un paso más y hacer más en las personalizaciones visuales profundas? CSS es una de las formas más rápidas de cambiar el aspecto de su sitio ¿Qué es CSS? CSS (hojas de estilo en cascada) dicta la apariencia y los elementos visuales de su sitio web: colores, fuentes, bordes, dimensiones, etc. Con algunos elementos CSS básicos, puede cambiar el aspecto de todas sus páginas y publicaciones o centrarse en piezas individuales y hacer cambios únicos.
La sintaxis básica de CSS se ve así:
| selector {Propiedad: valor; } |
El selector es el elemento que desea con estilo: un título, un párrafo, una página, una imagen, un enlace, etc. La propiedad es la categoría que desea cambiar: por ejemplo, color de fuente, tamaño, borde o fondo. Puede aplicar múltiples propiedades a cada selector. El valor define la propiedad: el color específico, el tamaño de la fuente específica, el tamaño exacto del ancho del borde, etc. Tenga en cuenta el formato: la propiedad y el valor están separados por dos puntos y están entre paréntesis. Cada valor es seguido por una coma y una coma.
En la práctica, para cambiar el color del título anterior, que es una etiqueta
, de negro a naranja, usaría:
Selector: H1
Propiedad: color
Valor: naranja
| h1 {color: naranja; } |
Cómo aplicar CSS en su sitio si no tiene demasiada (o alguna) experiencia CSS, ¡está bien! Puede lograr mucho con una comprensión básica de los elementos fundamentales. Y con la función CSS personalizada de JetPack, no tendrá que preocuparse por modificar los archivos con temas o destruir su sitio. Para activar CSS personalizado, navegue por Jetpack → Configuración → Escribir en el tablero del sitio: su desplazamiento UL hacia abajo hasta la sección de mejoras Temas y cambiar a la opción Mejore el panel de personalización CSS.
Para agregar CSS, acceda a la apariencia → Personalización → CSS adicional. Aquí ingresará al CSS real que desea agregar. Para ayudar, JetPack CSS Publisher utiliza el color para facilitar la diferenciación de selectores, propiedades y valores.
Cuando agrega o edita CSS, puede obtener una vista previa de los cambios antes de guardar, para que sepa exactamente cómo se verán antes de aplicarlos en su sitio en vivo. Y Jetpack almacena las últimas 25 reseñas de CSS para que pueda volver a un diseño anterior si no le gusta el nuevo aspecto. Obtenga más información sobre el uso personalizado de CSS.
Cinco formas de personalizar su sitio con CSS, cada elemento en su sitio tiene un selector, por lo que puede usar CSS para cambiar casi cualquier cosa.Si desea averiguar cómo encontrar selectores, este es un excelente tutorial, pero aquí hay cinco cambios que puede hacer en este momento, con el CSS ya proporcionado.Tipografía Uno de los usos CSS más comunes es para el estilo del sitio o la tipografía de fuentes.Para cambiar tanto el color como el tamaño de los títulos (Título 1, Título 2, etc.) en su sitio, use este código y cambie los valores como desee:
El ejemplo anterior solo cambia el Título 1. Si desea cambiar el color y el tamaño de la fuente de un título diferente, como el Título 3, cambie el selector H1 y realice el tamaño de ajustes apropiados y Color:
| h3 {color: #FF5733; Tamaño de fuente: 25px; } |
Para cambiar el color de varios títulos, separe las comas:
| H1, H2, H3, H4, H5, H6 {Color: #FF5733; } |
y para colocar todos los títulos de mayúsculas, para un impacto mayor, use esto:
| h1, h2, h3, h4, h5, h6 {text-transform: upperCase; } |
Los hipervínculos deben destacarse del texto normal, para que los visitantes del sitio sepan qué tan pronto se puede hacer clic en el texto. Haga que los enlaces aparezcan cambiando su color y agregando un subrayado:
(¿No quieres subrayar tus enlaces? Simplemente elimine “Decoración de texto: subraye;” Abajo.) A {Color: #63B892; TEXT-DECOR: subrayado; }
Si desea que su enlace cambie su color cuando alguien va con el mouse sobre él, agregue “: flotante” al selector:
| a: hover {color: #ff5733; } |
listas Si usa muchas listas con marcadores en las publicaciones y páginas de su blog, pruebe un pequeño CSS para que salgan aún más sobre el resto de su contenido. Para hacer que el marcador sea un círculo y para cambiar el peso, el color y el tamaño de la fuente, use este código:
| ul {list-style-type: dis; Color: #9663b8; Tamaño de fuente: 25px; Peso de fuente: en negrita; } |
Si solo desea cambiar una de estas propiedades, incluya solo la línea que se refiere a lo que desea cambiar. ¿Quieres más opciones? CSS-trks.com presenta todas las opciones de estilo (como el uso de cuadrados o imágenes para puntos marcados), junto con atajos y comandos adicionales. Elementos de menú Muchos temas ofrecen varias opciones de menú principal, por lo que puede elegir las más adecuadas para su sitio, pero si desea personalizar aún más el estilo de su menú.
En el ejemplo anterior, utilicé CSS para agregar un fondo verde personalizado a los elementos del menú y para cambiar el color del texto cuando un usuario pasa con el mouse sobre cada:
| .site-header .menu li: hover {background: #eff3ec; } .site-header .menu li: hover a {color: #fff; } |
Los widgets en los widgets de la barra lateral en la barra lateral son una excelente manera de presentar contenido útil, por lo que es posible que desee destacarse del resto de su sitio. Codifique para agregar un fondo detrás de los widgets En la barra lateral y el relleno (espacio adicional) alrededor del texto:
| .widget {fondos: #e8f2fd; Llenado: 25px; } |
Aplique CSS a ciertas páginas en lugar de todo su sitio: todos los fragmentos CSS anteriores se aplican a nivel de sitio: cambiarán esos elementos en cada página y en cada lugar aparecen. ¿Qué pasa si desea aplicar CSS solo a una página o publicación en particular? WordPress asigna a cada página y publique una ID única, que puede encontrar en el tablero de WordPress:
Navegue a la página o publicación que desea personalizar y haga clic en Editar la página en la barra negra en la parte superior del tablero.
En la barra de URL, encontrará algo que verse “? Post = 74”. Sin embargo, el número “74” cambiará porque es específico para la publicación o ID de su página.
Para aplicar CSS a una página o publicación en particular, agregue el número al CSS junto con “Page-ID”. Para cambiar el color de la fuente del encabezado 1 solo en esta página, usará lo siguiente:
| .Page- ID-74 H1 {Color: #FF5733; Tamaño de fuente: 36px; } |
recuerda: ¡Preview es tu amigo! Si no tiene mucha experiencia con CSS, puede estar nervioso por hacer cambios que podrían engañar a su sitio. ¡No te preocupes! Una vista previa de los cambios ocurrirá en tiempo real a medida que edite. Juega con el código y realice todos los cambios que desee. ¡Haga clic en Guardar y publicar cuando esté satisfecho con cómo se actualiza su CSS! También hay una función de historial de CSS que registra cada vez que guarda los cambios. Esto significa que si cambia de opinión, puede volver rápidamente. Para hacer esto, haga clic en Vea el historial completo en la parte inferior del personalizador. Elija la fecha y la hora que desea devolver y haga clic en el botón de restauración en esta revisión. Recursos CSS adicionales
Un código hexadecimal especifica el color que desea usar al cambiar las fuentes o el fondo. Si no está seguro de usar, los códigos de color HTML ofrecen una excelente solución. Explore su selector de color para encontrar el tono perfecto, luego copie e inserte el código hexadecimal que generan.
CSS-trks.com ofrece fragmentos de código CSS que varían en dificultades desde principiantes hasta expertos. También puede encontrar tutoriales, videos y guías para obtener más información. W3Schools es un recurso útil para CSS y ejemplos de tutoriales.
WordPress.com proporciona información sobre los elementos básicos del CSS y el uso de la consulta de medios para establecer CSS en ciertos dispositivos.
Upwork.com es un socio de WordPress, que ofrece especialistas independientes que pueden ayudar con los proyectos CSS.
Comience a personalizar su sitio web de WordPress La mejor manera de aprender el CSS básico es comenzar a experimentar. Todos los códigos enumerados anteriormente se pueden personalizar o ajustar para satisfacer sus necesidades: úselo como base y luego comience a cambiar los colores, cambie el tamaño de la fuente o realice cualquier otro cambio que desee. Con el editor CSS personalizado de Jetpack, puede hundir su cabeza primero en personalización, sin preocuparse por destruir su sitio, debido a las herramientas de vista previa y las funciones de ejecución. Para obtener protección adicional, active la copia de seguridad de JetPack, que automáticamente se realiza una copia de seguridad para su trabajo en tiempo real e incluye restauraciones de un solo clic. Obtenga más información sobre otras características de diseño de JetPack y comience con JetPack Custom CSS.
