Si queremos cambiar la imagen de fondo de este tipo de plantillas debemos hacerlo con la herramienta de "Código Personalizado" lo cual veremos a continuación.
Tomaremos de ejemplo la imagen que esta debajo y será la imagen que actualizaremos en nuestra "Página de Cupón".
Para comenzar debemos ir a nuestro "Menú Principal" y dar click en la opción de "Añadir Widget"
Aparecerá la ventana de "Añadir Widget" y en esta arrastraremos el elemento "Imagen" hacia nuestra plantilla.
Aparecerá la ventana de "Configuraciones de Imagen" donde cargaremos la nueva imagen de fondo.
Subiremos la nueva imagen a nuestro "Administrador de Archivos" dando click en el botón azul llamado "Subir un" (A) , una vez que se cargue y aparezca en el "Administrador de Archivos", daremos click sobre la imagen para seleccionarla (B) y después daremos click en el botón azul llamado "Seleccionar" (C) para añadirla a nuestra plantilla.
No importa la sección donde se cargue la imagen, ni el tamaño, y a continuación explicaremos el porque.
Guardaremos el ajuste dando click en el botón de "Guardar Cambios".
Ya que tengamos los ajustes guardados, debemos ir a nuestro menú principal y dar click en la opción "Vista Previa".
Cuando se despliegue la vista previa de la plantilla, ubicaremos la nueva imagen que añadimos.
Necesitamos dar click con el botón derecho de nuestro mouse para que aparezcan las opciones de la imagen y de estas daremos click en la que dice "Copiar dirección de imagen"
Lo que acabamos de hacer fue subir la nueva imagen de fondo al servidor de nuestro sitio web y copiar la dirección donde esta alojada esa imagen.
Si nosotros abrimos un editor de textos y pegamos lo que acabamos de copiar, tendremos una URL como la que se muestra en la imagen de abajo.
Ahora debemos de ir a nuestro menú principal y dar click en la opción de "Ajustes de Sitio Web"
Aparecerá la ventana de "Website Settings" y daremos click en la opción de "Código Personalizado"
Aparecerá la ventana de "Código Personalizado" donde daremos click en la opción de "CSS Personalizado".
En esta sección debemos ubicar la línea de código que empieza con esta frase:
background-image:url(".............
NOTA:
Es muy importante esta línea de código porque en esta es donde se carga la información de la imagen que va a estar en el fondo de nuestra plantilla.
Si observamos la información que aparece entre las comillas (A) es una URL muy parecida a la que copiamos anteriormente (B).
Lo que debemos hacer para que se despliegue la nueva imagen es sustituir la URL que aparece entre las comillas por la URL que copiamos, como lo vemos en el siguiente ejemplo:
NOTA:
Algo importante al hacer este paso es que solo debemos sustituir la información que esta entre las comillas de la línea de background , porque en el caso de borrar algo más o añadir información donde no se debe, podemos causar que funcione mal nuestra plantilla.
Una vez que sustituimos la URL de la imagen, debemos dar click en el botón azul de "Guardar" para que los ajustes se hagan.
Y listo, nuestra imagen ya esta cargada, ahora podemos borrar la imagen de muestra que cargamos anteriormente para que no interfiera con nuestro diseño en la plantilla.
Damos click sobre la imagen para que se desplieguen sus herramientas de edición, y cuando aparezcan daremos click sobre el icono del bote de basura "Eliminar".
NOTA:
No hay que tomar en cuenta que la imagen no ha cambiado una vez que hemos cargado la nueva URL y salvado, la próxima vez que abramos nuestra plantilla el cambio aparecerá automáticamente.
A continuación daremos click en el botón azul llamado "Guardar cambios".
Daremos click en la opción de "Vista Previa" en nuestro menú principal y listo, nuestra plantilla aparecerá con la nueva imagen de fondo.
