Content builders

Fudge 2.0 has been developed with a custom event builder to enable you to easily create page layouts using the powerful features of the theme such as performers, sponsors, tickets, exhibitors, etc. The event builder is available for use on pages. To use the content builder, you must first create a new page by navigating to Page -> Add New
The content builder gives you easy access to the customizable options available for each specific element.

When you click on any of the content builder elements, they are instantly added below the content builder icons and become part of the page.

• To edit the section, click on the blue ‘edit‘ button to the left-hand side of the new element to begin editing.
• Clicking on the ‘reset to default‘ button next to the ‘edit‘ button will reset the contents of that element to default and you will lose any customization you have made.
• You can add as many elements to the page as you like, giving you great flexibility in the way you can create your website.

Content Builder Event Description

The Event Description element allows you to add a description to the forthcoming event on your website.

1. Title: Title of the event, but you can arrange or add suited wording to call the attention of the final user.
2. Content: You have the option to include content and images describing your event.
3. Section styling: You can edit the alignment, title color, text color, background-color for this section, and margins.

Content Builder Performers Showcase

The Performers showcase element allows you to showcase all performers on your page. This will only work if you have set up performers in accordance with the instructions in Performers

1. The performers will then display and you will need to drag and drop the performers that you wish to appear on the page from the top section to the bottom.
2. This area allows you to set the title and subtitle
3. Show a “Load more button” (that will allow you to see the complete list of performers).
4. Edit this section background color, title text color, subtitle text color, performer title text color, performer subtitle text color, title text size, subtitle text size, performer title text sizes, performer subtitle text size, margin top, and margin bottom.

Content Builder Performers

The performer’s element allows you to display performers on your page. This will only work if you have set up performers
in accordance with the instructions in section Performers

1. The performers will then display and you will need to drag and drop the performers that you wish to appear on the page from the top section to the bottom.
2. This area allows you to set the title, subtitle as well as the subtitle for mobile devices only.
3. Top background image: Choose a background image to display in the header.
4. You are free to adjust colors, text sizes, and margins for this section.
   Note: you can leave blank for default settings.

 

 

Content Builder – Exhibitors Showcase

The “Exhibitors Showcase” element allows you to display exhibitors on your page. This will only work if you have setup
exhibitors in accordance with the instructions in Exhibitors

1. Search for all or one exhibitor. You will need to drag and drop the performers that you wish to appear on the page from the top section to the bottom.
2. This area allows you to set the title and subtitle.
3. You can show and hide a search field.
4.  Finally, you can setup colors, text sizes, and margins for this particular section.

 

 

Content Builder – Schedule

You should have a schedule page defined in your installation. That page will be used to show the agenda of your event.
The schedule element allows you to display a grid element containing your schedule and information of the session date, times and speaker’s/performer’s pictures and more.

Please note that in order for your Schedule element to work correctly, it is important that you have set up sessions and performers in accordance with the instructions.

1. Include Title and Subtitle.
2. You can set up a fixed image as the background of your Schedule page, or you can adjust other styling settings like colors, text sizes, and margins.

Content Builder – Schedule Showcase

The schedule showcase element allows you to display a grid element containing your schedule according to date or place or many other variables showing information on the session’s date and times, the speaker’s/performer’s pictures and more.

Please note that in order for your schedule showcase element to work correctly, it is important that you have set up sessions and performers in accordance with the instructions in the Fudge 2 Theme Guide.

1. Set the title and subtitle.
2. Set colors, text sizes, margins, etc (or leave blank for default settings).

Content Builder – Call to Action

It’s always important to give your visitors a clear call to action. Whether you are trying to get them to purchase your product or contact you for a quote, the call-to-action module will get the clicks you need. The Call to Action module is a simple combination of a title, body text, and a button. When combined with a vibrant background color, it can easily catch your visitor’s eye.

In order to build content in a Call to Action, follow these simple steps:

1. Set the title and subtitle.
2. Background image: You should set up three images according to each device. Notice that we provide the recommended size.
3. Button Text and URL: Adjust the wording of your call to action button and set up an URL that you want to highlight with this element.
4. Set the alignment, colors, text sizes, margins, etc (or leave blank for default settings).

Content Builder All Tickets

The All Tickets element allows you to display one or more tickets on your website. In order for this to display your tickets, you must have already set up tickets in accordance with the instructions in the Fudge 2 Theme Guide.

