SpeakerSumo Theme Guide

  1. Home
  2. Docs
  3. SpeakerSumo
  4. SpeakerSumo Theme Guide

SpeakerSumo Theme Guide

Index

1. Getting Started With WordPress
2. Getting Started With SpeakerSumo
3. Installing SpeakerSumo
3.1 New SpeakerSumo Dashboard Sections
3.2 SpeakerSumo Customize Options
4. Customizing SpeakerSumo
4.1.1 General Site Settings – Logo
4.1.2 General Site Settings Choose a Font
4.2 General Site Settings – Social Networks
4.3 General Site Settings – Social API
4.4 General Site Settings – Contact
4.5 General Site Settings – Generate Dummy Data (Tools)
5. Setting up the data
5.1 Posts- Setting up the Blog
5.1.1 Setting up a blog page
5.2 Events
5.2.1 Setting up a full schedule page
5.3 Points of interest
5.3.1 Setting up a points of interest page ‘Map’
5.4 Books
5.4.1 Setting up a books page
5.5 Testimonials
5.5.1 Setting up a testimonial page
5.6 Topics
5.6.1 Setting up a topic page
6. Content Builder Creating page layouts
6.1 Content Builder – Testimonials
6.2 Content Builder Topics
6.3 Content Builder – Blog
6.4 Content Builder Current Events
6.5 Content Builder – Past Events
6.6 Content Builder – Schedule Showcase
6.7 Content Builder All Books
6.8 Content Builder – Call To Action
6.9 Content Builder Hero
6.12 Content Builder – Map
6.13 Content Builder Contact
6.15 Content Builder Media
6.16 Content Builder News
6.17 Content Builder Social
6.18 Content Builder – Headline
6.21 Content Builder – Text
6.22 Content Builder Image
6.23 Content Builder Columns 2
6.24 Content Builder Columns 3
6.25 Content Builder Columns 4
6.26 Content Builder Button
6.28 Content Builder – Sample Page
6.31 Content Builder – Logos
8. Best practices and Tips
9. Editing the CSS.

————–

1. Getting Started with WordPress

SpeakerSumo is a WordPress Theme (Tip: What is WordPress?) designed to showcase professional event and conference speakers.

You have made the right choice. Using SpeakerSumo requires an intermediate knowledge of WordPress.

This means that you should have basic knowledge of using WordPress. Our theme is made for WordPress.org (as opposed to WordPress.com) this means that you need a hosting provider where you can install WordPress and activate SpeakerSumo. If you don’t have a hosting provider, we suggest .

If you are not confident with WordPress, we suggest 3 actions:

  1. Watch the following videos: What is WordPress? How to Install WordPress – The Dashboard and read the handy guides at WPBeginner. Everything you need to know about running a WordPress site is on the web. WordPress is an open-source software with a huge and helpful community of users. You will find answer to any concerns you may have.
  2. Run a test installation with the default theme and give it a whirl. Play with it and get confident with different sections of the Dashboard.
  3. Use WordPress Forums and Docs. Search the forums for your question, there will probably be an answer. If there isn’t don’t be afraid to ask, you will find WordPress community eager to help and friendly.

Back to top

2. Getting Started With SpeakerSumo

We developed SpeakerSumo utilizing the core WordPress functionality as the basic foundation. It is designed to showcase professional speakers with great functionality and beautiful design.

Using SpeakerSumo you will be able to:

  • Showcase your public speaker profile.
  • Make it easy for customers find and hire you on the web.
    • Show your event schedule.
    • Show testimonials
    • Show topic ideas
    • List books you’ve written
    • Show all your social media links: Email, RSS, Facebook, Twitter, Flickr, Linkedin, Pinterest etc.
    • And so much more…

You will be able to do all this and more by focusing on two different areas:

  • SpeakerSumo Customization
  • SpeakerSumo Dashboard Sections

But first things first, let’s install and activate SpeakerSumo .

Back to top

3. Installing SpeakerSumo

To install and activate SpeakerSumo on your WordPress site, head over to Appearance-> Themes and click on the Add New button.

theme-add-new.png

On the next screen, click on the Upload Theme button at the top.

theme-upload-theme.PNG

Click on the Choose File button, locate the SpeakerSumo zip file, and then click the Install Now button.

themes-add-file.PNG

The theme will take some time to upload. When finished, click on the Activate link to activate SpeakerSumo on your site.

If you need more information about installing and activating themes in WordPress, then please read this article.

