{"id":551,"date":"2021-10-13T12:56:05","date_gmt":"2021-10-13T10:56:05","guid":{"rendered":"https:\/\/blogs.ugr.es\/tutoriales\/?p=551"},"modified":"2021-10-13T12:56:05","modified_gmt":"2021-10-13T10:56:05","slug":"integrando-un-slider-o-carrusel-en-tu-blog","status":"publish","type":"post","link":"https:\/\/blogs.ugr.es\/tutoriales\/integrando-un-slider-o-carrusel-en-tu-blog\/","title":{"rendered":"Integrando un Slider o Carrusel en tu blog"},"content":{"rendered":"

Dentro de las opciones que tenemos disponibles para mejorar la apariencia de nuestro blog, son por ejemplo el integrarle un Slider<\/strong>[\u00abEs un elemento de una p\u00e1gina\u00a0web<\/b>\u00a0que muestra m\u00faltiples im\u00e1genes y texto que se alternan entre ellas. Normalmente se sit\u00faa en la parte superior de una p\u00e1gina\u00a0web<\/b>\u00a0con el objetivo de destacar y dar m\u00e1s visibilidad a una serie de elementos.<\/em><\/span>\u00ab]\u00a0 o Carrusel<\/strong> [\u00abUna secci\u00f3n din\u00e1mica que permite mostrar varios contenidos repartidas en las diapositivas que componen el slider, aunque cada diapositiva siguiente tendr\u00e1 menos visibilidad que la anterior. Por lo tanto el slider intentar\u00e1 mostrar el contenido m\u00e1s importante.<\/em><\/span>\u00ab] para ello tenemos un plugin disponible [\u00abPost Slider and Carousel<\/em><\/span>\u00ab] que nos va a permitir insertarlo, vamos a explicar paso a paso como realizarlo y las opciones visuales disponibles.<\/p>\n

Empezamos indicando como insertar un widget en las barras de personalizaci\u00f3n, que replicara en todas las entradas o paginas del Blog. Estando en la pagina principal, tenemos disponible en la barra de herramientas superior negra una opci\u00f3n ‘Personalizar’, al hacer clic en la opci\u00f3n de Personalizar se cargar\u00e1 una barra de opciones en la parte\"Opcion izquierda \u00a0de la pantalla donde se mostraran un listado de alternativas a personalizar entre ellas, casi al final encontrar\u00e1s una opci\u00f3n ‘widgets’ donde podremos insertar ciertos elementos y complementos para personalizar las \u00e1reas disponibles del blog, \"Opci\u00f3ndichas modificaciones se replicaran en todas las entradas o paginas del Blog.<\/p>\n

Una vez dentro de dicho apartado, nos encontraremos con las distintas \u00e1reas que van a variar seg\u00fan el tema<\/strong> que se elija, en nuestro ejemplo el tema usa es ‘Metro Pro’ [si no tienes claro el tema que estas usando, te recomiendo visita el tutorial sobre como escoger una plantilla<\/a>].<\/p>\n

Aqu\u00ed disponemos de las siguientes \u00e1reas:\u00a0en nuestro ejemplo vamos a usar la \u00e1rea de la Barra lateral principal para insertar slider con las ultimas entradas. Pinchamos en la area a trabajar y luego pinchas en la parte de a bajo en el bot\u00f3n ‘+ A\u00f1adir un widget<\/span>‘. Nos va a salir un listado de widgets, buscamos ‘PSAC – Post Vertical Slider Widget’.\"Post<\/p>\n

Tras pincharlo se abre un formulario para completar la configuraci\u00f3n deseada, en este caso lo vamos a dejar lo m\u00e1s sencillo.<\/p>\n

\"PSAC\"PSAC-Post<\/p>\n

Crear un slider o carrusel para integrarlo en un widget o en alguna secci\u00f3n de Entrada o P\u00e1gina. Para partir nos iremos a la parte de administraci\u00f3n del blog, y en la columna de herramientas izquierda encontraremos un opci\u00f3n<\/p>\n

 <\/p>\n

\"Admin-Post-slider-and-Carousel\"<\/p>\n

\u00abPost Slider and Carousel<\/em><\/span>\u00ab.\u00a0 Para configurar un slider o carrusel personalizado le pinchamos a la segunda opci\u00f3n \u00abShortcode Builder<\/span><\/em>\u00ab\"Personalizaci\u00f3n<\/p>\n

Esto genera un c\u00f3digo que se integrar\u00eda en la secci\u00f3n o \u00e1rea que queremos que se muestro. Mas a delante lo explico en detalle.\"Shortcode<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

A continuaci\u00f3n dejo algunas de las configuraciones y su resultado visual:<\/strong><\/p>\n

Tipo Post Slider\u00a0 – Tipo 1<\/strong><\/em><\/span><\/p>\n

\"PostLo par\u00e1metros generales de configuraci\u00f3n que se han cambiado para adquirir esta visual son:<\/p>\n

\"Post<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Show Date : false<\/p>\n

Show Author: false<\/p>\n

limit : 5<\/p>\n

category : alhambra-generalife<\/p>\n

\"\"<\/p>\n

\"Query<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\n

Tipo Post Slider\u00a0 – Tipo 2<\/strong><\/em><\/span><\/p>\n

\"Post<\/p>\n

Lo par\u00e1metros generales de configuraci\u00f3n que se han cambiado para adquirir esta visual son:<\/p>\n

\"ConfiguracionDesign : design-2\"Query<\/p>\n

Show Date : false<\/p>\n

Show Author: false<\/p>\n

limit : 5<\/p>\n

category : alhambra-generalife<\/p>\n

\"\"<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\n

Tipo Post Carrusel\u00a0 – Tipo 1<\/strong><\/em><\/span><\/p>\n

\"Post-Carrusel-Tipo-1\"<\/p>\n

Lo par\u00e1metros generales de configuraci\u00f3n que se han cambiado para adquirir esta visual son:<\/p>\n

\"Post-carrousel-Design-1\"<\/p>\n

\"Tipo-Post-Carousel\"<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Tipo: Post Carousel<\/p>\n

Design : Design-1<\/p>\n

Show Date : false<\/p>\n

Show Category : false<\/p>\n

\"\"<\/p><\/blockquote>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\n

Tipo Post Carrusel\u00a0 – Tipo 2<\/strong><\/em><\/span><\/p>\n

\"Post-carousel-Design-2\"<\/p>\n

Lo par\u00e1metros generales de configuraci\u00f3n que se han cambiado para adquirir esta visual son:<\/p>\n

\"Post-carousel-design-2-general\"<\/p>\n

\"Post-carousel-2-preferencias\"<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Tipo: Post Carousel<\/p>\n

Design : Design-2<\/p>\n

Show Date : false<\/p>\n

Show Author: false<\/p>\n

Show Category : false<\/p>\n

Slide Show : 1<\/p>\n

Arrows : false<\/p>\n

\"\"<\/p>\n

\n

Por \u00faltimo vamos a realizar el paso de integraci\u00f3n del c\u00f3digo [Shortcodes] que se genera al configurar los distintos dise\u00f1os de Slider o Carousel.<\/strong><\/p>\n

Como hemos visto anteriormente en los ejemplos cada vez que hemos configurado un tipo de elemento slider o carousel se nos ha generado un c\u00f3digo o shortcode con la configuraci\u00f3n elegida.<\/p>\n

\"Configuracion<\/p>\n

Una vez que ya tenemos dicho c\u00f3digo o shortcode lo podemos integrar en las distintas opciones disponibles de nuestro blog.<\/p>\n