Documentation: Bellows

Knowledgebase Docs » Bellows

Images 9

Setting the Image Size When you upload an image to WordPress, multiple sizes of that image are automatically generated. Bellows allows you to select which size image to use in the accordion menu. Visit Appearance > Menus and click the tab of the Configuration you want to use. Then go to the Images panel to change the Image Size setting Select the smallest size that will fill the space in your menu to maximize efficiency. Setting an Image To set an image for a menu item, go to the Appearance > Menus screen, hover item the item you’d like to add an image to, and click the Bellows button to open the menu item settings panel. Then click on the Image Tab To select your image, click the Select button beside Image The Media Library window will appear. You can upload a new image, or select an existing image. Click Select to set the image. The image will be displayed in the settings panel. Note: make sure the Inherit Featured Image setting is set to “Disabled” in order to use your selected image (this is the default) Click Save Menu Item to save your changes. The image will appear within your menu Inheriting a featured image You can choose to automatically inherit the featured image assigned to any post to apply to the menu item. Assign Featured Image on Save This option will take whatever Featured Image is currently assigned to the associated post, and set it as the Image setting for this item. If you change the Featured Image for the post in the future, the menu item’s image will remain the same. This is more efficient than Dynamically Inheriting the image, as the post’s featured image won’t need to be looked up each time the menu is generated. […]

View

Custom Content 11

To add custom content to your menu item, open the Menu Item Settings for that menu item and click the Custom Content tab. Add any content you like to it, including text, HTML and shortcodes. Note that you cannot add PHP. If you want to execute PHP, just create a simple shortcode to wrap it, and then add your shortcode to the custom content area instead. Custom Content Spacing By default, the content will get the same padding around the edges as the normal menu items, so that everything will be aligned. If you’d prefer to have your content expand all the way to the edges of the container, uncheck Pad Custom Content Adding an item with only custom content First, create a new custom link, with the URL set to # and Link Text set to something to indicate what type of content you’ll add there. The Link Text will not actually be displayed when you’re done, so just give it a useful name, like “Contact Form” or “Map”. Add the item to the menu, and add your custom content to the menu item setting. To display only the custom content, and not the link, link text, image, etc, check the Custom Content Only box. Note that you can’t have a submenu for this item if it is purely custom content. Now the item’s content is purely your custom content. Note that Bellows does not control the styles of your custom content. As this content could be anything, the styling is left up to you.

View

Widgets 1

To add a widget to your menu, go to Appearance > Menus and add any menu item. If you wish to add only a Widget and no other content within the item, add a Custom Content item, set the URL to # and the Link Text to a name for your widget item Open the Bellows Menu Item Settings Panel for your widget item, and click on the Widgets tab. Here you can set up a custom widget area for this menu item. Enter a name for your widget area in the Custom Widget Area setting. If you would like to hide the link title, you can check the Disable Link setting under the General tab. Save your menu item settings and the menu (if you have just added a new menu item). After saving the menu item settings, visit your Widgets screen under Appearance > Widgets. You will see a new widget area has been added with the custom widget area name you set. Expand the widget area and drag the widget you’d like to add into that widget area. If you add multiple widgets, they will stack vertically. Your widget will appear on the front end of the site. Note that Bellows does not control the styles of your widget, those are controlled by the widget itself; Bellows just provides the container.

View

Descriptions 0

Descriptions are added via the WordPress core menu system’s menu item settings. Go to Appearance > Menus. Reveal the menu item’s settings by clicking the arrow on the right of the menu item If you do not see the Description setting, you can reveal it by clicking the Screen Options tab in the upper right of your screen, then checking the “Description” box under “Show advanced menu properties” Enter your description in the description box. Save the entire menu to save the description. Your description will appear below the Navigation Label inside the item link.

View

Multiple Configurations [Pro] 1

What is a Configuration? A Configuration is a set of settings that can be applied to a menu. For example, one configuration could be: Skin: Blue Folding: Multiple Current Submenu Expansion: Enabled and another might be Skin: Red Folding: Single Current Submenu Expansion: Disabled Using multiple Configurations allows you to have different settings applied to different menus. Configurations are also re-usable, so you can use the same Configuration for multiple menus without having to re-configure every setting. How to create a Configuration Out of the box, Bellows has a default configuration known as the Main Configuration. The settings can be managed in the Control Panel under the “Main Configuration” tab To create additional Configurations, click the + Add Bellows Configuration button on the right of the Control Panel Give your Configuration an ID, which will be used when applying the Configuration to a menu. Click Create Configuration Refresh the page to see the new tab for your new Configuration You can control this Configuration independently from the main Configuration. For example, you could set the skin on your +secondary Configuration to Blue Grey, and leave the Main Configuration skin set to Blue. To add a menu using your new Configuration, simply pass your new ID as the config_id parameter, for example in the shortcode. This will be generated for you in the Integration section of the Configuration tab, or via the Menu Generator UI As a demonstration, you can now apply different Configurations to the same menu. So these two menus have the same contents, but different Configurations applied: Main Configuration Secondary Configuration

View

Menu Code Generator UI [Pro] 0

Overview The Menu Code Generator UI is an interface for configuring, previewing, and generating code for your accordion menus. The Menu Code Generator UI can be used to create either WordPress menu-based accordion menus, or auto-populated accordion menus. To access the Menu Generator UI, visit Appearance > Bellows Menu in your WordPress admin, then click the Code Generator tab. Design & Usage The Menu Code Generator UI is designed to walk you through the workflow of configuring a menu. It helps you pick the pieces (menu source, configuration), combine them and preview the result. The Auto Population is covered in detail in the Autopopulation Guide, so we’ll focus on the WordPress Menu based option here. 1. Choose your accordion menu content source The first step is to decide how your menu will be populated. WordPress Menu – the contents of the menu will be defined by a menu that you manually create and organize in the Appearance > Menus panel (a standard WordPress menu) Auto Population – the contents of the menu will be automatically generated, based on either the Post or Term structure of your site, and the options you configure. 2. WordPress Menu – Select Configuration and Menu Click the WordPress Menu as your menu source, and you’ll be shown options for configuring this menu source. Configuration – set the Configuration to use for this menu. The Configuration is the set of settings that defines the look and functionality of your accordion menu. By default you will have a single Configuration – Main Configuration – but you can create Multiple Configurations Menu – set the menu (set of menu items defined in Appearance > Menus) to be used as the content for this menu 3. Preview As you update your settings on the left, the menu preview will […]

View