How to Update SpeakerSumo

  1. Create a full website backup: This step is crucial; it will allow you to recover the site in case the update couldn’t be completed.
  2. Save any custom CSS you have stored under Appearance > Customize > Additional CSS.
    Note: If your custom CSS is inside a child theme, it shouldn’t be a problem.
  3. Choose a different WordPress standard theme in the meantime. You can choose one of the WordPress standard themes.
    Select twenty twenty
  4. Delete your parent theme (in this particular case, Speakersumo)
    Delete theme
  5. Download the last version of your theme from your account member area.
  6. Install your parent theme again; the version number should change; you are free to check our changelog.
  7. Install the classic editor (if you don’t have that plugin already installed).
  8. Change the settings of your “Classic editor” >> Default editor for all users: Classic Editor.
  9. Activate your parent or child theme (that will depend on your initial setup)

Back to top

3.1 New SpeakerSumo Dashboard Sections

Apart from the Showthemes option, fourteen sections will appear in your WordPress admin sidebar (on the left hand side of the admin area).

These sections pertain to different content types showcased on your website. We will explain each section as required.

Back to top

3.2 SpeakerSumo Customize Options

Head over to Showthemes->Theme Options. Here you will see different options to customize SpeakerSumo. We will show you how to use each of these options later in this guide

dashboard-sections.png

Back to top

4. Customizing SpeakerSumo

Now that you have installed SpeakerSumo, it is time to set it up to meet your needs. We always suggest to activate the theme on a fresh WordPress installation with no plugins and no previously populated content.

Please head over to Showthemes->Theme Options.

Let’s have a look at the available options. The Theme Options panel for the SpeakerSumo theme is divided into five sections:

  • General Site Settings
  • Social Networks
  • Social API
  • Contact
  • Tools

We will walk you through each of these options. Don’t forget to click on Save Options (top-right) as you make changes.

Screen_Shot_2017-06-12_at_11.21.00.png

Back to top

4.1.1 General Site Settings-Logo

On the General Site Settings tab, the first option is to upload a logo for your site. You will see a button for uploading a logo. Click it. Browse the image logo and crop it as required and save the changes. Make sure your chosen image has the dimensions: 314 x 32 pixels.

Screen_Shot_2017-06-12_at_11.21.00.png

Back to top

4.1.2 General Site Settings – Choose a Font

On the General Site Settings tab, the second option is to choose a font for your site. SpeakerSumo comes with 21 fonts in both General font and Headings font for you to choose from.

There are two categories of font available in SpeakerSumo theme:

  • General Font: Mainly used for General font.
  • Headings Font: Mainly used for fonts used in Headings.

Screen_Shot_2017-06-12_at_11.21.00.png

Back to top

4.2 General Site Settings – Social Networks

This tab allows you to add your social media profiles for LinkedIn, Twitter, Facebook, Instagram, Snapchat, Youtube, Pinterest, Google+, Vimeo and with an option to enable Show RSS. Simply enter the URLs of your social media profiles. If you do not want to display particular network, then simply leave it blank.
To display social media icons on your website see 6.17 Content BuilderSocial

Screen_Shot_2017-06-12_at_11.24.02.png

Back to top

4.3 General Site Settings – Social API

This area allows you to enter the credentials needed to correctly integrate Google Maps. Simply enter the Google Maps API key into the field provided.

Screen_Shot_2017-06-12_at_11.25.52.png

Back to top

4.4 General Site Settings – Contact

This section controls the settings for the contact page.

Here is the information you need to provide:

  1. Recaptcha Site Key: Enter Recaptcha public key. Here is a tutorial on how to obtain Recaptcha public and private keys.
  2. Recaptcha Secret Key: Enter Recaptcha private key here.
  3. Recipient Email: Enter the email address to send forms to.

Screen_Shot_2017-06-12_at_11.27.07.png

Back to top

4.5 General Site Settings – Generate Dummy Data (Tools)

The last tab on Theme Options screen is Tools. SpeakerSumo provides a function to populate the site with dummy content.

Please read this carefully. By clicking on the Import button; you will populate the whole site with dummy content. While this is great if you don’t know where to start, it is non-revertible. Therefore you will need to delete the unnecessary content generated. This can take quite some time. We suggest to populate with dummy content only if you are not sure about how WordPress works and want just to edit content and pictures. Note: Populating the site with dummy content does not exclude reading this guide as you may still need to refer to it to change the populated options.

Screen_Shot_2017-06-12_at_11.28.01.png

Back to top

5. Setting up the data

In this section we will show you how to add posts, events, books, venues and topics to your profile.

Back to top

5.1 Posts Setting up the blog

You are going to use Posts to let people know about your latest news. The posts will display as a classic column design on your news page and when clicked will open up the relevant post details.

All of the styling for this can be customised to your liking when you set up the news page but first we will need to configure a few things:

1. Head to Settings->Permalinks. In Common Settings select Post Name and click on Save Changes.

2. Head to Posts-> Categories. Here, hange the name of the default Uncategorized category by clicking on Edit. Rename it to Blog or News or whatever name you prefer to call your blog page and click Update.

