Utilice la sección Lista de imágenes cuando desee mostrar un conjunto de imágenes y texto relevante.
Con esta sección, puede vincular fácilmente diferentes páginas dentro del sitio web o agregar cualquier enlace donde desee agregar una imagen y una descripción también para cada enlace.
En este artículo hablaremos de:
- ¿Qué es una lista de imágenes?
- Adición de una sección de lista de imágenes a la página
- Agregar y editar elementos de la lista
- Elementos de la lista de secuencias
- Eliminación de elementos de la lista
- Cambiar el diseño de la sección
- Opciones de estilo
- El estilo carrusel
- Ejemplo vivo
Lista de imágenes
- Una lista de imágenes es una colección de imágenes donde puede agregar una descripción para la imagen y agregar un enlace o botón para conectarla con cualquier otra página del sitio web o cualquier otro enlace.
Añadir sección Lista de imágenes
- 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.
- Elija el Lista (1) categoría y haga clic en el Lista de imágenes pestaña (2) donde puede elegir diferentes diseños de la Lista de imágenes (3).
- Elija cualquier diseño de sección y haga clic en él para agregarlo a su página.
Nota:
- Puede administrar el ancho de la sección desde el configuración de la sección y el ancho del contenido desde el estilo de contenido.
- El tamaño de imagen ideal que necesitas cargar en esta sección dependerá de la cantidad de columnas. Conozca más.
- Mantenga los títulos, subtítulos y descripciones breves y nítidas.
- En el campo de descripción, presione el botón Participar botón para dar un salto de línea y el Shift + Enter para comenzar desde la siguiente línea.
Agregar y editar elementos de la lista
Agregar elemento de lista
Una vez que haya agregado la sección:
- Haga clic en el Editar lista de imágenes (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 lista.
- Usted puede optar por Dsubir o eliminar (3) los elementos de la lista.
Editar elemento de la lista
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.
Desde aquí puedes:
- Cargar/eliminar imagen (1) para el elemento de la lista. También puedes configurar el Color de acento de la imagen desde aquí, que se mostrará al pasar el cursor sobre la imagen.
- Agrega una Título (2), Subtítulo (3)y Descripción (4) del elemento de la 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.
Antes de añadir la descripción, compruebe así .
- Haga clic en el icono de Link Builder de la Enlace de título (5) para abrir el generador de enlaces para vincular el título del elemento de la lista a cualquier página. Conozca más Sobre Nosotros Creador de enlaces.
- Configure el vínculo para que se abra en un pestaña nueva o en la misma pestaña (6).
- Agrega cualquier tipo de Enlace (7) al elemento de la lista. Puede agregar un botón/enlace de imagen/icono social/enlace de texto. Más información.
- Guardar (8) sus cambios.
Vea la edición de un elemento de la lista de imágenes en acción:
Elementos de la lista de secuencias
- Puede arrastrar y soltar fácilmente los elementos de la lista para cambiar la secuencia.
Vea la secuenciación de los elementos de la lista de imágenes en acción:
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 de la lista de imágenes.
- Ahora, haga clic en el Borrar botón en la ventana emergente de confirmación.
- Finalmente, ahorrar tus cambios
Vea cómo eliminar un elemento de la lista de imágenes en acción:
Note
El elemento de la lista una vez eliminado no se puede recuperar.
Diseño de sección
- Haga clic en el Administrar lista de imágenes Botón (1).
- Elija el Disposición (2) pestaña.
- Seleccione (3) el diseño de su sección y Guardar (4) los cambios.
Pro Tip
Para crear una sección de ancho completo/sección de lista con pestañas, elija cualquier diseño entre 25 y 29.
Notas
- Puede agregar fácilmente un diseño de lista con pestañas a su página.
- Tiene la opción de seleccionar entre un diseño con pestañas horizontales o verticales.
- Ayuda a crear una sección basada en comparaciones.
Dale estilo a tu sección
- Haga clic en Administrar lista de imágenes (1) del botón.
- Elija el Estilo (2) .
- Cambie el estilo de los elementos de la sección y Guardar (3) tus cambios
Tendrá múltiples opciones de estilo para la sección:
Objetos
- 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.
- Seleccione las Número de columnas para la lista de imágenes. Puede elegir de 1 a 10 columnas.
- Especifica el Espacio entre columnas de los elementos de la lista.
- Especifica el Espacio entre filas de los elementos de la lista.
- 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.
- Alinear el contenido horizontalmente en la Lista de imágenes. Puede configurarlos para que estén alineados a la izquierda, a la derecha o al centro.
- Alinear el contenido verticalmente en la Lista de imágenes. Puede configurarlos para que estén alineados superior, central e inferior.
Si se selecciona la opción Carrusel en el Paso 1, verá las siguientes opciones adicionales:
- Elija Recorre el carrusel o no.
- 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.
Pantalla móvil
- Establecer el número de Columnas de cuadrícula para dispositivos móviles. Puede configurarlo en un máximo de 3 columnas.
- Definir el Distanciamiento entre cuadrículas (en píxeles).
Imágenes
- Elija el Icultivo de mago para los elementos de la lista. Puede configurar las imágenes como Cuadrado, Círculo, Horizontal, Retrato y Original.
- 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 CRadio interior 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 un radio de esquina diferente para cada esquina.
Al pasar el cursor sobre la imagen
- 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.
- Si ha elegido el especificar color luego configure la opción Color de desplazamiento base y opacidad para los elementos de la lista.
- Seleccione las Elements color para los elementos de la lista de la sección.
- Elija Animar las imágenes de elementos de la lista. al pasar el mouse haciendo clic en Sí. Verifique esta característica en una página en vivo.
- Elija una Estilo de animación para imágenes cuando el cursor se sitúa sobre ellas.
Tamaño y espacio
- Especifica el Ancho de la imagen para los elementos de la lista.
- Especifica el Ancho del contenido para los elementos de la lista.
- Especifica el Espacio debajo del título de la sección en píxeles
- Especifica el Espacio debajo de las imágenes de los elementos de la lista (en %).
- Especifica el Espacio debajo de los títulos de los elementos de la lista (en %).
- Especifica el Espacio debajo de los subtítulos de los elementos de la lista (en %).
Texto
- 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.
- Seleccione las Título estilo de fuente para los elementos de la lista de la sección.
- Seleccione las Subtítulo estilo de fuente para los elementos de la lista de la sección.
- Establecer el valor predeterminado Descripción estilo de fuente para los elementos de la lista de la sección.
Tarjetas
- Descubre cómo para gestionar tarjetas.
Shadow
- Pantalla – Elija mostrar la sombra detrás de los elementos de la lista siempre o solo al pasar el mouse por encima.
- 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. - En caso de que haya elegido la opción de preajustes, entonces Elija estilos de sombra Desde el desplegable.
Botones y enlaces
- Descubre cómo para gestionar el estilo de Botones y enlaces.
- Guardar Todo el estilo cambia.
El estilo carrusel
El estilo Carrusel muestra los elementos de la lista como una presentación de diapositivas, es decir, los elementos de la lista se alternarán entre sí.
Vea cómo funciona el estilo carrusel:
Aquí hay una lista de imágenes en vivo:
Ver un sitio de demostración en vivo.
Vea cómo funciona el radio de esquina: