{"id":720,"date":"2016-09-12T16:00:56","date_gmt":"2016-09-12T14:00:56","guid":{"rendered":"https:\/\/www.nieuwsmarkt.nl\/?p=720"},"modified":"2017-10-01T09:09:56","modified_gmt":"2017-10-01T07:09:56","slug":"is-divi-3-real-competition-for-beaver-builder-part-two","status":"publish","type":"post","link":"https:\/\/www.nieuwsmarkt.nl\/nl\/blog\/2016\/09\/12\/is-divi-3-real-competition-for-beaver-builder-part-two\/","title":{"rendered":"Is Divi 3 real competition for Beaver Builder \u2013 part two"},"content":{"rendered":"

Following up on part\u00a0one, first thanks for\u00a0all comments on the Beaver Builder facebook group. We continue rebuilding Bridge to Divi version 3 and we will add some other more technical aspects of Divi and will conclude with our final judgement for as far as possible.<\/strong><\/p>\n

\u2022 Please read part one<\/a> first before reading the final conclusions
\n<\/em>\u2022 We did try our best to rebuild Bridge as good as possible, but due to limited time,\u00a0we limit our test to the basic principles of how things work in general
\n<\/em>\u2022 Don’t want to read? Look at the final result<\/a>
\n\u2022\u00a0Please keep in mind that this judgement is just based on one project. Others may share other thoughts, results and experiences.
\nPlease share your thoughts on the BB facebook group
\n<\/a><\/em><\/p>\n

Some confusion<\/h3>\n

We also want to share our confusion in doing things before finding the right solution. The ‘WE ARE BRIDGE CREATIVE AGENCY’ block was created as a full-width segment. We still don’t understand the concept of segments, just because of the content\u00a0‘under’ this. We\u00a0somehow seemed to\u00a0have created a non-full-width segment (blue box), in which we could define a row as full-width (green box). We are still looking why this is possible and even why the principle of segments exist.<\/p>\n

\"section-divi\"<\/p>\n

\"4-images\"<\/p>\n

\"row-full-width\"Within the ‘green’ row settings we defined 4 columns to get 4 images in. At that moment we did not care too much about the way this was done in either Beaver Builder or Bridge itself, with or without text. At first we had some white space between the 4 uploaded images, which we ‘reset’ by setting the ‘Gutter Width’ to 1, without knowing the meaning of the value ‘1’. With that value we managed to get the 4 images full-width on one row in full-width.<\/p>\n

Lightbox<\/h3>\n

\"lightbox\"As an extra option we enabled the ‘Open in Lightbox’ option in the image settings panel. The animation effect can be set for each individual image, but options are limited to just the movement direction. Divis option around reponsive design are everywhere. In all popup-settings-windows choices can be made whether or not to display ‘things’ on various devices. We could not let Divi open another image in the lightbox by clicking on one of the four in the row, just like in Bridge<\/a>.\u00a0But we also did not get that done in Beaver Builder that exact way.<\/p>\n

Block of nine<\/h3>\n
\"box-of-9-bb\"

Beaver Builder implementation<\/p><\/div>\n

The next block we had to create was a block of nine little text areas with a small icon left of it. In Beaver Builder we used Fontawesome. We could not find a\u00a0Fontawesome implementation in Divi 3. For the previous version of Divi, there was a workaround<\/a>, but we don’t know if that will also be valid for version 3. In Beaver Builder we used\u00a0the UABB\u00a0Info Box for the text and the UABB Image\/Icon module for the icon.<\/p>\n

 <\/p>\n

\"9-elements\"<\/p>\n

\"9-blocks-divi\"<\/p>\n

\"one-row-divi\"In Divi we started with 3 rows with each 3 columns, we could not make a column with 6 rows like in Beaver Builder. So we expected to be able to position the icon\u00a0left of the standard text module. At first we could not\u00a0get the two modules in one colums.<\/p>\n

\"module-editing\"In Divi 3 (just like in the previous version) the maximum number of columns seems to be 4, a workaround<\/a> describes how to get 5, 6 or more colums. We did that in order to get the required layout, but after adding some little custom CSS, we could not ‘touch’ the module settings anymore, we had to insert more text to get the grey settings bar a bit lower to access it. Although not perfect, we managed to get a similar effect like in Bridge.<\/p>\n

\"9x9-block\"<\/p>\n

4 counters<\/h3>\n

Next challenge was to get 4 counters in one row wit a parallax background image. We started with a full widt segment, because we thought we needed that for the full-width background image. The seemed confusing (again), because only a limited amount of module types could be inserted in a full-width segment. And counters were not part of that. So we created a non-full-width section and inserted the background image, which ‘reacted’ full-width. A bit confusing, but after that we could create \u00a04 columns to get the counters in. Somehow the concept of sections confuses us everytime. Although the background image reacted full-width, we could not set any aligment and\/or parallax behaviour, only some padding was possible, which gave some ‘illusion’ of positioning.<\/p>\n

\"4-counters\"<\/p>\n

What module to choose?<\/h3>\n

We made the choice to use the ‘Person’ module for the section under the counters, because that was the easiest module to get one image positioned left of the text. The basis text module did not work that smoothly to get this done the right way. In the whole process we changed modules so now and then to test if another one would come closer to the Bridge original.<\/p>\n

Slower<\/h3>\n

Divi gets slower if the page ‘grows’ in the amount of sections\/rows\/modules. Duplicating sections took 1-2 seconds before the appeared and also repositioning them took 2-4 seconds before it appeared at the required location. Also deleting needs some processing time. We don’t know why.<\/p>\n

Compromise in module\u00a0possibilities<\/h3>\n

\"call-to-action\"Just like in Beaver Builder, also in Divi you have to find your way in using various modules to get things done the way you want. With our first Beaver Builder test (without add-ons) we could not get a 100% perfect ‘Bridge look alike’. We wanted to come as close as possible, and we tried the same with Divi. For example the ‘call-to-action’ module. At first we uploaded the background image in the texteditor field, but after playing with the module, we discovered that the background image upload was under the Design tab, we would have expected that important part of the module in the General tab. Just a matter of getting used.<\/p>\n

Last blocks<\/h3>\n

\"gallery-divi\"The rest of the rows\/modules\u00a0were in some way just copies of other previously used\u00a0rows\/modules, except for the gallery block, which was one of the smoothest modules to use to our own surprise.<\/p>\n

Other things we\u00a0noticed<\/h3>\n

First of all, ‘redo’ and ‘undo’\u00a0is a\u00a0very nice feature within Divi 3. We did not test how far a users could ‘go backward and forward, but it looked like it was ‘kind of’ unlimited.<\/p>\n

The generated HTML source was ‘just’ 53.607 bytes and looked relatively clean to us, which was not that bad, considering the length of the page and the use of many sections\/rows\/modules.<\/p>\n

The standard WordPress editor shows the page in Visual mode as a collection of Divi segments\/rows\/modules and they can be edited in the WordPress backend as well. If that has any advantages remains to be seen.<\/p>\n

\"wp-editor-divi\"<\/p>\n

\"disable-builder\"Actually we just went ‘there’ just to see the ‘Text’ mode, in order to give some judgement of the use of shortcodes within the WordPress environment before generating the final output HTML.\u00a0The only way to see that code is to ‘Use Default Editor’. Trying to do that gave us the warning that all Divi content would break and that previous content would be restored. In this case, we did not try that option, because it would delete the testpage we just created. We will make a duplicate of that page and test the shortcodes aspects later, if they remain in any way.<\/p>\n

Speed<\/h3>\n

Using Pindom from Stockholm – Europa resulted in a loadtime of 1,69 sec, compared to 2,33 for Beaver Builder. We think the little slower performance has to do with the fact that the BB setup also included the add-ons from PP, UABB, BeaverLodge and BeaverTunnels.<\/p>\n

Final judgement<\/h3>\n