Instalación y configuración de Smart Slider

15 Marzo 2016 by 5 comentarios Noticias 198 Views

Recientemente, Nextend ha lanzado Smart Slider 3, una interesante extensión para Wordpress, Joomla, o Magento, entre otros CMS.

En este post vamos a ver su instalación y configuración en Joomla, aunque el proceso es similar en todos los CMS.


Subir paquete

Descarga el último instalador desde Nextweb.

Dirígete a "Gestionar extensiones" y carga el paquete smartslider3-joomla-3-xx-pro.zip. Si todo ha ido bien verás el mensaje "Instalación correcta del componente".

Ahora puedes ver el componente instalado en el menú "Componentes". El sistema Nextend contiene los ajustes básicos, que no suelen modificarse, y en el menú "Smart Slider 3" puedes comenzar a crear tus sliders.

Si la instalación te ha dado problemas, consulta nuestro post "Instalar extensiones Joomla desde directorio".

Reinstalación

Si por alguna razón necesitas reinstalar Smart Slider, puedes hacerlo simplemente instalándolo como una nueva extensión. Los archivos existentes se sobreescribirán y los sliders que hayas creado no se borrarán.

Problemas comunes

La limitación del tamaño del archivo de carga a los servidores es un problema común, lo que hace que el método de instalación subiendo el paquete no funcione, pero sólo verás un mensaje de error. El método "Instalar desde directorio" siempre debe funcionar, por lo que es lo que debes hacer si ves un mensaje de error. Los errores que pueden surgir en este segundo método suelen estar relacionados con la ruta incorrecta de acceso, y recibirás un mensaje del tipo "No se pudo encontrar un paquete válido". Debes asegurarte de que la ruta es correcta. Un truco para saber la ruta correcta consiste en poner el siguiente código en un archivo php, y guardarlo en la carpeta /tmp para comprobar su ruta en el navegador:

<?php
$dir = dirname(__FILE__);
echo "<p>Full path to this dir: " . $dir . "</p>";
?>

Para abrir Smart Slider 3 vamos al menú "Componentes".

La barra de navegación principal se divide en Dashboard, Ajustes y Ayuda.

En el Dashboard podrás ver todos los sliders, y también puedes empezar a crear otros nuevos. En "Ajustes" están los ajustes globales que se aplicarán a todos los sliders. Y en fin, en "Ayuda" puedes encontrar videos y documentación de soporte.

Cuando accedemos al Dashboard para crear nuestro slider encontramos los controles para configurar cómo se mostrarán las diapositivas y su comportamiento. La página principal está dividida en: "Administrador de diapositivas", "Barra de navegación secundaria", "Opciones del slider", "Configuración del slider", "Controles".

En el Administrador de diapositivas puedes gestionarlas, ordenarlas y elegir cuál debería ser la primera, etc.

Puedes utilizar la barra de navegación secundaria para comprobar cómo se ve tu slider con la configuración actual.

En las "Opciones del slider" puedes exportar, duplicar, borrar, etc.

En la "Configuración del slider" puedes decidir qué tipo de animaciones tendrá, qué opciones de respuesta usar, etc.


Desde la barra de navegación del editor de diapositivas puedes acceder a tus sliders y diapositivas. En la vista preliminar puedes comprobar el estado actual de tu slider. Puedes ver tu slider en distintos dispositivos a través de las opciones del dispositivo, para así configurarlo de forma más sensible para cada tipo de dispositivo. Las flechas son para hacer o deshacer tus acciones, y en fin, también puedes guardar o cancelar tu edición.

Ajustes de diapositivas

Los ajustes de diapositiva sirven para ajustar la imagen de fondo, o cómo esa imagen debe llenar la diapositiva, si tiene un tamaño diferente a la misma.

Barra de herramientas

En la rueda dentada se pueden encontrar algunas opciones de visualización para el área del editor de diapositivas y los otros iconos son accesos directos para la configuración de la capa.

Capas

Las capas son los textos, imágenes y otros contenidos que puedes colocar en tus diapositivas. Puedes acceder a la lista pulsando el icono verde + o usar los iconos de acceso directo.

 


