{"id":686,"date":"2016-09-11T15:26:34","date_gmt":"2016-09-11T13:26:34","guid":{"rendered":"https:\/\/www.nieuwsmarkt.nl\/?p=686"},"modified":"2017-10-01T09:09:56","modified_gmt":"2017-10-01T07:09:56","slug":"is-divi-3-real-competition-for-beaver-builder-part-one","status":"publish","type":"post","link":"https:\/\/www.nieuwsmarkt.nl\/nl\/blog\/2016\/09\/11\/is-divi-3-real-competition-for-beaver-builder-part-one\/","title":{"rendered":"Is Divi 3 real competition for Beaver Builder – part one"},"content":{"rendered":"

Last week I watched the video from Adam Preiser from wpcrafter.com. He compared about four pagebuilders. Among them Divi version 3 and Beaver Builder. I took the challenge to do some digging in Divi.<\/strong><\/p>\n

\u2022 In BB we used PP and UABB for some of the ‘modules’, so in a more creative sence the ‘BB\/Divi Bridge’ comparison must be judged in that perspective
\n\u2022 Also read<\/a> on what Chris Lema has to say about Divi 3
\n<\/em>\u2022 Zie reacties<\/a> op facebook
\n\u2022 Don’t want to read? Click to the results until now
\n<\/a><\/em><\/p>\n

Adam<\/a> warned for fast judgements around the various pagebuilders. ‘It depends who you are asking this question’ is a very true statement. With that statement in mind and being more experienced withe Beaver Builder, I started exploring my way in the latest Divi version. To compare the two a little bit based on real work, I decided to make the same Bridge<\/a> theme rebuild in Divi, like I had done before with Beaver Builder<\/a>.<\/p>\n

My first steps<\/h3>\n

As always you have to find your way in new tools. Making mistakes is common and you have to retry things more than once to understand the concept of things. The first thing I had to learn a bit, was the layout concept of Divi<\/a>.<\/p>\n

\"basic_structure\"<\/p>\n

Sections are the basic top-level beginning in Divi. However I learned that there are two type of sections. In regular non-full-width sections, you add rows first, before you can add modules. In a full-width section you start adding full-width modules right away. Take good care of the fact that the list of available modules differ for regular sections and full-width sections.\u00a0You can add any number of rows in a section and Divi offers various row layouts to be inserted. Modules determine the content of each column-row combination.<\/p>\n

You cannot change a full width sections to a non-full-width section and vice versa. So you have to know what you choose before you start adding rows and\/or modules.<\/p><\/blockquote>\n

\"button-to-open-save\"The user experience of Divi may look a bit ‘jumpy’ when you start, once you understand the use of the colors in the various Divi elements, you might\u00a0get used to it. For example on the button of the screen I finally discovered the purple button with ‘…’ to get the ‘save’ button, shown below in the bottom-right corner of the screen.<\/p>\n

At this moment of writing I don’t know yet the ‘big’ advantage of Divis choice to start with sections compared to just starting with rows in Beaver Builder<\/p><\/blockquote>\n

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

But no, it is not an extra step. In Beaver Builder you will always see the ‘done’ button in the top-right corner,\u00a0but Beaver Builder asks you to conform the publication of the changes you made in the page.<\/p>\n

Struggling a bit<\/h3>\n

It is not a real struggle to get through the first hours of using Divi 3. It is just a matter of getting used to it. And that is what Adam means by ‘It depends who you are asking’. If you are very experienced in another tool, that is your reference to make any judgement on another. So, yes I also needed some extra time to start working on what I really wanted to do: rebuilding the Bridge theme in Divi 3.<\/p>\n

Getting things done<\/h3>\n

\"first-start\"<\/p>\n

\"module-slider\"I just wanted to try to do the simple things first. So I decided not to start with a transparent header\/menu area, but started with the main slider.\u00a0Since the slider is full-width, I first created a full-width section. Full-width sections get purple lines around its area, non-full-width sections get blue lines. Yes, the Divi team has looked at the BB user-interface as you can see in the screeshot above. In the upper-left corner, you have nearly about the same buttons to ‘do things’ with the section even in the same order: position, settings, duplicate and remove. The only ‘extra’ is to save the section as a template in the libray. BB has that options in the row settings pop up screen. The whole template\u00a0concept is integrated in the user interface\u00a0for sections, rows and modules. It is very easy to save them and load them for any section, row or module, locally or globally.<\/p>\n

\"section-settings\"The sections-settings offers a straight forward set of adjustment. We did not set any background, since we wanted to insert a slider module with the images used in Bridge. In the section-settings it is also possible to insert a video, set the parallax option and some settings whether or not to use the section on various devices. The sections-settings did not have any option to adjust the height of a\u00a0section, except for videos. I don’t know why they made a difference in not setting a height for an image, but making it possible\u00a0for a background video….<\/p>\n

Fullwidth slider\u00a0settings<\/h3>\n

\"slider-settings\"Divi combined a couple of things in this ‘box. They make a difference between background images for each slider and the slider image itself. In Divi it is possible to combine both a background image and ‘on-top’ a slider-image of the dimensions you upload it. So in our workflow\u00a0to get Bridge we only used the background image.\u00a0The rest of the settings are for the slider effects: time, arrows, dots\u00a0below, loop, hover, parallax, disable on devices etc.<\/p>\n

\"slide-settings\"The individual slide settings\u00a0contain a heading text, a body text and an action-button per slide. All of the options are straightforward to use, like colors of various elements and aligments etc.<\/p>\n

Height?<\/h3>\n

In Beaver Builder you can set the row-height to ‘default’ of ‘full height’. The last option was our choice in rebuilding Bridge in Beaver Builder. Within Divi we could not find any height setting in either the section or the module. Setting the top padding to 120px effected the position of all ‘overlay’ content above the background image. But we could not get the image as high as we wanted. Still looking for that……<\/p>\n

Next: full width header section<\/h3>\n

\"full-width-modules\"A little ‘thing’ on user experience in Divi is the module-name you have in use at a certain location. The button only shows ‘module settings’ and not the name of the module. You have to click on it to know in what module you are. Not that important, but could be something to change in 3.0.1.<\/p>\n

\"non-full-width-modules\"As we mentioned, we do not use any add-ons (we don’t even know yet if there are devleopers working on this), so we are ‘limited’ to the core of Divi. Again take care of the fact that the available modules are different for a full-width (left) and non-full-witdh (right) choice of your section. Since we did make the choice the make the section below the slider also full-width (could be non-full-width as well), we choose the ‘full width header section’ as the module for the text below the slider.<\/p>\n

\"full-width-header-settings\"This module did what we expected to position a\u00a0title and a subheading text, just like has been done in the original Bridge theme. \u00a0the module offers much more than just this. Also a call-to-action button and a logo might be added among all possible CSS setting. So enough creative possibilities here.<\/p>\n

Image<\/h3>\n

\"image-settings\"For the next module we created a non-full-width section with just one row and one modules, called the ‘image module’. Also here all possible settings, also the animation on how the image should appear are available in one settings pop-up screen. The ‘open in lightbox’ option generates a pop-up of the image.<\/p>\n

Again, once you start and learn how to use the various elements of Divi, as a BB user you will learn fast and won’t experience many obstacals to use it.<\/p>\n

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

Part two<\/h3>\n

 <\/p>\n

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

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

In part two we will add the rest of all Bridge elements in Divi. Conclusions so far? Well, we are not ready yet, but we can imagine some\u00a0of you want to read what we think so far. Some of our findings:<\/p>\n

    \n
  • if you are used to beaver builder, take the time to get used to Divi. It might not look logical at first sight, but with some trial & error you get used to the basic understanding of the Divi concept after a maybe two or three hours<\/li>\n
  • although logical in the end, the whole user-experience still remains a bit ‘jumpy’. Every mouse movement show ‘+’ buttons to add sections, rows or modules. Advantage is that\u00a0you don’t need to drag anything and your screens remains ‘clean from any menus’. But the constant on\/off appearance of ‘+’ buttons bothers me more than the BB user interface. We already know that BB in 2.0 will change its user interface. We have already seen some use of colors in the pop-up settings screens, but don’t know how things will develop further.<\/li>\n
  • for the rest of our preliminary judgement, until now we cannot find any special disadvantages or advantages in Divi 3.<\/li>\n<\/ul>\n

    In part 2 we will also look at the generated source code, the use of shortcode and the possible overal effects on speed and SEO, if we would be able to judge that aspect. After all of that we will publish our final judgement.<\/p>","protected":false},"excerpt":{"rendered":"

    Last week I watched the video from Adam Preiser from wpcrafter.com. He compared about four pagebuilders. Among them Divi version 3 and Beaver Builder. I took the challenge to do some digging in Divi.<\/p>","protected":false},"author":2,"featured_media":714,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[11,50,49],"class_list":["post-686","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-test","tag-beaver-builder","tag-bridge","tag-divi"],"_links":{"self":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts\/686","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/comments?post=686"}],"version-history":[{"count":4,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts\/686\/revisions"}],"predecessor-version":[{"id":735,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts\/686\/revisions\/735"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/media\/714"}],"wp:attachment":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/media?parent=686"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/categories?post=686"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/tags?post=686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}