--- title: "Wall PRO Gallery Layout" id: "197805" type: "knowledgebase" slug: "wall-pro-gallery-layout" published_at: "2026-11-04T17:48:02+00:00" modified_at: "2026-11-04T17:48:02+00:00" url: "https://fooplugins.com/documentation/foogallery/pro-starter/wall-pro-gallery-layout/" markdown_url: "https://fooplugins.com/documentation/foogallery/pro-starter/wall-pro-gallery-layout.md" excerpt: "Set up an inline photo wall or hero background, adjust motion and mobile columns, and choose lightbox or fullscreen clicks in FooGallery PRO." taxonomy_knowledgebase_cat: - "FooGallery PRO Starter" --- [FooGallery PRO Starter](https://fooplugins.com/documentation/foogallery/pro-starter/) # Wall PRO Gallery Layout ## Related Articles - [Polaroid Pro Gallery Template](https://fooplugins.com/documentation/foogallery/pro-starter/polaroid-pro-gallery-template/) - [Grid Pro Gallery Layout](https://fooplugins.com/documentation/foogallery/pro-starter/grid-pro-gallery-template/) - [Slider Pro Gallery Layout](https://fooplugins.com/documentation/foogallery/pro-starter/slider-pro-gallery-template/) - [Adding Thumbnail Effects](https://fooplugins.com/documentation/foogallery/pro-starter/adding-thumbnail-effects/) - [Hover Effect Presets](https://fooplugins.com/documentation/foogallery/pro-starter/hover-effect-presets/) - [Dominant Color and Color Sorting](https://fooplugins.com/documentation/foogallery/pro-starter/dominant-color-sorting/) - [Using Mobile Gallery Settings](https://fooplugins.com/documentation/foogallery/pro-starter/mobile-gallery-settings/) - [Mosaic PRO Gallery Layout](https://fooplugins.com/documentation/foogallery/pro-starter/mosaic-pro-gallery-layout/) **Need more help?** Browse all documentation or open a support ticket. [All docs](/documentation/) [Support](/support/) Wall PRO turns a photo collection into drifting columns. Give the wall its own space in the page or place it behind a section, then choose how visitors open the photos. [Try the live Wall demo](/foogallery-wordpress-gallery-plugin/wall-gallery/) . **In this guide** - [Before you start](#before-you-start) - [Create an inline photo wall](#inline) - [Place a wall behind content](#background) - [Set the motion and appearance](#motion) - [Choose what photo clicks do](#clicks) - [Check mobile and reduced motion](#mobile) - [Troubleshooting](#troubleshooting) - [Related layouts and next steps](#next) ## Before you start Wall PRO is included in **FooGallery PRO Starter, Expert and Commerce**, starting with FooGallery 3.3.20. It is not part of FooGallery Free. Install and activate a supported PRO version and licence, then open **FooGallery > Galleries** in WordPress. [Compare the plans](/foogallery-wordpress-gallery-plugin/compare-plans/) if you also need video, filtering or selling tools. ## Create an inline photo wall 1. Create a gallery and add enough varied photos to fill several columns. Give images useful titles and alt text in the Media Library. 2. Choose **Wall PRO** in the gallery layout selector. 3. In General, set **Position > Inline**. Give the wall a **Height**, such as `600px` or `70vh`. Inline gives the wall its own space in the normal page layout. 4. Save the gallery. Add it to a page with a FooGallery block or its generated shortcode. ![Wall PRO settings for thumbnail width, inline or behind-content position, height and columns](/wp-content/uploads/2026/11/wall-placement.jpg) Choose Inline for a self-contained gallery; Behind content fills a suitable surrounding section. ## Place a wall behind content 1. Add a core **Group** or **Cover** section in the WordPress editor. Add the heading, text and buttons that belong over the wall, with enough padding or minimum height for the section. 2. Place the FooGallery block or Shortcode block inside that same section. 3. In the gallery General settings, choose **Position > Behind content**. Leave **Section** blank to use the closest supported Group, Cover, section or header. 4. If you need to target a particular section, give it an HTML anchor such as `photo-hero` and set Section to the CSS selector `#photo-hero`. Use a unique anchor and check the frontend result. 5. Choose suitable Shade and overlay text colours, then check that every link and button remains readable and usable. Use a decorative click setting when the wall should not compete with the section actions. The gallery Height setting controls an inline wall. A background wall follows its host section, so set that section’s height and spacing in the page editor. The hero on the [FooGallery product page](/foogallery-wordpress-gallery-plugin/) shows a wall behind content. ## Set the motion and appearance | Setting | What to choose | | --- | --- | | Thumbnail Width | Controls the generated thumbnail width. Choose enough pixels for the widest column you expect, using originals large enough for a clear result. | | Columns and Gap | Columns is the maximum number to show; narrow containers can fit fewer. Gap controls the space between photos. | | Speed and Direction | Speed controls the drift; 0 keeps the wall still. Direction can send columns up, down or in alternating directions. | | Tilt | Rotates the wall. Use 0 for a flat wall and check the edges when increasing the angle. | | Shade | Use Centre vignette or Even to help text stand out over the photos, or None when an overlay is unnecessary. | | Pause On Hover | Pauses motion while a mouse pointer rests over the wall. Touch visitors do not have an equivalent persistent hover state. | ## Choose what photo clicks do ![Wall motion and photo-click settings, including fullscreen transitions](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20778%20620'%3E%3C/svg%3E) Photo clicks can open the lightbox, a fullscreen gallery, a browser event, or nothing. - **Open the lightbox:** opens the selected photo directly in the configured lightbox. - **Open a fullscreen gallery:** opens a fullscreen overview first; selecting a photo there opens the lightbox. The [Wall demo](/foogallery-wordpress-gallery-plugin/wall-gallery/) uses this behaviour. - **Dispatch an event:** emits `foogallery-wall-click` for custom developer code. It does not create a destination by itself. - **Nothing (decorative):** leaves the wall as a visual backdrop without a photo-click action. When fullscreen browsing is selected, choose its **Fullscreen Transition** and, where available, the fullscreen header options. Morph moves photos into place; Fade uses a cross-fade. Reduced-motion preferences use an instant transition. A custom element with `data-foogallery-wall-open` can also open the fullscreen gallery; developers should give it an accessible name and normal keyboard behaviour. ## Check mobile and reduced motion Use the gallery editor’s mobile preview to set a separate **Columns** value. Start with fewer columns on phones, then check the public page on a real device. The live demo uses seven desktop columns and three mobile columns as an example, not a required configuration. Visitors who request reduced motion see a still wall even when Speed is greater than 0. This is expected. Check the content, photo-click action and close controls in both moving and still views. See [Using Mobile Gallery Settings](/documentation/foogallery/pro-starter/mobile-gallery-settings/) for the shared preview workflow. ## Troubleshooting - **The wall is missing behind a section:** check Position, the closest Group/Cover and any Section selector. Make sure the host has visible height; start with Inline to verify the gallery itself. - **The wall does not move:** check Speed and Pause On Hover, then your device’s reduced-motion preference. Still mode is intentional for reduced-motion users. - **Photo clicks do nothing:** check When A Photo Is Clicked. Event requires your own handler, and Nothing intentionally has no photo action. - **Text or buttons are difficult to use:** adjust Shade, contrast, padding and the host section, and avoid decorative photos competing with the primary CTA. - **You need filters or paginated browsing:** Wall does not provide ordinary gallery filtering or paging. Use [Mosaic](/foogallery-wordpress-gallery-plugin/mosaic-gallery/) or another supported browsing layout, with a plan that includes the extra features. ## Related layouts and next steps Choose [Mosaic](/foogallery-wordpress-gallery-plugin/mosaic-gallery/) for a varied tiled collection, or [Spotlight](/foogallery-wordpress-gallery-plugin/spotlight-gallery/) when one large image should lead. [Read the Mosaic setup guide](/documentation/foogallery/pro-starter/mosaic-pro-gallery-layout/) . Included in PRO Starter and higher ## Try Wall PRO with your own photos Explore the layout, then compare the plans for any additional features you need. [View the Wall demo](/foogallery-wordpress-gallery-plugin/wall-gallery/) [Compare plans](/foogallery-wordpress-gallery-plugin/compare-plans/) Resources ## Find the right next step Browse setup guides, get help with your site, or find licensing information. ![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E) ### Documentation Search setup guides, product docs, and troubleshooting articles. [Browse docs](/documentation/) ![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E) ### Support Open a ticket with product details so we can help quickly. [Get support](/support/) ![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E) ### Licensing Review account, renewal, refund, and license information. [View details](/licensing/)