So now, wherever you want it to link to all your posts, you can link to all your posts like this: http://yourdomain.com/category/blog

That’s all, now go to Dashboard > Posts. You may see a sample post called “Hello world!”. Place your mouse over and some options will appear, click on Trash. We will delete this post to have our list of posts blank.

hello-world.png

To create a new Post go to Dashboard » Posts » Add New.

Here is the information you have to provide:

  1. Title: enter a title for your new post.
  2. Description: enter the content of your Post. You can include some media if you want.
  3. Featured Image: click on Set featured image to provide a picture to be displayed for this post. Recommended size is 350×361.
  4. Categories: always select the default category Blog, so all your posts can be listed by the ‘Blog’ category. But besides create more categories if you want. Click on Add New Category and a field will appear to enter your category and then click on the Add New Category button. Your new category will appear above checked.
  5. Tags: enter some tags for the post. If no tags have been provided yet, enter some separated by commas and click on Add. If they have, you can choose them from the Most Used tags. Either way, tags will appear below.
  6. And of course, click on Publish.

SpeakerSumo_Images.002.jpeg

Back to top

5.1.1 Setting up a blog page

SpeakerSumo can display your posts in an individual page, giving you control over the styling and customization for how this is displayed.

To set up your blog page, navigate to Page -> Add New

SpeakerSumo_Images.003.jpeg

  1. Title: Provide a title for your blog page.
  2. Show Editor: an edit box will appear.
  3. Frontend Editor: Here you will get option of frontend editor, frontend editor is available only for already created pages not for new pages. Frontend editor has the purpose of editing fields of components that are already added via backend builder if you click on an already saved page with components.
  4. Publish: Save, ublish or update your page
  5. Page attributes: leave these as they are
  6. Featured image: set featured image for the particular post from here.
  7. Content Builder:
    • select Blog to add a list of blog posts to your page
    • Click Edit to change the title shown at the top of the page and change styling elements.

Screen_Shot_2017-06-12_at_11.49.01.png

Back to top

5.2 Events

SpeakerSumo allows you to easily add past, present and upcoming events to your profile.

To create an event, go to Dashboard » Events » Add New.

Screen_Shot_2017-06-12_at_11.54.21.png

  1. Title: add the name of the event.
  2. Body Text: add a description of the event.
  3. Publish: Don’t forget to publish when you’re finished!
  4. Event Details:
    • Date – The date of the event
    • Start Time – The start time of the event
    • End Time – The end time of the event
  5. Session Locations: add the event location.
  6. Featured Image: Set a featured image for the event.

SpeakerSumo_Images.004.jpeg

So now if you come back to Dashboard » Events » Events you will see your new event in the list. Repeat this simple process for all your events.

Note: All Events MUST have a date assigned to them. Not inputting a date may result in the event not being visible.

Back to top

5.2.1 Setting up a full schedule page

SpeakerSumo has a fresh new look for the dedicated schedule page and setting up your full schedule page couldn’t be simpler.

Navigate to Page -> Add New.

SpeakerSumo_Images.003.jpeg

  1. Title: Provide a title for your full page schedule.
  2. Show Editor: Shows a text edit field
  3. Frontend Editor: Here you will get option of frontend editor, frontend editor is available only for already created pages, not for new pages. Frontend editor has the purpose of editing fields of components that are already added via backend builder if you click on an already saved page with components.
  4. Publish: save publish or update your page.
  5. Page attributes: leave these as they are.
  6. Featured Image: Set a Featured Image for the session.
  7. Content Builder:
    • Select Schedule Showcase, you will then see the following options.
    • Click Edit: edit title and styles according your requirements.

Screen_Shot_2017-06-12_at_12.11.11.png

Back to top

5.3 Points of interest

To add a place to the list of venues you’ve spoken at, go to Dashboard » Points of Interest » Add New.
Here you will have to provide some information:

SpeakerSumo_Images.005.jpeg

  1. Title: the name of the new Point of Interest.
  2. Description: add a description for the Point of Interest.
  3. POI Address Info: provide here the street, city, zip code and country of the Point of Interest. You can also set coordinates manually, by clicking the box in front of Manual coordinates and filling latitude and longitudes.
  4. And of course, click on Publish.

Screen_Shot_2017-06-12_at_12.19.03.png

Back to top

5.3.1 Setting up a Points Of Interest page ‘Map’

SpeakerSumo offers a dedicated page to display all the venues you’ve spoken at. This page displays a map with your points of interest conveniently located as markers which when clicked, display the information you entered for that point of interest. To set up your points of interest page, navigate to Page -> Add New.