1. The All Tickets element will then display and initially
   • You will see a search box and buttons for ‘Add all’ and ‘Remove all’.
   • You can search for tickets you have created. The search results will appear in the first grey box.
   • You can then drag those tickets and drop them into the second grey box and repeat this process if necessary.
   • By clicking on the ‘Add all’ button you will add all available tickets to the second grey box.
   • Once they are here, you can then rearrange them by dragging and dropping to determine the order they will display on your page.
   • If you wish to remove tickets, you must click on the black cross to the right-hand side of the ticket as it appears in the grey box.
   • You can click on the ‘Remove all’ button and then start the above process again
2. You can then set a title and subtitle.
3. You can set up additional styling settings: colors, font sizes, and margins.

Content Builder – Registration

The registration element allows you to display the available ticket information embedded from Eventbrite, Woocommerce or event espresso as shown here – https://www.showthemes.com/fudge2-demo/register/

In order to use the registration element, you will need an embed code for the relevant service. Details on how to obtain an embed code can be found in Registration Services

1. Set the title, and subtitle.
2. Hide or show the Hero Section.
3. Enter your main text and add media.
4. Paste in your embed code for the registration service.
5. Customize colors, text sizes, and margins or leave blank for default settings.

Note: We do not use Woocommerce to a full extent, we only use it for tickets.
For anything Woocommerce related, we recommend reaching their forums or support page.

Content Builder Sponsors

The “Sponsors” element allows you to display one or more sponsors on your website. In order for this to display your sponsors, you must have already set up sponsors in accordance with the instructions in Sponsors

1. The Sponsors element will then display and initially, you will see a search box and buttons for ‘Add all’ and ‘Remove all’
   • You can search for sponsors you have created. The search results will appear in the first grey box.
   • You can then drag those sponsors and drop them into the second grey box and repeat this process if necessary.
   • By clicking on the ‘Add all’ button you will add all available sponsors to the second grey box.
   • Once they are here, you can then rearrange them by dragging and dropping to determine the order they will display on your page.
   • If you wish to remove sponsors, you must click on “black cross” to the right-hand side of the sponsor as it appears in the grey box.
   • You can click on the ‘Remove all’ button and then start the above.
2. This area allows you to set the title and description
3. Decide whether you wish to show the sponsors in large, medium or small size.
4. You have a variety of options for customizing colors and text sizes, and margins (or leave blank for default settings).

• By repeating from step 1 you can then add more sponsor types to the page. For example, if you chose to select
  large sponsors the first time, you can now make the next set of sponsors medium and customize the options for
  the display of those. Repeat again for small.

 

Content Builder – Map

The Map element allows you to display a map on your page that displays your points of interest. These points of interest can be conveniently grouped together to give you greater control of the display. In order to use this element, you will need to ensure that you have some points of interest added as per the instructions in Points of interest

1. The Map element will then display and initially,  you will see a search box and buttons for ‘Add all’ and ‘Remove all’.
   • You can search for points of interest you have created, the search results will appear in the first grey box.
   • You can then drag those points of interest and drop them into the second grey box and repeat this process if necessary.
   • By clicking on the ‘Add all’ button you will add all available points of interest to the second grey box.
   • Once they are here, you can then rearrange them by dragging and dropping to determine the order they will display on your page.
   • If you wish to remove points of interest, you must click on the black cross to the right-hand side of the point of interest as it appears in the grey box.
   • You can click on the ‘Remove all’ button and then start the above process again.
2. Include a title and subtitle if you like.
3. This area allows you to set preferences for colors, font sizes, and margins.

Content Builder Contact

The contact element allows you to display a contact form on your page so that people can get in touch with you. The contact element relies on the information you have provided in the theme settings as per the instructions in General Site Settings – Contact

1. Set the title and subtitle
2. Address information.
3. Phone information.
4. The text to be used in the “Send” button.
5. You can change some customization like color, text size, and margins.

Content Builder – Media

The media element allows you to add pictures or videos to your pages.

1. Adding images or videos:
   • The first thing you will see is a button labeled ‘Add pictures (press Ctrl or Cmd to select multiple pictures)’. Clicking this button will open the WordPress media library and allow you to add pictures.
   • Once pictures are added they appear in the grey box beneath the buttons.
   • You can then re-arrange the pictures into the order of your choice by dragging and dropping them.
   • If you wish to remove a picture, click the black cross to the top right-hand side of the picture.
   • You will also be able to add a video from YouTube or Vimeo by pasting the URL into the box next to the ‘Add Video’ button and then clicking the button.
   • Once the button is clicked, the video is added to the grey box below and will appear next to any pictures you have added.
   • You can rearrange the order by dragging and dropping.
2. Here you can set title and subtitle.
3. You can change some customization like color, text size, and margins.

 

