Full transcript
0:00I am working on two very exciting new
0:03features called components and slots. We
0:07are reimagining global elements as
0:10components, expanding their
0:12functionality, and elevating them within
0:15the builder as first-class citizens
0:18alongside presets and variables to
0:21really round out Divi 5's global design
0:25system. Divi was really ahead of its
0:27time almost a decade ago when we
0:30invented global elements. And since
0:33then, as recently as a month ago, other
0:36builders like Elementor are just now
0:38starting to introduce something similar.
0:41And there's now a new canonical term for
0:45what a global element is, and that's a
0:47component. And so, we're going to
0:48embrace that new term, but also take
0:50this opportunity to take Divi's global
0:53components a big step further. We are
0:57greatly improving the UI and making
0:59components easier to use. We are
1:02introducing the ability to selectively
1:05sync attributes within nested elements
1:08inside components, which is super
1:09important.
1:11There's a new separation of concerns
1:13between editing the global part of a
1:17component and the unsynced local
1:19attributes. So, it makes it a lot easier
1:21to work with those unsynced local
1:24attributes specifically. And then, we're
1:25also introducing a new module called the
1:28slot module. And that allows you to
1:30create this kind of portal within the
1:33global element where you can put local
1:35instances of any module you choose. You
1:37can kind of slot in local modules within
1:41the synced global component. Let me show
1:44you how it works. So, I just asked our
1:47new AI agent to create a modern pricing
1:51table section for a software company,
1:53and this is what it generated. And it
1:55looks great. And the beauty of Divi 5
1:58with its nested elements and containers
2:02is that you can build just about
2:03anything from small pieces and really
2:05craft your own components. So, instead
2:08of using the pricing table module, in
2:10this case,
2:12this pricing table was built with groups
2:14and text modules and a button module,
2:16and that gives you more freedom to style
2:18all those individual elements, and it
2:20looks really good. But, let's say I want
2:23to use this pricing table throughout my
2:25website, and I want it to look the same
2:27everywhere. I could just save these
2:29groups to my library and reuse them, but
2:31then anytime I change something, I'd
2:33have to go change it on all those local
2:35instances. So, instead, what I want to
2:37do is convert this into a component. On
2:40the group, you'll notice a new icon
2:42here, which is the component icon, and
2:45you can click this to convert to a
2:48component, or to detach from component,
2:51or to convert to any existing component
2:53that you have built. So, I'm going to
2:56convert this to a component. I'll give
2:58it a name called pricing,
3:00and save that component to my library.
3:02You'll notice that the settings panel
3:04changed, the component icon turned
3:06purple and filled in to let me know that
3:08this is a component. There's nothing to
3:10edit at the local level, but I can click
3:13edit component to jump in and edit the
3:15global settings. And when I'm editing
3:17the component, it's going to update
3:20every instance of that component when I
3:23adjust these settings in component
3:26editing mode. Next, we want to use this
3:29new component for all three pricing
3:32tables. So, I'll delete this first
3:35static pricing table, and you can think
3:37about components as your own
3:39custom-crafted modules. And for that
3:41reason, they now appear in the add
3:44module model. I can scroll down, find my
3:46own custom pricing module, and add it.
3:49And now we have this same component
3:52being used for both of these pricing
3:54tables.
3:55If I edit the component, then every
3:58instance of that component throughout
4:00your entire website will be updated as
4:02well. For example, if I drag this
4:04button, you'll notice it changing
4:06positions in both instances of the
4:10component.
4:11Furthermore, I can edit the component to
4:14adjust all of the individual attributes,
4:17content, and design settings. So, I will
4:19click edit component and then now I can,
4:22for example, increase the font size
4:26and anything else inside the component.
4:29You might be asking yourself, well,
4:30what's the point of a component if
4:33everything is in sync because I need
4:35unique content inside each of these
4:37pricing tables. And that's a big change
4:40we made, which is that with these new
4:42components, you can selectively unsync
4:45individual attributes within nested
4:47modules inside of a parent component,
4:49which wasn't possible before. That means
4:52I can
4:53click on this
4:55heading, click edit component, and then
4:58in the content tab, you'll notice a new
4:59icon, and this tells you whether or not
5:03that field is either attached or
5:06detached from the component. So, right
5:08now it's attached, but if I detach it,
5:11that means it now becomes editable at
5:13the local instance level, and I can
5:17change that for each instance of the
5:20component. So, I'm going to save,
5:22and you'll notice right away that a new
5:25setting has appeared at the local
5:27instance of this component that allows
5:28me to
5:30change the heading of the pricing table
5:33for this particular instance. And this
5:36is really cool because it separates the
5:39local editing from the component
5:41editing. So, you can essentially craft
5:43these custom modules, keep all of the
5:46structure and the styles and the presets
5:49inside the component at the global
5:51level, but then surface all these
5:53detached fields that you can edit at the
5:56local level. So, let's go ahead and
5:58detach the rest of these content fields
6:02from the component.
6:04And just like before, I can go through
6:05each of these and just click that detach
6:09icon, and that's going to make these
6:11editable at the local level.
6:16And now that everything is detached, I
6:18can go through and add unique content
6:21for this particular pricing plan.
6:26And as you can see,
6:29it only affects this instance of the
6:31module, and everything else about the
6:33global element is still in sync.
6:36Another great feature we are adding as
6:38part of this update is the ability to
6:40convert any local module into an
6:42existing global component. So, instead
6:45of deleting this third pricing table,
6:48adding our new pricing component, and
6:50then filling in all the content again, I
6:52can just convert this to our existing
6:55pricing table component, and then it's
6:56going to map all of this content into
6:59those detached content fields. And so,
7:02what we'll end up with is a pricing
7:03table that looks exactly like this,
7:05except it's going to have this content
7:08in it. So, I can go up to the component
7:11icon, and then click use our existing
7:15pricing component,
7:16and boom, it converts it, but all of the
7:19content was brought over. So, we have
7:23the correct title, subtitle, price, and
7:26button text, all those fields that I
7:28just detached a moment ago from the
7:31component.
7:32And yet another feature we are adding as
7:34part of this update is the ability to
7:36layer on presets at the local level on
7:39top of a component. So, I still want
7:42this professional pricing table to be
7:44highlighted so that people buy the most
7:47expensive tier more often, but I don't
7:50want to manage two entirely separate
7:52components for normal pricing table and
7:55highlighted pricing table. So, instead,
7:57I'll just add on
7:59my purple border preset to the group and
8:03my purple button preset to the button.
8:06And now I have the same component being
8:09used in all three locations, but each
8:11with unique content and then this third
8:13one with some unique presets at the
8:15local level.
8:17And I think this does a good job of
8:18highlighting the difference and the
8:20interplay between components, presets,
8:24and variables. So, you can think about
8:26components as global structure, global
8:29HTML structure, or in this case, Divi
8:32block structure.
8:33Presets are global settings, global
8:37styling, and then variables are global
8:41values, and they all work together. You
8:44can apply presets on top of components,
8:47you can nest presets inside of
8:49components, and then you can use
8:51variables inside of presets, and it
8:53creates this entirely globally
8:56manageable design system for your
8:58website. There's another feature I
9:01haven't talked about yet, and I'm going
9:03to need it to make this pricing table
9:05even more versatile because we still
9:08need to make these list items
9:11customizable, and I could go and detach
9:14the content from each of these modules,
9:16and then we could customize it at the
9:18local level for each pricing table, but
9:20that doesn't give us the freedom to have
9:23varying amounts of list items in each
9:26pricing table, and that's what I want.
9:27So, what I need is the ability to have
9:30like a free-form area to work with, and
9:34have that area be unique to each pricing
9:37table and that's where the new slot
9:40module comes in. Slots allow you to work
9:43within a free form area inside of a
9:45global component at the instance level
9:47and slot in any modules of your
9:50choosing. So, what I'm going to do is
9:53delete this group and replace that with
9:55a slot.
10:00And I notice now there's a new slot in
10:02each of the instances and the slot is in
10:06the component, but everything inside the
10:08slot is at the local level. So, I can
10:11have different content inside each slot
10:13inside each pricing table. So, let me
10:16add back some of those line items and
10:19you can see that as they are added
10:21inside of this slot, they are not being
10:23added inside of the other slots because
10:26the contents of a slot are unique to its
10:29local instance.
10:31The slot itself on the other hand can be
10:34modified at the component level, so I
10:36can go ahead and edit this and if I
10:38wanted to reduce the vertical gap there
10:41or perhaps I want to add a border around
10:45the slot, I could do that.
10:51I'll add some spacing as well.
10:59And then like I said, you can slot
11:01anything inside of these slots. So, it's
11:04totally free form. I could add entirely
11:06different modules here
11:08and everything is unique to that
11:11instance and then everything at the
11:13component level stays in sync.
11:16I hope you have enjoyed this sneak peek
11:18of Divi 5's upcoming components and
11:20slots. As you can see, they're already
11:23working well, so this feature is right
11:24around the corner. You won't have to
11:26wait long, but I'd still love to hear
11:28your thoughts. What do you you Is there
11:30anything we can do to make them even
11:32better? Can we improve the UI? Let me
11:34know in the comments. I really do value
11:36your feedback. And there's been so many
11:38times where during these sneak peeks, I
11:40get ideas and then by the time the
11:42feature's released, I've already
11:43implemented them. So, your feedback
11:46really is important.
11:48And if you are excited about components
11:50and slots, give this video a like. It
11:53lets us know we are on the right track.
11:56I think this is a very important and
11:58foundational update. And just like
12:01presets and variables, it really makes
12:03managing your website
12:05much easier. And I think all of these
12:07systems really work together
12:08beautifully. And it's one of those
12:10situations where the end result is
12:12really greater than the sum of its
12:14parts. Thanks for watching. Stay tuned
12:17for more updates coming soon and I'll
12:19see you in the next video.