En este artículo enseñaremos los conceptos básicos del nuevo editor para portales cautivos de los Hotspots de EdgeCore.
En la versión 3.45.000 Edge-Core ha introducido el editor WYSIWYG para facilitar la edición de nuestro portal cautivo.
Cabe destacar que el editor, solo está disponible para la pagina de login. Las demás páginas que componen el portal (login success, login fail, etc) no disponen de dicho editor.
Desde WifiSafe, damos a nuestros clientes la posibilidad de contratar un portal cautivo totalmente personalizado, incluyendo todas las paginas del mismo (Disclaimer, General Login, Login Success, Login Fail, etc.)
Para acceder al editor de la pagina de Login de nuestro Hotspot, debemos entrar en la zona de servicio correspondiente. Encontraremos el editor dentro de la opción “Login Page Costumization”
Una vez dentro de la configuración de portal, vamos a “General Login Page” y seleccionamos la opción “editor”.
Al hacer click en el botón “Editor” accederemos al WYSIWYG que por defecto, tiene la siguiente configuración.
En los botones de la parte superior izquierda, podemos ver como seria el portal dependiendo del dispositivo (Pc, Smartphone, tablet).
En la parte derecha, tenemos los iconos para guardar, reiniciar, deshacer o rehacer y guardar. Es recomendable ir guardando después de cada cambio.
En la columna de la izquierda, tenemos las opción de autenticacion y y edición, donde podemos cambiar la imagen de fondo, logo, y añadir o quitar métodos de autenticacion.
En la columna de la parte derecha, podremos editar textos, colores, tamaño y posición de los elementos .
Es muy importante que mantengamos la estructura del portal, es que es la siguiente, en caso contrario el portal no funcionará correctamente.
Body -> Signin-form -> box ->Figuras de la columna izquierda.
Esta estructura la podemos ver si hacemos click en el menú de la parte superior derecha de la pantalla.
Podemos añadir o quitar autenticacion, con solo arrastrar el elemento a la vista previa.
Por ejemplo, si queremos añadir autenticacion vía twitter, solo tenemos que seleccionarlo en el menú izquierdo, y arrastrarlo al centro, manteniendo la estructura que hemos comentado antes. Evidentemente hay que configurar previamente las credenciales de las APIs de las redes sociales que vayamos a utilizar.
Al soltar el icono de la autenticacion dentro de la caja del portal, automáticamente aparecerá el método de login.
Podemos hacer lo mismo con los demás tipos de autenticación, por ejemplo, usuario y contraseña.
Si queremos cambiar el logo por uno nuestro, solo tenemos que hacer doble click en el logo original, y abrirá la ventana para que podamos subir nuestro propio logo.
Si hacemos click en el recuadro de la izquierda, podemos seleccionar un logo desde nuestro PC. También podemos arrastrar el logo hacia el recuadro y aparecerá en la parte derecha.
Una vez hayamos localizado el logo, solo tenemos que hacer doble click sobre el mismo y se cambiará automáticamente.
Con la imagen de fondo, los pasos son los mismo, pero dada la estructura del portal, es complicado seleccionarla haciendo doble click como con el logo. En este caso, lo mejor es usar las herramientas del menú izquierdo.
Hacemos en click en una parte vacía de la imagen de fondo, vamos al menú izquierdo y veremos el layer donde tenemos la imagen.
Al hacer un click en este layer, podemos cambiar la imagen del mismo.
A partir de ahí, solo tenemos que seleccionar la imagen en nuestro PC, o desde las imágenes que tengamos cargadas previamente en el equipo.
Es importante respetar los limites que te indica el equipo en cuando a tamaño y peso de la imagen.
Para guardar nuestro portal, solo tenemos que hacer click en el icono de guardar en la parte superior derecha.
Siguiendo estos pasos, en pocos minutos podremos disponer de un portal cautivo personalizado para nuestro hotspot de EdgeCore.
Adicionalmente, podemos utilizar un selector de idiomas, el selector, traducirá automáticamente las palabras predeterminadas del portal.
Solo tenemos que mover el icono del selector a la parte que queramos del portal, y luego hacer un click en el lápiz para seleccionar los idiomas predeterminados.
Una vez seleccionados los idiomas aquí podeis ver como queda al seleccionar el Idioma en Ingles.
Y en la siguiente imagen como quedaría al seleccionar el idioma Español.
Si quereis verlo en formato video, lo tenemos colgado en nuestro canal de youtube.
Más información y otros artículos/manuales en nuestro Blog de Wifisafe (https://wifisafe.com/blog/categoria/soporte/)
Contacto: soporte@wifisafe.com