SpeakerSumo_Images.006.jpeg

  1. Title: Provide a title for your points of interest page
  2. Show Editor: Shows a text edit field
  3. Frontend Editor: Here you will get option of frontend editor frontend editor is available only for already created pages not for new pages. Frontend editor has the purpose of editing fields of components that are already added via backend builder if you click on an already saved page with components.
  4. Content Builder: select map, you will then see the available options for the following
  5. Content Builder: now the item for content builder will display. The points of interest will then display and you will need to drag and drop the POI you wish to appear on the page from the top section to the bottom.
  6. Content Builder: Here you can give title, icon above title and zoom option.
  7. Edit Styles: Use edit styles according to section , title, map area, POI and set preferences for colours, font sizes and margins.
  8. Page attributes: leave these as they are.
  9. Featured Image: Set a featured image for the page.
  10. Publish: Don’t forget to publish when you’re finished

SpeakerSumo_Images.007.jpeg

Back to top

5.4 ‘“ Books

To add a new book, go to Dashboard » Books » Add New.

SpeakerSumo_Images.008.jpeg

Here you will have to provide some information about the your book:

  1. Title: the name of the book.
  2. Book details: Set a URL for the book.
  3. Author: Set the book author.
  4. Post Attributes: Leave these as they are.
  5. Featured Image: this is where you set the Featured Image that will be displayed whenever a book is shown on the website. Recommended size is 218×310.
  6. Publish: Don’t forget to publish!

Back to top

5.4.1 Setting up a books page

SpeakerSumo offers a dedicated page to display all of your books with many different options for customization. This page displays a grid of images for your books. To set up your books page, navigate to Page -> Add New

SpeakerSumo_Images.009.jpeg

  1. Title: Provide a title for your books page.
  2. Show Editor: Shows a text edit field
  3. Frontend Editor: Here you will get option of frontend editor, frontend editor is available only for already created pages not for new pages. Frontend editor has the purpose of editing fields of components that are already added via backend builder if you click on an already saved page with components.
  4. Content Builder: select books, you will then see the available options for the following
  5. Title: The title of the books section.
  6. Style: Set style options for the section.
  7. Featured Image: this is where you set the Featured Image that will be displayed whenever a book is shown on the website.
  8. Page attributes: leave these as they are
  9. Publish: Lastly, save publish or update your page.

Back to top

5.5 Testimonials

To add a new testimonial, go to Dashboard » Testimonials » Add New.

SpeakerSumo_Images.010.jpeg

Here you provide the testimonial itself:

  1. Title: The name of the person giving the testimonial.
  2. Details: The main body text of the testimonial.
  3. Author: Post author.
  4. Featured Image: Use this to show a photo of the person giving the testimonial. Recommended size is 295×305.
  5. Publish: Don’t forget to publish!

Back to top

5.5.1 Setting up a testimonials page

SpeakerSumo offers a dedicated page to display all of your testimonials with many different options for customization. To set up your testimonials page, navigate to Page -> Add New

SpeakerSumo_Images.011.jpeg

  1. Title: Provide a title for your testimonials page.
  2. Show Editor: Shows a text edit field
  3. Frontend Editor: Here you will get option of frontend editor, frontend editor is available only for already created pages not for new pages. Frontend editor has the purpose of editing fields of components that are already added via backend builder if you click on an already saved page with components.
  4. Content Builder: select Testimonials, you will then see the available options for the following
  5. Title: The title of the testimonials section.
  6. Style: Set style options for the section.
  7. Featured Image: this is where you set the Featured Image for the page.
  8. Page attributes: leave these as they are
  9. Publish: Lastly, save publish or update your page.

Back to top

5.6 ‘“ Topics

SpeakerSumo comes complete with a topics option that allows you to showcase your speaking topics. These topics can then link to other pages on your site or to external links.

SpeakerSumo_Images.012.jpeg

To add a new topic, go to Dashboard >> Topics >> Add new

Here you will have to provide some information about your topic:

  1. Title: the title of the topic.
  2. Topic Details: Here you can add the subtitle, topic features, button text and the button link.
  3. Author: Add author.
  4. Publish: And of course, click on Publish or Update. Repeat this process for all the topics you want to display on your website.

Back to top

5.6.1 Setting up a topics page

SpeakerSumo_Images.013.jpeg

SpeakerSumo can display a list of your chosen topics .To set up your topics page, navigate to Page -> Add New

  1. Title: Provide a title for your topics page.
  2. Show Editor: Shows a text edit field
  3. Frontend Editor: Here you will get option of frontend editor, frontend editor is available only for already created pages, not for new pages. Frontend editor has the purpose of editing fields of components that are already added via backend builder if you click on an already saved page with components.
  4. Featured Image: this is where you set the Featured Image for the page.
  5. Page attributes: leave these as they are.
  6. Content Builder: select Topics, you will then see the available options for the following:
    • The topics will then display and you will need to drag and drop the topic you wish to appear on the page from the top section to the bottom, you can rearrange the exhibits here to change the order they are displayed on the page.
    • This area allows you to set the title & icon above title option.
  7. Edit Styles: Edit colors and text sizes, margins etc or leave blank for default settings in edit styles such as section, title, hero, filter.
  8. Publish: Lastly, save publish or update your page.

