WPBakery Page Builder - How to Create Pages Using WPBakery

SETTING WPBAKERY UP

  • “WPBakery Page Builder” is automatically on your site if you are using the Flex theme.
  • Create a new page, or open an already existing page.
  • You can see that you have buttons at the top of your page (below the “Title”): Backend Editor, and Frontend Editor.  Select Frontend Editor if you wish to work in the Graphical User Interface that mimics your live page.
  • Once a WPBakery page is created, you can make changes to the Page Settings by clicking on the gear icon at the top of the page. You can change your Page Title from the popup window that appears, as well as add Custom CSS settings for this specific page.
  • There is also an option to preview the different responsive-window sizes in the FrontEnd version of WPBakery. The dropdown icon to the right of the Page Settings at the top of the page displays a list of different responsive windows (e.g. mobile, tablet vertical, tablet horizontal, and desktop). Simply select which view you want to preview your page in and WPBakery will display it.


CREATING ROWS AND COLUMNS

  • If starting from a blank document, you have three options that you can begin with: Add Element; Add Text Block, or Add Template.
  • Click on ”Add Element” first. You can see several tags at the top of the page including: All, Content, Social, Structure, and WordPress Widgets. For now, start with Content, and then select Row.
  • A WPBakeryrow will appear on your page. You have the option of selecting the plus sign “+” in the middle of the row to directly add another element to that row (see screen capture above), or if you mouse-over the row, you can see options for Row, Column, Edit Column, Prepend to Column, or Delete Column.
  • If you select “Row” from that list, you can see options for Drag to Move Row, Edit Row, Change Layout, Add New Column, Clone Row, and Delete Row.
  • If you click and hold the Drag to Move Row you will be able to move the row above or below any other rows on the page (once you add more rows).
  • Select Edit Row to change elements like “Row stretch,” Columns gap,” “Full height row?,” “Content position,” “Row ID,” and several other options that will affect the identification or visual outcome of that entire row.
  • Under Row Settings, you also have the option (under the Design Options tab) to change row margin, border, and padding settings. Don’t forget to click Save Changes after you make your changes to the styles.
  • Select Row Layout in order to add columns to your row. You can add as few or as many columns as you like, and WPBakerygives you a list of the most common column layouts to pick from from the beginning. Or you can enter your own custom layout for your row.
  • Select Add New Column adds a new ROW beneath the current row (it appears to be mislabeled, as it does not add a column to the already created row, but instead a new row beneath the current row).
  • Select Clone Row in order to create a duplicate copy of that row set up below it (i.e. if you had already selected Add New Column and created a new row beneath the top row, that row will be cloned as well).
  • And of course, selecting the Delete icon deletes that entire row section, including any rows created by selecting “Add New Column.”
  • As for Column options, you can also move the column around with the Drag and Drop, Edit Column Settings, Prepend to Column (adding an element from the giant list of elements available), and Delete Column.  The only real difference between the Column settings and Row Settings is the Responsive Options that are available for columns.

Responsive Options allows you to decide what columns display on what devices (i.e. you can choose to hide columns on mobile and vertical tablet-sized screens, but display on horizontal tablet-sized screens, and desktop screens).

  

TEXT BLOCKS

  • In order to add text to a full row or a selected column, you need to first click on the grey plus sign “+” in the middle of the row or column that you want the text to be placed. The Add Element giant list will appear.  You can select Text Block from either the All menu or the Content Menu.
  • The Text Block Settings popup will appear. The General tab is your basic WYSIWYG text editor (that just like in basic WordPress, you can edit text in either Visual or Text formats), and it also gives you options to add CSS Animation, and add an Extra CSS class name to the text block.
  • In the Text Block Settings popup window, you are also given the option to alter the margins, borders, and padding of the row or column that you have placed the text block. You can access these settings in the Design Options tab in the popup window.
  • Once saved, all the additions and changes that you made will appear in the row or column that you placed them. In order to make any changes to the text block, simply put your mouse over the text block and select the edit button. It will pull the Text Block Settings popup window up for you again.
  • To delete a specific text block, mouse over it and select the trash can icon that appears.


