Google+ Tutorial - Módulo Leo deslizante Capa de leomobile - Miopiblog

martes, 3 de junio de 2014

Tutorial - Módulo Leo deslizante Capa de leomobile

Mediante este tutorial en español, explicaré el proceso de utilización y personalización del módulo Leo deslizante capa para su página web, que facilitan en la plantilla leomobile, y el cual incorporan en algunas de sus plantillas proporcionadas por Leotheme. El uso de este módulo, así como su personalización y la creación de sliders, es sumamente fácil e intuitivo como veremos mediante esta publicación.

Para comenzar, partimos de que el módulo ya está instalado y alojado en su hook o posición correspondiente, es decir: publicado y funcionando, que es como queda una vez instalado el tema leomobile. Comenzamos a personalizar nuestro módulo leo deslizante, accediendo al panel de control de módulos que nos facilita la interfaz y tecleando en el panel de búsqueda: leo deslizante. Cuando  aparezca, haz click en "configurar".





Accederemos a un panel de control de grupos del slider, mediante el cual se pueden configurar las características generales del grupo seleccionado. Para pasar a editar otro grupo, haz click sobre "edit" en la pestaña correspondiente a dicho grupo. Dentro de esta página, encontramos lo siguiente:

  • Grupos y sliders de estos.
  • Título del grupo.
  • Botón: grupo activo o no.
  • Posición del módulo para este grupo.
  • Autoplay: si inicia las transiciones automáticamente o no.
  • Delay: duración.
  • Presentación de modo: básicamente, el ancho que tendrá el slider.
  • Personalización según resolución de pantalla: el ancho que tendrá según el ancho de la pantalla / dispositivo.
  • Toque mobile: para que se pueda utilizar con pantalla táctil.
  • Pare el hover: al colocar el cursor del ratón encima, la transición activa se detiene hasta que el cursor sale de nuevo.
  • Modo aleatorio: cambia de sliders aleatoriamente, sin seguir orden.
  • Tipo de sombra: nos permite elegir el tipo de sombra.
  • Mostrar línea de tiempo (botón).
  • Posición de línea de tiempo.
  • Margen.
  • Relleno.
  • Color de fondo.
  • ¿imagen de fondo? - mostrar imagen de fondo o no.
  • Antecedente url: para subir el background general (no es necesario)
  • Grupo Clase: podemos esconder el módulo según resolución de pantalla y dispositivo.
  • Tipo Navigator: es como se mostrarán las miniaturas de los sliders.
  • Flechas: flechas de navegación.
  • Estilo.
  • Mostrar siempre navigator (botón)
  • Ocultar navigator después de... (introducir segundos de espera)
  • Recorte de imagen
  • Ancho de imágen.
  • Alto.
  • Ancho Miniatura.
  • Alto miniatura.
  • Número de miniaturas.

Una vez ajustada la configuración general del grupo seleccionado, pasamos a acceder al panel de administración de sliders de dicho grupo. Para esto, hacemos click en el enlace "Manage sliders" en la parte superior de la página.



Creación de sliders para un grupo


La creación de un slider y personalización de éste, dentro de un grupo, es otro paso sumamente fácil de realizar e intuitivo.

Dentro de la página a la que acabamos de acceder, se muestra, en primer lugar un recuadro mediante el cual se nos permite acceder a la edición / previsualización de los diferentes sliders asignados a dicho grupo. En caso de no tener ningun slider asignado, no aparecerá ninguno dentro de dicho recuadro.





En nuestro caso, no hacemos click sobre ninguno de estos enlaces, puesto que vamos a proceder a la creación de un nuevo slider, como ejemplo y para entender el posterior proceso de personalización del mismo. 

Dentro de la pantalla, nos encontramos con las siguientes opciones:

  • Deslizador Título: título del slider.
  • Activo (botón)
  • Transición: transición o "efecto" con el que aparecerá el slider.
  • Slot monto. (es preferible no modificarlo).
  • Tansición de giro.
  • Duración de la transición.
  • Delay: espera.
  • Habilitar link (botón).
  • Link: aquí introducimos el link si lo hemos habilitado.
  • Miniatura: imágen en pequeño de nuestro slider. Será la que se muestre en "miniaturas".
  • Vídeo: para introducir un vídeo.
  • Cuadro / panel gráfico de edición, creación e inserción de elementos en el slider. (lo detallo en el apartado siguiente).

Paneles de edición e inserción de elementos en slider


Dentro de esta zona o paneles, se pueden diferenciar varias subzonas principales. En la primera o más cercana al borde superior, encontramos un gran recuadro. Dentro de este, encontramos una barra de "herramientas" (parte izquierda, en la imagen se muestran como botones azules) con distintas opciones para agregar elementos. Encima del recuadro, hay botones que nos permiten realizar la función de  seleccionar y cargar un fondo, así como la posibilidad de elegir el color de fondo que se verá en caso de no mostrarse imagen de fondo.




