3 maneras fáciles de tener su página web lista para la Navidad
¡La temporada de fiestas ya está aquí! Tal vez usted ya ha decorado su hogar y su trabajo, pero ¿qué pasa con su página web? Aquí tiene 3 consejos sobre cómo puede cambiar la apariencia de su página web de Webgarden para ayudar a difundir el espíritu navideño.
1. Seleccione un diseño de plantilla de Navidad
Webgarden ofrece una serie de diseños de plantilla temáticas, incluyendo algunos para la Navidad. Utilice cualquiera de ellos para cambiar el aspecto de su página web en tan sólo unos pocos clics.
Puede encontrar esos diseños de plantilla de Navidad y más en la pestaña “Diseño” en la administración. Haga clic en “Mostrar otros diseños” en la parte inferior de la página.
Al igual que con cualquier otro diseño de plantilla, el cambio a una plantilla de Navidad va a cambiar todo lo relacionado con el aspecto de su página web e incluso eliminar cualquier CSS editado por usted. En caso de no querer hacer algo tan drástico vea las otras opciones a continuación.
Al igual que con cualquier otro diseño de plantilla, el cambio a una plantilla de Navidad va a cambiar todo lo relacionado con el aspecto de su página web e incluso eliminar cualquier CSS editado por usted. En caso de no querer hacer algo tan drástico vea las otras opciones a continuación.
2. Agregue un fondo festivo al diseño que ya tiene
Cree un ambiente navideño en su página web con tan solo insertando una imagen de fondo. Sólo tiene que seguir los cuatro pasos a continuación.
1. Encuentre una imagen que le gustaría utilizar para el fondo. Puede descargar las imágenes de forma gratuita desde sitios web como Unsplash.com, Pexels.com, Gratisography.com, y Pixabay.com.
Consejo: La imagen debe ser de al menos 1920x1080 píxeles de modo que se mostrará también en monitores Full HD. Pero trate de evitar imágenes de más de 500 KB puesto que pueden ralentizar su página web.
2. Vaya a la pestaña “Diseño” en la administración de Webgarden y seleccione “Editor CSS” de la columna izquierda. Luego coloque el cursor sobre el icono verde “+” en la esquina superior derecha, seleccione “Subir nueva imagen al servidor”, y siga los pasos.
Ahora la imagen se ha subido en la administración. Justo debajo de la imagen está su URL, con la que vamos a trabajar momentáneamente.
3. Copie el siguiente código CSS:
body {
background-image: url("image_url");
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
background-image: url("image_url");
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
Y péguelo en la parte inferior del editor CSS.
4. Copie la URL de la imagen, que se encuentra justo debajo, en la parte superior del editor CSS (mencionado en el paso 2), y péguela en el valor de la propiedad background-image en lugar de image_url. Luego haga clic en “Guardar”.
Explicación del código CSS:
body
Este es el selector correcto para la mayoría de las plantillas de diseño. Si no funciona pruebe a utilizar en su lugar .screen .
background-image
Aquí va a insertar la URL de la imagen del paso 4.
background-position
La mantiene centrada.
background-size
El valor cover extenderá la imagen a través de toda el área de fondo.
background-attachment
Si utiliza el valor fixed, la imagen se quedará en un solo lugar mientras se desplaza arriba y abajo. Si eso no se adapta a su página web, simplemente borre esta propiedad.
Ahora su página web tiene una imagen festiva que cubre todo el fondo.
body
Este es el selector correcto para la mayoría de las plantillas de diseño. Si no funciona pruebe a utilizar en su lugar .screen .
background-image
Aquí va a insertar la URL de la imagen del paso 4.
background-position
La mantiene centrada.
background-size
El valor cover extenderá la imagen a través de toda el área de fondo.
background-attachment
Si utiliza el valor fixed, la imagen se quedará en un solo lugar mientras se desplaza arriba y abajo. Si eso no se adapta a su página web, simplemente borre esta propiedad.
Ahora su página web tiene una imagen festiva que cubre todo el fondo.
¿Cómo hacer que el texto sea legible?
Puede suceder que el texto de su página web no sea claramente visible debido a su nuevo fondo. Una manera de resolver este problema es agregar un fondo adicional más pequeño para su contenido. En este caso, sólo se podrá ver la imagen de fondo principal en los lados de la pantalla donde no hay contenido.
Para insertar el fondo del contenido, pegue el siguiente código en la parte inferior del editor CSS:
.page{
background: rgb(255,255,255);
}
background: rgb(255,255,255);
}
Haga clic en “Guardar”.
Consejo: Algunos diseños de plantilla ya tienen otro fondo que cubre el cuerpo de la página que tiene su propio color. En estos casos, le recomendamos que elija un color para el fondo del contenido que coincida.
Otra manera de hacer el texto más legible es añadir un fondo transparente para el contenido. De esta forma la imagen de fondo principal será parcialmente visible a través del fondo del contenido, y el contenido será legible.
Añada esto de la misma forma que el fondo del contenido anterior. El código a insertar es el siguiente:
.page{
background: rgba(255,255,255,0.85);
}
background: rgba(255,255,255,0.85);
}
Y no se olvide de “Guardar”.
Consejo: El número 0.85 en el CSS especifica el nivel de transparencia y se puede ajustar a cualquier valor entre 0 y 1. Si usted quiere que el fondo del contenido sea más transparente, reduzca el número. Alternativamente, para que sea más opaco, auméntelo.
Si usted no quiere que el fondo del contenido cubra su bonita imagen, otra opción es simplemente cambiar el color del texto de manera que destaque en contraste con la imagen. Para obtener más instrucciones, consulte nuestro artículo de ayuda avanzada Insertar una imagen como fondo de la página web.
3. Utilice sus propias ideas
Por supuesto, usted puede adornar su página web de la manera que quiera. Añada un encabezado navideño, un banner, o cualquier otra cosa que pueda imaginar. Aquí es donde nuestra instrucción termina y ahora le toca a usted y a su creatividad.
Para terminar nos gustaría desearle ¡una Feliz Navidad y un Próspero Año Nuevo!
