Builder Widgets Pro

To install the Builder Widgets Pro plugin:

1. Log into your Organic Themes account (www.organicthemes.com)
2. Go to Account > Downloads
3. Select the Builder Widgets Pro “Download Now” button to download the .ZIP file
4. After you’ve downloaded the plugin, go to the Plugins > Add New in your WP dashboard
5. Select Upload Plugin > Browse, and select the plugin .ZIP file to upload.
6. Activate the plugin

A license key allows you to have access to ongoing plugin updates. By applying the license key, you will see automatic notifications for all future plugin updates in the Plugins > Installed Plugins section of the dashboard (the update notification and link will appear underneath the Builder Widgets Pro plugin in this section). If you have not yet applied a license key to your site, please do so by logging into your www.organicthemes.com account and navigate to the Account > Licenses page in order to retrieve the plugin license. Copy the license key and apply it within the WordPress dashboard section under Builder Widgets > License. Paste the license key in the license field, and click the “Activate License” and “Save Changes” buttons.

After installing the plugin, and activating a theme on your site, follow these steps to start adding and using widgets to a page:

1. Add a new page under Pages > Add New.
2. Under Page Attributes apply the “Organic Custom” page Template.
3. Update or Publish the page.
4. Click the blue Customize Page button. This will take you into the WordPress Customizer for that page.
5. Click the + Add a Widget button to begin adding Organic Widgets to the page.
6. Continue adding and arranging widgets on the page as you see fit.
7. Save & Publish your changes.

It’s that simple. There are several custom Organic Widgets included with the plugin. Each widget acts as a unique content section — such as a slideshow, testimonials or pricing table. The widgets can be dragged and dropped into position to change the order in which they appear on the page. Additionally, your changes update in real-time within the Customizer, so you can see exactly what your site looks like at all times. It’s a fast, simple and secure way to build dynamic pages.

Note: The “Organic Custom” page template needs to be applied to any page before you can begin adding widgets to it.

Display an audio player of featured music, podcasts, and more. WordPress accepted audio files include .MP3, .OGG, and .WAV file formats. .MP3 files are the most commonly used audio files for WordPress websites. Click here to view an example of an Audio Playlist Widget.

1. Apply Organic Custom page template to selected page.
2. Update or Publish the page.
3. Click the Customize Page button.
4. Click the + Add A Widget button.
5. Select the Organic Audio Playlist widget.
6. To add audio files to your playlist widget, select the “Add or Upload Audio” button within the widget editor. Then, select the files you wish to add to your audio playlist (.MP3, .OGG, or .WAV files). Click the blue “Insert Audio Playlist” button.
7. Complete additional fields as desired, such as widget title, description, background image, playlist color (light or dark), and more.

This widget allows you to display a section of your most recent blog posts from a selected category, in your chosen layout. Click here to see an example of a Blog Posts Widget. Follow these instructions to create a Blog Posts Widget:

1. Apply Organic Custom page template to selected page.
2. Update or Publish the page.
3. Click the Customize Page button.
4. Click the + Add A Widget button.
5. Select the Organic Blog Posts widget.
6. Fill out desired fields, and select a post category from the “Post Category” dropdown menu. Here, you can also select a column number and card style.
7. Additional features: You may also choose a background color or image for the widget (under the Background Options tab), as well as font, color, and alignment (under the Text Options and Layout Options tab). Under the “Display Options” tab, you can also choose to hide or display post meta. You can check (or uncheck) the “Display Post Pagination” box to display multiple pages of posts (or not). There are also many other customization options to choose from!

The Business Info Widget allows you to display your business information in a full-width page section, including business hours, address, and contact information with links. Within the widget, you can also add social media links. Phone number and email address will automatically link to respective contact links, and link to Google map location will display underneath address. Click here to view an example of the Business Info widget in action.

1. Apply Organic Custom page template to selected page.
2. Update or Publish the page.
3. Click the Customize Page button.
4. Click the + Add A Widget button.
5. Select the Organic Business Info widget.
6.  Complete all desired business information fields.
7. Copy and past social media URL links within “Social Link” fields if desired; social media icons will display by default.
8. Additional features: You can choose from multiple customization options, such as widget background image/color, font options, content alignment options, and much more!

