Mood Board Blocks allow you to display your Mood Board Projects on your website.
ADD A MOOD BOARDS BLOCK
From your Block Editor on the right side of the screen, click on the mood boards block to add it to your page.
EDIT A MOOD BOARDS BLOCK
Once the mood boards block has been added to your page, click inside of the block to customize it.
ADD PROJECTS
You can control which Mood Board Projects show by selecting the project category. Choose whether or not to display the expiration date of each gallery.
Note: To display more than one Mood Board category you will need to add multiple Mood Board blocks.
When you have finished selecting your category, click save changes.
CHOOSE A LAYOUT
The Layouts determine how your Mood Board Projects' cover image, project name, and expiration date are displayed.
Click change under current layout to make your selections.
Rows and Columns: The number of rows and columns you choose to display within the Mood Board block determines how many of your projects show. For example, if you have 30 projects created in Mood Board and choose to show two rows and three columns in your Products block, only six of your 30 projects will show. The rows are horizontal and the columns are vertical.
* Regardless of your selection of rows and columns, on mobile devices, only ten items will show unless you have the LOAD MORE feature turned on.
Modern Layouts: Display the project title and expiration date on top of the project cover image.
Editorial Layouts: The project title and expiration date display below the project cover image.
Gallery Layout: Display the project cover image in a larger format, with the title and expiration date listed at the bottom of the image.
LAST ITEM LINK
Using the Last Item customization feature allows quick loading of your content, and for your users to choose to view more of your projects. The Last Item feature does not apply if you are using the Gallery layout. If you have more projects than your selection of rows and columns in the Layout area allows, you have the following options for the last item in your sequence:
None: The exact number of projects according to your selection of rows and columns will display.
Yes, as a "load more link": A link will display as the last item in your sequence of projects, which will load more of your projects once clicked. You can customize the text that shows in this box in the LINK TEXT box provided.
For example, if you choose to display two rows and three columns of projects, the last project on the second row will be replaced with your custom link text prompting users to click to load more projects.
(PRO TIP: Turning this feature on is recommended if you have more than ten items for mobile viewing.)
Yes, as a Standard Link: Similar to the previous load more option, this choice displays a box with custom link text as the last item in your sequence of products that connects to another area.
Link options include:
NONE: Your item would not link anywhere.
EXTERNAL LINK: Direct your clients to helpful resources that exist in a place other than your website.
PAGE: Direct your visitors to an existing web page on your website.
FORM: Connect to a Custom Form you have created in your FORM BUILDER.
MARKETING: Direct users to a Campaign or Landing Page you have created in the MARKETING tool.
FILE: Allow users to open a PDF, JPG, PNG, or GIF file that has been uploaded to the DOCUMENTS area of your account's FILES section.
PHONE: Connecting your item to a phone number allows users to quickly click to call you.
EMAIL: Connecting your item to an email address opens a user's default mail client to easily send you an email.
ADDRESS: Allow users to find where you are by opening an address in Google Maps.
VIDEO: Add a video embed code obtained from YouTube or Vimeo to play in a light-box.
ADVANCED SETTINGS
STYLING
The styling section includes six styling options: Overlay Opacity, Space Between Items, Space Below Blocks, Space Inside Blocks, Flushing, and Mobile View. These styling sections will override the settings that have been picked in the global styling section under DESIGN tab.
Overlay Opacity: Adjusts the opacity upon hovering over an image. This setting only applies to layouts where titles and prices are seen by hovering over an image. Increase or decrease the opacity of your overlay by adjusting the percentage.
Space Between Items: Controls the spacing between images using grid layouts.
Space Below Blocks: Controls the amount of space before the next block begins.
Space Inside Blocks: Controls the amount of space at the top and bottom of a block.
Flushing: Controls whether the content of this block flushes to fill the screen width or remains contained in the center.
Mobile View: Controls if images on mobile and smaller devices display in one column or two.
COLORS
The color section includes six color options. These colors will override the colors for the buttons and background that have been picked in the global color section under the design tab.
BACKGROUND
You can customize a background image behind your Product block to be different from your website background.
0 Comments