Back to top

6. Content Builder Creating page layouts

SpeakerSumo has been developed with a custom content builder to enable you to easily create page layouts using the powerful features of the theme such as current events, past events, schedule, blogs, topics and more.

The content 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.

content-builder.png

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, you click on the blue Edit button to the left-hand side of the new element to begin editing. Please note: 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.

Back to top

6.1 Content Builder ‘“ Testimonials

The Testimonials element allows you to add a testimonials section to pages on your website.

ContentBuilder.023.jpeg

  1. Select the Testimonials icon from the Content Builder to add the a testimonials block to your page.
  2. Click the blue Edit button to see the options for this section.
  3. Use the search box to find the testimonials you wish to list.
  4. Drag the testimonials you want to keep from the top section to the bottom section and drag the icons to rearrange.
  5. Icon above title: leave this blank.
  6. Title: add the title of your testimonials section here.
  7. Subtitle: add a subtitle for your testimonials section here.
  8. Edit Styles: here you can edit the visual styles for the section including padding, color, size and alignment of text.
  9. Click Save Draft at the top of the page.
  10. Click Preview at the top of the page to see your new section in situ.
  11. When you’re finished, click Publish to publish the page.

Back to top

6.2 Content Builder ‘“ Topics

ContentBuilder.024.jpeg

The Topics element allows you to showcase a selection of speaking topics on a web page.

  1. Select the Topics icon from the Content Builder to add a topics block to your page.
  2. Click the blue Edit button to see the options for this section.
  3. Use the search box to find the topics you wish to list.
  4. Drag the topics you want to keep from the top section to the bottom section and drag the icons to rearrange.
  5. Icon above title: leave this blank.
  6. Title: add the title of your topics section here.
  7. Edit Styles: here you can edit the visual styles for the section including padding, color, size and alignment of text.
  8. Click Save Draft at the top of the page.
  9. Click Preview at the top of the page to see your new section in situ.
  10. When you’re finished, click Publish to publish the page.

Back to top

6.3 Content Builder ‘“ Blog

ContentBuilder.010.jpeg

The Blog element allows you to add a blog section to pages on your website.
Select the Blog icon from the Content Builder to add a testimonials block to your page.
  1. Click the blue Edit button to see the options for this section.
  2. Use the search box to find the blog posts you wish to list.
  3. Drag the blog posts you want to keep from the top section to the bottom section and drag the icons to rearrange.
  4. Icon above title: leave this blank.
  5. Title: add the title of your blog section here.
  6. Edit Styles: here you can edit the visual styles for the section including padding, color, size and alignment of text.
  7. Click Save Draft at the top of the page.
  8. Click Preview at the top of the page to see your new section in situ.
  9. When you’re finished, click Publish to publish the page.

Back to top

6.4 Content Builder – Current Events

The Current Events element allows you to add a current events section to pages on your website.

ContentBuilder.008.jpeg

  1. Select the Current Events icon from the Content Builder to add the current events block to your page.
  2. Click the blue Edit button to see the options for this section.
  3. Use the search box to find the events you wish to list.
  4. Drag the events you want to keep from the top section to the bottom section and drag the icons to rearrange.
  5. Icon above title: leave this blank.
  6. Title: add the title of your current events section here.
  7. Button Text: add the text for your button here.
  8. Button URL: add the URL for the web page you want to the button to link to.
  9. Edit Styles: here you can edit the visual styles for the section including padding, color, size and alignment of text.
  10. Click Save Draft at the top of the page.
  11. Click Preview at the top of the page to see your new section in situ.
  12. When you’re finished, click Publish to publish the page.

Back to top

6.5 Content Builder – Past Events

The Testimonials element allows you to add a past events section to pages on your website.

ContentBuilder.018.jpeg

  1. Select the Past Events icon from the Content Builder to add the past events block to your page.
  2. Click the blue Edit button to see the options for this section.
  3. Use the search box to find the events you wish to list.
  4. Drag the events you want to keep from the top section to the bottom section and drag the icons to rearrange.
  5. Icon above title: leave this blank.
  6. Title: add the title of your past events section here.
  7. Button Text: add the text for your button here.
  8. Button URL: add the URL for the web page you want to the button to link to.
  9. Edit Styles: here you can edit the visual styles for the section including padding, color, size and alignment of text.
  10. Click Save Draft at the top of the page.
  11. Click Preview at the top of the page to see your new section in situ.
  12. When you’re finished, click Publish to publish the page.

