The Zibster Website Package includes the Mood Boards tool, allowing you to display private Mood Board projects on your website. These projects help showcase inspiration boards to clients through a dedicated, customizable page.
Adding The Mood Board Block To Your Website
STEP ONE
Log into your Zibster account and click on WEBSITE in the left-side menu.
STEP TWO
Add a MOOD BOARD block to your page.
- Locate the MOOD BOARD block in the right-hand column of available blocks.
- Click to add it to the bottom of your page, or drag and drop it to your desired location.
STEP THREE
Click the block or pencil icon, then select Advanced to add your projects.
STEP FOUR
Add your projects.
- Select a project category to control which Mood Board projects display.
- Choose whether to show an expiration date for each project.
Important Note: To display more than one Mood Board category, add multiple MOOD BOARD blocks.
- Click Save Changes when you're finished.
Styling Options for Your Mood Board Block
You can customize how your Mood Board block looks and functions with these options
Last Item Link
Control how additional Mood Board projects load or direct visitors to other pages or resources. The options are:
- NONE: No link will display.
- LOAD MORE LINK: Adds a link to load more projects. Customize the text under "Link Text."
- STANDARD LINK: Links to another destination. Customize the text and choose from these options:
- NONE: For aesthetic purposes only.
- EXTERNAL LINK: Directs to resources outside your website.
- PAGE: Links to an existing page on your website.
- FORM: Connects to a form you’ve created in the Form Builder.
- MARKETING: Links to a campaign or landing page.
- FILE: Opens a file (e.g., PDF, JPG).
- PHONE: Allows users to call you directly.
- EMAIL: Opens an email client.
- ADDRESS: Displays an address in Google Maps.
- VIDEO: Embeds a YouTube or Vimeo video.
- POP-UP: Displays a pop-up for promotions or newsletters.
Mood Board Block Layout Options
Choose from eight layout styles to display your Mood Board projects:
- MODERN SQUARE: Cropped squares with titles and expiration dates over the image.
- MODERN PORTRAIT: Vertical display with titles and expiration dates over the image.
- MODERN LANDSCAPE: Horizontal display with titles and expiration dates over the image.
- EDITORIAL CIRCLE: Circular display with titles and expiration dates below the image.
- EDITORIAL SQUARE: Square display with titles and expiration dates below.
- EDITORIAL LANDSCAPE: Horizontal display with titles and expiration dates below.
- EDITORIAL PORTRAIT: Vertical display with titles and expiration dates below.
- GALLERY: Uncropped display with titles and descriptions over the main image.
Adjust the number of rows and columns to control how many projects appear on the screen. Click Save Changes after selecting your layout.
Styling and Customization Options
You can further customize the Mood Board block's styling by adjusting the following options. These options can vary depending on which layout you've selected:
- Overlay Opacity: Adjust the opacity of the overlay when hovering over a project.
- Title Alignment: Choose between left, right, or center aligned
- Description Alignment: Choose between left, right, or center aligned
- Image Border Thickness: Choose between none, ultra thin, thin, medium, and thick.
- Space Between Items: Control the spacing between projects in grid layouts.
- Space Below/Inside Blocks: Adjust spacing before and within blocks.
- Flushing: Choose whether content fills the screen width or remains centered.
- Mobile View: Control whether projects display in one or two columns on mobile.
Click Save Changes to apply your updates.
COLORS
Customize your color options by selecting colors or entering HEX codes. These color options can vary depending on the layout you've selected.
Click on Save changes when you're finished.
BACKGROUND
Add a background image to your Mood Board block:
- Upload your own image or choose one from the Background Library.
- Customize how the image displays:
- Tile: Repeats the image.
- Top Left: Aligns the image to the top left.
- Centered: Centers the image.
- Cover: Scales the image to cover the entire block.
Click Save Changes to apply your changes.
FONTS
Adjust font styles for your Mood Board block:
- Title
- Expiration Date
- Last Item Text
Customize the font, size, letter spacing, and line height. Click Save Changes to apply your updates.
ANIMATIONS
You can add IMAGE HOVER ANIMATIONS to your Mood Boards block in this tab. You can choose between the following options:
- NONE
- SCALE
- BLUR
- SCALE BLUR
- BOUNCE
Click on SAVE CHANGES to apply your animation to the Mood Boards block.