Divi 3.0 Video Sneak Peek #3: Editing Content On Your Page With The New In-line Editor

Posted on August 25, 2016 by in Divi Resources | 135 comments

Divi 3.0 Video Sneak Peek #3: Editing Content On Your Page With The New In-line Editor

Welcome to Day 87 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


There are only 13 days left in the Divi 100 marathon, and that means there are only 13 days left until the launch of Divi 3.0! Over the past week our beta testers have been pushing the limits of the new visual builder and we have been squashing bugs left and right. Things are looking really good and I couldn’t be more excited for the big day on September 7th. If you haven’t been following along with the Divi 100 marathon and are just hearing about Divi 3.0 for the first time, I encourage you to check out our first and second video sneak peeks that offer additional glimpses into this amazing update.

There are a lot of things to be excited about in Divi 3.0, but each new feature helps to champion a common goal: to give you the power to build things visually. What makes the new visual builder so special is that it allows you to edit your website on your actual website. You are no longer limited to a backend builder and its block-based representations of content elements. There is no longer a need to preview your content and there is no mystery as to how each adjustment will affect your design because the entire building process happens right before your eyes.

One of the best examples of Divi 3.0’s visual nature is the new In-line Editor. The In-line Editor allows you to add, edit and style text content directly on your page without ever opening a module’s settings panel. Just click and start typing! You can compose entire posts with a single column and text module and the experience is wonderful. Plus, the new in-line editor gives you additional options like custom fonts and text sizes. It’s perhaps my favorite part of Divi 3.0, and today I would like to give you a quick look at how it works. Enjoy!

One More Sneak Peek To Come

Next week I will be posting my final Divi 3.0 sneak peek, so be sure to follow along with the Divi 100 marathon to get a final glimpse at the new builder before we launch. In the meantime, let us know what you think of what we have shown you so far and stay tuned for the last two weeks of the Divi 100 marathon for your daily dose of Divi goodness 🙂

divi-2-6-logo

Divi 100 Day 87

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

Learn More About Divi 3.0