Back to top

6.6 Content Builder – Schedule Showcase

The Schedule Showcase element allows you to display a grid containing your schedule which can be filtered by date, place and other variables.

ContentBuilder.021.jpeg

  1. Select the Schedule Showcase icon from the Content Builder to add the a schedule block to your page.
  2. Click the blue Edit button to see the options for this section.
  3. Icon above title: leave this blank.
  4. Title: add the title of your schedule section here.
  5. Edit Styles: here you can edit the visual styles for the section including padding, color, size and alignment of text.
  6. Click Save Draft at the top of the page.
  7. Click Preview at the top of the page to see your new section in situ.
  8. When you’re finished, click Publish to publish the page.

Back to top

6.7 Content Builder – All Books

The All Books element allows you to add a section showing all books listed on your website.

ContentBuilder.009.jpeg
  1. Select the All Books icon from the Content Builder to add the a books block to your page.
  2. Click the blue Edit button to see the options for this section.
  3. Title: add the title of your books section here.
  4. Edit Styles: here you can edit the visual styles for the section including padding, color, size and alignment of text.
  5. Click Save Draft at the top of the page.
  6. Click Preview at the top of the page to see your new section in situ.
  7. When you’re finished, click Publish to publish the page.

 

Back to top Wizzle

6.8 Content Builder – Call to Action

The Call To Action element allows you to add a custom call to action button to pages on your website.

ContentBuilder.003.jpeg

  1. Select the Call To Action icon from the Content Builder to add a call to action button.
  2. Click the blue Edit button to see the options for the button.
  3. Icon above title: leave this blank.
  4. Title: add the title of your testimonials section here.
  5. Background image: add a background image to your call to action. Recommended size: 1440 × 438.
  6. Background image tablet: add a background image optimized for tablet viewing to your call to action. Recommended size: 769 × 295.
  7. Background image mobile: add a background image optimized for mobile viewing to your call to action. Recommended size: 321 × 295.
  8. Button Text: add the text for your call to action button here.
  9. Button URL: add the URL for your call to action button here.
  10. Edit Styles: here you can edit the visual styles for the section including padding, color, size and alignment of text.
  11. Click Save Draft at the top of the page.
  12. Click Preview at the top of the page to see your new section in situ.
  13. When you’re finished, click Publish to publish the page.

Back to top

6.9 Content Builder “Hero”

The Hero element allows you to add a Hero section, these can be used to highlight key content or show videos.

Content builder, hero icon.

How to add a Hero Content Builder item:

    1. Select the Hero icon from the Content Builder to add the Hero block to your page.
    2. Click the blue Edit button to see the options for this section.
      Hero edit link
    3. Adjust the settings according to the Layout and your site requirements.
      Hero settings

      1. Layout: Choose the layout type from the three options: Default, Big and, Background Video.
      2. Title: Title of this section.
      3. Description under title: Add a subtitle for this section.
      4. Call to Action Button Text: Text for your call to action button.
      5. Call to Action Button URL: URL for your call to action button.
      6. Hide Call to Action Button: Choose this option to hide the call to action button.
      7. YouTube Video ID:
        For this video: https://www.youtube.com/watch?v=c664fvAZ1nI

        Use what’s after the “v=”, in this particular example, it will be the code c664fvAZ1nI

        Background images
        Note: All these background images are required or else the theme will show an empty image as background.
      8. Background image: Background image on Desktop. Recommended size: 1440×664 px, Big layout: 1440×873 px.
      9. Background image tablet: Background image used for tablet devices. Recommended size: 768×754 px, Big layout: 768 x 957 px.
      10. Background image mobile: Background image used for mobile. Recommended size: 326×448 px, Big layout: 326 x 585 px.
        Note: All these background images are required or else the theme will show an empty image as background.
      11. Edit Styles: here you can edit the visual style of Section, Title, Description and the call to action button.
        For each element is different, for example, on Title, you can adjust the color, font size, and alignment.
        Edit styles
    4. When you’re finished, click Publish or Update to publish the page.
      Update page

Here is a quick example of the default layout.

Default Layout

The Big layout will use more space.

Big Layout

And the video layout will use the chosen video as the background.

Video Layout

Back to top

6.12 Content Builder – Map

The Map element allows you to display a map on your page that displays your points of interest (venues you’ve spoken at). These points of interest can be conveniently grouped together to give you greater control of the display.

ContentBuilder.015.jpeg

  1. Select the Map icon from the Content Builder to add the map block to your page.
  2. Click the blue Edit button to see the options for this section.
  3. Use the search box to find the points of interest (venues) you wish to list.
  4. Drag the points of interest you want to keep from the top section to the bottom section and drag the icons to rearrange.
  5. Icon above title: leave this blank.
  6. Title: add the title of your map section here.
  7. Subtitle: add a subtitle for your map section here.
  8. Zoom:
  9. Edit Styles: here you can edit the visual styles for the section including padding, color, size and alignment of text.
  10. Click Save Draft at the top of the page.
  11. Click Preview at the top of the page to see your new section in situ.
  12. When you’re finished, click Publish to publish the page.