Content Builder News

The News element allows you to display posts from your blog on your page.

1. The News element will then display and initially, you will see a search box and buttons for ‘Add all’ and ‘Remove all’.
   • You can search for posts you have created. The search results will appear in the first grey box.
   • You can then drag those posts and drop them into the second grey box and repeat this process if necessary.
   • By clicking on the ‘Add all’ button you will add all available posts to the second grey box.
   • Once they are here, you can then rearrange them by dragging and dropping to determine the order they will display on your page.
   • If you wish to remove posts, you must click on the black cross to the top right-hand side of the post as it appears in the grey box.
   • You can click on the ‘Remove all’ button and then start the above process again.
2. This area allows you to set the title and subtitle.
3. You can set up the text used by your “Load more” button as well as the text used by the “View all button”.  Make sure to set up a link to your “View all button” it should be linked to a page showing all your blog posts.
4. You can change some customization like color, text size, and margins.

 

Content Builder Social

The Social element allows you to display icons and links to your social media accounts, as defined in the theme settings. In order to display this element correctly, you must have already entered social media links into your theme settings as described in the instructions in General Site Settings – Social Networks

1. Your available social media accounts will be shown in the top grey box. Simply drag and drop the accounts you want to display on your page to the second grey box below.
2. This area allows you to set the title and subtitle.
3. You can some customization like color, text size, and margins.

Content Builder Timer

The Timer element allows you to display the countdown timer as defined in the theme settings.

1. Select the date of your event. Use the following format: mm/dd/yyy hh:mm (a data picker is available for you to choose the correct date and time).
2. You can change some customization like color, text size, and margins.

Content Builder Headline

The Headline element displays a headline of text.

1. Enter your title
2. Heading type
3. Text alignment
4. You can change color, and margins

Content Builder – Strapline

The Strapline element is much the same as the Headline element but it is not as large. Enter your title, text alignment, text color, and margins

Content Builder Heading

The Heading element works by displaying a heading in either small, medium or large size.

• Enter your title and subtitle.
• Text alignment.
• Edit the styling if you like: text color and margins-

 

Content Builder Text

The Text element allows you to add text and images to your page.

1. Content will allow you to add text and images in much the same way as the standard WordPress text editor.
2. Set the way the information inside the content text box will be aligned.
3. Adjust the line space (use the pixels, i.e. 18px).
4. Change the styling: text color, and margins.

Content Builder – Image

The Image element will allow you to add an image to your page.

1. In “Picture” you can add a picture by clicking the add button and selecting the image from your media library. If you click on the remove button then the image will be removed.
2. Add alt text: a brief description of the image
3. Specify the exact image width and height if you wish (in pixels, i.e.  640px).
4. Set the alignment for the image.
5. Adjust the margins (in pixels, i.e. 20px).

Content Builder Columns 2

The Columns 2 element allows you to display content on your page in two columns.

1. Content 1: Add your text and/or pictures that will appear in the left side column.
2. Content 2: Add your text and/or pictures that will appear in the right side column.
3. Se tup the alignment of your columns.
4. Adjust color, text size, and margins.

 

Content Builder Columns 3

The Columns 3 element allows you to display content on your page in three columns.

1. Content 1: Add your text and/or pictures that will appear in the left side column.
2. Content 2: Add your text and/or pictures that will appear in the middle column.
3. Content 3: Add your text and/or pictures that will appear in the right side column.
4. Adjust text color, text alignment, background color, text size, and margins.

Content Builder Columns 4

The Columns 4 element allows you to display content on your page in four columns.

1. Content 1: Add your text and/or pictures that will appear in the first column.
2. Content 2: Add your text and/or pictures that will appear in the second column.
3. Content 3: Add your text and/or pictures that will appear in the third column.
4. Content 4: Add your text and/or pictures that will appear in the fourth column.
5. Adjust text color, text alignment, background color, text size, and margins.

Content Builder Button

The Button element allows you to place a highly customizable button on your page.

1. Button label.
2. Button URL.
3. Text alignment: Alignment of your button.
4. Width and height of your button, you need to define that in pixels (i.e. 640px).
5. Options: color customization, text size, and margins.

Content Builder Newsletter

The Newsletter element allows you to add a newsletter signup to your page and link it to a Mailchimp form to collect the data.

1. Enter the details for the title.
2. Textbook text.
3. Button text.
4. Mailchimp URL.
5. You can customize background color, text color, button text color, button background color, text sizes, and margins.

Final result

Content Builder Sample Page

