<\/figure><\/div>\n\n\n\n<\/p>\n\n\n\n
To use a widget, left click on it with your mouse and hold the mouse button down. Drag the widget to where you would like it to be on the page. <\/p>\n\n\n\n
To add your widget and create a new section, drag the widget and drop it to the box that says Drop Widget Here<\/strong>. <\/p>\n\n\n\n<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n<\/p>\n\n\n\n
Alternatively, you can select the Plus sign (+) <\/strong>to see options and select a column structure for the section. Use the Folder logo<\/strong> to add a pre-created section.<\/p>\n\n\n\n<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n<\/p>\n\n\n\n
The BYB Page Builder comes with a built-in Revision History section. Under the Actions tab, you can trace your changes, moving back and forth between each action. Under the Revisions tab, you can switch between your revisions and revert back to any previous version. <\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n<\/p>\n\n\n\n
How to Build a Page<\/h3>\n\n\n\n The BYB Builder consists of three main building blocks: Sections, Columns,<\/strong> and Widgets<\/strong>. Sections are the largest building blocks. Within Sections, you can add groups of Columns, and Widgets are housed within Columns.<\/p>\n\n\n\nYou control the Sections, Columns, and Widgets using the blue handle. Just right click the handle to edit the blocks.<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n<\/p>\n\n\n\n
When you select the blue handle OR left click on a section, column, or widget, the menu on the left-hand side of the page will change to provide options for whichever element you are editing.<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n<\/p>\n\n\n\n
This new menu is separated into two (2) or three (3) sections depending on the element selected. In the example above, these three sections are Layout, Style, <\/strong>and Advanced<\/strong>.<\/p>\n\n\n\n<\/p>\n\n\n\n
Using Widgets<\/h3>\n\n\n\n Widgets are the individual elements that are used to build your web page and make it unique. With the BYB Page Builder, there are over 100 different elements for you to choose from.<\/p>\n\n\n\n
To use a widget, drag-and-drop it into a section or a column. Left click on the widget and the menu on the left-hand side of the screen will change to the individual settings for the selected widget.<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n<\/p>\n\n\n\n
This new menu is separated into two (2) or three (3) sections depending on the element selected. In the example above, these three sections are Content, Style, <\/strong>and Advanced<\/strong>. <\/p>\n\n\n\nThe Content<\/strong> tab allows you to edit the content of the widget, whether it be text, image, or other.<\/p>\n\n\n\nThe Style<\/strong> tab allows you to edit the styling of the element, including color, typography, border radius, and more.<\/p>\n\n\n\nThe Advanced<\/strong> tab provides settings for margins and padding, motion effects (fade, zoom, etc.), and responsive settings.<\/p>\n\n\n\nMargin and padding is an advanced feature, but one you will use often.<\/p>\n\n\n\n
Margin is an element\u2019s personal space \u2014 how much distance the element wants to keep with other elements around<\/em> it.<\/p>\n\n\n\nPadding is how much an element is away from itself \u2014 how much distance an element wants to keep with the elements inside<\/em> it.<\/p>\n\n\n\nThey both are used to create gaps around elements, but they differ in their method of creating that gap. Margin accommodates the gap by pushing adjacent elements away from it, while Padding accommodates the gap by either growing its own size or by shrinking the size of content inside it.<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n<\/p>\n\n\n\n
Copy \/ Paste<\/h3>\n\n\n\n When building your website, you will most likely need to apply and reuse the same styles across different areas. Wouldn\u2019t it be great if we could have a simple way to take a style from one widget, and apply it to another? <\/p>\n\n\n\n
Introducing Copy Style<\/strong><\/p>\n\n\n\nTake any style from any element, and paste it anywhere on the page. This feature enables you to copy section, column, and widget styles instantly. <\/p>\n\n\n\n
To copy the style of a section, column, or widget, right click on the element and select the Copy<\/strong> option.<\/p>\n\n\n\n<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n<\/p>\n\n\n\n
You can paste the style to any element of the same type. For instance, you can copy and paste the style from one section to another section.<\/p>\n\n\n\n
To paste, right click on the element and select Paste Style<\/strong>. <\/p>\n\n\n\nYou can even copy and paste across different pages of your website!<\/p>\n\n\n\n
<\/p>\n\n\n\n
Copy and Paste Elements<\/strong><\/p>\n\n\n\nEveryone loves the ease of use of drag and drop functionality. That said, dragging an element across the entire page gets old fast.<\/p>\n\n\n\n
That\u2019s where Copy Paste Elements comes in handy. Simply CMD \/ CTRL+C on any widget, column or section, and paste it anywhere on the page with CMD \/ CTRL +V.<\/p>\n\n\n\n
You can also use the right click method explained above. When attempting to paste, use the Paste<\/strong> option (not Paste Style).<\/p>\n\n\n\n<\/p>\n\n\n\n
Responsive Mode<\/h3>\n\n\n\n At the bottom of the left-hand side menu is an option to view your web page in desktop, tablet<\/strong>, and mobile<\/strong> view.<\/p>\n\n\n\n<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n<\/p>\n\n\n\n
When you change views, you may notice the desktop, tablet, or mobile icon appear next to some of the setting choices within the left-hand side menu for your section, column, or widget.<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n<\/p>\n\n\n\n
When you see this icon, this means that the setting changes you make for that specific feature will occur ONLY on that view point. <\/p>\n\n\n\n
For instance, you could have your text aligned to the left side for Desktop view AND aligned to the center in mobile view.<\/p>\n\n\n\n
By default, all of the sections, columns, and widget are responsive. This means that they will change size and layout automatically for the different devices that your visitors will use to view your website.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Update Your Page<\/h3>\n\n\n\n When you have made all of the changes to your web page and are ready to save it, select the Update<\/strong> button at the bottom of the left-hand side menu.<\/p>\n\n\n\n<\/p>\n\n\n\n