135 Comments

  1. And what about theme performance? Are there any insights about this?
    Is all the content edited in such way stored in shortcodes (post_content) or post meta table?

    • Hi Slava, i like your quesiton and want the answer too. I’m already a client of Divi and love it. but I discovered PageLine Platform 5 last week, and it makes me wonder because they were making a comparisim between the two and shortcode came up… so I’m curious

      • PageLines costs $99 per year per site (minimum plan). Divi is $79 per year, unlimited sites. PageLines, you do the editing in an area on the right and see the results on the left. Divi 3.0 you edit right on the display page. I’m sticking with Divi.

    • This has already been answered by Carpetcleaninghaddontownship. Divi 3.1 is the “Developer Release.”

      From the page:

      https://carpetcleaninghaddontownship.info/blog/divi-resources/the-divi-survey-results-are-in

      “This validates our decision to commit to our “developer release.” After Divi 3.0 is finished, the first thing we will be doing is working on our Divi 3.1 Developer Release, which will focus on performance improvements as well as more hooks, filters and documentation for third party developers. Moving forward, we will continue to think carefully about how new features may affect loading speeds.”

    • This update doesn’t change the way modules work in Divi, so the code being output in Divi 3.0 is the same as the code being output in Divi today. However, we have committed to Divi 3.1 as being as “Developer Release” and we will be working on various performance and code improvements in that update.

      • Very promising, Nick!

        My wish is that the Visual Builder can directly edit the header and footer zones.

        Right now, those two zones seem to be floating outside the normal workflow of the Visual Builder (and to me, that’s a bad thing).

        Thanks for keeping up the wonderful development work!

  2. This is just too awesome. What makes Carpetcleaninghaddontownship and DIVI so great is NOT the fact that you can add CSS or html and make it even better.

    What makes DIVI great is the fact that the person with no CSS or html experience can do great things as well. Rarely do you find that combination.

    • Exactly! I can teach any designer to do a website and we all talk the same language within a few days!

    • What I like about DIVI opposed to some other themes I’ve worked with is the support forum. When I am stuck on how to do something, I do a search on the Divi forum and usually find a solution. My clients think I’m smart. Little do they know!

  3. Nick, I’m still looking for an answer to my previous questions. Will you be able to edit image and div sizes too? In the future will you be adding the option to edit mobile, tablet and web layouts separately in the builder too? Thanks.

    • +1

    • So far we have integrated draggable widths for padding, which can be used to adjust section and row heights and widths, thereby affecting the width and height of their contents. To adjust the width of an image you can use the “Max Width” setting in the Design tab. This is already available in Divi.

      • Cool!!

      • What about being able to edit Mobile, Tablet and Web layouts separately? This would be ideal just incase the fluidness doesn’t collapse the way we intend it to and some adjustments can be made without having to use code.

        • I think if you look at the other videos you will see one that shows the three different sizes.

          I would easily say that through the front end builder you can easily edit margins for each of the three screen sizes.

  4. I can’t sleep already, so exciting!

  5. Looks fabulous and best of all… it won’t be long before we call all have a play.

    Many congrats too all the ET devs involved with the development of Divi 3.0 🙂

  6. This is very impressive, it really is.

    I just hope that the code generated by the new editor will be clean, but I’m sure it will be.

    • Good point Eugene!

      I’d be very interested to find out if all the generated code will be minimised/optimised in Divi 3.0.

    • It is awesome but, I wonder about this too.

    • It is awesome but, I wonder about how clean the markup will be too.

    • This is definitely a valid concern. As it is, the code that Divi produces is FAR from clean.

    • This update doesn’t change the way modules work in Divi, so the code being output in Divi 3.0 is the same as the code being output in Divi today. However, we have committed to Divi 3.1 as being as “Developer Release” and we will be working on various performance and code improvements in that update.

      • I echo the issue. above The code that dici produce is not very clean and very heavy for download time. Most of my clients are knowledgeable about SEO and I will have to find an alternative to divi if its not keeping up with other themes that are SEO friendly.

        • I share the same sentiments with Ram. That being said, at least for my personal projects, loading times weren’t too different compared to my other favourite, Themify. So far Divi 2 seems to work fine with me, but that’s because I’ve keep the number of elements and the layouts per page fairly minimal.

          I would still welcome improvements and optimisations for JS and CSS though. Keep improving and you’ll likely keep me as customer for years to come. Cheers.

      • For speed concerns use WPEngine or another quality host and your load times will be consistently under 1 second like mine are. My best load time using Divi and WPEngine is .34 seconds on pingdom compared to 4-5 seconds on my old Hostgator account.

        • @Alan – looks like your website (the one linked from your name) is still hosted with HG and I just tested from various locations, came back betw. 3-4 secs.

  7. I was like “What did he just do at 0:50??!!” Can’t wait to give it a go!

  8. I’m sure it will be the best multipurpose theme on the market

  9. Looks great, cannot wait!

  10. Looks awesome, sad I didn’t get into Beta. Ya cut me deep, Nick.

  11. This looks so, so, so, AMAZING. Can wait to see and try this live editor. And show it to my clients. This will make my sale so much easier!

  12. Gorgeous, can’t wait for DIVI3.0 to be released !!!

  13. These sneak peeks are killing me. This looks so awesome, 3.0 is going to be amazing.

  14. When changing the colour of the ‘Type; text, I couldn’t see any option to enter a hex value? Is this something that will make it into the final build?

    • +1
      This applies to font size too – just seems to be a slider and no way of manually entering a size.

      Also, a site-wide color palette, with every color that has been used on the site would be incredibly useful.

      The sliders look impressive in a speeded-up video, but in the real world of building sites, they are not sufficient on their own.

  15. Awesome! Hopefully, in back end editor you will keep the option to edit mobile, tablet and desktop separately?

  16. Looks awesome for creating sites, but I wonder if we can allow our clients to edit text module content without giving them the privilege to change font faces and colours. Is this front end editor an all or nothing sort of thing when enabled for clients? Seems like things could get messed up pretty fast. More work for us I suppose as we go back and fix what they break.

  17. I cannot wait for this! This will make my life so much easier. Always loved the possibilities of Divi but always had such a hard time making things work for me without hours of research because I don’t do it every day.

  18. Does the font selector include Typekit fonts? If not, how will that work?

    • Yes was wondering this too. Would be great if it would be possible to add custom fonts to the list.

  19. Wow, so you can drag & drop to create a new image from an image on the page? Now that’s handy!

    How about changing colors by selecting a color on the page?

    This is going to be AWESOME!!!

  20. While I’m getting seriously excited and counting down the days along with everyone else, one thing I was thinking would have been an obvious change/addition (at least in my view) is having the names of the font-types actually BE in those fonts, as you get on probably every OS/word processor (or whatever the generic name is for things like Pages, Word and Google Docs.

    Most people don’t know what Bevan or Arvo look like, and the noption of trying each one out to see is really not efficient.

    PLEASE tell us you’ll be changing that?! 🙂

    • +1

    • copy that

    • 10-4

      • +1

  21. My concern about “inline editing” is that whilst it’s great to make small changes, it’s really not a good idea for “across the site” style modifications.

    Let’s change that word to blue, italic, bold and SuperSilly Font – sure that was easy with the inline editor.

    Now let’s take that EXACTLY same style and put it into a class so that the class can be accessed on any page across the whole site.

    Oops, I didn’t mean blue, I meant red… change the CSS style? I’m not seeing how we do that with this editor #yikes.

    • That is also my concern. I’m hoping the inline editor will allow a class to be assigned to the container, and allow HTML tags. Keeping my fingers crossed…

    • Every Divi module has the ability to apply custom CSS Classes, so if you are planning to use the exact same style across the entire site then you can apply your class via the module settings instead of using in-line styles. You can also still open up the text module settings and write HTML into the text editor using “Text Mode” like you can in the normal WordPress post editor.

      • Yes, Nick, that would be the acceptable way to do this, but not quite the concern we’re raising here with respect 🙂

        The Divi 3 demonstration is showing us the inline editor – how easy it is to apply an inline style (or depart from the style applied by a class).

        What our concern is, can we go:
        – “click on text, select a class (or create a new class), apply class to the style”

        or

        – “click on text with an applied css class, modify the class’s style inline (so we can see visually what we’re doing to the class), apply the new modifications back to the class.

        Y’know – like WordProcessors do across a whole document 😉

        • I agree. The ability to assign a span with a class to individual words or sentences would be amazing. I know we can do that in the text editor, but if you provided an extra icon to click and apply a class using span or div would be very cool to have.

          Brent

  22. Awesome. I hope the contact form module has had some love for the 3.0 update. Would love to see some additional field options etc.

    Looking forward to the update!

  23. Looks good but the font menu still looks like you’re unwilling to incorporate access to the full Google Fonts library. As long as you only give access to a select few fonts of YOUR choosing, it will still be a crippled product.

    • Elegantthemesmarketplace.com has a plugin for that.

  24. Wow!!!

  25. This is amazing! Will there be a way to prevent certain users from editing or the ability to turn off in-line editing all together once the website is complete? I could see clients going in and accidentally messing up their site after I’ve finished 🙂

  26. Beautiful. A feature that will be invaluable to those of us who want to be able to add and edit content as quickly and efficiently as possible. This will be a web design game changer! 🙂

  27. Will you be able to drag module size, borders and padding?

    • +1!

  28. Hello does anyone know what divi 3.0 costs when you’re totally new !

  29. Looks fantastic, be cool if you can do that with mobile aswell.

  30. Suggestion:

    When editing text, have the edit menu list user defined colors and fonts. Also perhaps to include Font Awesome if set up on the back end?

  31. Lovely, awesome, great !!. Hoping the Image/photo editor will be as versatile as well, as image sizing has always been a challenge .. overall very excited to see 3.0 nearly here, and appreciating all the generous vids and tips these last 100 days … well done and brilliant launching style … confident and trust your commitment to delivering the best experience ever ..

  32. The previews are great (although looking the same). Will Divi be better in other options such as setting margins for boxed version, wider Google Font selection, setting own header and footer content….?

    • Divi 3.0 is 100% focused on creating the new visual builder interface, which is a incredibly huge undertaking. There wont be any additional features in Divi 3.0, but stay tuned for Divi 3.x 🙂

      • Gr8 job nick. But Pl. Consider adding flexible no. Of columns and adjusting their widths in later versions. I feel these two features add more flexibility for the designers and found as one of the primary features in most of the front end builders..

        • I agree. Making column widths adjustable by dragging them to any desired width would be more useful than making the padding draggable in my opinion. Lack of flexibility regarding columns is still a downside of Divi and one that has been around for ages.

  33. This is beautiful; how clean is the code on the back end?

    • This update doesn’t change the way modules work in Divi, so the code being output in Divi 3.0 is the same as the code being output in Divi today. However, we have committed to Divi 3.1 as being as “Developer Release” and we will be working on various performance and code improvements in that update.

  34. Love, love, love!! Web designers are visual creatures, so to be able to edit on the fly and see it in real time is INCREDIBLE! Thank you Divi gods and ET 😀

  35. First of all, I have to say this upgrade is really exciting. I agree with comments about maintaining global styles, but can see the argument for instances you want or need to make a change that should not be global.

    My question is will this upgrade to an existing Divi site cause any styling issues, that will require me to plan for a troubleshooting session immediately after theme update? If so, it will help to know so I can time when I do this, during a low traffic point in the week for my clients.

    • Divi 3.0 creates an entirely new building interface, but the things you are building are still the same. Nothing about how your website is changing and you don’t need to worry about things you have built in the past breaking.

  36. I love divi and something that I like it is that contact can integrate double optin HTML forms

  37. This is awesome. The video shows how easy it is to style single words in a paragraph or header, something that isn’t exactly possible with the current builder. I had a project that required doing a lot of this with lots of different fonts, sizes, colors, font-weights, etc in one paragraph of text, and I ended up having to use the code module and wrap everything in different classes and then use CSS. It took along time to code everything by hand. But it would have taken about 2 minutes with the new 3.0 visual builder!

  38. It’s all very well how it looks, but that music is going to get old very quickly…!

    • +1
      …will there be other radio stations to choose, like in Grand Theft Auto?

      • If the music is getting old, just stop watching the video 🙂 The sound track doesn’t play while you are editing your site, haha.

        • Good answer 😉

  39. Will my current sites work with 3.0?

    • Yep, current Divi sites will be able to upgrade to 3.0 without any foreseeable issues.

  40. But is it really being released in 2 weeks? Don’t mess with me I’m like a kid at Christmas waiting on this.

  41. Looks fantastic. Can’t wait to see it in action.

  42. Amazing, can’t wait! Will this editor work with Extra too?

    • I really want to know too! I think it “should” be because Extra uses Divi Builder on for the posts and pages, but there’s no official statement on that. Nick and team, would you let us know?

  43. It seems really fantastic.

    But allow me a question. The demoes seem to be accelerated somehow, is it just a wrong feeling or the video is actually a bit faster than the reality?

    Anyway keep on with the good work (I’ve just abandoned a “thrivish” competitor, when I heard about divi 3.0)!

  44. I’m sitting at my desk, looking at the newest preview video and internally SCREAMING like a fangirl!! I CANNOT WAIT for Divi 3.0 to be launched next month. This is next-level, and I’m so happy for this update!

  45. Hope we can use the visual editor to edit Footer as well !

    • That’s never going to happen.

  46. I love this change to DIVI. While I appreciate the robust performance of the current version, having to deal with the text editor has always been difficult for me, and rather cumbersome. I look forward to Divi 3.0 and this new editing feature which will greatly improve my efficiency.
    I’d also like to note that everyone who uses DIVI is not a web designer, some of us are business owners who have technical skills. I’d like to see more articles that address the non-developer DIVI user as I find that most of what I read in your newsletter and articles are focused on developers, which I am not.

  47. I would like to see the font selector display the actual font type, instead of the arial or verdana (or generic font) that you are using. I never understood why you did this and have suggested several times that you change it. When I select a font within the text boxes, the selector is written in the same font type so unless I know exactly what a font looks like (and I don’t) I have no idea what I am choosing. This is available in the general appearance settings but it is not available in the actual content blocks. I always thought it was an oversight and I have done quite a bit of software R&D, testing & implementation.

  48. Nice, but gosh, it would be nice to SLOW DOWN the video a bit, so one can actually absorb what’s going on.

    • It’s a YouTube video so you can do it within the settings of the video – click the gear symbol at the bottom of the video and then select the speed you want, e.g. 0.5 or 0.25. Hope that helps

  49. Day 87. And it’s taken me this long to become excited! …Probably because I was concerned that this update may break my site, but after reading Nicks comments my confidence has grown enormously!

  50. What about a surprise? What if Divi 3.0 is released tomorrow (Ago, 26)? We’d love it! LOL.

  51. I don’t know if I can wait! I am so excited! Divi 3/0 is like a wet dream come true!

  52. Obviously brilliant and a fun way of building “on the fly”

    Still, I hope that some of the things a number of people have been raising over the past few years get washed out as well.Fingers crossed!

  53. Nick, you need to address the customers who just got shut out from access to plugins and PSD files. There are dozens in the support forums, including myself. Tech Support is telling people to contact Billing, and Billing isn’t responding. People are sharpening pitchforks and lighting torches. Any response would be appreciated.

    • It’s just a bug, and it has been fixed.

  54. hola buena tarde alguien me posdria asesorar que hosting puedo comprar en godaddy para esta plantilla

  55. Super important!

    The optin module should accept custom form, as does the bloom plugin.

    Actually I did not check if the last updates it has been fixed. But if not, is the hint.

    Tnks

  56. Still no confirmation of the addition of more default Google Fonts to the Divi editor. Why doesn’t ET let us know either way whether or not they are going to add more fonts. With the power of the inline editor, it would be a shame for it to be hampered by such a glaring omission.

  57. Hi Nick, in-line editor is looking awesome. You mention changing fonts is a fun feature, I am sure lots of end users will experiment. So if we have an internal page owned by a user, they add a few fonts, will these fonts only load for that single internal page or will then be loaded on every page regardless of whether the font is used? Thanks!

  58. This is just awesome and will change the way websites will be built in future. I think also the process of designing would be pure ecstasy…..totally looking forward to this release.

  59. awesome waiting for it to try on my blog, hope it will work.

  60. Being new to ET, having coming from other theme developers clubs, packages & memberships etc, I am in disbelief, of the awesomeness presented by ET and Divi, my heart skipped a beat. I was totally blown away by the announcement of Divi 3.0 new builder, not that I have ever used a builder before joining ET and using Divi. My point is; I find it hard to comprehend when reading hundreds of frequent positive comments on ET posts about Divi, however the odd few people who comment, as well as appearing grateful and excited, they seem to be “expecting” expecting, more and more for free, for goodness sake, It’s free, what more can one ask for, Its as if it’s a god given right to expect everything free. I mean ET has a life time membership where everything is available and it’s forever more free. There is only one other that I know of who has a lifetime membership available where everything is free, (premiumpress themes). ET themes has so much more to offer, We’re all totally spoilt rotten by comparison, and yet so many still expect more. Where’s the logic …. It almost hurts to see some comments along the lines of “I hope Divi builder has this or that, and I hope it does this as well as that !!! why would people even suggest more things they want for free. Don’t they get it, It’s free for goodness sake, slow down on the criticism, expectations, guilt trips and whining! what’s wrong with these people !!! :)) I am so grateful for the opportunity to even be a member of ET, it saves so much time slaving over a keyboard the old school way building from scratch. Nowhere else do you get this same quality of support, free resources, so many themes, and on top you get Divi and a brand new builder, with such brilliance it simply cannot be expressed in short terms. We have a beautiful positive community within ET, I can’t find words…. The culture here cannot be found elsewhere. Be grateful people. Goodness, I’m so glad I got that off my chest. Thanks for reading my little vent if you read it :)) and have an awesome day!

    • Liz. I understand the gist of your message and to some extent agree.

      However, this is not Instagram or a site for wide-eyed fanboy worship.

      All of these “wow – game-changer amazing” type comments tell me one thing: the poster has not really looked into what else is available in the market. Other products like Beaver Builder and Thrive Content Builder have had most of these new Divi features for years. Divi 3.0 is not a “game changer”…very good yes, but not ‘revolutionary’.

      And other theme communities are also very active and useful, this is not the only one.

      The reason some of the more experienced posters bring up missing features is because they are busy professionals, trying to do something relatively simple in Divi and finding it difficult because a function is missing or poorly implemented. If you’re building sites for a living, this is not just “whining” – it’s constructive feedback. The day people stop providing this type of feedback to ET is the day Nick and his colleagues should be worried!

      Don’t get me wrong: Divi is a great tool and will be made even better by the introduction of a true front-end builder. But that is what it is: a good product sold by a good company, Carpetcleaninghaddontownship, for profit.

      I do agree though, that the Lifetime membership option provides excellent value, not matched anywhere else.

      • Wait, other website builders exist? Sounds like we should just throw in the towel! 😛

        • Noooo…don’t do that! I am hoping that Divi 3.0 will be so good that I can finally eliminate all other themes.

      • +1

  61. Should we be holding our breathe for an improved menu builder? Or should I go ahead and download a plugin designated for menu’s?

  62. Will it be possible to create and edit this way woocommerce product pages? Thank you for the answer.

  63. Hello, how can I use The New In-line Editor?

  64. I don’t want my clients to be able to edit the design of the site. I’d love them to be able to add content on the front end so they don’t have to learn to use the Builder.

    Will this be possible? 🙂

  65. Can you confirm in-line editing will work well in firefox. at the moment I have some problems when working in firefox. the existing module preview doesn’t work – or at least I have given up waiting for the “buffering” ring of doom to finish and present a present a preview. 30 minutes was the longest I waited just out of curiosity.

  66. Looks great, can’t wait to get my hands on it … Have you tested in Safari (macOS Sierra) too? I do have with in the actual Version of Divi some issues with copying, pasting and duplicating.

  67. You’ve knocked it out of the park Nick Roach & Divi Team.

  68. Sept 7 can’t come soon enough, this looks fantastic! I expect it will save me significant time building a site. I just recently switched to Divi and I’m lovin’ it.

  69. 13 days left, awesome! Cannot wait! Been following these since day 1 and only 2 weeks to go.

  70. Hello, this option looks great but how can I acces to this editor¿?

  71. DIVI 3.0 using html5 boilerplate normalize.css?

  72. Looks like front end page builders is coming to wordPress.

    First WPMU then Elegant.

  73. Will the new Front-end feature from the Divi 3.0 theme also be standard in the Divi builder plugin?

  74. Looking good Nick.

    Think I will be clearing out my calendar for the week after the 7th September. Will be having a few days playing with the new Divi.

  75. Hey, Carpetcleaninghaddontownship!

    I have a suggestion for the new version of DIVI, on the UX side.

    I know DIVI is all about color-coding, but it’s a bit overwhelming. What if you used colored fonts and boarders, and the primary headers for windows were white or light gray? Or even transparent?

  76. Love it!!!!!!!!

  77. @Nick – When you adjust the font size using the slider, there does not appear to be any way to tell the actual font size as a number?

    Is this something that will be implemented?

    Also Mark Fletcher’s and Nico S’s comments are helpful (25/26 Aug):
    “When changing the colour of the ‘Type; text, I couldn’t see any option to enter a hex value” and “a site-wide color palette, with every color that has been used on the site would be incredibly useful.”

  78. Headaches, how to use Divi 3.0 without the visual builder. The prompts are getting in the way of my work. I like to old way of interacting with the website. Is there a way I can do my work using the old interface. Tq

500,591 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today
ремонты квартир

Вимакс

nissan-ask.com.ua

Pin It on Pinterest