The Zibster Website Package includes the Mood Boards tool. Mood Board Blocks in the Zibster website builder allow you to create a dedicated page on your website to display private Mood Board projects, making it easy to showcase inspiration boards to your clients.
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 the page where you want to display your projects.
You’ll find the MOOD BOARD block in the right column containing the various blocks available in the Zibster builder. You can either click to add the block to the bottom of a page or click and hold, then drag and drop the block to place it anywhere inside the page.
STEP THREE
Click on the block or the pencil icon and then advanced to add your projects to your block.
STEP FOUR
Add your projects.
You can control which Mood Board projects display by selecting the project category. Choose whether or not to show the expiration date for each board.
Important Note: To display more than one Mood Board category, you’ll need to add multiple MOOD BOARD blocks.
When you're done selecting your category, click Save Changes.
Styling Options For Your Mood Board Block
Last Item Link
The Last Item Link feature allows additional Mood Board projects to load if the number of projects exceeds the number of rows and columns in your block. You can also use the last item link as a call-to-action to direct visitors to other pages or social media. The options for Display Last Item Link are:
NONE: No link will be displayed.
YES, AS A "LOAD MORE LINK": When clicked, this will load another set of items on the page. You can customize the text for this link under the Link Text section.
YES, AS A "STANDARD LINK": This option links to another page. Customize the link text and choose from the following options:
- NONE: The button won’t link anywhere and is for aesthetic purposes.
- EXTERNAL LINK: Direct clients to resources outside your website.
- PAGE: Link to an existing page on your website.
- FORM: Connect to a form you’ve created in the Form Builder.
- MARKETING: Link to a campaign or landing page in the Marketing tool.
- FILE: Open a file (PDF, JPG, PNG, GIF) from your account’s Files section.
- PHONE: Allow users to call you by clicking the button.
- EMAIL: Opens the user's default email client to send an email.
- ADDRESS: Opens an address in Google Maps.
- VIDEO: Embed a YouTube or Vimeo video.
- POP-UPS: Enable a pop-up for promotions or newsletter signups.
MOOD BOARD BLOCK LAYOUT OPTIONS
Choose from 8 layout options for displaying your Mood Board projects:
- MODERN SQUARE: Projects are cropped into squares, with titles and expiration dates over the image.
- MODERN PORTRAIT: Projects are displayed vertically, with titles and expiration dates over the image.
- MODERN LANDSCAPE: Projects are displayed horizontally, with titles and expiration dates over the image.
- EDITORIAL CIRCLE: Projects are displayed in circles, with titles and expiration dates below the image.
- EDITORIAL SQUARE: Projects are displayed as squares with titles and expiration dates below.
- EDITORIAL LANDSCAPE: Projects are displayed horizontally, with titles and expiration dates below the image.
- EDITORIAL PORTRAIT: Projects are displayed vertically, with titles and expiration dates below.
- GALLERY: Projects fit the content area without cropping, and titles and descriptions appear over the main project image.
You can also control the number of rows and columns for each layout to determine how many projects appear on screen.
Click Save after selecting your layout.
Styling and Customization Options
You can further customize the Mood Board block's styling by adjusting the following:
- Overlay Opacity: Adjust the opacity of the overlay when hovering over a project.
- 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 six different color options (title, text, background, overlay, last item text, last item background) by selecting colors or entering HEX codes. Save changes when you're finished.
BACKGROUND
Add a custom background image or choose from the Background Library. Choose from four background settings: Tile, Top Left, Centered, or Cover. Click Save Changes to apply your background settings.
FONTS
Customize the font, size, letter spacing, and line height for the TITLE, DATE, & LAST ITEM TEXT in your Mood Board block.
Click on SAVE CHANGES to apply your customize font settings.