Content widgets (aka “Featured Content” or “Custom Content”) are simple content widgets that can be grouped together into a section, to create a single or multiple basic content sections. Add your own basic content, or select from an existing page to display a section of basic content. You can add a custom button to the Content widget, if desired. Click here to view an example of a basic Content Widget.

1. Apply Organic Custom page template to selected page.
2. Update or Publish the page.
3. Click the Customize Page button.
4. Click the + Add A Widget button.
5. Select the Organic Content widget.
6. Complete all desired fields to create your Content section, OR choose content from an existing page within the dropdown page selector.
7. Additional features: You can choose from multiple customization options, such as widget background image/color, font options, content alignment options, and much more!

This widget displays a section of posts with featured images and excerpts in the form of a slideshow. Click here to view an example of the Content Slideshow widget.

1. Apply Organic Custom page template to selected page.
2. Update or Publish the page.
3. Click the Customize Page button.
4. Click the + Add A Widget button.
5. Select the Organic Content Slideshow widget.
6. Select the Post Category you want to display from the dropdown menu within the widget, then select any additional options (Max Number of Posts, Posts Per Slide, Slide Transition, Slide Interval, and Slideshow Style). You can also check (or uncheck) the “Fixed Height Slideshow” option to either display all slides in equal sizes, or have slides different sizes according to their respective image size. Note: Slides have arrows to skip forward or backward, but will change automatically.
7. Additional features: You can choose from multiple customization options, such as widget background image/color, font options, content alignment options, and much more!

This widget displays a list of events in a table style layout. The events table displays the date, time, location, venue, and links for your event. You can select from a variety of table styles, layouts, and background options. Click here to view an example of a basic Events Widget.

1. Apply Organic Custom page template to selected page.
2. Update or Publish the page.
3. Click the Customize Page button.
4. Click the + Add A Widget button.
5. Select the Organic Events widget.
6. Complete all desired fields to create your “Events” list. To add an event, scroll down within the widget to add a numbered “Event Details” section. Complete all fields, and include a ticket link (if desired) by adding an Event Link Text and pasting a URL within the “Event Link URL” field. You can add as many events as you want!

Note: Events added do not automatically display in chronological order, but instead appear in the order in which they are added. You can rearrange your events by using the “up” or “down” arrows at the bottom of the event. Events will not disappear automatically after the date of the event has passed, so if you’d like to remove a past event, you will need to remove it manually within the widget editor by selecting the red “trash can” icon under the “Event Details” section for the event.

This widget allows you to display a food and drink menu or price list section on your website. You may add multiple Food Menu widgets per page, using a variety of layouts as seen in the demo. This is perfect for creating a menu page, which includes multiple menu categories or sections.

1. Apply Organic Custom page template to selected page.
2. Update or Publish the page.
3. Click the Customize Page button.
4. Click the + Add A Widget button.
5. Select the Organic Food Menu widget.
6. Add a title, such as “Appetizers” and an optional menu description. Select your menu style settings from the dropdown menus (Table Style & Divider Style). Select and apply all other desired options, such as Layout Options, and Background Options.
7. To add a menu item, find the “Food Menu Items” section at the bottom of the widget editor. Complete all fields including Menu Item Title, Menu Item Price, and Menu Item Description. Click the + button to add more menu items, and repeat the process for adding menu items.

The Feature List widget displays a list of features with icons displayed in multiple column layouts. You can select from a wide collection of icons, and choose the number of columns you’d like to display. Click here to view an example of the Feature List widget in action.

1. Apply Organic Custom page template to selected page.
2. Update or Publish the page.
3. Click the Customize Page button.
4. Click the + Add A Widget button.
5. Select the Organic Feature List widget.
6. Complete all desired fields to create your Feature List section, adding a button with external link if you wish. Be sure to select your number of columns in the “Number Of Columns” field.
7. To start adding list items, complete the fields under each “List Item” and select an icon for each (this is optional) by clicking the green “Select Icon” button. You can also upload your own icon in the Select Icon option, by selecting the “Change Image” button, under Custom Icon Image. You can move the order of list items around by using the “up” and “down” arrows at the bottom of each List Item.
8. Additional features: You can choose from multiple customization options, such as widget background image/color, font options, content alignment options, and much more!

Display a featured video on your site, perfect for promotional videos. This widget allows you to add a video by applying a YouTube or Vimeo video link. Click here to view an example of a Featured Video Widget.

