Sección de lista de videos

Agregue una sección de lista de videos en una página para agregar fácilmente los videos de YouTube/Vimeo que se reproducirán en la página. Esta es una excelente manera de mantener interesados ​​a los visitantes de su sitio web.

Pixpa admite la inserción de vídeos de YouTube o Vimeo. No puedes subir un vídeo directamente a tu sitio web. Aparte de esta sección, también puedes agregar tus videos a Galería o un Banner.

Pixpa te permite compartir tu perfil de YouTube o Vimeo en el vínculos sociales. También puedes agregar tus archivos de música alojados en Soundcloud en la sección Música.

Puntos a tener en cuenta:

  • Puede ocultar sus videos al público (en YouTube o Vimeo) y usar la URL aquí para mostrarlos en su sitio web.
  • Puede cargar un archivo .gif dondequiera que se admitan videos.
  • En caso de que el video que ha agregado cargue mucho, haga clic en el botón de reproducción y pause por unos minutos. Luego, reanude el video. De esta manera, se carga mejor con menos almacenamiento en búfer.

En este artículo hablaremos de:

  1. ¿Qué es una lista de videos?
  2. Agregar una sección de lista de videos a la página
  3. Agregar y editar elementos de la lista
  4. Elementos de la lista de secuencias
  5. Eliminación de elementos de la lista
  6. Cambiar el diseño de la sección
  7. Opciones de estilo
  8. Agregar una sección de música
  9. Agregar música de Soundcloud
  10. La tarjeta completa y la tarjeta de texto

1. Lista de videos

La lista de videos es una colección de videos donde puede agregar una descripción para el video y agregar un enlace o botón para conectar la lista de videos con cualquier otra página del sitio web o cualquier otro enlace.


2. Agregar sección de lista de videos

  • Se puede agregar una sección a una página. Puede agregar una sección a una página ya existente o crear una nueva página dentro de su sitio web.
  • En tu pagina, Haga clic en el azul + icono para agregar un Nueva sección a tu página.

 

  • Ahora verá el categorías de sección en el lado izquierdo.
  • Haga clic en el Lista (1) pestaña y Vídeos (2).
  • Ahora, verás diferentes diseños de las Sección de lista de videos (3).

  • Elija cualquier diseño de sección y haga clic en él para agregarlo a su página.

3. Agregar y editar elementos de la lista

Agregar elemento de lista de videos

Una vez que haya agregado la sección

  • Haga clic en el Editar lista de vídeos (1) botón para abrir el Panel de elementos de lista.

  • Haga clic en el Añadir artículo (2) botón para agregar un nuevo elemento de la lista.
  • Tendrás la opción de Duplicar y eliminar (3) los elementos de la lista.


Editar elemento de la lista de videos

Haga clic en el elemento de la lista que desea editar. Se abrirán las opciones de edición de elementos de la Lista en particular.

  • Añada su enlace de video de Youtube/Vimeo (1).
Nota:

Para agregar un video a su sitio web de Pixpa, debe cargar su video en Youtube o Vimeo e ingresar la URL aquí. 

  • Configure el video para que se reproduzca en un lightbox o solo en la página (2).

  • Subir una imagen (3) para el artículo de la lista.

  • Agrega una Título (4), Subtítulo (5)y Descripción (6) del Artículo de Lista. Es posible que no encuentre la opción de Subtítulo y Descripción en determinados elementos de la lista según el diseño que elija.

  • Haga clic en el icono de Link Builder de la Enlace de título (7) para abrir el generador de enlaces para vincular el título del elemento de la lista a cualquier página.
  • Configure el vínculo para que se abra en un pestaña nueva o en la misma pestaña (8).
  • Agrega cualquier tipo de Enlace (9) al elemento de la lista. Puede agregar un botón/enlace de imagen/icono social/enlace de texto. Más información.
  • Guardar (10) sus cambios.

 


Vea la edición de un elemento de la lista de videos en acción:


4. Elementos de la lista de secuencias

  • Puede arrastrar y soltar fácilmente los elementos de la lista para cambiar la secuencia.

5. Eliminar un elemento de la lista

Una vez que haya agregado un elemento de la lista, puede editarlo y eliminarlo.

  • Haga clic en el Borrar junto al elemento Lista de videos.
  • Haga clic en el Borrar botón en la ventana emergente de confirmación.
  • Guardar tus cambios

Note

El elemento de la lista una vez eliminado no se puede recuperar.


6. Diseño de la sección

  • Haga clic en el Administrar artículos para abrir el panel de edición de la lista de videos.
  • Elija el Disposición .
  • Seleccione el Diseño para su sección y guarde sus cambios.

7. Dale estilo a tu sección

  • Haga clic en el Administrar (1) para abrir el panel de edición de la lista de videos.
  • Elija el Estilo (2) .
  • Cambie el estilo de los elementos de la sección y Guardar (3) tus cambios


Tendrá varias opciones de Estilo para la sección:

  1. Opciones de estilo 
  2. Estilo de texto 
  3. Colores flotantes

Opciones de estilo