GSU ELEMENTS

  • All buttons, tabs, accordions, and toggles should use pre-existing Georgia State Flex Theme Elements. See the following article to see where these elements are located inside WPBakery and what their individual purposes are.

 

GENERAL CONTENT TAB OPTIONS (click the grey plus sign “+” to view)

**Most of the features listed here are basic WPBakery options. For more advanced versions of most of these features, please see below, under Ultimate VC Addons and VC Extensions.

  • You can save any of these features as a preset or as the default for each element (once you select a specific element, click on the gear icon in the top right of the popup window).
  • Icons: You can add Font Awesome icons to your page. Hundreds of icons to choose from, and you can alter size, color, alignment, CSS animation, and add a link to icons.
  • Separator (with or without Text): Create a horizontal separator line (with or without text). You can alter alignment, style, border width, element width, etc. You can also add an icon and color.
  • Message Box: Add a notification to your page. You can choose from a preset design, or create a custom design. You can choose shape, color, icons, and use the WYSIWYG text editor to create your personalized notification for users.
  • Single Image: Add a single image to your page. You can give this image its own title, choose it from the Media Library, add an image from your computer, choose the size of the image, add a caption, choose an alignment, choose a “click action,” and add CSS animation to the image.
  • Image Gallery: Add a rotating gallery to your page. You can choose how the images are displayed, how long each slide stays before rotating out, image size, on click actions, etc.
  • Image Carousel: Another way to display images in a slider-like loop. You can choose the size of the slider, the on click action, slider orientation, slider speed, number of slides per view, etc. While both of these options are nice to have, they cannot touch Revolution Slider in terms of power, choices, and amazing bells and whistles.
  • Pageable Container: Create a tab-like container where users can switch between multiple containers of content. Like tabs, you can add new elements into each container, change colors, auto-play (auto-rotation), and the position of the pagination icon.
  • Custom Heading: Create a custom heading setting for your page. Not really recommended, seeing as we would prefer our in-house Headings remain universal, but all text options are available to change any part of any sized heading (e.g. H1, H2, etc) that you would like.
  • Call To Action: Basically just another kind of Text Block, but with a few more options, like “Heading” and “Subheading” already built in.
  • Posts Slider: Create a slider using posts, pages, profiles, or Essential Grid elements. You can choose the slider type, number of sliders, speed of rotation, link type, etc. Very intuitive, but not nearly as powerful and filled with choices as Slider Revolution.
  • Video Player: Embed a video player in your page. Simply enter the video link in the field provided, and select width, alignment, and aspect ratio.
  • Google Maps: You can add a Google Map iframe to your page. Simply generate the map on Google Maps (link provided), and then paste it in the field provided, and choose your map dimensions.
  • Flickr Widget: Add your own Flickr widget to your page. Simply ender your Flickr ID, the number of photos that you want to display, select the photo stream type, and display order.
  • Progress Bar: Add your own animated progress bar widget. You can give it a title, values, colors, units, and other visual options for an interesting user experience.
  • Pie Chart: Add your own animated pie chart widget. You can give it a title, values, colors, units, and other visual options for an interesting user experience.
  • Round Chart: Add your own animated round chart widget. You can give it a title, values, colors, units, and other visual options for an interesting user experience.
  • Line Chart: Add your own animated line chart widget. You can give it a title, values, colors, units, and other visual options for an interesting user experience.
  • Empty Space: Create a blank space on the page with a custom height.
  • Post Grid: Create a grid using posts, pages, profiles, Essential Grid elements, etc. You can narrow the data source down, choose the total number of items displayed (up to 1,000), choose a display style for the grid, choose the number of elements per row, and an initial loading animation. There are data and design tabs at the top of the popup window that allow order and sorting, excluding, and grid templates.  Not as many options as Essential Grid.
  • Media Grid: Like Post Grid, but you choose specific images to display on your page.
  • Post Masonry Grid: Like Post Grid, but the data source displays in a masonry grid style.
  • Masonry Media Grid: Like Media Grid, but the image source displays in a masonry grid style.
  • Gravity Forms: Select which Gravity Form you’d like to place in the page.
  • Essential Grid: Select which Essential Grid you’d like to place in the page.
  • Revolution Slider 5: Select which Revolutions Slider you’d like to place in the page.
  • GSU Buttons: Generates  GSU-color-scheme buttons, allowing links and custom text that match the new Flex Theme.
  • Entry Header: Generates GSU-font-appropriate header text (using the page’s title) and date of publication for you that matches our theme.
  • Entry Date: Generates GSU-font-appropriate Entry Date for you that matches our theme.
  • Container Header: Generates GSU-font-appropriate Header for you that matches our theme. Also generates a “More” link that you can add your own HTML link to.
  • Pull Quote: Generates GSU-font-appropriate Pull Quote for you that matches our theme. You can add author, title of source, and date to the quote as well.
  • Subscribe Form: Choose an already created form to add to the page. You can choose if the form floats left or right, the style of the submit button, and whether the user must click a button to view the form at first.

 

