Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.
Creating thumbnail image navigation

You can add a thumbnail image navigation to create a landing page of images that link to other pages. This gives visitors a visual way to browse content on your site from one location.

Algunas plantillas admiten Páginas de Índice en cuadrícula, que crean automáticamente una navegación desde las imágenes en miniatura de tu página. En cualquier plantilla, puedes crear un efecto similar con una Página de Diseño y un Bloque de galería en cuadrícula con las URL clickthrough.

Here's how that looks in Avenue, which we'll manually recreate using the steps below:

Step 1 - Add a page

  1. En el Menú de Inicio, haz clic en Páginas.
  2. Click the + icon and choose Page.

For detailed steps, visit Building a page.

Step 2 - Add a Gallery Block

  1. En la página que se abre, haz clic en Punto de inserción y elige Bloque de galería en cuadrícula.
  2. Después de añadir el Bloque de galería, puedes posicionar el cursor sobre el Bloque marcador de texto y, luego, presionar el icono de la papelera para borrarlo.

Step 3 - Add images

In the Grid Gallery Block editor, add the images that will become the thumbnails in your navigation.

  1. In the Content tab, add an image.
  2. Double click the image you just added.
  3. In the image title field, enter the title of the page the image will link to. (Description text in the field below won't show on the page.)
  4. Click Clickthrough URL, then click Content.
  5. Scroll down to choose the page you want this image to link to. This creates a clickthrough URL.
  6. Click Save to return to the Gallery Block editor.

Repeat this process for every thumbnail you want to add to the grid. Click and drag the images to rearrange them.

Tip: To replace an image, delete the original image, then add the new image. Give it the same title and clickthrough URL.

Step 4 - Style the grid

Style the grid in the Design tab:

  • To make all images the same shape, check Crop Images. Use the Aspect Ratio menu to choose the shape.
  • To show titles below the images, check Show Title.
  • Use the Thumbnails Per Row and Padding sliders to adjust the grid's layout.
  • Ensure Lightbox isn't selected.

When you've finished, click Save.

Page names

When you choose Show Title in the Design tab, the image titles you added in Step 3 display below each image. This helps visitors know where they're going.

  • Los títulos de las imágenes tienen el mismo color y la misma fuente que el cuerpo del texto de tu sitio.
  • There isn't a way to adjust the size or justify the text.

Uncheck Show Title to hide them.

Tip: After following these steps, you might want to set the new page as your homepage.

More ways to create thumbnail navigation

Página de Diseño con Bloques de imágenes

Puedes crear un efecto similar con Bloques de imágenes en una Página de Diseño.

To create a grid, we recommend using the Team 4 starter layout. After choosing the layout, add your own images, captions, and clickthrough URLs to the pages you want to link to. If you add more Image Blocks to the page, you may need to crop the new images so they all have the same height.

If you use Image Blocks rather than the Gallery Block, the captions display differently:

  • Text justifies left.
  • Depending on your Image Block settings, the captions can display below the image, over the image, or as an overlay on hover.
  • You can add links to the captions.
  • In most templates, the Image Block caption text is styled the same way as the body font. As with the Gallery Block, there isn't a way to change the caption size or justify the text.
  • Each Image Block can display its caption differently:

 

Blog grid navigation

Some templates include landing pages of blog posts in a grid format. For a list of these templates, visit Blog special features.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 16 de 35
Creating thumbnail image navigation