latest version

Bakefairy Custom Shortcodes

With Bakefairy comes many custom shortcodes for (Visual Composer) VC that are used to show content created in Bakefairy.

Note

You can make a section have a background with Parallax animation by adding in

Section/Row Settings > General tab under Extra class name : ct-u-parallax

../_images/short39.png

Below you will find short information about this Visual Composer elements:

../_images/short.png

Button

../_images/short1.png

This theme comes with VC element that give you the option to create buttons that can be used in the theme.

../_images/short2.png
-General Tab-
  • Text - Text inside the button.

  • URL - URL link for the button.

  • Style - the buttons style.

  • Button size - Size of the button.

  • Color - Color of the button.

  • Size - Size of the button.

  • Alignment - Alignment of the button in the row.

  • Add icon? - Option to add icon in the button.

    • Icon Alignment - Select icon alignment.
    • Icon library - Select icon library.
    • Icon - Select icon from the library.
  • CSS Animation - Animation of the button.

  • Element ID - Unique ID for the button.

  • Extra class name - Add a class name and refer to it in custom CSS.

  • Advanced on click action - Option to add inline onclick action.

    • On click code - Enter onclick action code.

Sample Button

../_images/short3.png

Call To Action

../_images/short4.png

This will let you add a designed header that has a button.

../_images/short5.png
-General Tab-
  • Title - Title of the call to action.
  • Select color for title - Text color of the Title.
  • Font size - Font size of the title.
  • Paragraph - Text below the title.
  • Select color for subtitle - Text color of the paragraph.
  • Text align - Text alignment of the call to action.
  • Layout - How the call to action is designed.
-Button Tab-
  • Text - Text inside the button.

  • URL - URL link for the button.

  • Style - the buttons style.

  • Button size - Size of the button.

  • Color - Color of the button.

  • Size - Size of the button.

  • Alignment - Alignment of the button in the row.

  • Add icon? - Option to add icon in the button.

    • Icon Alignment - Select icon alignment.
    • Icon library - Select icon library.
    • Icon - Select icon from the library.
  • CSS Animation - Animation of the button.

  • Element ID - Unique ID for the button.

  • Extra class name - Add a class name and refer to it in custom CSS.

  • Advanced on click action - Option to add inline onclick action.

    • On click code - Enter onclick action code.

Sample Call To Action

../_images/short6.png

Styled Google Maps

../_images/short7.png

Lets you add a styled google map on a page. You will be able to customize this map in the Styled Google Maps Settings.

../_images/short8.png
-General Tab-
  • Address - Set an address for the map.
  • Latitude - Option to add a latitude of the address.
  • Longitude - Option to add a longitude of the address.
  • Custom map height - Height of the map.
  • Zoom - Zoom percentage of the map.
  • Map marker - Option to add a custom map marker.
  • Map style code - Paste “JavaScript Style Array” here, you can find and create it on: snazzymaps.com

Sample Styled Google Maps

../_images/short9.png

Pricing Tables

../_images/short13.png

This element lets you add a pricing table with 3 tables.

../_images/short14.png
-General Tab-
  • Number of boxes - Number of tables that will show.
-Table # Tab-
  • Highlighted tab? - Option to have this table highlighted.
  • Title - Title for the pricing table.
  • Price - Price of the pricing table.
  • Sub Price - Text beside the price.
  • Subtitle - Subtitle/ description of the table.
  • Features - Features for the promo in the table. Each feature is separated by a comma.
  • Include button - Option to add a button in the table.
-Button # Tab-
  • Text - Text inside the button.

  • URL - URL link for the button.

  • Style - the buttons style.

  • Button size - Size of the button.

  • Color - Color of the button.

  • Size - Size of the button.

  • Alignment - Alignment of the button in the row.

  • Add icon? - Option to add icon in the button.

    • Icon Alignment - Select icon alignment.
    • Icon library - Select icon library.
    • Icon - Select icon from the library.
  • CSS Animation - Animation of the button.

  • Element ID - Unique ID for the button.

  • Extra class name - Add a class name and refer to it in custom CSS.

  • Advanced on click action - Option to add inline onclick action.

    • On click code - Enter onclick action code.

Sample Pricing Tables

../_images/short15.png

Slider

../_images/short16.png

This element lets you add a slider of images.

../_images/short17.png
-General Tab-
  • Autoplay - Option to make the slider move on its own.
  • Dotted slider navigation - Option to show navigation dots at the bottom.
  • Display arrows in slider - Option to show navigation arrows at the sides.
  • Pause on hover when autoplay is on - Option to stop autoplay when hovered.
  • Adapt height of slider to current slide - Have the same height with slider in the same row.
-Images Tab-
  • Images to slider - Choose images for the slider.
-Slides Tab-
  • Slides to show - Number of image to show per slide.
  • Turn on fade - Option to make the slider have a fade animation.
  • Slides to show on tablets - Number of image to show per slide in a tablet view.
  • Slides to show on phablets - Number of image to show per slide in a phablet view.
  • Slides to show on phones - Number of image to show per slide in a phone view.
  • Set initial slide - The initial slide to start.
  • Vertical slider - Option to show a vertical slider.

Sample Slider

../_images/short18.png

Team

../_images/short28.png

This element will display the team members item in the page.

../_images/short29.png
  • Color - Color scheme of the team.
  • Shape - Shape of the team image.
  • Number to display - Number of team member to display.
  • Number of columns - Number of columns to show the team members in a row.
  • Order - How the posts order looks.
  • Order by - How the posts are ordered.
  • Limit - Set results limit.
  • Choose a Team Category - Set a category of the team you would like to display.

Sample Team

../_images/short30.png

Testimonials

../_images/short31.png

Gives you an option to show people dynamic Testimonial Items that are made on your site.

../_images/short32.png
-General Tab-
  • Display title - Option to show the title of the testimonial.
  • Display Place - Option to show the place of the testimonial.
  • Slides to show - Number of slides in a row is shown.
-Filters Tab-
  • Limit - Set results limit.
  • Skip X elements - Skip a number of elements from the results.
  • Order - How the testimonials order looks.
  • Order by - How the testimonials are ordered.
  • Specify ct-testimonials objects - Only selected testimonials are shown.
  • Exclude ct-testimonials objects - None of the selected testimonials will be displayed.
  • Specify terms of testimony-category taxonomy - Only show testimonials under the categories.
  • Exclude terms of testimony-category taxonomy - None of the testimonials under the categories are shown.
  • Specify post tags - Only show posts with selected tags.
  • Keyword search - Show events with certain keyword.

Sample Testimonials

../_images/short33.png