SOCIAL TAB OPTIONS (click the grey plus sign “+” to view)

  • Facebook Like: Add a Facebook “like” button. You can choose if you want it horizontal or vertical, and whethere you want a counter on it as well.
  • Tweetmeme Button:  Creates a Twitter Feed button. You get to choose what kind of button it is, if you want to include the current page’s URL to share, your own username, hashtags, language, and button size.
  • Google+ Button: ….Does it really matter?
  • Pinterest: Creates a Pinterest “Pin it” button to your page. You have options to make it vertical or horizontal, and you can choose to not show the count as well.

 

STRUCTURE TAB OPTIONS (click the grey plus sign “+” to view)

  • Widgetised Sidebar Settings: You can select a pre-existing set of widgets in a sidebar and add them to a row or column.
  • Raw HTML: You can add raw HTML to your pages. If you still require raw HTML to appear on multiple pages, we still recommend that you use CSS & JS Toolbox in order to have one location where the raw HTML is located for more than one page.
  • Raw JS: You can add raw Javascript to your pages.  If you still require JS to appear on multiple pages, we still recommend that you use CSS & JS Toolbox in order to have one location where the JS is located for more than one page.

 

WORDPRESS WIDGETS TAB OPTIONS (click the grey plus sign “+” to view)

  • WP Search: Create a search feature for your page. It does a really good job (also placing images next to search results when a featured image is available), but only spiders the site that it is in.
  • WP Meta Settings: Adds links to Log In and Log Out, Admin, RSS Feeds, and WordPress.org.
  • WP Recent Comments: We do not allow comments, so this is a null option. It is meant to display a desired number of the most recent comments submitted.
  • WP Calendar: Creates a basic calendar for the page that will display dates of updates. A title and extra CSS can be added to it.
  • WP Pages: Auto-generates a sitemap of all the pages in your site, including links. You can change how the list is ordered, and identify any pages that you wish to exclude from the list.
  • WP Tag Cloud: Choose the Taxonomy (e.g. Categories, Tags, Departments, etc.) and Widget Title.
  • WP Custom Menu: Select from a list of menus to display on the page, including links.
  • WP Text Settings: This is another way to access a regular text block. See “Text Block” features at the top of this document for more information.
  • WP Recent Posts: You can choose to display a desired number of the most recent posts added to the site. You also have the option to display the dates of the posts listed.
  • WP Links: Display WordPress links on your page. I can think of no reason we would post links to WordPress Documentation, WordPress Feedback, WordPress Themes, etc.
  • WP Categories: Choose to display links to the Categories set up on your site.
  • WP Archive: No options appear.
  • WP RSS: No options appear.

 

