La plantilla Shopik es un ejemplo de sitio TOWeb 13 en el que una imagen parece haber sido cortada en 3 trozos cuando en realidad se trata de una sola imagen reutilizada 3 veces. ¿Cómo añadir este tipo de efecto a su sitio web sin tener que usar necesariamente esa plantilla? Es lo que le explicaremos en este tutorial para que pueda obtener el mismo resultado con sus propias imágenes en cualquier página de su sitio.
- 1.er caso: si su sitio se ha creado a partir de la plantilla Shopik y solo desea sustituir la imagen de la página de inicio por la suya, basta con seleccionar uno tras otro cada uno de los 3 párrafos de la página de inicio para añadir cada vez el mismo archivo de su imagen de fondo con el botón "Cambiar imagen". ¡Y eso es todo!
Atención: es importante que se añada cada vez exactamente la misma foto, sin ningún retoque, recorte ni la menor modificación por su parte.
- 2.º caso: si su sitio no se ha creado a partir de la plantilla Shopik y/o desea que su imagen no se divida en 3 sino, por ejemplo, en 2 o 4 partes, y eventualmente también en otra página, proceda así:
- Empiece añadiendo un párrafo con muy poco contenido, por ejemplo sin título, solo unas palabras y/o un enlace colocado en un botón
- Una vez creado este párrafo, aplíquele un ancho de 4 sobre 12, es decir, 1/3 del ancho de la página cada uno si desea una división en 3 partes como en Shopik (o ajuste el ancho a 3 sobre 12, es decir, 1/4 del ancho de la página, si desea una división en 4 partes)
- Después, en "Fondo" seleccione "Imagen" para añadir su foto
- A continuación, active las opciones "Altura completa" y "Efecto parallax". Estas 2 opciones combinadas son necesarias para obtener el efecto de división.
- Por último, utilice el botón "duplicar" para copiar su párrafo tantas veces como sea necesario y llenar así el ancho de su página.
Y listo: solo le queda sustituir el texto de cada párrafo por el que usted elija (por ejemplo enlaces en botones como en la plantilla Shopik), aplicando si lo desea un cambio de color del texto y/o un efecto "Opacidad" según su foto para que sus textos sean bien legibles sobre la imagen de fondo. Por último, si la división con espaciado no le convence, puede marcar la casilla "Sin margen" para obtener la imagen de fondo completa con los textos de sus párrafos colocados encima.
Para que sus textos sigan adaptados y siempre legibles en todos los tipos de dispositivos (sobre todo tabletas y smartphones), será necesario limitar el contenido de sus párrafos a unas pocas palabras y/o no utilizar un tamaño de letra demasiado grande. Y si más adelante solo desea cambiar la imagen de fondo, bastará con hacer las sustituciones indicadas en el 1.er caso.
Observaciones:
- Asegúrese de utilizar una foto con una resolución de pantalla suficientemente alta, ya que, según los dispositivos que visiten su sitio web, solo se mostrarán algunas partes y su imagen de fondo podría perder nitidez si su resolución no es suficiente. Del mismo modo, para evitar que su imagen de fondo se amplíe/estire demasiado, le recomendamos utilizar un sitio de ancho fijo: así evitará que se vuelva borrosa en pantallas grandes con resoluciones superiores al ancho de su foto.
- Para reutilizar una imagen ya existente en su sitio, puede mantener pulsada la tecla CTRL mientras hace clic en el botón para añadir una imagen.