Tecnología

Inicio

Cómo diseñar un WordPress Header Gradiente

Cómo diseñar un WordPress Header Gradiente


El encabezado de su sitio de WordPress es crucial para atraer visitantes a su blog. Contiene un panorama general de nombre, el logotipo de su sitio y, a menudo algunos enlaces de navegación. Debido a que es tan importante, es posible que desee hacerlo más atractivo con un gradiente de fondo. Esto puede ser más interesante que sólo un fondo liso y de un solo color. Usted puede utilizar los colores de la principal esquema de color de su sitio, diferentes colores en conjunto para hacer que la cabecera se destacan, o puede utilizar el gradiente de mezclar el color de fondo al color de su área de contenido.

Instrucciones

1 Visita tools.dynamicdrive.com/gradient/. Esta herramienta gratuita le ayuda a tomar una imagen de degradado para el encabezado. Seleccione el tipo de degradado que desea (arriba / abajo o izquierda / derecha), y establecer la anchura y la altura de la misma que su cabecera. Ajuste "Color superior / izquierda" y "Color de derecha / Inferior" para los colores que usted quiere que su gradiente de desvanecerse en. Cuando haya terminado, haga clic en "Obtener la imagen a tamaño completo", a continuación, haga clic derecho sobre la imagen que aparece y guardarlo en el disco duro de su ordenador.

2 Ingrese a su cuenta de WordPress. Haga clic en "Media" y haga clic en "Agregar nuevo". Haga clic en "Seleccionar archivos", y busque la imagen de gradiente en su disco duro. Cuando lo cargue, copiar la URL junto a la "URL" de cabecera en el portapapeles.

3 Haga clic en "Apariencia" y luego "Editor". Este es el Editor de temas, lo que le permite modificar los archivos HTML para su tema de WordPress.

4 Haga clic en "header.php" de la larga lista de archivos a la derecha. Su objetivo con este archivo es no hacer ningún cambio, sino identificar el ID de la etiqueta <div> que su cabecera se encuentra. Puede hacer esto mirando por debajo de la etiqueta <body> y la búsqueda de los elementos que también están en su cabecera, como el logotipo de su sitio, o cualquier barra de menú. A continuación, busque la etiqueta <div> que estos están envueltos en, lo que puede tener este aspecto:

<Div id = "topheader">

</ Div>

5 Haga clic en "style.css" de la lista de la derecha. Desplazarse por el archivo hasta que localice el encabezado. Justo antes del cierre} soporte para esta sección, agregue la siguiente línea:

Imagen de fondo: URL ( 'http://yoursite.com/path/to/image/gradient.jpg');

Vuelva a colocar la dirección URL con la que ha copiado anteriormente.

6 Haga clic en "Actualizar archivo". La imagen de gradiente aparecerá ahora en la cabecera de su sitio.