EN
Searching...

Folder listing page design

The Folder lets you create a collection of your pages as a listing page or as a dropdown.

Think of a Folder as a container that holds multiple menu items and shows them in a visual layout (grids, slideshows, vertical or horizontal scrolls, and many more layouts).

See a demo Folder.

Once you have created a folder, you can manage its design as shown below.

Manage folder style:

  • Enter the folder title (1) in the Search Bar.
  • Click on the folder (2) under Site Menu Items. 

  • Alternatively, from the Website section, you can click on the three dots (1) icon that you will see when hovering the cursor over the folder.
  • Click on Settings (2) option.
  • This will take you to the folder settings page from where you can click on the Design (3) tab to open the Folder Design drawer.

You’ll see the following design options here: 

Folder Layout

  1. Layout – Choose a layout that will be applied to the folder. You can choose from 20+ layouts to show the sub-items of a folder on your site. Know more.
  2. Grid Spacing – Specify the space between sub-items in grid layouts. (0- 250 pixels)
  3. Width – Set the width of the Folder as Full Width, Boxed, or Site Width.
    • ‘Full width‘ will display the folder while covering the entire width without leaving any margin.
    • ‘Boxed‘ will display the folder while leaving some amount of padding on right and left of the screen.
    • ‘Site width‘ can be specified in the Design section. You can specify a fixed-width there.
      It will display the folder by adhering to the fixed-width specified.
  4. Filter by Tags – Check this to enable filter by tags on your folder sub-items.
  5. Tag Alignment – Set the alignment of tags on the screen.

Titles and Tags

Show Title (1): You can enable sub-item titles under the grid images with titles and tags.

  • Off: Select this to turn off grid titles and tags.
  • On Hover: Select this to show the title on hover. You can choose the alignment for the title.
  •  Below Image: Select this to show the title as well as tags below the grid images. You can choose the alignment of titles and tags (2) and choose to show the tags (3).

Title Font

  1. Font: Select a font for the folder title. Also Check: Manage the fonts of your website.
  2. Font Weight: Specify a font style for the title of the folder. Select between Normal, Light, and Bold.
  3. Font Color: Specify a color for the font of the title.
  4. Font Size: Specify a size for the font of the title (between 1 to 100 pixels).
  5. Letter Spacing: Specify the space between letters in the title.

Image Border

See how to manage Image Border.

Grid Style

  1. Hover Effect: The hover effect can be used only in a grid layout. You can show the following options on hover in grid mode.
    • No Effect: For no effect on subitems in grid mode.
    • Color: For only overlay color on your sub-items in grid mode.
    • Color and Icon: For the overlay color of sub-items with an icon.
  2. Hover Color: Specify color on hover.
    • To specify a color, select Selected Color. If you select this, you’ll find an option below to specify the color.
    • Select Image Accent Color so that the accent color of the image appears on hover. If you select this, you’ll find an option below to specify the opacity of the image accent color.
  3. Base Color: Specify the color of the grid base.
    • To specify a color, select Selected Color. If you select this, you’ll find an option below to specify the color.
    • Select Image Accent Color so that the accent color of the image becomes the base color. If you select this, you’ll find an option below to specify the opacity of the image accent color.
  4. Grid Icon: Select a Plus, Arrow, Cross, or Eye icon. This icon will appear on hovering the grid images.
  5. Icon Color: Specify the grid icon color.

For example, do check out this folder where ‘Square large folder layout’ is selected with ‘Grid labels – Title & Tags’:

Mobile Display

  • Specify the space between the sub-items in grid layouts for mobile. (between 0- 250 pixels)

Breadcrumb Navigation

Know about the breadcrumb navigation in detail.

Slideshow (only for ‘Full-Image Slider’ layout)

  1. Behavior: Enable the slideshow from here.
  2. Slideshow Speed: Set the slideshow transition speed (between 1 to 10 seconds).
  3. Slideshow Transition: Specify the Slideshow transition type. You can apply the ‘Horizontal Swipe’ or ‘Fade’ option.

Tagged:

Can't find what you're looking for?

Get in touch with a Pixpa Expert.

Contact Us