Lista de capas

Esta es una lista de tus capas y la animación en ellas en una línea de tiempo. Puedes acceder a esta lista pulsando el botón "Lista de capas" en la parte inferior izquierda de la pantalla. El otro icono es el botón reproducir, que iniciaría tus animaciones.

Ordenamiento de capas

Puedes ordenar tus capas arrastrándolas y soltándolas, y la capa superior estará encima de las capas inferiores.

En el editor de diapositivas puedes colocar tus capas, moverlas y cambiar su tamaño, y acceder a su configuración a través de la ventana de capa.

Ventana de capa

En la ventana de capa se encuentran los ajustes de la capa. Puedes acceder a esta ventana haciendo clic en tu capa.

En la pestaña Capa accedes a las opciones básicas, como el texto de la capa de encabezado o la imagen de la capa de imagen. En la pestaña Diseño accedes a la configuración de la fuente y los estilos de tu capa. En la pestaña Animaciones tus capas se pueden mover adentro o afuera. Y en fin, en la pestaña Ajustes puedes añadir efectos de paralaje a tu capa; puedes rotarla, cambiar su comportamiento de respuesta, etc.


Para publicar nuestro slider en nuestro sitio web podemos hacerlo a través de los siguientes métodos: módulo, artículo, código PHP, o creando una nueva posición de módulo.

Módulo

Haz clic en crear módulo y selecciona Smart Slider 3 en la lista de módulos.

Ahora selecciona el slider de la lista desplegable y elige una posición donde quieras mostrarla.

En la pestaña Asignación de menú selecciona en qué páginas deseas que aparezca.

Artículo

Publicar un slider dentro de un artículo es fácil, simplemente copia y pega el código del slider dentro del artículo y el slider aparecerá allí.

Código PHP

También puedes insertar tu slider a través de PHP, para ello copia el código del slider y pégalo donde quieras que aparezca. Aquí tienes un ejemplo:

Creación de una nueva posición de módulo

Si no tienes una posición en tu plantilla, donde colocar tu slider, puedes crear una nueva posición en tu plantilla:

  1. Primero tendrás que encontrar la parte de código donde quieres tener tu slider.

  2. Después utiliza el módulo Joomla que codifica código para hacer una posición allí.

En tu plantilla, en el archivo index.php, crea una nueva posición con la siguiente instrucción:

<jdoc:include type="modules" name="newposition" />

Luego abre el archivo TemplateDetails.xml de tu plantilla y busca estas etiquetas de apertura y cierre:

<position>
... 

</position>

 Y escribe la nueva posición dentro de ellas, por ejemplo:

<positions>
<position>debug</position>
<position>position-0</position>
<position>position-1</position>
<position>position-2</position>
<position>position-3</position>
<position>position-4</position>
<position>position-5</position>
<position>position-6</position>
<position>position-7</position>
<position>position-8</position>
<position>position-9</position>
<position>position-10</position>
<position>position-11</position>
<position>position-12</position>
<position>position-13</position>
<position>position-14</position>
<position>position-15</position>
<position>newposition</position>
<positions>

Medios

https://d33v4339jhl8k0.cloudfront.net/docs/assets/5620be92c69791452ed4c442/images/58a429ad2c7d3a576d3532d5/file-L0ZpqBYKyo.png
Valora este artículo
(4 votos)

Artículos relacionados (por etiqueta)

5 comentarios

  • Name *
    Name * Lunes, 08 Agosto 2016 15:47

    test

  • Name *
    Name * Lunes, 08 Agosto 2016 15:47

    Message

  • vch
    vch Miércoles, 03 Agosto 2016 18:11

    jkbk jvukkj o ojoij

  • John Deo
    John Deo Miércoles, 30 Marzo 2016 12:57

    Comment Test

  • John Deo
    John Deo Miércoles, 30 Marzo 2016 12:56

    Comment Test

Deja un comentario

Asegúrate de llenar la información requerida marcada con (*). No está permitido el código HTML. Tu dirección de correo NO será publicada.

« Mayo 2017 »
Lun Mar Mier Jue Vie Sáb Dom
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

¿Quieres explorar más plantillas?