I am new to builder and am practicing with it. I generally like it a lot.
I note:
I am able to move rows;
I am able to move modules;
I am not able to move columns;
I am able to duplicate rows;
I am able to duplicate modules;
I am not able to duplicate columns;
If I drag a new module above or below an existing row a new row is created with a single column in it containing that module;
If I drag a new module into an existing row I can:
A. Place it vertically anywhere within an existing column;
B. Place it above or below the existing columns (“sub-rows”) and create a new full width column (“sub-row”) containing that module;
C. Place it vertically between existing “sub-rows” of columns in the “real” row creating a new full width column (“sub-row”);
If I drag a row layout into an existing row a new “sub-row” of columns is created in the “real” row, vertically, above, below or between existing “sub-rows” in the “real” row;
I am not able to create a new column horizontally next to or between existing columns;
The modules in “Sub-rows” with more than one column have a “column width” setting in the Column Settings;
A. It would be nice to be able to edit the “sub-rows” column widths as a group independent of the modules, right now it takes effort and some “magic” to get the set of widths one may want;
If I hover:
A. over a row it is highlighted;
B. over a module:
a. it is highlighted;
b. the containing column is not highlighted;
c. the containing row is highlighted;
C. there is no way to hover over a column and get it indicated;
A scenario:
I add a row with three columns;
I add one or modules to each column;
After some work someone decides a new column is needed between columns two and three;
A. As far as I can tell I must:
a. create a new four column “sub-row” above or below the three column “sub-row”
b. drag the modules from the original “sub-row’s” three columns to columns one, two and four of the new “sub-row;”
c. muck around until I get the widths right;
d. delete the original “sub-row;”
Am I missing something?
It seems to me that somewhere in your code there is already the idea of a “sub-row” that actually contains the columns within the “real” row.
What I hope for is:
The ability to create new columns horizontally within “sub-rows;”
The ability to set column widths at the “sub-row” level;
The ability to duplicate columns;
The ability to move columns:
A. within a “sub-row;”
B. to a different “sub-row;”
The ability to have columns highlighted when hovering;
You have a very good product. Your competitors range from poor to good. So you are already the best. If you did my “hope fors,” the others wouldn’t come close.
By the way, I purchased Beaver Builder after reading a Chris Lema blog post. His observation about the mess you do NOT leave behind when deactivated was very important to me. I have tested this and you guys are good WordPress citizens.
Thanks for getting in touch and really appreciate the kind words! It seems from the above that you are looking for one of our most requested feature additions - columns within columns.
We are definitely considering that in BB’s future, just trying to figure out the best way to implement while sticking to our mantra of keeping things simple. Thanks again!
While I can see the value of “columns within columns,” I think I am asking for something different.
In my scenario I have three columns next to one another in what I call a “sub-row.” In the scenario I want to add a new column between the second and third columns in the “sub-row.” In other words it would become the third column in the “sub-row” and the former third column would become the fourth column.
Right now Beaver Builder does allow the addition of new columns to a row. However, they can only be added as a new “sub-row” and not horizontally in between existing columns or at either end of the “sub-row.”
Edit:
I also want columns to have a visual representation when hovering as rows and modules already do.
And I want them to have a move handle as rows and modules already do.
We’re on the same page here, your feedback as well as that request pretty much encompass the features/functionality we are considering for the future. When we have more info there, we’ll certainly let you know, but for now, enjoy BB!
My grandfather was a highly skilled and well respected machinist and he taught me the value of a good tool and the pleasure of using it. Beaver Builder is a good tool so I will “enjoy BB! :)”
In my scenario I have three columns next to one another in what I call a “sub-row.” In the scenario I want to add a new column between the second and third columns in the “sub-row.” In other words it would become the third column in the “sub-row” and the former third column would become the fourth column.
If I am understanding this correctly, you want to change your 3 col row to a 4 col row by ‘adding’ another col to it.
The easiest way to do that is to add a new 4 col row to the layout, drag the existing content of the 3 col row to the desired location in the new 4 col row and then delete the old 3 col row.
Hi,
as a general rule you could do all settings with CSS only. If necessary you can give the element an individual class.
Imagine you would have changed the font-color or font-size of a few elements in the BB editor and you have 30+ pages. How could you say in which element you changed what? BB is not even showing that there were inidividual changes made (I made a request for that feature). But if you use “speaking” class names in certain elements you’ll find that particular element in your CSS file very quickly (if you organized your CSS well). And if you want to make it really easy use Sass or LESS to structure your CSS and write it quicker.
My toolset is: WordPress + Genesis Framework + Dynamik Website Builder + Beaver Builder. All CSS is written with LESS. I do all the layouting staff (head, nav, widgets, footer) and repeating elements with Genesis using Dynamik to produce the code (too lazy to code by hand ;-). All the content is build with Beaver Builder.
Our new homepage is (nearly) ready and done this way. You can check it out here: Confidea homepage. It’s completely in german but you can test it anyway. Feedback is very welcome.
Using FireBug I have learned that BeaverBuilder already has a specific class for what I call a “sub-row.” The class is fl-col-group.
Based on my quick study the Beaver Builder primary class hierarchy is:
A > fl-builder-content
B > fl-row
— C > fl-row-content-wrap
----- D > fl-row-content
------- E > fl-col-group
--------- F > fl-col
----------- G > fl-col-content
------------- H > fl-module
--------------- I > fl-module-content
----------------- J > [module specific stuff]
Each one of these levels is a div with the indicated class plus other classes.
There is only one A div per page.
B, E, F and H can be repeated within each parent div.
Beaver Builder lets us assign our own classes to the B, F and H divs. That is to rows, columns and modules.
If my wish list was implemented one of the things we would get is the capability to assign classes to E (the fl-col-group div).
I am pleased and impressed by how well structured and clear the Beaver Builder HTML is.
It was very straight forward to read and understand it.
Three cheers for the Beaver Builder programmers.
I figured out how to use css to assign column widths.
One of the things I learned is that Beaver Builder uses a style=“width: N%;” statement on each fl-col div to specify the column width.
Here is an example:
<div class=“fl-col ft-test-width03 fl-node-54d551c5d3da2” data-node=“54d551c5d3da2” style=“width: 25%;”>