Back to top

6.13 Content Builder Contact

ContentBuilder.007.jpeg

The Contact element allows you to display a contact form and contact details on your page so that people can get in touch with you.

  1. Select the Contact icon from the Content Builder to add the a contact form to your page.
  2. Click the blue Edit button to see the options for this form.
  3. Use the search box to find the testimonials you wish to list.
  4. Drag the testimonials you want to keep from the top section to the bottom section and drag the icons to rearrange.
  5. Icon above title: leave this blank.
  6. Title: add the title of your contact form section here.
  7. Subtitle: add a subtitle for your testimonials section here.
  8. Address title: add a title/heading above your address.
  9. Address line 1: enter your address here.
  10. Address line 2: enter your address here.
  11. Address line 3: enter your address here.
  12. Phone title: add a title/heading above your phone details.
  13. Phone 1: enter your phone number here.
  14. Phone 2: enter your phone number here.
  15. Phone 3: enter your phone number here.
  16. ‘Send message’ Text: enter the text for the ‘send message’ button.
  17. Edit Styles: here you can edit the visual styles for the section including padding, color, size and alignment of text.
  18. Click Save Draft at the top of the page.
  19. Click Preview at the top of the page to see your new section in situ.
  20. When you’re finished, click Publish to publish the page.

Back to top

6.15 Content Builder – Media

The Media element allows you to add pictures or videos to your pages and set customization options for their appearance.

ContentBuilder.016.jpeg

  1. Select the Media icon from the Content Builder to add the media block to your page.
  2. Click the blue Edit button to see the options for this section.
  3. Click on Add Pictures to add images using the WordPress media browser or enter a video URL (YouTube or Vimeo) in the field below.
  4. Icon above title: leave this blank.
  5. Title: add a title for your media here.
  6. Load More Button Text: add the text for your ‘Load More’ button.
  7. Edit Styles: here you can edit the visual styles for the section including padding, color, size and alignment of text.
  8. Click Save Draft at the top of the page.
  9. Click Preview at the top of the page to see your new section in situ.
  10. When you’re finished, click Publish to publish the page.

Back to top

6.16 Content Builder News

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

ContentBuilder.017.jpeg

  1. Select the News icon from the Content Builder to add a news block to your page.
  2. Click the blue Edit button to see the options for this section.
  3. Use the search box to find the articles you wish to list.
  4. Drag the articles you want to keep from the top section to the bottom section and drag the icons to rearrange.
  5. Icon above title: leave this blank.
  6. Title: add the title of your news section here.
  7. “View all” button text: add the text for your view all button here.
  8. “View all” button URL: add the URL for your view all button here.
  9. Edit Styles: here you can edit the visual styles for the section including padding, color, size and alignment of text.
  10. Click Save Draft at the top of the page.
  11. Click Preview at the top of the page to see your new section in situ.
  12. When you’re finished, click Publish to publish the page.

Back to top

6.17 Content Builder Social

The Social element allows you to display icons and links to your social media accounts, as defined in the theme settings.

ContentBuilder.022.jpeg

  1. Content Builder: select the Social element and you will then see the available options for the Social element.
  2. Your available social media accounts will be shown in the top gray box, simply drag and drop the accounts you want to display on your page to the second gray box below.
  3. Icon above title: leave this blank.
  4. Title: add the title of your social section here.
  5. Subtitle: add a subtitle for your testimonials section here.
  6. Edit Styles: here you can edit the visual styles for the section including padding, color, size and alignment of text.
  7. Click Save Draft at the top of the page.
  8. Click Preview at the top of the page to see your new section in situ.
  9. When you’re finished, click Publish to publish the page.

Back to top

6.18 Content Builder Headline

The Headline element displays a headline of text.

ContentBuilder.011.jpeg

  1. Select the Headline icon from the Content Builder to add the a headline block to your page.
  2. Click the blue Edit button to see the options for this section.
  3. Text: add the text for your headline.
  4. Edit Styles: here you can edit the visual styles for the section including padding, color, size and alignment of text.
  5. Click Save Draft at the top of the page.
  6. Click Preview at the top of the page to see your new section in situ.
  7. When you’re finished, click Publish to publish the page.

Back to top

6.21 Content Builder Text

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

ContentBuilder.013.jpeg

  1. Content Builder: select the Text element,
    and you will then see the available options for the text element.
  2. Content Builder will allow you to add text and media in much the same way as the standard WordPress text editor.
  3. You will also find options below for setting the text alignment, line spacing, text color and margins.
  4. Edit Styles: Edit colors and text sizes, margins etc or leave blank for default settings in edit styles such as section, content.

