Add a Gallery to your website

Gallery is the foundation of any portfolio website.

This article explains how to create rich media galleries in Pixpa.

Go to website section first. You can add any menu item to your website by clicking on the ✚ icon next to website menu.

This will open up a screen which lets you choose the different types of menu items that you can add to your website. Click on the Gallery menu item.

Specify a name to your new Gallery.

That’s it. The Gallery is added now. You would see this in your website menu in the last. You can drag and drop the newly added Gallery to its correct position in the website menu.

See this article on how to sequence links in website menu.

What next?

As you add the gallery, you would be able to add your items (Images, videos, and HTML slides), manage settings and enable the banner in this gallery.

  1. Click on “Add Media” button to add your images, videos and HTML slides. Know more. 
  2. See total number of items in this gallery.
  3. Manage settings section of this gallery. Know more.
  4. Enable a full-width banner on this gallery top or bottom. Know more.

As you add a gallery, the system would apply the preset style specified in the design section. You can manage your preset style from there which would be used in all your galleries. Click here to know more.

In case, If you want to change/set the layout other the preset style for any specific gallery, then you need to disable the Use Gallery Preset Option in the settings section of that particular gallery. You would see all the layout related settings.

Make the changes and hit save button to publish your changes on live site.

You can manage the visual style of any gallery from here.

  1. Use Gallery Presets – Enable this to apply the default gallery preset style that is specified in design section.
  2. Layout – Choose a layout that will be applied on the gallery
  3. Grid Gutter – Specify space between the images in grid layouts. (0- 250 pixels)
  4. Hover Effect – Hover effect will be used only in grid layout. You can show only color, Color and Title, Color and Icon, Color, Icon and Title on hover in grid mode.
  5. Hover Icon – Select the icon for hover on grid mode.

Mobile Options

  1. Grid Columns – Specify the number of column in grid mode for mobile
  2. Mobile Grid Gutter – Specify space between the images in grid layouts for mobile. (0- 250 pixels)

Full Image Display

  1. Display Options – Specify the layout for full image viewer. You can select from show only images, Image with thumbnails, Image with captions on bottom and Image with captions on right.
  2. Display mode – Specify the display mode for full image viewer – Scale and Fit (Images would be fit into the available browser height) and Fit full screen (Images would be stretched to fill the available browser width)
  3. Controls – Select the full image overlay controls visibility as on hover or always show.
  4. Play Slideshow – Enable this to start autoplay slideshow.
  5. Speed – Specify the speed of slideshow
  6. Transition – Specify the transition of slideshow