1. Apply Organic Custom page template to selected page.
2. Update or Publish the page.
3. Click the Customize Page button.
4. Click the + Add A Widget button.
5. Select the Organic Featured Video widget.
6. To add a featured video, copy and paste the video URL into the Video URL field. For YouTube videos, click the “Share” button within the video, then copy and paste this shortened URL.
7. Complete all desired fields, such as video title and text, caption, background, and more. You can also select a Video Style from the dropdown menu (ie: rounded, bordered, modern, or default style). To add a button link to the widget, complete the Featured Link Text and URL fields. You may also modify the video content alignment within the “Layout Options” tab.

This widget provides a full browser height section with featured text and a call to action. Click here to view an example of a Hero Widget. Follow these instructions to add a Hero Section:

1. Apply Organic Custom page template within selected page.
2. Update or Publish the page.
3. Click the Customize Page button.
4. Click the + Add A Widget button.
5. Select the Organic Hero widget.
6. Add title and subtext as desired, within indicated fields.
7. Add a background image, color, or video. To add a background video: Within the YouTube site, click the “Share” button underneath the video, then copy and paste the URL within the YouTube Video URL field.
8. To add button links, simply give the button a title (Featured Link Text field), then copy/paste URL into Featured Link URL.
9. Additional features: You may check or uncheck the “Full Window Height Widget” to modify the window height of the Hero Widget. You may also select other advanced options, such as font, colors, content alignment, and more!

Note: WordPress does not currently support header or featured video for mobile, so if you’ve added a Background Video to your Hero Widget, it is still recommended to add a Background Image as a default for mobile view.

Quickly upload and display an image gallery section with multiple styles using the Image Gallery widget. Click here to view an example of this widget.

1. Apply Organic Custom page template to selected page.
2. Update or Publish the page.
3. Click the Customize Page button.
4. Click the + Add A Widget button.
5. Select the Organic Image Gallery widget.
6. To add the image gallery, select the “Create Gallery” button. Within the Media Library, you may add captions to your images by selecting, or “checking”, the image then adding the caption in the right-hand field (see image below). Holding down the “Shift” key, you can then select all desired images and click the “Insert Into Post” button.
7. Select all desired options such as Gallery Image Style/Size, Layout Options, Background Options, etc.

The Image Slideshow widget displays a full width image slideshow section, with optional text and links. In other words, you can display either a slideshow of plain images without text, or images with text overlaid. Click here to view an example of the Image Slideshow widget.

1. Apply Organic Custom page template to selected page.
2. Update or Publish the page.
3. Click the Customize Page button.
4. Click the + Add A Widget button.
5. Select the Organic Image Slideshow widget.
6. Set your options for slideshow transition, interval, and style by completing the respective fields within the widget editor. Additionally, you can choose from multiple other customization options, such as widget background image/color, font options, content alignment options, and more.
7. To add images to your slideshow: choose the “Select Image” button within each numbered Slide, and add a title and URL link (optional). You may change the order of your slides around, by using the “up” and “down” arrows at the bottom of each slide.

This widget displays a section of posts as portfolio images in a masonry layout. The Portfolio Widget displays either a portfolio of posts from the Jetpack custom post type, OR a post category defined within the widget options. Additionally, you can select a filterable portfolio option (see “Filterable Portfolio Option” step below). Click here to view an example of a Portfolio widget.

1. Apply Organic Custom page template to selected page.
2. Update or Publish the page.
3. Click the Customize Page button.
4. Click the + Add A Widget button.
5. Select the Organic Portfolio widget.
6. Select your Portfolio settings, such as post category (see below for filterable option), max number of posts, image style, etc. You can select additional customization options like text, layout, and background, and also select the “Hide Post Title” option (under Display Options) if you wish.

Note: If you have the “Projects” feature activated within the Jetpack plugin, you will not see the option to choose a post category within the Portfolio Widget – the Portfolio Widget will automatically display your Jetpack Projects posts. If you want to select from a category of standard WordPress posts, you will need to turn off the Jetpack Projects feature or disable the Jetpack plugin.

Filterable Portfolio Option: To use this feature, check the “Filterable Portfolio Menu” box toward the top of the widget editor, then:

