Manual - Administrador 10 : Plantillas para página de inicio responsive

A continuación se presentan 2 plantillas para página de incio que se adaptan al ancho de la ventana.

1. Plantilla slide de imagenes + menu

Descargar archivo: htmlResponsive1.html

Recomendaciones:

• Número máximo de opciones en los menús:

  • En la resolución estándar (1366x768)

  • En una resolución más grande a la estándar (1920x1080)

  • Menú vertical

    • Hasta 6 opciones

    • Hasta 10 opciones 

  • Menú horizontal

• En la resolución estándar (1366x768) 

  • Hasta 11 opciones, cuando las opciones tienen hasta 5 caracteres

  • Hasta 5 opciones, cuando las opciones tienen hasta 15 caracteres

  • Hasta 4 opciones ,cuando las opciones tienen hasta 22 caracteres

• En una resolución más grande a la estándar (1920x1080)

  • Hasta 18 opciones, cuando las opciones tienen hasta 5 caracteres

  • Hasta 8 opciones, cuando las opciones tienen hasta 15 caracteres

  • Hasta 6 opciones ,cuando las opciones tienen hasta 22 caracteres

• Número mínimo de opciones en los menús:

  • 0 opciones

  • Menú vertical

  • Menú horizontal

    • Se recomienda que haya por lo menos 1, por que si no hay ninguna se va a generar un espacio en blanco en la parte de abajo por defecto.

• Agregar imagenes al slide.
  

  Dentro de la siguiente etiqueta html <ul id="slides"> </ul>, hay que copiar y pegar el siguiente código: 

  <li class="slide" style="background-image: url('../base/vefileres;jsessionid=E68DAB99C9F00388A466613ED8BDAC70?soa=1&url=/initialPage/uploads/16dbda25-6d7d-49d6-bf69-9e191ac9b583.PNG&s=&s=K%2b1ZpdYREG3m4HftteopRA%3d%3d')"></li> 

  Reemplazando el contenido dentro de url(‘’) para poner la imagen que se desee. Debe quedar de la siguiente manera:
  

  CodeExample

  <ul id="slides"> 
      <li class="slide showing" style="background-image: url('LA_IMAGEN_QUE_QUIERAN_PONER_EN_EL_PRIMER_SLIDE')"></li>
      <li class="slide" style="background-image: url('LA_IMAGEN_QUE_QUIERAN_PONER_EN_EL_SEGUNDO_SLIDE')"></li>
      <li class="slide" style="background-image: url('LA_IMAGEN_QUE_QUIERAN_PONER_EN_EL_TERCER_SLIDE')"></li>
  </ul>

  
  

  NOTA: La primera diapositiva la parte que dice class debe verse así: class="slide showing", mientras que en el resto de diapositivas se debe ver así: class="slide". Si no se hace así, se van a tener bugs visuales al instante que se cargue la página inicial.

2. Plantilla video 

Descargar archivo: htmlResponsive2.html