Un poco más abajo se encuentra otro panel, que nos permite modificar y personalizar varias características de los elementos del slider, por individual. A la derecha de este, podemos observar "layer collection" dentro de cuya interfaz, se mostrarán los distintos elementos que vayamos insertando en nuestro slider. 





Para que lo entiendas mejor, vamos a insertar como ejemplo tres elementos dentro de nuestro slider: una imágen, un vídeo y texto.

Inserción de una imagen en el slider deslizante


En primer lugar, hacemos click sobre "Add Image", en la zona izquierda del cuadro de inserción. Se abrirá un recuadro mediante el cual podemos seleccionar o cargar / insertar la imagen. Una vez que la tengas, insértala.





La imagen, aparece dentro del recuadro. Con el cursor del ratón, se puede desplazar arrastrándola hasta la posición que queremos que ocupe dentro del slider. Una vez colocada en su lugar, bajamos un poco para comprobar como dentro de las zonas "Edit layer data" y "Layer collection" nos aparece nuestro nuevo elemento como seleccionado. Haciendo uso de la interfaz que nos proporcionan mediante la zona "Edit Layer Data", podemos añadir un link o enlace, así como modificar los efectos y animaciones con los que se mostrará esta (es muy intuitivo y simple). A su derecha, dentro de "layer collection" podemos cambiar la duración de la transición y el tiempo que debe transcurrir hasta que se muestre la imagen. Una vez personalizado, hacemos click en "Save slider".




Insertar Vídeo 


A continuación, insertaremos un vídeo haciendo uso de la pestaña u opción / botón "Add vídeo". Al hacer click sobre dicho botón, se muestra una ventana mediante la cual muestran varias opciones para la inserción del vídeo:

  • Video Type: selecciona youtube o vímeo, según de donde proceda el vídeo.
  • Video ID: el número de id del vídeo. (conseguir id de vídeo)
  • Height: altura que queremos asignar al vídeo. (en píxeles)
  • Width: anchura (en píxeles también).

 Una vez introducidos los datos solicitados, hacemos click sobre "find video" y, si el código o id de éste es el correcto, debería aparecer dentro de la ventana. Seleccionalo y haz click sobre "use this video". Ahora, ya puedes colocar el vídeo en la posición deseada arrastrándolo como en el ejemplo anterior.





Haz uso de "Edit Layer Data" y "Layer collection" para adaptar y personalizar el vídeo y su aparición dentro del slider cuando esté en marcha. Cuando lo tengas, ya sabes "save slider".

Insertar texto


Pasamos al último ejemplo, mediante el cual introduciremos texto dentro de nuestro slider. 

Para comenzar a insertar texto, hacemos click sobre el botón de la izquierda del recuadro de edición visual: "add text". Aparecerá el nuevo elemento dentro del slider, arrástralo y colócalo en la posición deseada.





Ahora, al igual en en los casos anteriores, haz uso de las zonas "Edit layer data" y "Layer Collection" para personalizar el texto y sus animaciones. Ten en cuenta que para introducir el texto deseado, deberás hacerlo usando el recuadro "caption", dentro de "edit layer data". Mediante "font-size" podemos indicar el tamaño que queremos que tenga el texto (en píxeles). También es posible cambiar el color de fondo del texto y el color del texto en sí, mediante "background color" y "Text color", respectivamente.





Ya sabes, "save slider" y... a funcionar! 

Para añadir un nuevo slider al grupo, tan solo haz click en la esquina superior derecha de la pantalla, en el símbolo "+" a la derecha del texto "slides list" (al colocar el cursor del ratón encima, se lee "add new").




Como última parte, remarcar que para eliminar un elemento del slider, puedes hacerlo haciendo click sobre el elemento en cuestión dentro del panel visual para seleccionarlo, y a continuación sobre "x eliminar".

Recuerda también, que según el idioma se mostrará un slider u otro, por lo que deberás crear un slider diferente para cada idioma que uses en tu tienda online.

 Puedes crear varios grupos, personalizarlos y luego decidir cuales de estos quieres que se muestren en cada ocasión. Para hacerlo, tan solo tienes que activar / desactivar la opción "status" dentro de la pantalla de edición / personalización del grupo (GRUPO, no sliders).


Espero que este artículo te haya sido útil. Si quieres, puedes echar un vistazo a este otro en el que te explico cómo crear una tienda con prestashop. Es bastante fácil ¿no te lo crees? :-)

No te olvides de que estoy en las redes sociales, así me podrás seguir y estar al día sobre todas las nuevas entradas que publique en este blog.






1 comentario :

  1. Eres un puto amo, te ponía un piso en Triana y te hacía trillizos.

    ResponderEliminar

Seguidores (seguir blog)

Me siguen en google plus: