Media Drive Gallery

Video Scroll Motion

Directory Gallery

Social Icons – Custom

Adding Custom Fonts

Adding Google Fonts

Mega Menu (Mobile)

Mega Menu (Desktop)

Ecommerce: Pickup and Delivery Windows

Floating Link Images

Media Drive Gallery is our flagship gallery widget, with mixed media support for both images and video. You may also utilize categories, allowing users to filter the gallery using single or multiple category selections.

Media Stream Gallery is powered by Media Drive, which was purpose-built by the Without Code team to deliver uncompromised image quality and lightning fast video streaming.

Note: This widget works in conjunction with Media Drive; therefore, a Media Drive subscription is required for use.

Preview: https://demo.wocode.com/media-drive-gallery

Tutorial Video

 

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it where you would like the gallery to appear on your page layout.

WIDGET OPTIONS

  • Open the widget option panel.
  • Unique ID: Be sure to use unique ID’s when using multiple instances of the widget on the same page.
  • Media Stream URL: This links the gallery with your Media Drive folder. Access this link by clicking on the info button for the Media Drive folder where your gallery items are located.
    Enable Media Stream.
    Copy the Media Stream URL:
    For additional information on adding and managing gallery items in Media Drive, see the Adding Files to Media Drive section below.

GALLERY SETTINGS

  • Gallery Layout (Uniform, Mosaic, Masonry): This dropdown allows you to choose from Uniform, Mosaic or Masonry layouts for your gallery.Uniform arranges all thumbnail images uniformly with fixed aspect ratios. Height and width will be the same for all thumbnails, regardless of the original aspect ratio.Masonry arranges thumbnails to form equal columns, maintaining their original aspect ratio, and are all resized to have the same width.Mosaic arranges thumbnails to form equal rows, maintaining their original aspect ratio, and are all resized to have the same height.
  • Gallery Sorting: This setting sorts gallery items. Choose from Title Ascending, Title Descending, Reverse and Random.
  • Display Mode: Choose from Display full gallery or Show pagination.
  • Pagination Style: When pagination is shown, this setting allows you to choose the pagination style: Rectangles, Dots or Numbers.
  • Maximum Number of Rows to Show: This allows you to set the maximum number of rows that will be shown. Larger galleries will display pagination if the number of gallery items exceeds the number of rows selected. Use this setting to control the height of the gallery.
  • Gallery Display Animation: This is the animation style applied to the entire gallery when switching between categories.
  • Gallery Display Animation Duration: This is the length of time (in milliseconds) it takes for the Gallery Display Animation to complete.

FILTER TAG SETTINGS

  • Enable Categories: This enables the category filter buttons.
  • Category Filter Mode (Single or Multiple): This sets the behavior for the category buttons. Single allows the user to display a single category at a time by selecting a button. Multiple allows the user to filter multiple categories by clicking on multiple buttons.

THUMBNAIL  SETTINGS

  • Thumbnail Width / Thumbnail Height: Depending on the Gallery Layout used (Uniform, Masonry or Mosaic), you will see either Thumbnail Width, Thumbnail Height, or both. Use these settings to control the size of the thumbnail images. Adjusting the Thumbnail Width / Height also impacts the number of rows. Note that no Thumbnail sizing settings will be available when the Mosaic Gallery Layout is chosen.
  • Thumbnail Padding: This sets the padding between thumbnail images.
  • Link Thumbnails To: Choose from Lightbox or External Link (if present). The Lightbox selection opens the lightbox when the user clicks on a thumbnail. This is the default behavior. External Link opens a link when the user clicks on a thumbnail. When using an external link, set the link address in the Custom Data area of the item in Media Drive.
  • Thumbnail Display Animation: This is the animation seen when the gallery thumbnails come into view.
  • Thumbnail Display Animation Duration: This is the length of time it takes (in milliseconds) for the Thumbnail Display Animations to complete their animation.
  • Thumbnail Hover Effects: These effects are seen when you hover over a gallery thumbnail. Note that you can select multiple effects at once.

LIGHTBOX  SETTINGS

  • Lightbox Theme: This sets a Dark or Light theme to the lightbox area (the area that appears when the user clicks on an image). This impacts the background of the lightbox.
  • The remainder of settings in this section enable or disable various attributes of the lightbox. Each toggle is labeled with its function.

DESIGN SETTINGS

There are numerous options that allow you to style various elements of the gallery; such as fonts, colors, and dedicated styling sections for the Gallery, Lightbox, Category Buttons, Descriptions and more. The settings are labeled with their exact function, and will not be explained in detail, as they are self-explanatory.

LOADING GALLERY IMAGES AND VIDEOS

To add images and videos to your gallery, simply load them into Media Drive. You will likely want to use a dedicated folder for your gallery.

  • Click the Create Folder button in the top menu.
  • Name the new folder.
  • Enter the folder, then click the Upload File button in the top menu.
  • Add files as needed.

For additional information on working with Media Drive, see our documentation: https://app.wocode.com/categories/media-drive/

ADDING TITLES AND DESCRIPTIONS

  • Click the info button for an image or video file.
  • Click the Custom Data tab.
  • Enter the title and description in the appropriate fields. The title and description will now be shown for this image in the gallery. Repeat the process for other gallery items.

CREATING CATEGORIES

  • Following the steps above for accessing the Custom Data for an image or video, locate the Category field.
  • Enter a category name.
  • Click Update.
  • The category will now be added to the gallery. To add other gallery items to this category, simply enter the same category name for those items in their Category field.
  • Repeat this process with a new category name to create new categories.
  • To add a gallery item to multiple categories, enter multiple category names, separated by a comma.

ADDING LINKS FOR GALLERY THUMBNAILS

  • To link a gallery thumbnail to a website, enter the website URL in the Item URL field in Custom Data (review the sections above for details on accessing Custom Data)
  • Make sure that the Link Thumbnails To option in the Lightbox Settings is set to External Link (if present).
  • Note: Any gallery item with a link will now take the user to the linked website instead of opening a lightbox.

ADDING THUMBNAIL IMAGES FOR VIDEOS

By default, videos will appear as blank, dark gray thumbnails in the gallery unless a thumbnail image is used. To add thumbnail images for videos:

  • Click the Info button for a video in Media Drive.
  • Click Select Image to choose an image.

 

TIPS AND NOTES

  • Image optimization: Images and video in Media Drive is not optimized, compressed, scaled down, etc. Images and video retain their full quality, and therefore, file size. We encourage you to keep an eye on file sizes for images and video in your gallery. Large file sizes will result in slow page loads, especially on slower internet connections. Optimize files as needed to manage load time.
  • Refreshing Media Drive: if you find that gallery items are not being updated right away, you may use the Update Stream button for the gallery folder in Media Drive. Click the Info button to access this option. Similarly, changes made in Media Drive will not be seen in the Without Code builder unless the builder is refreshed. Reload the page to see changes made in Media Drive.
  • To learn more about Media Drive, see our documentation, which includes video tutorials: https://app.wocode.com/categories/media-drive/

This widget allows users to put video into motion by simply scrolling down a page. If the user changes direction and scrolls up, the video reverses direction and plays backward.

This video effect has been used on large websites like Apple.com and has become a highly sought-after site experience. Achieving this technique typically requires custom coding or extensive processing of a video clip in order to reduce it to hundreds of individual image frames. But our widget makes it easy – all you need is a video clip!

Note: This widget works best with video files hosted in Media Drive.

Preview: https://demo.wocode.com/video-scroll-motion

Tutorial Video

 

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it where you would like the video scroll motion to appear on your page layout.
  • Note that since this widget uses page scroll to advance through video frames, it will add considerable length to your page, based on the length of the video. When you place the widget into a row, it is normal for the containing row to become quite long.

WIDGET OPTIONS

  • Open the widget option panel.
  • Unique ID: Be sure to use unique ID’s when using multiple instances of the widget on the same page.
  • There are 3 possible sources for the video you use, as discussed below. But keep in mind that video streamed from Media Drive will always perform the smoothest. See the Video Preparation section below to grab our optimization preset and more information.
  • Media Stream URL: This is the link to your video stored in Media Drive. This option provides the best performance of the 3 video options available because you may optimize the video yourself for the best performance. To get the link, click the link icon for your video in Media Drive.
  • Upload Video: You may use the Upload Video button to upload a video. However, note that you may see performance issues with uploaded video. The Without Code builder automatically optimizes video that is uploaded, by compressing it. This optimization is designed to improve file size and page load speeds but the method of optimization is not ideal for the way this widget works. Note that the builder optimization takes place with the Upload Video option regardless of whether you’ve optimized the video yourself already.
  • YouTube, Vimeo or DailyMotion URL: You may use a share URL from YouTube, Vimeo or DailyMotion. However, performance may vary with these videos, as they will be optimized.
  • Video Length: This determines the length or portion of the video that will be shown in the video scroll motion. This setting does not have to match the length of the video, however you must use a value here that is equal to or less than the length of the video you’re using. Keep in mind that this widget is most useful for shorter videos (3-15 seconds is usually best).
  • Scroll Offset: Use this to offset the page position in which the video motion begins. This is useful if the video begins scrolling sooner or later than you’d like, or if you need to account for your site header. Negative values may be used.
  • Enable Overlay: You may use a color or image overlay. Color overlays help to stylize a video or match a brand, while transparent PNG grids can be used to improve the look of low resolution video. You may choose a color, load an image or customize in the Design section.
  • Enable Title an/or Description: You may display a title, description, or both. Enable this setting to turn the feature on.
  • Title/Description: Enter the title and description text. Leave a field empty to disable it from view.
  • Enable Text Fade: This feature creates a fade of the title and description text as the user scrolls.

DESIGN SETTINGS

There are numerous options that allow you to style various elements of the gallery; such as title and description styling, spacing and entrance animations. Note that this where you will choose a color or overlay image for the overlay option, as discussed above. We will not go over individual design settings, as they are labeled with their exact function and are self-explanatory.

VIDEO OPTIMIZATION

Video optimization is absolutely crucial. Video files that are just a few seconds long can be 20mb+. Large file sizes make the widget perform poorly, and result in bad page load speeds. Optimization drastically reduces file sizes, improving widget performance and page load speeds.

To make things easy, we’re providing a video optimization preset for you to use with Handbrake. Handbrake is a free, open source video transcoder that is awesome for optimizing video.

To optimize your video:

  • Download Handbrake.
  • Download our preset for Handbrake.
  • Open Handbrake.
  • Click Presets, then Import.
  • Click Open Source to select your video.
  • Ensure that the Video Scroll Motion preset is selected in the Preset dropdown.
  • Click Start to encode the video.

DON’T SKIP THIS STEP!

You may be tempted to skip this optimization step because your video editing software has a web optimization feature and you already have a small file size. Keep in mind that file size is not the only factor. Video codec, frame rate, and other factors are vital for a good user experience with this widget. By optimizing your video using the steps above, you can be sure you’re providing the best user experience on your site.

MORE VIDEO TIPS

  • Watch file size: As mentioned earlier, file size is important. Large video files can cause page load speed problems because the browser must load the entire video file when loading the page. The handbrake preset we provided will drastically reduce the video file size. Your video should only be a couple MB in size, and certainly less than 10MB! Aim for between 2-4MB.
  • Use shorter videos: This widget is intended more as an effect than as a way to display a normal informative video. As the user learns that they are in control of the video, they will likely be drawn to scrub the video frames back and forth, slowly and quickly. But overall, the video playback will usually be close to “slow motion”. Long videos are unnecessary and cumbersome. Use shorter videos with somewhere between 3-15 seconds as your target.
  • Trim videos: You may have noticed the “Video Length” setting in the widget options. This does not trim your video. This setting simply controls the amount of video that the widget will show. If your video is 10 seconds and you want the viewer to see all 10 seconds, then set this setting to 10. However, if you only need to show the first 5 seconds of the video, then it is best to trim the video to 5 seconds rather than loading a 10 second video. This way, the page load speed will be better as the browser only has to load a video that’s half the size.
  • Avoid “slow motion”: Lots of shorter, dramatic videos you might be tempted to use are “slow motion”. Slow motion videos are less ideal for this use case because the user will be controlling the speed of the video scrubbing, and normal speed video will often have a slow motion feel when used in this way. So slow motion can feel too slow.
  • Use Media Drive: As mentioned above in the Widget Options section, there are 3 video source options: Media Drive, uploaded video and video from streaming services such as YouTube, Vimeo or DailyMotion. We provide these options in order to provide flexibility but keep in mind that the Media Drive option is absolutely recommended for the smoothest video performance.Uploaded video and video from the streaming services (YouTube, Vimeo and DailyMotion) are all subject to optimization. When optimized, video is compressed. Compressed video may result in choppy, slow or otherwise poor performance.Media Drive was built with streaming in mind, and is the perfect video hosting for use with this widget. Video is not altered in any way, and allows the Video Scroll Motion widget to perform at its best.To learn more about Media Drive, see our documentation, which includes video tutorials: https://app.wocode.com/categories/media-drive/

The Directory Gallery is designed to accommodate a wide variety of listings and feature-rich galleries. The thing that makes this widget special is its powerful set of listing attributes. Each listing includes:

  • Title
  • Description
  • Button
  • Title Icon
  • Image Icon
  • Container Icon

The icons that are available for the title, image or container allow you to display badges, brand icons, sale tags and more – providing powerful features unavailable in any other gallery widget. Consider using this gallery for real estate listings, team members, portfolios and more.

Preview: https://demo.wocode.com/directory-gallery

Tutorial Video

 

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it where you would like the gallery to appear on your page layout.

WIDGET OPTIONS

  • Open the widget option panel.
  • Unique ID: Be sure to use unique ID’s when using multiple instances of the widget on the same page.
  • Columns: This is the number of columns that will be used in the gallery. This can be changed at any time.
  • Directory Items: These List Items make up all of the directory listings in your gallery. Click Add Item to begin adding items.

DIRECTORY ITEM OPTIONS

  • Container Icon (toggle): This toggle enables an icon that can be placed in the container. The container is the space where all the content for one listing exists. The following options are seen if this toggle is enabled:
  • Container Icon (loader): Select the icon for the container. You may choose from the library or upload your own.
  • Container Icon Position: Choose the position for your icon relative to the listing container: Top Left, Top Right, Bottom Left, Bottom Right. Consider using this option to display an icon in the bottom of the container. The Top Left and Top Right positions use placements similar to the Image Icon Top Left and Top Right Positions.
  • Image Icon (toggle): This toggle enables an icon that can be placed on top of the image. The following options are seen if this toggle is enabled:
  • Image Icon (loader): Select the icon to be placed on top of the image. You may choose from the library or upload your own.
  • Image Icon Position: Choose the position for your icon relative to the image: Top Left, Top Right, Bottom Left, Bottom Right. The Top Left and Top Right positions use placements similar to the Container Icon Top Left and Top Right Positions.
  • Item Title: This text will be displayed as the listing title.
  • Title Icon (toggle): This toggle enables an icon that can be placed next to the title. The following options are seen if this toggle is enabled:
  • Title Icon (loader): Select the icon to be placed next to the title. You may choose from the library or upload your own.
  • Title Icon Position: Choose the position for your icon relative to the title: Before Title Text or After Title Text (the title icon will appear to the left or right of the title)
  • Description Text: This text appears as the description in the listing.
  • Button Link: This is the link location for the button.
  • Button Label: The text that appears on the buttonAll of the above steps are used to create one listing. Repeat this process as needed to add all of the gallery listings.
  • Links and Images: This is where you will build your list containing text content and images.
  • List Items: Within each list item, you will find several options:
  • Image: Use this image loader to load your floating image. Choose from our massive library of images or upload your own.
  • Title: This is the main list item text. Note that this text does not have to be a link. Links are enabled later in this section.
  • Subtitle: The subtitle is displayed below the title when the user hovers over the title text. Leave this field empty if you choose not to display a subtitle.
  • Link URL: Enter your link URL here.
  • Link Target: Use this option to allow the link to be opened in the same window or a new window.
  • Display Item Number: You may display a number next to the title if you choose. This toggle enables/disables the option. The number will appear when the user hovers over the title, similar to the subtitle.

DESIGN SETTINGS

There are numerous options that allow you to style various elements of the widget; such as fonts, colors, and dedicated styling sections for the container, title, description button and more. The settings are labeled with their exact function, and will not be explained in detail, as they are self-explanatory.

TIPS AND NOTES

  • Image dimensions: You may notice as you add images that the images display at different aspect ratios. Images are displayed at their original aspect ratios. However, if you wish to display consistent, uniform sizing to all of the images, you may use the Image Dimension settings in the Item Image Styling section in the Design tab. Settings here will apply to all images in the gallery. If you wish to retain the original aspect ratios, leave these fields blank.
  • Styling elements in the Design section apply to all instances within an element. For example, when you update the styling for Image Icons, these settings will apply to all Image Icons in the gallery.
  • Icon styling settings can be found separately within corresponding sections such as Item Container Styling, Item Image Styling and Item Title Styling.

This widget puts thousands of icons at your fingertips by leveraging four different icon libraries. Consider using this widget when you need a specific social icon that is not supported by the standard Social Icons widget.

Preview: https://demo.wocode.com/social-icons-custom

Tutorial Video

 

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it where you would like the icons to appear.
  • You may resize the widget container if desired; you can resize it as needed after you set up your icons.

CONTENT SETTINGS

  • Open the widget option panel.
  • Unique ID: Be sure to use unique IDs when using multiple instances of the widget on the same page.

ICONS

This widget allows you to use icons from multiple libraries: FontAwesome, Line Awesome, Material Design and Dripicons. You may use icons from one library or mix and match.

Take special care to enter the icon classes as they are shown in the icon class examples provided in the widget and below. Some classes may be copy/pasted directly into the widget, but some may require you to reformat the class name slightly.

  • Enable Icon Libraries: Use the checkboxes to enable individual font libraries. You may use any combination of libraries.
  • FontAwesome 5: FontAwesome icons must be entered in the following format: fas fa-heart
  • Line Awesome: Line Awesome icons must be entered in the following format: las la-heart
  • Material Designs: Material Design Icons must be entered in the following format: mdi mdi-heart
  • Dripicons: Dripicons must me entered in the following format: dripicons-heart
  • Links and Images: This is where you will build your list containing text content and images.

Note: The FontAwesome and Line Awesome libraries in particular have different prefixes for different types of fonts. The examples given are fas fa-heart for FontAwesome and las la-heart for Line Awesome, but you may find that the prefix of the icon you need is fab, lab or something else. The best thing to do is copy the HTML code provided in the font library and delete all but the icon class name. Refer to the tutorial video for further instruction.

LIST ITEMS

The List Items are used to enter all of the attributes for each icon.

  • Button Link: This is the link that the icon will go to when clicked.
  • Icon Classes: Enter the icon class here.
  • Button Label: This field allows you to enter custom text that appears next to the icon. For example, you may enter “Facebook” if you would like a label next to the Facebook icon. This is optional and may be left blank.
  • Button Target: Select “New Tab” or “Same Tab” for link behavior.
  • Icon Color: This color field allows you to enter a color for the icon. You may use hex, RGB, or RGBA formats. Note that there is also an icon color picker in the Design section that applies a color globally to all of the icons used. This color selector acts as an override to any color selected in the Design section. Manual color code entry is required here (instead of the standard color picker) based on the fact that we’re pulling from font libraries rather than pre-selected icon choices.

DESIGN SETTINGS

There are numerous options that allow you to style various elements of the icons and the icon container, such as alignment, padding, fonts and hover colors. The settings are labeled with their exact function.

You may use custom fonts on your site that you have rights to use. You may also use Google Fonts. See our “Adding Google Fonts” doc for additional information.

Note: this feature is available on sites created after January 22, 2021.

Adding Custom Fonts

You may add an unlimited number of custom fonts to your site using the Add & Manage Fonts feature.

  • Click the Design button in the side menu on a new site.
  • Select Global Text.
  • Click the “A+” button next to the font selection dropdown.
  • In the Add & Manage Fonts window, select the Custom Fonts tab.
  • Click the Upload Fonts to begin adding your own custom fonts.

Notes

  • Be sure that you have permission to use the custom fonts you add to your site. If you’re unsure, contact the font library where you acquired the font.
  • You can add an unlimited number of fonts to your site, but try to limit the number of fonts you use, as too many fonts can be distracting and unattractive.
  • This feature is available on sites created after January 22, 2021.

You may use Google Fonts on your site. See Google’s massive font library here. You may also upload custom fonts that you have the rights for. See our “Adding Custom Fonts” doc for additional information.

Note: this feature is available on sites created after January 22, 2021.

Adding Google Fonts

You may add an unlimited number of Google Fonts to your site using the Add & Manage Fonts feature.

  • Click the Design button in the side menu on a new site.
  • Select Global Text.
  • Click the “A+” button next to the font selection dropdown.
  • In the Add & Manage Fonts window, click the dropdown to select a font.

Notes

  • You may add an unlimited number of fonts to your site. However, try to limit the number of fonts you use, as too many fonts can be distracting and unattractive.
  • This feature is available on sites created after January 22, 2021.

The Mega Menu widget is a an extremely powerful menu system capable of building flexible custom navigation menus. Multi-level dropdowns allow for easy organization of sites with large page counts. Fully customizable columns provide ease of grouping categories, while icons and image cards add visual interest.

With a set of features and options exceeding any other widget in our library, this widget is built with flexibility in mind. Consider using this widget when the standard Navigation Links menu lacks the functionality needed for your menu.

Preview: Mega Menu (view on mobile to see proper mobile version)

Notes:

This document covers the mobile version of the Mega Menu widget, intended for mobile use only. For desktop, you should use the standard Mega Menu widget.

This document explains the function of the settings in the widget menu. To see specific setup demonstrations, see our series of demo walkthrough videos:

Demo Walkthrough A: Full Width Menu with Columns, Headers and Icons

Demo Walkthrough B: Features Dropdown with Image Cards

Demo Walkthrough C: Locations Dropdown with Contact Details and Social Icons

Tutorial Video

 

Setup

A few notes before we begin…

Desktop vs. mobile: This mobile version of the Mega Menu widget is completely separate from the desktop version. This version must be set up separately from the desktop version. As much as we would love to offer the ability to set up both desktop and mobile at once, in one widget, it’s just not possible. The construction of each widget is different, and requires separate setups.

Restricted stying: You may notice that the styling options are less robust than normal. This is due to the specific way that menus are utilized in the builder for mobile layouts, and the inability to access CSS in these circumstances.

Consider whether you truly need a “mega” mobile menu: If you’ve seen what is possible with the Mega Menu widget, or you’ve built a great mega menu for your desktop site, you might be pretty excited to create a mobile version. But keep in mind that much of what makes the Mega Menu unique is the column control, as well as features such as image cards. These features will be much different on mobile, as screen space is limited. And as mentioned in the first note above, keep in mind that you will need to build out the menu separately on mobile. If this works for you – great! But keep in mind that if you have limited time, it is perfectly acceptable to use the Mega Menu for desktop visitors and the standard menu for mobile visitors.

Previewing in desktop: While working in the editor, you will need to use the Preview button in the top menu in order to see the menu render properly.

WIDGET PLACEMENT

This widget must be placed in the footer. This is the only way that the menu will render properly on mobile. Placement in the footer will allow the menu to appear throughout the site, on any page.

When you first drop the widget on your site, you will notice that it is auto-populated with all of the pages on your site – very similar to the standard Navigation Links menu widget. Any newly added pages will also appear in the Mega Menu widget. And as you re-order pages (in the builder sidebar menu), the pages will be re-ordered in the menu.

GLOBAL WIDGET OPTIONS

When you open the widget option panel, you will notice the title at the top: “Global Menu Configuration.” These settings apply to all settings in the menu. In the next section (below this section), we will discuss Menu Item Overrides. It is important to note that Menu Item Override settings override the global settings discussed in this section. This allows you to have greater flexibility and customization power.

  • Link Target: Choose to open links in the same tab or a new tab. Same tab is standard behavior for navigation menus.
  • Mobile Menu Position/Animation: This setting provides plenty of options for how the menu will appear. Options include entry from left/right/top/bottom, as well as full screen options.
  • Mobile Menu Close Text: This is the text that allows the user to close the menu.
  • Mobile Menu Overlay: This places an overlay over the site (the portion visible behind the menu). You may choose from Dark or Light.
  • Parent Indicator Open Icon / Parent Indicator Close Icon: These icons display when a dropdown is open or closed.

 

MENU ITEM OVERRIDES

Menu Item Overrides work hand in hand with pages on your site.

It is important to distinguish the purpose of Menu Item Overrides and pages, as they pertain to menu items:

  • Pages are used to create menu items (such as headings, column separators or cards).
  • Menu Item Overrides are used to customize menu items.

 

When you add a new menu item override, you will see that that item has its own set of options in a new menu on the right. As mentioned in the section above, Menu Item Overrides indeed override global settings.

For every menu item override, there must be a page created first – even for things that you can’t see, like Column Separators. For more on this, see the Adding Pages For Menu Item Overrides section below.

  • Click the Add Item Override link to begin adding item overrides. When you click on the newly added item, a new set of options will appear to the right.
  • Linked to page: If your item override should be linked to a page, use this setting to select the page. Leave this setting alone if you are adding an item that does not need to be linked, such as a Column Separator or Heading.
  • Item Type: Choose from Regular, Column Separator, Heading, Card, Social Icons or Contact Details. These are explained in detail below:
    • Regular: This is a standard menu item that can be placed in a column or as a child item in a dropdown.
    • Column Separator: These are used to separate columns in your menu. These are not standard menu items that will appear as links. They are simply used to define separation points for columns. To use Column Separators, create a new page, name it anything you like, and place it within the pages menu (click Pages in the builder sidebar menu) where you would like the separator to appear.
    • Heading: These are used to add header text to your menu. The most common usage would be titles for columns. Heading text in the menu is never linked to a page.
    • Card: These are typically used when you want to use images in your menu. For example, you may use multiple image cards as category headers within your menu columns.
    • Social Icons: Just as it sounds, this item type is used to display social icons within the menu.
    • Contact Details: Use this item type to display contact details within the menu.

When you’ve selected an item override, a new set of options will be displayed. Options differ for each item override type. You may note that these settings are the same as the settings explained in the Global Widget Options section above. However, keep in mind that Menu Item Overrides do as they are titled – they override Global Menu Configuration settings.

Some item overrides may have additional settings, such as image loaders or fields for title text. These are self-explanatory and behave as you would expect. When entering icon classes, use icon classes from the Font Awesome icon library. See the Using Font Awesome Icons section below for additional information.

 

CONNECTING MENU ITEM OVERRIDES TO PAGES

To customize any item in your menu, you will need to create a Menu Item Override and specify the menu item you wish to customize.

In this example we will focus on the “Mens Clothing” and “Womens Clothing” menu items. As you can see in the screenshot below, these appear as standard menu items.

 

We will use Menu Item Overrides and the Linked to page settings to turn these menu items into headers with bold titles.

  • Open the Mega Menu widget options.
  • Create a new Menu Item Override.
  • In the options menu that appears, click on Linked to page.
  • Select Mens Clothing.
  • Now any settings we make for this Menu Item Override will apply directly to the Mens Clothing menu item.
  • Click Item Type and choose Heading. This converts the Mens Clothing menu item into a heading. Headings are intended to create category titles within a menu, and are not displayed as clickable links in the menu. Remember that the Linked to page option simply links the menu item type to the menu item you wish to customize.
  • Repeat this process for any headers you wish to create.
  • To style our headers, we will open the Design panel in the widget options.
  • Open the Dropdown Heading Item Type menu.
  • Style the text as you like. In this case, we will increase the font size and bold the text.
  • All headers will have this styling applied.
  • Previewing in browser, we can see the header menu item type and styling applied to Mens Clothing and Womens Clothing.

 

PAGES AS MENU ITEMS

All menu items (such as headings or contact details) are created using pages. You will use the Pages menu in the builder sidebar menu to create and organize these.

You may wonder why we would use pages for this purpose. The reason is that the Pages menu provides the simplest way to organize the way that menu items are displayed. By organizing pages within the Pages menu, we can easily determine where things should go within the hierarchy of the menu.

As you will likely notice, many of the pages used as menu items are not pages at all (such as social icons). Pages that are used solely as menu items (such as column separators) will not be visited nor seen in site navigation. Pages like these should use the No Index option to ensure they are not indexed by search engines. See the No-Index Pages section below for additional information.

In this example we will look at creating pages to use as Social Icons within the mobile Mega Menu.

  • We’ll begin by creating a new page in the Pages menu. Click Pages in the sidebar menu of the builder and click the Add Page button.
  • Name the page “Social icons” (or similar).
  • Position the page in the Pages menu where you would like the icons to appear within the mega menu.
  • Back in the Mega Menu widget, create a new Menu Item Override item. The newly created item will be labeled “Regular” by default.
  • Click the item and a new menu will appear to the right.
  • Click Linked to Page and select social icons.
  • For Item Type, choose Social Icons. This process connects this menu item override with the Social Icons page.
  • Enter the details of your social icons. This may include titles, icons and links. For more information on using Font Awesome icons, see the Using Font Awesome Icons section below.
  • Once completed, you will see that the social icons on display in your mobile menu:

 

NO-INDEX PAGES

Many menu item overrides (such as Column Separators, Headers, and Contact Details) require us to create pages. These pages will of course not be seen in the site navigation. However, they should be disabled from indexing so that search engines like Google do not index them. To do this, enter the page settings and enable the No-Index option.

 

USING FONT AWESOME ICONS

Many Item Override types allow you to display icons. We use Font Awesome’s massive icon library for icons. To use an icon, follow these steps:

  • When you encounter an icon field, such as those in the Social Icons item override type, you will see text fields for the icon class.
  • Go to the fontawesome.com icon library.
  • Select an icon.
  • On the icon page, you will find the icon class.
  • You may click on the icon class to copy it, or simply remember the class name.
  • If you copy the icon class name, be sure to grab just the portion you need. You do not need the <i class> code. You will only need the portion in quotation marks.
  • To copy this portion, paste into a text field (you can paste this right into the icon class field in the widget options).
  • Be sure that only the area between the quotation marks is used:

 

NEXT…

Be sure to check out our series of demo walkthrough videos:.

Demo Walkthrough A: Full Width Menu with Columns, Headers and Icons

Demo Walkthrough B: Features Dropdown with Image Cards

Demo Walkthrough C: Locations Dropdown with Contact Details and Social Icons

Mega Menu hero image

The Mega Menu widget is a an extremely powerful menu system capable of building flexible custom navigation menus. Multi-level dropdowns allow for easy organization of sites with large page counts. Fully customizable columns provide ease of grouping categories, while icons and image cards add visual interest.

With a set of features and options exceeding any other widget in our library, this widget is built with flexibility in mind. Consider using this widget when the standard Navigation Links menu lacks the functionality needed for your menu.

Preview: Mega Menu

Notes:

This document covers the standard Mega Menu widget, intended for desktop use. For mobile, you may use the Mega Menu Mobile widget or use the default mobile menu.

This document explains the function of the settings in the widget menu. To see specific setup demonstrations, see our series of demo walkthrough videos:

Demo Walkthrough A: Full Width Menu with Columns, Headers and Icons

Demo Walkthrough B: Features Dropdown with Image Cards

Demo Walkthrough C: Locations Dropdown with Contact Details and Social Icons

 

Tutorial Video

 

Setup

WIDGET PLACEMENT

This widget should be placed in the header, unless you intend to have separate instances of your menu on separate pages. By placing in the header, the menu will appear globally throughout your site.

When you first drop the widget on your site, you will notice that it is auto-populated with all of the pages on your site – very similar to the standard Navigation Links menu widget. Any newly added pages will also appear in the Mega Menu widget. And as you re-order pages (in the builder sidebar menu), the pages will be re-ordered in the menu.

GLOBAL WIDGET OPTIONS

When you open the widget option panel, you will notice the title at the top: “Global Menu Configuration.” These settings apply to all settings in the menu. In the next section (below this section), we will discuss Menu Item Overrides. It is important to note that Menu Item Override settings override the global settings discussed in this section. This allows you to have greater flexibility and customization power.

  • Dropdown Mode: This determines the behavior of dropdowns in the menu. Predefined Width allows you to manually control the width. Full Width makes the dropdown span the entire width of the browser.
  • Dropdown Width: Defines the width of dropdowns. This settings only applies when Predefined Width is selected in the Dropdown Mode.
  • Dropdown Content Alignment: This sets the alignment of the content within the dropdowns. Choose from Left, Center or Right.
  • Distribution Mode for Items in Columns: You may choose Automatic distribution or Manual distribution for content within columns. Choose Manual distribution if you need to control the items within columns, or if there are differing amounts of content within columns.
  • Child Item Columns: Set the number of columns to be displayed in the menu (1 – 5 columns)
  • Link Target: Choose to open links in the same tab or a new tab. Same tab is standard behavior for navigation menus.

 

MENU ITEM OVERRIDES

Menu Item Overrides work hand in hand with pages on your site.

It is important to distinguish the purpose of Menu Item Overrides and pages, as they pertain to menu items:

  • Pages are used to create menu items (such as headings, column separators or cards).
  • Menu Item Overrides are used to customize menu items.

 

When you add a new menu item override, you will see that that item has its own set of options in a new menu on the right, often identical to the options seen in the Global Menu Configuration panel on the left. As mentioned in the section above, menu item overrides indeed override global settings. For example, this could allow you to have multiple dropdowns with differing column counts.

For every menu item override, there must be a page created first – even for things that you can’t see, such as Column Separators. For more on this, see the Adding Pages For Menu Item Overrides section below.

  • Click the Add Item Override link to begin adding item overrides. When you click on the newly added item, a new set of options will appear to the right.
  • Linked to page: If your item override should be linked to a page, use this setting to select the page. Leave this setting alone if you are adding an item that does not need to be linked, such as a Column Separator or Heading.
  • Item Type: Choose from Regular, Column Separator, Heading, Card, Social Icons or Contact Details. These are explained in detail below:
    • Regular: This is a standard menu item that can be placed in a column or as a child item in a dropdown.
    • Column Separator: These are used to separate columns in your menu. These are not standard menu items that will appear as links. They are simply used to define separation points for columns. To use Column Separators, create a new page, name it anything you like, and place it within the pages menu (click Pages in the builder sidebar menu) where you would like the separator to appear.
    • Heading: These are used to add header text to your menu. The most common usage would be titles for columns. Heading text in the menu is never linked to a page.
    • Card: These are typically used when you want to use images in your menu. For example, you may use multiple image cards as category headers within your menu columns.
    • Social Icons: Just as it sounds, this item type is used to display social icons within the menu.
    • Contact Details: Use this item type to display contact details within the menu.

When you’ve selected an item override, a new set of options will be displayed. Options differ for each item override type. You may note that these settings are the same as the settings explained in the Global Widget Options section above. However, keep in mind that Menu Item Overrides do as they are titled – they override Global Menu Configuration settings.

Some item overrides may have additional settings such as image loaders or fields for title text. These are self-explanatory and behave as you would expect. When entering icon classes, use icon classes from the Font Awesome icon library. See the Using Font Awesome Icons section below for additional information.

 

CONNECTING MENU ITEM OVERRIDES TO PAGES

To customize any item in your menu, you will need to create a Menu Item Override and specify the menu item you wish to customize.

In this example we will focus on the “Mens Clothing” and “Womens Clothing” menu items. As you can see in the screenshot below, these appear as standard menu items.

We will use Menu Item Overrides and the Linked To Page settings to turn these menu items into headers with bold titles.

  • Open the Mega Menu widget options.
  • Create a new Menu Item Override.
  • In the options menu that appears, click on Linked to page.
  • Select Mens Clothing.
  • Now any settings we make for this Menu Item Override will apply directly to the Mens Clothing menu item.
  • Click Item Type and choose Heading. This converts the Mens Clothing menu item into a heading. Headings are intended to create category titles within a menu, and are not displayed as clickable links in the menu. Remember that the Linked to page option simply links the menu item type to the menu item you wish to customize.
  • Repeat this process for any headers you wish to create.
  • To style our headers, we will open the Design panel in the widget options.
  • Open the Dropdown Heading Item Type menu.
  • Style the text as you like. In this case, we will increase the font size and bold the text.
  • All headers will have this styling applied.
  • Previewing in browser, we can see the header menu item type and styling applied to Mens Clothing and Womens Clothing.

 

PAGES AS MENU ITEMS

All menu items (such as headings, column separators or contact details) are created using pages. You will use the Pages menu in the builder sidebar menu to create and organize these.

You may wonder why we would use pages for this purpose. The reason is that the Pages menu provides the simplest way to organize the way that menu items are displayed. By organizing pages within the Pages menu, we can easily determine where things should go within the hierarchy of the menu.

As you will likely notice, many of the pages used as menu items are not pages at all (such as column separators). Pages that are used solely as menu items (such as column separators) will not be visited nor seen in site navigation. Pages like these should use the No Index option to ensure they are not indexed by search engines. See the No-Index Pages section below for additional information.

In this example we will look at creating pages to use as Column Separators. In the screenshot below, you will see that all of the product categories are in 1 column in our Store dropdown. We will use the Column Separator menu item override to create four columns.

  • We’ll begin by creating three new pages in the Pages menu. Click Pages in the sidebar menu of the builder and click the Add Page button.
  • Name the page “separator 1” (or similar).
  • Column Separators go between columns; so we will need three Column Separators to create four columns. Repeat the above process to create three total pages.
  • Move the separator pages into position where you would like to create column separations.
  • You may notice that creating these pages has placed them into your navigation menu. Don’t worry – once you finish setting these up as column separators, they will disappear from your navigation menu.
  • Back in the Mega Menu widget, create a new Menu Item Override item. The newly created item will be labeled “Regular” by default.
  • Click the item and a new menu will appear to the right.
  • Click Linked to page and select separator 1.
  • For Item Type, choose Column Separator. This process connects this menu item override with the “separator 1” page. It will now act as a column separator instead of a page on the site.
  • Repeat this process for all three separator pages.
  • Once completed, you will see that the four columns are properly separated:

 

  • If you do not see four columns, or if the columns seems smashed together, you may need to adjust one or both of the following settings:
    • Dropdown Width: Make sure the dropdown width is sufficient for the number of columns.
    • Distribution Mode for Items in Columns: This should be set to Manual when using Column Separators.

 

NO-INDEX PAGES

Many menu item overrides (such as Column Separators, Headers, and Contact Details) require us to create pages. These pages will not be seen in the site navigation, however, they should be disabled from indexing so that search engines like Google do not index them. To do this, enter the page settings and enable the No-Index option.

 

USING FONT AWESOME ICONS

Many Item Override types allow you to display icons. We use Font Awesome’s massive icon library for icons. To use an icon, take the following steps:

  • When you encounter an icon field, such as those in the Social Icons item override type, you will see text fields for the icon class.
  • Go to the fontawesome.com icon library.
  • Select an icon.
  • On the icon page, you will find the icon class.
  • You may click on the icon class to copy it, or simply remember the class name.
  • If you copy the icon class name, be sure to grab just the portion you need. You do not need the <i class> code. You will only need the portion in quotation marks.
  • To copy this portion, paste into a text field (you can paste this right into the icon class field in the widget options if you like).
  • Be sure that only the area between the quotation marks is used:

 

NEXT…

Be sure to check out our series of demo walkthrough videos:

Demo Walkthrough A: Full Width Menu with Columns, Headers and Icons

Demo Walkthrough B: Features Dropdown with Image Cards

Demo Walkthrough C: Locations Dropdown with Contact Details and Social Icons

Note: this feature is only available on sites hosted on our Ecommerce Pro or Ecommerce Unlimited plans.

You may now enable customers to schedule times for pickups or deliveries in your ecommerce sites. This will give your clients an edge on the competition and provide a feature their customers will appreciate.

Enable Delivery Windows

To enable delivery windows:

  • In the left panel, click Ecommerce, and then click Manage Store.
  • Click Settings, and then click Shipping & Pickup.
  • If you don’t have the Self Pickup option added, add the option by clicking the Add Pickup button in the Self Pickup section.
  • Follow the instructions to complete the process and click the “Ask for delivery date and time at checkout” link. 

Enable Pickup Windows

To enable pickup windows:

  • If you don’t have Local Delivery option added, add the option by clicking the Add Delivery button.
  • Scroll to the Date and Time Picker. Complete this section.

 

Editing Delivery or Pickup Settings

Once you’ve added Delivery or Pickup windows, you may edit them in the main Shipping & Pickup area. Choose Edit from the Actions dropdown to edit.

You may also disable these features at any time using the Enable/Disable toggle.

This unique widget displays an image as you hover over a link. Interactive elements, such as fluid brightness and smooth cursor follow are applied to the image in order to create a “floating” effect. Number ordering and custom description text can also be enabled to further enhance links.
Consider using this widget to display product images, show pictures of team members, highlight certain words or phrases in an blog post, or use as image-based tooltips!

Preview:https://demo.wocode.com/floating-link-images

Tutorial Video

 

Setup

WIDGET PLACEMENT AND SIZING

This widget utilizes a list format to display text. The floating images are applied to the text within this list. You may use the list format, or place separate instances of single lines of text placed where you like throughout a page. Be sure to check out our demo to see several different examples of usage.

  • Drop the widget into your site and place it where you would like the widget to appear on your page layout. You will see a single line of text to begin with.
  • Open the widget option panel.
    • Unique ID: Be sure to use unique IDs when using multiple instances of the widget on the same page.
    • Links and Images: This is where you will build your list containing text content and images.
    • List Items: Within each list item, you will find several options:
      • Image: Use this image loader to load your floating image. Choose from our massive library of images or upload your own.
      • Title: This is the main list item text. Note that this text does not have to be a link. Links are enabled later in this section.
      • Subtitle: The subtitle is displayed below the title when the user hovers over the title text. Leave this field empty if you choose not to display a subtitle.
      • Link URL: Enter your link URL here.
      • Link Target: Use this option to allow the link to be opened in the same window or a new window.
    • Display Item Number: You may display a number next to the title if you choose. This toggle enables/disables the option. The number will appear when the user hovers over the title, similar to the subtitle.

DESIGN SETTINGS

There are numerous options that allow you to style various elements of the widget, including fonts, colors, list container and image attributes. The settings are labeled with their exact function, and will not be explained in detail, as they are self-explanatory. However, we will discuss a few key settings:

  • Container Styling section: This section allows you to style the widget container. Consider using these styling options if you would like to display text in a button format or add elements such as background fill or border.
  • Content Styling Section: There are some important settings in this section. This is where you will select fonts, colors and image attributes.
  • Image Dimensions: Use these width/height settings to control the shape and size of the floating images.

TIPS AND NOTES

  • Image Dimensions: It is very important to utilize the image dimensions to maintain total control of both the shape and size of the images. Also note that these settings control the aspect ratio of the images. For example, the default settings are 300px width by 400px height. This will result in a portrait style aspect ratio. Even if your image has a landscape style layout, it will be displayed in a portrait aspect because of the dimensions in the widget. Utilize the image dimensions to fine tune the image.
  • Known Issue – Display Item Number Toggle: At the time of writing, there is a known issue with the toggle input that interferes with some Design settings. This issue is not a widget bug, but instead an issue with the widget input types in general. You may see this issue result in certain Design settings disappearing when the Display Item Number toggle (in the Content section) is toggled to OFF. If you encounter this issue, simply toggle the Display Item Number to on, then make your Design setting selections. The toggle the Display Item Number back to off.
Join Now