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

Bedford, Anya, Bryant, and Hayden share the same underlying structure and functionality. This guide applies to all these templates.

En las plantillas Bedford, Anya, Bryant y Hayden, puedes agregar videos o imágenes de banners en las siguientes páginas y superponerlos con encabezados, textos, botones y colores personalizables.

  • Páginas Normales
  • Album Pages
  • Páginas y publicaciones de blogs
  • Páginas de eventos y eventos individuales
  • Páginas de Productos

Algunas páginas también ofrecen la opción de presentaciones:

Antes de comenzar

  • You can stack multiple Regular Page banners vertically in an Index Page.
  • The header content (site title, logo, navigation links) displays over the banner when the Transparent on Banner Images tweak is checked.

Page banners

You can add a banner image or video to the top of Regular, Album, Blog, Event, and Products Pages.

  1. In the Pages panel, add an Album, Blog, Event, Regular, or Products Page.
  2. Click the for that page to open Page Settings.
  3. Add a thumbnail image or video URL for the page in the Media tab.
  4. Add the text overlay in the Description field of the Basic tab (see formatting tips below). Title text doesn't display.
  5. Save and refresh the page.

Text overlay

How you format the description field text determines how it displays:

  • Bold text formats as a header.
  • Regular text formats as description text.
  • Links in the last line format as buttons.
Note: If the link includes bold text, or there are other lines below the link, it won’t format as a button.
Consejo: Si deseas usar un texto diferente para los resultados de búsqueda, agrega una descripción SEO.

Height and cropping

To add extra height to the page banner, add blank spaces to the overlay text by pressing the Return or Enter key above or below your page description. This can help fix cropping issues and expands the overall size of the banner on the page for a dramatic effect.

Note: To add blank spaces under a button, press Shift + Enter or Shift + Return for every line you want to add. If you add line breaks by pressing Return or Enter without Shift, the link will display as a regular link in the banner instead of a button.

Slideshow banners

You can create a slideshow banner at the top of a Regular Page by adding a Slideshow Gallery Block as the first block on the page.

  • Los banners de presentación sustituyen a los banners de miniaturas de página.
  • El Bloque de galería no aparecerá en la página después de que haya creado el banner. Solo lo verás cuando inicies sesión y edites la página.

To add a slideshow banner:

  1. In the Pages panel, click the + icon, then click Page (or select an existing Regular Page).
  2. Click an Insert Point at the top of the page, above all other page content, and add a Slideshow Gallery Block.
  3. In the Content tab, add your images, or connect to a Gallery Page.

add-slideshow-block.gif

  1. In the Gallery Block editor's Design tab, choose your slideshow's settings. For best results, ensure Automatically Crop Images is checked.
  2. To add overlay text, click the image's and add text to the Description field (see formatting tips below). Title text doesn't display. If you connected an existing gallery, update the descriptions within the Gallery Page.
  3. Click Apply, Save, and refresh the page. (While logged in, the slideshow banner may not appear until you refresh the page.) 

Slideshow_Banner_End_4.gif

Use the other options in the Design tab to show navigation arrows, automatically crop images, and determine how the images transition between slides:

  • Only the Gallery Block's Autoplay, Controls, and Auto Crop settings are obeyed. 
  • Titles will always be centered.
  • Thumbnail navigation doesn't display.

To edit the slideshow banner, open the Page Editor and edit the Gallery Block. 

edit-slideshow-banner.gif

Slideshow banner text overlay

As with banner images, how you format the image description text determines how it displays:

  • Bold text formats as a header.
  • Regular text formats as description text.
  • Links in the last line format as buttons.

Check Show Title and Description in the Design tab of the Gallery Block Editor to ensure the text displays. 

There are a few exceptions:

  • If a link includes bold text, or there are other lines below the link, it won’t format as a button. 
  • Adding line breaks before the header text might remove its formatting.

Slideshow banners have a fixed height:

  • Escritorio: 600 pixels. Si el encabezado es transparente en las imágenes de cabecera, la altura de la imagen fija llega a 700 píxeles. 
  • Móvil: 300 píxeles. (Dispositivos con pantallas de menos de 640 píxeles muestran la altura de la cabecera de escritorio.)

Si el texto en una cabecera tipo presentación de diapositivas es demasiado largo como para caber en la altura fija, no se mostrará el texto de la descripción sin negrita. El texto en negrita aparecerá recortado.

Note: Blog Pages have an additional featured posts slideshow banner.

Video banners

To create a video banner that plays automatically and doesn't include sound, use a video URL in a page banner.

  • Can be used with Regular, Album, Blog, Event, and Products Pages.
  • Will display the special text overlay (text added to the page description).
  • No siempre se muestran en dispositivos móviles, dependiendo de la velocidad de conexión del visitante y de la versión del navegador. Configura que aparezca una imagen de reserva para dispositivos móviles cuando el banner de video no se pueda cargar.

To create a video banner that doesn't play automatically and includes sound, add a video to a slideshow banner

  • Regular Pages only.
  • Within the Gallery Block, click the + icon to add a video or videos
  • The video will follow the Slideshow Gallery Block's settings for auto-transition and navigation arrows.
  • Will display the special text overlay (text added to the image description).

Blog Page slideshow banners

The Blog displays the five most recently published featured posts as a slideshow in the banner area. Visitors can click on the slideshow banner to navigate through the different featured posts. The banner doesn’t automatically scroll.

Tip: To set a blog post as featured, check Featured in the Options tab of the post editor.
  • The blog post title, one metadata element (date, category, author, or none), and a View Post link display for each post. Choose which metadata element appears with the Meta Priority tweak.
  • The thumbnail image for each featured post displays behind the text. If the post doesn't have a thumbnail image, the text displays over the Banner Overlay Color.
  • Use the Banner Slideshow Controls tweak to control the navigation elements on your blog's slideshow banner.
  • If none of your posts are marked as Featured, the page banner displays on the Blog Page instead of the slideshow.

Slideshow banners have a fixed height:

  • Desktop - 600 pixels
  • Mobile - 300 pixels

Blog posts and events

Collection item thumbnails display at the top of blog posts and individual events. These banners have a fixed height.

  • Events - No text displays in the banner.
  • Blog posts - The post title and one metadata element (date, category, author, or none) display over the banner image. Choose the metadata element with the Meta Priority tweak.

Styling and color overlay

For all banners, use the Banner Section tweaks to adjust the fonts, colors, and style for the buttons and text overlays.

El retoque Color de Superposición del Banner añade un filtro de color a todas las imágenes o videos del banner. También aparece en dispositivos móviles si el banner de video no se puede cargar y no has establecido una imagen de reserva para dispositivos móviles.

Note: The Banner Overlay Color displays in the banner area while the banner image loads. This color displays even if the tweak is transparent.

More help with special banners

You may need to save and refresh the page for banner changes to appear.

As a best practice, page descriptions shouldn't be used for adding SEO-based content, as this content will display on the page. Visit Increasing your site’s visibility to search engines for alternate ways to increase site visibility.

For troubleshooting tips and best practices, visit Mobile display for background and banner images.

Próximos pasos

Revisa nuestras Preguntas frecuentes sobre la resolución de problemas o ve una lista de todos los retoques de Estilos del sitio.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 49 de 112
Bedford special banners