Modificando los slides del Carrusel (Encabezado Móvil)

Volver al índice de la ayuda

Consideraciones Iniciales

Cargue  sus imágenes personalizadas en su propio servidor

Si su carrusel no es controlado desde la seccion " banners" de svcmscentral.com , usted deberá hacer esto "a mano"; Es un procedimiento complejo al principio pero extremadamente útil e interesante, que además le acercará muchísimo mas  a todas las posibilidades de control que vienen con el lograr modificar ciertos aspectos del código de su  propia página web.

Todas las imagenes que usted produzca deben ser colocadas (cargadas o subidas ... son sin�nimos) en la carpeta /carrusel/ del servidor de su pagina web. (para aprender a acceder v�a FTP al servidor de su pagina web vea este link)

Descargue el archivo que controla su carrusel (SVG-carrusel.php o SVG-slider.php)

Una vez que haya colocado las imagenes en el servidor, debe modificar el archivo que las controla, para eso descargue del servidor y luego edite el archivo "SVG-carrusel.php" o "SVG-slider.php" con "notepad (Block de Notas)" o Dreamweaver. NO USE WORD. NO USE EXCEL. NO USE WORDPAD.

Si desea utilizar un editor de texto especializado en este tipo de archivos, puede descargarlo de aqui

Editando SVG-carrusel.php :

En caso de que su  carrusel sea del tipo  SVG-carrusel.php:

Entre todo el código del archivo verá el siguiente conjunto de lineas:

<div id="featured">
<a href="sulinkaqui"><div class="carruselfoto" style="background: url(carrusel/h001.jpg);"></div></a>
<a href="sulinkaqui"><div class="carruselfoto" style="background: url(carrusel/h002.jpg);"></div></a>
<a href="sulinkaqui"><div class="carruselfoto" style="background: url(carrusel/h003.jpg);"></div></a>
<a href="sulinkaqui"><div class="carruselfoto" style="background: url(carrusel/h004.jpg);"></div></a>
<a href="sulinkaqui"><div class="carruselfoto" style="background: url(carrusel/h005.jpg);"></div></a>
<a href="sulinkaqui"><div class="carruselfoto" style="background: url(carrusel/h006.jpg);"></div></a>

</div>

1.- Cada l�nea es una imagen. Si desea agregar espacio para otra imagen deber� copiar una linea entera , desde <a href...haaaasta </a> . . Proceda con cautela. Luego de duplicar la linea deber� modificar los par�metros para que no se repita el slide.

2.- El orden de las l�neas es el orden de aparición de las imagenes

3.- Para cada slide, puede modificar el enlace (link) hacia donde apuntar� cada slide al hacerle click (quiz�s alguna pagina que usted ya haya creado) modificando lo que est� entre las comillas en href="sulinkaqui" . Si su artículo se llama , por ejemplo, "registrese en nuestra base de datos" , el link a colocar puede ser: articulo-registrese-en-nuestra-base-de-datos o http://www.supagina.com/articulo-registrese-en-nuestra-base-de-datos . Tambien puede serun link externo como http://www.google.com

4.- Para cada slide, puede modificar la imagen, escribiendo EXACTAMENTE (may�sculas y minúsculas importan, ojo!) el nombre de la imagen que acaba de colocar en el servidor, enla carpeta /carrusel/; para eso modifique la parte en negritas del pedazo: url(carrusel/h001.jpg)

5.- Por supuesto que una vez que domine este codigo, usted podrá colocar las imagenes en la carpeta que desee. Recomendamos cuidado y siempre hacer backup.

6.- Lo del cuidado es en serio. Al editar este Código, el borrar por accidente 1 solo caracter puede deshabilitar partes importantes de la Página entera. Proceda con CAUTELA.

Editando SVG-slider.php

En caso de que su  archivo sea SVG-slider.php

Busque la sección de codigo que luce como esto:

<div id="slider1">
<ul id="slider1Content">

<li class="slider1Image">
<a href="sulinkaqui"><img src="carrusel/suimagenaqui" alt="Descripcion de la imagen" /></a>
<span class="bottom">Descripcion de la imagen </span>
</li>

<li class="slider1Image">
<a href="sulinkaqui"><img src="carrusel/suimagenaqui" alt="Descripcion de la imagen" /></a>
<span class="bottom">Descripcion de la imagen
</span></li>

<li class="slider1Image">
<a href="sulinkaqui"><img src="carrusel/suimagenaqui" alt="Descripcion de la imagen" /></a>
<span class="bottom">Descripcion de la imagen</span>
</li>

 


<div class="clear slider1Image"></div>
</ul>
</div>

1.- Este carrusel tiene tres imagenes, cada una encerrada dentro de un  tag llamado <LI>.  verifique e  identifique los bloques de codigo que comienzan por <li> y terminan por </li>.

2.- Cada bloque representa una imagen, con su link y su texto. si desea modificar el link  o el texto de cada imagen ubique los sectores equivalentes a "sulinkaqui" y los dos bloques equivalentes a "descripcion de la imagen" y modifíquelos para cada uno de los bloques (imágenes).

3.- Si usted cargó la imagen que desea  agregar / modificar a la carpeta " carrusel", modifique el nombre de la misma en  el sector equivalente a suimagenaqui.

4.- Para agregar nuevos bloques , copie uno ya existente, desde  la linea que dice "<li class="slider1Image">" hasta la linea que dice </li>.

Cargando el archivo en el servidor

Luego de que haya finalizado de editar el archivo SVG-carrusel.php puede cargarlo al servidor, remplazando el anterior. Si hizo adecuadamente el trabajo de nombrar las imagenes y reflejar su nombre adecuadamente en el codigo php. ver� inmediatamente su cambio. --

Volver al índice de la ayuda