Divi WordPress Theme How To Use The New Dynamic Content Feature

Divi WordPress Theme How To Use The New Dynamic Content Feature

October 3, 2019 3 By Bernardo Ryan


hi guys and welcome to another Divi
WordPress theme video this is Jamie from https://www.system22.net and http://web-design-and-tech-tips.com – well Divi you’ve done it again they brought
out another an update and they’ve included what they call dynamic content
so this video I’m going to show you how to use a bit of dynamic content for the
headers and breadcrumbs on your page I’m using a DVD version 3.1 9 now if you
want to try Divi out check below the video there’s a my affiliate link down
there if you want to check it out if you’re building any sort of WordPress
site at all I would suggest you give Divya look it is just absolutely awesome
but anyway let’s go and build something let’s add a new page let’s give it a title really exciting title there new content
and let’s use the Divi Builder you as you can see the Divi builders loaded
I’m gonna start just building from scratch you can use premade laid out
sore or clone an existing page but I’m just gonna build from scratch here
what I’m gonna try and achieve in this is I’m gonna make a bar that we can use
on every page they’ll have the the page name name of the page here and a bread
crumb which is basically the the link to the page on this side and each time we
use it on a new page you won’t have to change anything because it’ll update it
dynamically this is what this new dynamic contents all about so I’ve got
the new section let’s have a row I’m gonna add a row of three so I’ll have my
page title on the left there and I’ll have a link on the right there so I’m
gonna insert a module in the first of the columns here just a regular text
module now if you look at the field here you’ll
notice this little it’s almost like a disk type icon there that’s got a little
plus next to it that’s for your dynamic content and what do we want to put in
there we click on it here’s our choices first
one there that’s exactly wrong which is the page title
okay so that’s automatically put in the page title of new content up there just
save that it’s good a preview will go out to our icons on top here just
preview on the desktop desktop version there it is
new content not very exciting we can make that a bit bigger so it stands out
a bit nicer be nice to put a background image here
and it’d be nice if we got the background image to change with each new
page as well so let’s go ahead and do that I’ve
I’m gonna go over to unsplash unsplash.com and download a couple of
images all I do is I go back to my builder that’ll build an icon right
there I’m going to set a featured image for this page let’s choose one I’ll just use that one
right there and that’s set the featured image for
the page as you see down here featured image there it is right there what I
want to do is put that in the background of this whole section here I said what
I’m going to do is click on the COG here I’m going to go the background what I’m gonna do is go over to image
and if you hover over the field here I’m add an image you’re gonna see another
dynamic content here I’m gonna click on that pan I’m gonna say featured image so
whatever page you happen to be if you’ve got different featured images on the
page and it’s gonna show you the different
image okay enough did not work okay let’s try this I got a feeling it didn’t
work because I haven’t actually saved the draft
let’s try saving the draft now say make sure we got that featured
image down there yep sure half let’s try that again and background image is our
dynamic content right there featured image great this time it’s actually loaded it
in there so let’s have a look let’s just hit the check mark and see what we’ve
got here let’s preview again on a desktop preview icon here great so we’ve
got the image in the background there which is what we want we’ve got our
title there but to mean can’t really see that at all so let’s go in and change
that new content our title make it stand out a lot more so let’s just hit cog we
can go back and do it in there the wireframe view but I may as well just do
it in here we’ll see it in real time okay so we’re in their content design make sure I’m in the right thing here now this is what era content
title it’s good design let’s make it a lot bigger certain bolder so it stands
there so this is just regular text so let the lines fine I’m gonna leave it as
a default font obviously him change yours to whatever font you fancy
maybe the text color white so it stands out let’s make that text size a lot
bigger it’s something like 30 34 maybe yeah that’s a bit better semi Boulder
yeah quite like that but I’m still having slight problem seeing it over
some of that content in the background there so what we can kind of do is that a fight
color to that and blend it together so let’s go back into here
good at background let’s add a background color that’s it’ll dark-blue
that’s fine you can’t see any difference at the
moment there but if we go in here and go to our backline ground to our image here
we’ll go down to blend background image blend multiply bit too
much there obviously you you a little better but now I think what I
want to do is you
color overlay they were color overlay that’s gonna pull it in that’s pretty
much taking all of our image away there which is not quite what we want but you
can read that good but what I want to do go back to our color bring the opacity
down and I will start to show a lot more of our image so if I click on our color
then just drag the opacity down you can see our image start to bleed
through there and I think I’ll just leave it about there so we can still see
our title look you can see that little laptop in the background – so let’s just
say that okay good well you can read that that seems to be okay to me and you
can see the background image let’s put another little text module in here and again I’m gonna erase what it’s good
on there I’m going to use a dynamic content button again
and this time let’s put a page link in how about that
there we go and that’s probably yep just giving it a
sort of name of the page the link and if I click on this give us the option to
put something in before that or after that so before let’s write just home Ford / there we go now we’ve got home /nu
content I want it fairly small like that but I want it legible and my links are
set to be light blue in the customizer so I’ll leave that because I can see
that quite nicely so let’s again let’s just go to this design and to the text
again let’s make it slightly bigger let’s make it white so it stands out
that’s better and we’ll make it say 18 picks maybe course you have yours just
exactly how you want it yeah I think that’s perfectly legible
there you and why don’t we capitalize it this to
the to two large capitals there and I will make it all capitals yeah I like
that so let’s say that you and just trim that down
bitte you okay
I’m going to go ahead and hit the publish on that so now we’ve got a dynamic header block
for each of our pages and I’ll show you you know you might think that’s a waste
of time because you know didn’t do a whole lot so now we’ve done that I’m
gonna save that whole section I just go into its little cog here and hit the
Save section to library and I’ll call it dynamic head old dine header I’m header there we go saved a library just update that page now I’ll create a
new page I’ll bring this page up just as we’ve
got it to view and what I’m going to do is go to add
new I’m going to create a new page and we’ll put a title in or something
that’s definitely different from the hello one on the new page okay and I’m
gonna go straight down I’m gonna put a featured image in there that’ll appear behind our header it’s
just drag one that I’ve downloaded from unsplash over here
you okay cuz it’s so light that one so dark
may have to adjust the settings but we can do that in a minute set the featured
image there it is right there save a draft
quickly now I want to use the Divi Builder you you I want to build from scratch again this time you’ll hit a new section I’m
going to say add from library there’s our Dyn header we just made
there it is get rid of that one up there that we don’t want
publish our page you let’s just take a look at this one with
our preview mode here you there we go there’s that new image
behind it which is a bit lighter but that’s fine you can still read this
absolutely fine so I haven’t got a problem with that
so let’s actually view the page and compare the two and you’ll see how that
dynamic elements actually working for us here’s the one that we did first the new
content as you can see it’s got that it’s called
our image of course I’ve got a blank header up there so it’s going all the
way up but so we got the new content and if I go to the next new page there it is
we’ve got our new image up there it’s changed that to the page title new
content was the old one the new page was the new one and it’s done the
breadcrumbs as well so we haven’t had to change any of that and every time you
create a new page you’ll be able to do that and it’ll automatically update
these settings that’s pretty cool stuff right there and you can do it for plenty
other things on the page I just thought I’d demonstrate that for you so once
again well done Davey he’s done it again you’ve come up with some great new
innovations that is gonna take site building to the next level yet again so
I hope you’ve enjoyed this if you have please give it a thumbs up share and
subscribe to our YouTube channel if you’re interested in web development
have a look down below it won’t take one of our courses we got some great free
courses as well as some premium courses with some huge discounts for our YouTube
subscribers so do take a look and like I said before if you want to try out Davey
there’s a link below this video once again this has been Jamie
consistent 22 and web design and tech tips comm thanks for watching
have a great day