DEPRECATED TAB OPTIONS (click the grey plus sign “+” to view)

  • Individual elements that will be removed or heavily altered by WPBakery soon. 

 

** ULTIMATE VC ADDONS – Activate Ultimate VC Add-Ons Plugin First
(click the grey plus sign “+” to view)

  • Animation Block: Add animations to any element of the page. You can choose the animation style (bounce, fade in, rubberband, etc), the duration, add a delay, a repeat function, and position the block.
  • Advanced Button: Another button feature with a lot more options than the basic VC button element. You can choose hover effects, icons, shadows, line height, and font stylings. Very intuitive.
  • Content Box: An element that you can add and place other elements in. You can decorate your content box with a background image, colors, a border, a drop shadow, and hover effects. Then you can place an image or a text block, or any other element, inside it.
  • Countdown Timer: A very detailed countdown plugin. You can select how the countdown timer looks (font size, color, etc.), what it counts down to, and time units to display in the timer (you can show only days and hours, or minutes, or months, etc.).
  • Dual Button: Lots of options available here. You can select the button style, font size per responsive screen size, border radius, and colors. Then you can choose what each of the dual buttons links to (via HTML, or selecting from a list of preexisting pages), colors, icons, hover styles, etc. You can have different typographies for each of the dual buttons as well: italic, bold, underline, color, hover color, etc.
  • Expandable Section: An expandable section with a lot more options available, including: title changing after click, fade or slide effects, color choices for background and title depending upon mouse hovering or activating, adding and editing icons, and fonts and font styles. After adding the expandable section you have the option of adding any new element (like text blocks or images) into the “expanded” form of the section.
  • Fancy Text: Allows for animated text on the page. I.E., text that looks like it’s being typed in (or is sliding in) as the users watches. You can choose the typography of the text, along with speed of the message being typed/slid in.
  • Flip Box: This option creates a cool, flipping text box, rather like a rotating billboard (when a user mouses over it). You can change every aspect of this element from how the box flips (left to right, top to bottom, etc.), font size, color, padding, add icons, etc.
  • Google Trends: Allows you to integrate customizable Google Trends charts in your page. You can showcase the interest of particular items over specific years, regional interest on a particular topic, and it can help to explain related searches to specific topics or queries.
  • Headings: Allows you to make headings with a few more options than the basic text editor. You can add a separator, alignment, and typography changes.
  • Highlight Box: Allows you to create a text box with background colors that can change upon mouseover. You can alter colors, fonts, and icons.
  • Timeline: Create a timeline element with text blocks and images to mark certain events. You have the option of changing background colors, fonts, element widths, and connector line style.
  • Icon: Add a set of multiple icons and change the style and color of said icons. Other elements do this, and more. This element is not very useful.
  • Image Separator: Add an image, choose it’s position, gutter %, and create a link. You also have the ability to give the image an animation upon its appearance.
  • Info Banner: Make a text block with built in button creator. You can add links to the button, change the colors of all elements, fonts, add images, and everything else that you can for other text boxes. It’s like a much lighter Essential Grid.
  • Info Box: Add an icon box with custom fonts and icons. You can add hover elements and change the box style, along with everything else that you can do with other text box elements.
  • Info Circle: Create an info circle complete with icons that “orbit” the main circle.  Once the main element is created, you can go in and add “Info Circle Items”. You can add text and icons to each Info Circle Item, and you can add links to each one if you’d like.
  • Info List: You can create an info list in this element by making text blocks that connect together into one list. You can choose border and icon color and styles, as well as connector line color.  Once created you can then go in and generate the text blocks to go into it with the “Info List Item.” You can add hover elements and change the box style and add icons, along with everything else that you can do with other text box elements.
  • Info Tables: Create an info table with headline, sub-headder, icons, personalized color scheme, and buttons. Any typographical changes you can think of making you can make too.
  • Interactive Banner (regular and 2): Add a Title and Description, background image, color options, and responsive elements to text blocks. It’s like a less powerful and adaptive Essential Grid.
  • Just Icon: Add an icon, change its size and color, add animation and a link.
  • List Icon: Create a list using icons. Add an icon, change its size and color, add text.
  • Modal Box: Add Bootstrap modal box in your content. You can choose the background color and background opacity of the generated overlay, as well as adding an icon and using the text editor to make the overlay display whatever message you need displayed.
  • Price Box: Create a box with designated space for Title, subheader, price, price per unit, description, and link buttons. Customize all elements of the box’s colors, size, and fonts.
  • Range Slider: Create a slide bar that users can choose to move from one slider to the next. Add description content, alter fonts and colors.
  • Spacer/Gap: Control the spaces between components. You can change the size of the spacer per responsive screen size.
  • Counter: Add an element with a number (and an icon, if you choose), and when that element is reached on the page, the number will start low and climb for a preset number of seconds to the final number that you chose. 
  • Sticky Section: Create a note or blurb that you can “stick” to a certain element in the page. After creating the Sticky Section you can add any other VC element into it.
  • Team: Create a team display featuring headshots, custom blurbs, social links, hover effects, and links to already created staff pages.
  • iHover: Create hover effects, then add items (images and text) that you want to give these effects to. You have a choice of 19 hover effects. Another alternative to Essential Grid, but with less choices.
  • Creative Link: Create a link, choose link color, hover color, and from several hover styles that will make your link switch from regular color to linked color differently.
  • Hotspot: Allows you to place an image on your page, and adjust its width, and then you can add and adjust your Hotspot Item Settings. These allow you to select and edit icons or add text, add triggers for when they will appear, and animation for how it appears. The icon will then appear over your image, and it will animate (e.g. glow or move) according to your choices.