• If using standard WordPress posts – you will need to create a parent category (ie: “Portfolio”), then add subcategories to the posts you want to display using the Portfolio Widget.
• 2. If using Jetpack Portfolio Projects post type: you’ll need to add categories to these posts as “Project Types”.

Create a section of pricing tables with a featured list and link to purchase. Click here to view an example of a basic Pricing Table widget. Each of the 3 pricing tables you see in the example is added as an individual Pricing Table widget.

1. Apply Organic Custom page template to selected page.
2. Update or Publish the page.
3. Click the Customize Page button.
4. Click the + Add A Widget button.
5. Select the Organic Pricing Table widget to add a table. You can then add more tables, they will display in a horizontal row as seen in the example above. Complete additional customization fields, such as button link and text, featured image or background color, and add text rows for each table.

The Organic Product (aka: “Featured Product”) widget displays a featured product image with a custom link and description. Click here to view an example of a basic Featured Product widget.

1. Apply Organic Custom page template to selected page.
2. Update or Publish the page.
3. Click the Customize Page button.
4. Click the + Add A Widget button.
5. Select the Organic Product widget.
6. Complete all desired fields to create your Featured Product section, adding a button with external link if you wish. Include a product description and set a Product Image.
7. Additional features: You can choose from multiple customization options, such as widget background image/color, font options, content alignment options, and much more!

The Profile Widget displays a personal profile section with an image, bio and social media links. Click here to view an example of a basic Profile Widget.

1. Apply Organic Custom page template to selected page.
2. Update or Publish the page.
3. Click the Customize Page button.
4. Click the + Add A Widget button.
5. Select the Organic Profile widget.
6. Complete all desired fields to create your personal profile, and select a Profile Image.To add social media links, simply copy and paste the URLs for your personal social media pages into the “Social Link” fields. The respective social media icons will appear automatically.

The Split Content Widget is a section with content on one side and an image on the other. You can choose which side displays what, then add multiple consecutive Split Content widgets and alternate sides for a unique and modern look. Click here to view an example of two Split Content widgets with alternating content sides.

1. Apply Organic Custom page template to selected page.
2. Update or Publish the page.
3. Click the Customize Page button.
4. Click the + Add A Widget button.
5. Select the Organic Split Content widget.
6. Add text, title, and background image (under Background Options) to create a content tile. You can check the “Flip Content Tiles” box to reverse the content. Additional customization options include background image/color, font options, content alignment options, and more.

Display existing page content as a section within another page, using the Subpage Widget. Click here to view an example of a basic Subpage Widget.

1. Apply Organic Custom page template to selected page.
2. Update or Publish the page.
3. Click the Customize Page button.
4. Click the + Add A Widget button.
5. Select the Organic Subpage widget.
6. Select an existing page from the dropdown in the widget editor, then choose any other optional page settings (text, layout, background, etc.)

A Team Members widget displays a section of team members from a selected post category. You must first create your team members as published posts with Featured Images, and a category (such as “Team”) applied to each team member post. Click here to view an example of a basic Team Members Widget.

1. Apply Organic Custom page template to selected page.
2. Update or Publish the page.
3. Click the Customize Page button.
4. Click the + Add A Widget button.
5. Select the Organic Team Members widget.
6. Select your team member post category from the “Team Category” dropdown in the widget editor, then set your other options such as max number of posts, column number, and card style.
7. Additional Team Member widget settings include background, text, font, layout options.

A Testimonials widget displays a section of testimonials from a selected post category (OR the Jetpack Testimonials custom post type), in slideshow format. You must first create your testimonials as published posts with Featured Images, and a category (such as “Testimonials”) applied to each team member post. Click here to view an example of a Testimonials Widget.

1. Apply Organic Custom page template to selected page.
2. Update or Publish the page.
3. Click the Customize Page button.
4. Click the + Add A Widget button.
5. Select the Organic Testimonials widget.
6. Select your Testimonials post category from the “Testimonials Category” dropdown in the widget editor, then set your other options such as max number of posts, column number, and card style.
7. Additional Testimonials widget settings include background, text, font, layout options.

Note: If you have the “Testimonials” feature activated within the Jetpack plugin, you will not see the option to choose a post category within the Testimonials Widget – the Testimonials Widget will automatically display your Jetpack Testimonials posts. If you want to select from a category of standard WordPress posts, you will need to turn off the Jetpack Testimonials feature, or disable the Jetpack plugin.