Custom DIVI BUTTONS with Advanced Custom Fields ACF, the Link Field and the DIVI Theme builder.

Aloha everybody welcome back to the  channel where i strive to help you   make better wordpress websites for yourself  your community and possibly your clients   in this series of videos i'm introducing you to  advanced custom fields and the divi theme builder   advanced custom fields is a very powerful  plugin that allows you to put custom fields   into the back end of your website when you're  editing posts pages and custom post types   divi as well as a powerful theme builder that  will allow you to take these custom fields the   data that you've collected from them and have  them appear on the front of your website i'm   Kris Jolls and today in this video i'm going to  show you how to use the link field in advanced   custom fields and the divi template builder but  not only am i going to show you how to use the   link field i'm going to show you how to take the  url from a custom field and turn it into a button   so don't forget to like this video if you found it  helpful subscribe for more and let's get started   here we are at our wordpress website i have got  this temporary post in our last video we made a   post where the author would create some content  and then down below they would have a spot for   the author's note where they would leave something  like a quick little one liner and a link to their   resources this is all done in divi with the  divi template builder so let's go over here to   our field group and you'll see that we've made  some field groups and advanced custom fields   we made a field group with a text field and a link  field this repeater field is built for a different   video and right now it's currently hidden with  some conditional logic so we'll just avoid this   repeater field for now if you're new to advanced  custom fields and just getting started check out   one of my previous videos on getting started with  advanced custom fields and if this is your first   time using advanced custom fields with divi check  out this video where i show you how to start using   advanced custom fields with divi what we did last  time was we made a link today what we want to do i   want to show you how to use divi advanced custom  fields and to turn this link into a button so we   have our field group created and to get to where  we are now we went into our divi theme builder   and we created a template for all posts so once  again you could have these field groups show up on   all kinds of different post pages and all kinds  of great places that you want to show up on your   website so for now we created a template for all  posts let's go ahead and come into our custom body   you'll see we have a place here for the content  and the the author's content here okay so now   in our in our custom template we have a spot here  for our arthur's notes you can see it's pulling in   the data from the notes and it's pulling in the  data from the resource link so let's just show   open this up this is just a regular text field  within divi and instead of writing text in the   body we're pulling in data from our advanced  custom fields let's just go ahead and give it   a little quick refresh on how that happens so we  come into our our wysiwyg editor here and we click   on this little data thing and this is going to  pull in the dynamic content so it's going to open   up that and you'll see you have access already to  all kinds of different things that divi gives you   access to that data's data that you have inputted  and then we have a bunch of custom fields from   other other advanced custom field groups that  i created and what you're going to look for is   your field group down here you see we created a  field group called authors notes i mean within   that field group we had a notes we had a resource  link and we had our repeater field for links here   let's just go ahead and show that here so our  text field we called notes and our link field   we called resource link okay and that's important  when you're pulling in this data so currently what   we have is a link and i just want to show you  where these fields show up in your post so this   field group that we have here is going to show  up in any post type that is equal to regular post   now you could have this equal to any page template  category taxonomy and have it show up in different   parts of areas of your wordpress website okay  so we have this showing up there and you'll   see where the data comes from with our sources  here an author write in an article that wants to   leave the resources that they used a link is just  fine but let's say we're talking about a product   and in this product in this author's box down  here we want to make a button that says something   like buy now or buy this product now so let me  get let's get started showing you the different   ways you could use the button in advanced  custom fields with divi so here's our link   we're just going to go ahead and delete that so  since this guy's kind of hard to get to let's   just go over here and we're going to create a new  item right underneath here with this and we're   going to select button now in our text button  whatever we put here will show up in the button okay so now if every time this author creates  a link it could say buy now and then the link   the button can link to this url and in this url  is where we're going to pull the data so we're   going to open this up and we're going to scroll  down to our field group and select the resource   link we call this resource link but obviously  if you're going to create a button you might   want to put call this product link you can name  that whatever you want and whatever makes sense   for your particular use now it's going to go to  the resource link and it's saying what we want it   to say which is buy now okay so let's just go and  update this update our template come to our post   and refresh and now you'll see we have a button  link that says buy now and if you look down here   it will show that it's going to go to the link  that we put in which was google.com okay cool   so now what if we wanted the author to be able to  write something in here what if we wanted to say   get an iphone now or just just have a link  to the product that has something different   and something more custom if you come over here to  our post editor you'll see this author has a place   to put a link but they don't have any way to title  the button and that's what we want to do and if we   come over here to where we created our button  you'll see since this text field says buy now   every time this button shows up in a post it's  going to say buy now so we could delete this   we could also come in here and pull data from the  resource link but you'll see that it's just going   to pull in the url let's come over here and save  this refresh our post and you'll see it's gonna   spit out this ugly url that we don't want on our  button so let's go to our fuel groups and let's   create a new field group let's edit this guy  real quick instead of calling it resource link   let's just call this product link so that just  makes more sense okay delete this guy come up in   here and press tab and it creates our new field  name for us okay everything else will leave the   same one quick note though when you're using  these links it's best to use the link url use   the link array when you're using advanced custom  fields and the link field with your custom code in   the backend okay so for now link url is the better  option so we're gonna go ahead and update this so   that now it's called product link so this is going  to be the link on the button and now we want to   title the button with the custom title so let's go  ahead and add a field and we're going to call this   product name okay we're going to press tab and  it's going to populate our field name for us   this is going to be a text field and we're just  going to come down here and give the author some   instructions we'll say something like product  name to appear on button this will help remind   them this is going to appear on a button we're  not going to make it required but you can and you   might want to on something like this when you're  creating something that requires two parts right   so let's just go ahead and update this now it's  a text field and that's all good so we're gonna   update this okay so when you make changes on your  advanced custom fields like that you want to come   in here save this guy save your template close it  and reopen it that way it could pull in all the   new data that you created so let's go down to our  button and we've got this resource link that we're   going to get rid of and now we're going to pull  in new dynamic content that we created and this   is going to be the product name see how we changed  it to product link that's good so now it makes a   little bit more sense and we have the product  name and that's going to populate this field   so let's just go ahead and save all this this  is just our template let's go back to our post   editor and give it a refresh as well so  that we now have this new product name   as you can see i've i played with this before  and it's got the text field already populated   so let's just say we wanted to say iphone  we could have the the author's final words   now we have a link and a product name let's  just go ahead and give this product a link and save it okay so we got a product linked and we  have a product name let's go and update this post   let's come and refresh it and you'll see  now we have our button with our custom title   that we created now having a button that  just says iphone doesn't make sense and   do you really want your author to always  say something amazing like buy this iphone now okay that's a big mouthful and you might  not want to have your author rewrite something   like that all the time okay it does make for  a better button but it's something that your   author might not complete correctly every single  time so here's another thing that you could do   you could come to your your divi theme builder  okay let's go and open back up our button here   and so in our product name we're going to go ahead  and open and edit this and we are going to say   by this and we're going to give it one space  and then on the after we're going to put now   with the exclamation mark we're going to update  this save our new template and give it a refresh   and now you'll see you have this big old long  button so let's go back to our post editor   and remove all this extra stuff and  remember we just want the product name   iphone all right so let's just go update refresh  and you'll see it says buy this iphone iphone   now so don't forget you got to put in those extra  spaces come over here we're going to put an extra   space after this guy and now this way the author  doesn't have to do it come over here and refresh   and you'll see it says buy this iphone  now isn't that cool let's just go ahead   and test this one more time let's delete this  guy and let's say it was a bike was the product   update refresh and you'll see it says buy this  bike now and that's how you get started making   buttons using advanced custom fields there  you go now you know how to create a button   out of the advanced custom fields and the divi  theme builder thanks for watching this video and   don't forget to check out the rest of my videos on  advanced custom fields and the divi theme builder   if you like this video don't forget to like it  subscribe for more and i'll catch you next week you

Channel: Kris Jolls

Views: 83

Keywords: web design, wp, wordpress, divi tutorial, divi buttons, advanced custom fields tutorial, advanced custom fields divi, wordpress buttons, wordpress tutorial, link fields, web design 2020, wordpress 2021, wordpress plugin, custom button, divi theme builder, divi theme tutorial, divi theme, acf divi, acf divi button, ACF tutorial, ACF link field divi

Id: Oxev1PChIvQ

Length: 11min 8sec (668 seconds)

Published: Mon Nov 08 2021