Objetos 

  1. Elija Mostrar artículos in filas y columnas or carrusel 
    • Si ha elegido el filas y columnas opción, los elementos de la lista se organizarán en filas y columnas. En este caso, debe especificar el número de filas y columnas.
    • Si ha elegido el carrusel opción, los elementos de la lista se presentarán como una presentación de diapositivas. Conozca más.
  2. Seleccione las  número de columnas para la lista de videos. Puede elegir de 1 a 10 columnas.
  3. Especifica el Espacio entre columnas de los elementos de la lista.
  4. Elija el Orden de contenido es decir, las imágenes de los elementos de la lista que se mostrarán primero o el texto asociado.
  5. Alinear el contenido en la lista de videos. Puede configurarlos para que estén alineados a la izquierda, a la derecha o al centro.
  6. Elija hacer un bucle en el carrusel o no.
  7. En el caso del Carrusel, elija el Controles de navegación. Puede elegir entre Sin controles, Flechas: Centro inferior/Derecha superior/Derecha inferior, Chevron o Puntos.

Imágenes 

  1. Elija el recorte de imagen para los elementos de la lista. Puede configurar las imágenes como Cuadrado, Círculo, Paisaje, Retrato y Dinámico.
  2. Elija tener un radio de esquina común o un radio de esquina diferente para cada lado de los elementos de la lista y establezca un número (en px) para el radio de esquina de las imágenes de elementos de la lista. Conozca más.

Consejo

Usando el  radio de esquina campo, puede crear diferentes formas de imágenes de elementos de lista. En caso de que especifique 500 px aquí, las imágenes se mostrarán en forma de círculo.

  • En caso de que haya elegido esquinas divididas, puede establecer diferentes radios de esquina para cada esquina.

Al pasar el cursor sobre la imagen 

  1. Elija el Color de desplazamiento de la imagen ser el acentuar el color o ser especificado. Si ha elegido el acentuar el color, luego especifique el opacidad.
  2. Si ha elegido el especificar color luego configure la opción Color de desplazamiento base y opacidad para los elementos de la lista.
  3. Seleccione las  Elements color para los elementos de la lista de la sección.
  4. Elija animar las imágenes de los elementos de la lista al pasar el mouse haciendo clic en Sí. Verifique esta característica en una página en vivo.

Tamaño y espacio 

  1. Especifica el Ancho de la imagen para los elementos de la lista.
  2. Especifica el Ancho del contenido para los elementos de la lista.
  3. Especifica el Espacio debajo del título de la sección en píxeles
  4. Especifica el Espacio debajo de las imágenes de los elementos de la lista (en %).
  5. Especifica el Espacio debajo de los títulos de los elementos de la lista (en %).
  6. Especifica el Espacio debajo de los subtítulos de los elementos de la lista (en %).

Texto 

  1. Haga clic en el Cambiar estilo de texto botón para visitar el Diseño sección y administre sus tamaños y estilos de fuente. 
  2. Seleccione las  Título estilo de fuente para los elementos de la lista de la sección.
  3. Seleccione las  Subtítulo estilo de fuente para los elementos de la lista de la sección.
  4. Establecer el valor predeterminado Descripción estilo de fuente para los elementos de la lista de la sección.

Tarjetas 

  1. Descubre cómo para gestionar tarjetas.

Shadow 

  1. Pantalla – Elija mostrar la sombra detrás de los elementos de la lista siempre o solo al pasar el mouse por encima.
  2. Estilo – Elija entre los ajustes preestablecidos existentes o cree una sombra personalizada.
    En caso de que haya elegido la opción Personalizada, visite este Generador de sombras de caja para crear una sombra personalizada. Finalmente, copie y pegue el caja sombra CSS.

  1. En caso de que haya elegido la opción de preajustes, entonces Elija estilos de sombra Desde el desplegable.

  1. Descubre cómo para administrar el estilo de botones y enlaces.


8. Agregar sección de música

  • En tu pagina, Haga clic en el azul + icono para agregar un Nueva sección a tu página.

  • Ahora verá el categorías de sección en el lado izquierdo.
  • Desplácese hacia abajo y elija el Sección de Video y Música (1) opción donde se puede elegir entre los diferentes diseños.

  • Elija cualquier diseño de sección (2) y haga clic en él para agregarlo a su página.

9. Agregar música de Soundcloud

  • Haz clic en la miniatura de Soundcloud.
  • Esto habilitará el botón Incrustar, haga clic en él.
  • Puede agregar su código de inserción de SoundCloud en el cuadro de inserción.
  • Haga clic en Guardar.
  • ¡Eso es! Se ha agregado tu música de SoundCloud.

Ver en acción:


10. La tarjeta completa y la tarjeta de texto

Cuando enciendes el Tarjeta completa/de texto sobre su lista de videos, los elementos de la lista tendrán un contorno y un fondo con el color de la tarjeta que haya seleccionado en la Diseño .
Ver también: Colores y espaciado del sitio web.

Tarjeta completa

Cuando se selecciona la opción de tarjeta completa, el color de la tarjeta se aplica a toda la tarjeta, es decir, la miniatura del video y el texto que la acompaña.

Echa un vistazo: 

Tarjeta de texto

Cuando se selecciona la opción de tarjeta de texto, el color de la tarjeta se aplica solo al texto presente con la miniatura del video.

Echa un vistazo: 

¿No encuentras lo que buscas?

Póngase en contacto con un Experto Pixpa.