Modifying The Css Style Template WordPress | Change Appearance

diseño pagina web wordpress

Para muchos creadores de páginas web y blogs, WordPress es una herramienta esencial para actualizar el contenido del sitio de manera rápida y sencilla. Sin embargo, en muchas ocasiones queremos darle un toque personal a nuestra web con diseños en diferentes colores, tamaños de fuente y estilos.

Cómo Modificar el Estilo CSS de una Plantilla de WordPress | Cambiar Apariencia

Para ello podemos modificar el estilo CSS de la plantilla WordPress. Pero, ¿Qué es CSS? ¿Cómo puedes usar CSS para cambiar la apariencia de tu blog? Aquí te enseñamos.

Para comenzar, empecemos por entender qué es CSS. En pocas palabras, es una hoja con líneas de código, que proporcionan el estilo a los diferentes elementos HTML que conforman una página web.

Cambiando los valores en las diferentes propiedades y selectores se puede modificar el aspecto de la página. Brevemente le explicamos como crear un encabezado elegante CSS para tu página Web y poder modificar el estilo CSS de tu plantilla en WordPress.

estilo css wordpress

¿Cómo modificar el CSS en una plantilla de WordPress?

Son varias las maneras de editar el código CSS en WordPress, pero aquí te explicaremos una de las más fáciles: a través del editor dinámico de la propia aplicación. Esta función está disponible desde la versión 4.7 de WordPress. Tan solo dando clic en el menú a «Apariencia»→»Personalizar»→»CSS Adicional», podrás tener acceso a un área de edición CSS con buenas características.

Pero ahora, ¿cómo saber qué elementos deseas personalizar en tu página? Para eso, usaremos el inspector de elementos de tu navegador. Por ejemplo Firefox le permite modificar o cambiar el texto o elemento de su página Web deforma fácil y sencilla.

Para ello, abrimos la página web o blog de WordPress al que queremos cambiar la apariencia y nos colocamos sobre el elemento que deseamos editar, al darle clic con el botón derecho, seleccionamos «Inspeccionar» en el menú desplegable. Se abrirá un panel donde se muestra de un lado el código HTML de ese elemento y del otro los códigos CSS que le dan el estilo.

Incluso en el mismo panel, al encontrar los elementos, etiquetas y selectores que quieres personalizar, puedes probar cambiando los valores de las propiedades que desees para que veas inmediatamente del lado izquierdo de la pantalla su apariencia. Ahora solo falta reescribir el CSS en WordPress.

 codigo programacion css

¿Cómo sobrescribir el código CSS en WordPress?

Ahora que ya conoces los elementos que deseas editar en el CSS de WordPress vuelve a la entrada y abre el editor dinámico. Luego, escribe la etiqueta o elemento que deseas modificar según lo que hiciste previamente en el inspector de elementos del navegador. Por último, coloca las propiedades que deseas cambiar y coloca valores nuevos personalizados. ¡Dale a tu web la apariencia que más te guste!

Recuerda que debes seguir la estructura del código CSS como se ve en el inspector de elementos del navegador. Una ventaja del editor dinámico CSS de WordPress es que facilita la edición con diversas funciones, como el resaltado de códigos que ayuda a identificar las clases, etiquetas y valores. También, tiene integrado un auto completado de texto y un detector de errores de escritura.

Son muchas las propiedades que puedes modificar para darle un cambio de estilo a tu página, Por ejemplo: podrías cambiar el aspecto de los títulos y subtítulos representados por las etiquetas H1, H2, … Con las propiedades: font-size, text-family, color, background, entre otras.

También, puedes poner o cambiar un FAVICON fácilmente, el fondo de los campos de formularios, el color de los botones y del texto en ellos. Incluso modificar la apariencia de algunos elementos ante una acción, como por ejemplo: el color de los elementos de un menú al pasar el ratón por encima o hacer clic sobre ellos.

Sin embargo, debes tener cuidado con cambiar algunas de las propiedades pertenecientes a ciertos elementos en el código CSS. Ya que estas pueden modificar y arruinar por completo la estructura de tu página web. Algunas de estas propiedades son: width, height, padding, margin, position, display, entre otras. Si no logras identificar a que aspecto hace referencia una propiedad mejor no la modifiques.

¡Ahora personalizar tu blog o página web es pan comido! Diseña tu web a tu gusto y edita la cabecera y pie de página en WordPress haciéndola más atractiva para los visitantes.

How useful did you find this content?

Click on a star to rate!

Average score 0 / 5. Counting of votes: 0

So far, no votes. Be the first to rate this content.

I'm sorry this content was not useful for you!

Let me improve this content!

Tell me, how can I improve this content?

Deja un comentario