Back to top

6.22 Content Builder – Image

The Image element will allow you to add an image to your page.
ContentBuilder.019.jpeg
  1. Content Builder: select Image element and
  2. you will then see the available options for the image element.
  3. In picture you can add a picture by clicking the add button and selecting the image from your media library. If you click on remove button then the image will be removed.You can add alt text (a brief description of the image) and specify the exact image width and height if you wish. You can also set the alignment for the image and any margins you may like.
  4. Edit Styles: Edit colors and text sizes, margins etc or leave blank for default settings in edit styles such as section, image.

Back to top

6.23 Content Builder Columns 2

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

ContentBuilder.004.jpeg

  1. Content Builder: select Columns 2 element and
  2. Content 1: you will then see the available options for the Columns 2 element.
  3. Content 2: Here you can add your text and/or pictures that will appear in the left side column and can add your text and/or pictures that will appear in the right side column
  4. Edit Styles: Edit colors and text sizes, margins etc or leave blank for default settings in edit styles such as section, content1 and content 2.

Back to top

6.24 Content Builder Columns 3

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

ContentBuilder.005.jpeg

  1. Content Builder: select the Columns 3 element and you will then see the available options for the Columns 3 element.
  2. Content 1: Here you can add your text and/or pictures that will appear in the left side column
  3. Content 2: Here you can add your text and/or pictures that will appear in the middle column.
  4. Content 3: Here you can add your text and/or pictures that will appear in the right side column.
  5. Edit Styles: Edit colors and text sizes, margins etc or leave blank for default settings in edit styles such as section,content1, content2, content3.

Back to top

6.25 Content Builder ‘“Columns 4

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

ContentBuilder.006.jpeg

 

  1. Content Builder: select Columns 4 element and you will then see the available options for the Columns 4 element.
  2. Content 1: Here you can add your text and/or pictures that will appear in the first column.
  3. Content 2: Here you can add your text and/or pictures that will appear in the second column.
  4. Content 3: Here you can add your text and/or pictures that will appear in the third column.
  5. Content 4: Here you can add your text and/or pictures that will appear in the fourth column.
  6. Edit Styles: Edit colors and text sizes, margins etc or leave blank for default settings in edit styles such as section, content1, content2, content3, content4.

Back to top

6.26 Content Builder Button

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

ContentBuilder.002.jpeg

  1. Content Builder: select Button element and
  2. you will then see the available options for the Button element.
  3. Add text and URL link for the button.
  4. Edit Styles: Edit colors and text sizes, margins etc or leave blank for default settings in edit styles such as section and button.

Back to top

6.28 Content Builder Sample Page

The content builder comes with a sample page element that allows you to easily create a page type layout with 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.

ContentBuilder.020.jpeg

  1. Content Builder: select the Sample page element and
  2. you will then see the available options for the Sample page element.
  3. Add icon above title, title, media and content for your page.
  4. Edit Styles: Edit colors and text sizes, margins etc or leave blank for default settings in edit styles such as section, title, hero, content.

Back to top

6.31 Content Builder – Logos

The Logos element lets you create logo boxes that adds a feature box with beautiful icons on the homepage of your WordPress site. These logos box shows the important thing about your company. It has proven to be a highly engaging technique in presenting your brand to new customers.

ContentBuilder.014.jpeg

  1. Please note that in order to build content in Logos element just follow these simple steps:
  2. Content Builder: select the Logos element and you will then see the available options for the Logos element.
  3. The sections will then display and you will need to add the Title, Image 1 with an option to add/remove, Image 1 link, Image 2 upload with add/remove option, Image 2 link, Image 2 with add/remove option, Image 3 link, Image 4 add/remove option and image 4 link.
  4. Edit Styles: Edit colors and text sizes, margins etc or leave blank for default settings in edit styles such as section, title.

Back to top

8 Best practices and Tips

We suggest to follow our directions and use the sections as instructed. Using the sections in different ways may result in compromising the layout. We won’t be able to help in that case. Install as few plugins as possible.

SpeakerSumo is a very flexible theme that should fulfill all your needs. We custom developed all the different functions. There are no plugins requirements. The performance of your theme is strictly linked to installing as few plugins as possible and to respecting the section purposes.

We remind you we do not offer support or fixes when external plugins are installed. If you install them you do at your own risk. Do backup always. Before making any changes do run a backup. We have a long history of customers losing their work because they did not back up.

Back to top

9 ‘“ Editing the CSS

You can also edit the CSS of your theme. You can easily find all css files ,they are in /assets/css files.

Back to top

Was this article helpful to you? Yes 2 No 2