ROW ADJUSTMENTS – Activate Row Separators Plugin First
(click the grey plus sign “+” to view) 

  • Row Separator: Add a row separator that either has a built-in slant, curve, or design. You can choose if the separator will be a top or bottom separator, and it automatically matches the colors for  the two rows it separates. You then have the option for the design of the separator that you want to use, and if you want to flip it horizontally. There are over 70 options to choose from, including: slants, curves, clouds, gears, dripping, waves, and forest. You also have the chance to select multiple extra decoration colors which can add to the effects chosen, giving them more dimension.


 

TEMPLATES

  • Using templates can dramatically improve the page creation process, especially when your pages share the same structure. With templates you don't need to repeat the same process over and over again. Templates allows you to save predefined sets of elements in one “container,” and then reuse it when you'll need it next time.
  • Upon creating a new page, you also have the option to click the box for ADD TEMPLATE. This pulls up a large menu of “Default Templates.”  Feel free to search through them and click on some templates to see if any of the collected elements in them would work for you. You can always delete the elements of the template you added if you don’t like them.
  • Templates allows you to save predefined sets of elements as a template and then reuse it when you'll need it next time.  You can also save a template that you have made for future use. By using templates you will be able to save tons of time in case you need to create specific layout over and over. All you have to do is create your layout and save it, after that you will be able to reuse it whenever you need it.
  • First, create a group of elements that you would like to save. To save your elements as a template, click on the icon in the top left of your WPBakery page (the icon that is made up of three rectangles that form a “T”).
  • Give the template a name, and then click “Save Template.”
  • After the template is saved, you can always select it under that Template icon in the top left of your page.
  • You can also select any of the Default Templates from that same icon at any point that you are in WPBakery.
  • GSU-approved templates are also available on the digital.gsu.edu site. Feel free to dowload any of them and import them to your site.

 

For more questions or more details of how to use WPBakery, check out the VC Knowledge Base here: https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress


Also, check out the VC Video Tutorials Academy here: https://vc.wpbakery.com/video-tutorials/

Feedback and Knowledge Base