The content builder comes with a Sample page element that allows you to easily create a page type layout with a header hero image that you can add or remove, title, subtitle, and content. It is a great way to quickly and easily add page content to any page (Try to use this one for single pages only, and do not include any extra page builder items with this builder item). Note: We include a page named “Sample Page” with your demo content as an example.

1. Hero image: Add or remove an image to be used as the background header of this element.
2. Add a title and subtitle.
3. Include the content for your page. You can also add images.
4. Customization options for colors, text size, and margins.

 

Content Builder Event Info

The Event Info element allows you to add an upcoming event to your website and saves the date and time remaining to register in the application.

1. You can add pictures. Order and reorder them by dragging. Note: these images will be used by the slider layout.
2. Layout: You can select the layout for your header. There are four options: small, video, slider including default.
3. By clicking on “Import from Facebook” or “Import from Eventbrite” you’ll be able to automatically fill the fields: title, date, date Text, location Text from your Facebook or Eventbrite Event.
   Note: In order to correctly fill the fields you need to set up Facebook API parameters (with Event ID) and Eventbrite API Parameters (with Event ID) in the Theme Options page.
4. Enter the details for the title.
5. Setup a Section logo.
6. Enter date.
7. Date text.

8. Location text
9. Register button text.
10. Give the register button an URL.
11. Option to hide the register button.
12. Youtube video URL (if you have selected the video layout).
13. Background image for three different devices. All of them are mandatory for the default layout.

You can also adjust a lot of styling elements inside this section

Set the calendar text and “Hide calendar text & buttons” that will hide these from the event info page builder item

Different Layouts

Default: The image will be a background image field. If only the video is inserted then the video will be in the background.

Note: If a video URL is defined, that will be used instead as the background

Small: Similar to Default but much smaller in size.

Video: Similar to Default but instead of an image, the defined video will be on top.

Slider: All images defined initially on your event info page builder will be shown in the form of a slider.

Content Builder – Twitter Wrap

The Twitter Wrap element allows you to show tweets on your pages and refine the results further by
hashtag keywords and tweet counts. In order to display this element, you must have already entered your twitter API
details into the theme options as detailed in the instructions in General Site Settings – Social
API

1. Define the hashtag that you are going to use for your event.
2. Define the number of tweets that you want to show. Please notice that it will display any tweet using that hashtag.
3. Adjust the styling of that section: background color,  tweet background color, Tweet text color, Tweet name color, Tweet link color, and margins

 

Content Builder – Small Call to Action

It’s always important to give your visitors a clear call to action. Whether you are trying to get them to purchase your product or contact you for a quote, the call-to-action module will get the clicks you need. The module is a simple combination of a title, body text, and a button. When combined with a vibrant background color, this section can easily catch your visitor’s eye. The Small Call to Action element allows you to create a call to action with lesser information.

1. Set the title and subtitle.
2. Define the alignment of your element.
3. Adjust styling elements like background color, title color, subtitle color, link text color, link hover text color, title text size, subtitle text size, and margins.

 

Content Builder – Follow Us

The Follow us element lets you create icon-based links that point to your online social event hashtags on Facebook and Twitter. These icons are integrated into the theme, in the clean style which makes them preferable to use over third-party plugins. You can add links to multiple social profiles within each module, and add the module to anywhere on the page.

1. Set the title for this section.
2. Define a hashtag for your event, leave out the “#” symbol, just like the screenshot below.
3. Facebook page URL.
4. Set the styling of the section: background color, title text color, title text size, and margins.

 

Content Builder – Icon Boxes

The Icon Boxes element lets you create icon boxes that point to a particular link inside your site or to another website. These icons are integrated into the theme, in the clean style which makes them preferable to use over third-party plugins. It has three areas: Section 1, Section 2 and Section 3.

Each section has properties that you can adjust:

1. Add the text that will be displayed as a link.
2. Define the URL of the link.
3. Choose one of the available icons.
4. Set the styling of the section: background color, text colors, text sizes.

Note: you have the option to set up margins, but those margins will be equally used by the three sections.

 

Content Builder – Facebook Box

The Facebook Box element lets you create a section that shows the profile pictures of the attendees of your Facebook Event, as well as the attendees/interested count and a link to the event. In order to display this element, you must have already entered your Facebook API details into the theme options as detailed in the instructions in General Site Settings – Social API

1. Text before event link: It should be an invitation to the event, a short phrase.
2. Link to event on Facebook: include the link to your event page on Facebook.
3. Link text: Feel free to use any text, but you can simply include the name of the event.
4. Set some styling properties:  text/icon/links color and font size, background color and margins.