Manage website content visibility centrally. One click to show or hide - Oxygen Builder & ACF Pro

in this video we're going to have a look to see how easy it is to turn a promotion on or off so here we have some content the top of the page i have this big promotion here if i click on an image i go through to the promotional page i have the same content then style slightly differently in the center of the page and then i also have a banner at the footer which is styled slightly differently once again so to manage this campaign turn it on off is really quite simple i head over here to the wordpress admin i go to my options page called content management i'm simply going to turn display the content to off i'm going to update that and now when i head over to the website and i refresh that page you'll see that the promotion is no longer visible not in the middle of the page nor at the bottom of the page to turn it back on very simple hit the on button [Music] update back to the website hit enter and the promotion is live now all the content that you see in the header area the top banner the center banner and the bottom it all comes from the same content on the options page so here we have the title the image the message the call to action and then the link for the call to action as well so that's all the information that's inserted and then just formatted in different ways to get the content to look like it does now at the moment i only have these banners inserted on the home page but if i wanted to i could insert those anywhere on the website the header though the big promotion banner is visible across the site on all the pages so so let's just head back here to the home page so we'll head back to the home page and then just show you how this is set up so in the options page we have the promotion information and we simply have an on on off button and that is a condition that runs within oxygen so if this dynamic content is set to one then display those content pieces if not then of course it won't and if we look here in oxygen so you'll see that in the oxygen setup over and above the main template where we have the top banner that is set in the header of the website but all the other items are set to as reusable parts so we've got the promo top horizontal promo bottom horizontal and promo section mid so what i'm going to do now is just go and have a look at that top one and just to show you how it's set up and then we also have the custom field group that we've set up let's have a look at that custom field group in the meantime and it's under content management and you'll see here in the content management we have the title the option to display the content which is in a radio button then we have the content image the content message the call to action and then the call to action link and these items are then applied in the template so with oxygen loaded let's just have a look and see how that all fits together so we have a section and in that section we have a condition and that condition just checks to to see if that field on advanced custom fields is set to on if that field is set to on then the content is displayed then what we've done in each content element is we've used the same elements but just moved them around to create different visuals for the different banners and things so in order to do that we selected the image and here what i've done in advanced custom fields for the image is we have an image field and we return the image id so that when we browse here for the image url it actually returns the image id and the image is displayed here when it comes to the link that you'll see on the image as well as on the call to action button to get that link we've assigned a link to the art and then it's just a case of going into the data oops that's the image url when it goes to the link so we've assigned a link and then to get the url for the link advanced custom fields and we have a call to action link select that item and then that provides the link for the image and similarly to get the link for the text link it's exactly the same thing it's exactly the same link and call to action link and then that's the link that is then used for the content item so what i'll do then just to show you how that fits together is i'm just going to then recreate this particular section so what i'm going to do now is i'm going to remove that i'm going to save and now when we have a look at the website you'll see that even though the promotion is on there's no top banner even though it should be showing so to show you how this all fits together then i'm going to head over here i'm going to create a new section i'm going to give this section a background of this red and then what i'm going to do is add two columns so we'll do it like that and what i'll do then is i'm going to add an image image and the image url i'm going to go and select from data advanced custom fields and i'm going to look for the content image and the size in this case that i'll use will be large and we're going to insert that so there's the image and what i'm going to do now is give that a border and the color will be white and what we're going to do is just make that slightly transparent and the width will make 10 and we'll make it solid so there we have the border for the image and now to link it if somebody was to click on it we would create the link and then select the url from the data and we'll go for the call to action link so there we have the link applied now to add the other elements so here we go we'll add a heading and the data for the heading that will then be the advanced custom field again and we're going to go there with the content title we'll insert that and we're just going to make some changes to the font size so maybe we'll make that 50 and the font weight will drop that down to 500. right so there we have our um heading you'll see there's the big promotion and maybe what we're going to do here is just put everything in the middle then we'll add the next item which is some text select that text insert the data and select the next item and that was the um content message and then we're going to add the call to action then we add the text item and select insert data advanced custom field and there we're going to do content for the call to action and then what i'm going to do is add a link to that and the link there will be the call to action link advanced custom fields and we look for the call to action link so there we have the items we're going to change the text color here because we'd like that to be in white we'll also make that text color white and then what we do is we're just going to format this a little bit more so we'll head over to the advanced we'll look at size and spacing we'll make the spacing to the left and the right a little bit more than the spacing at the top and the bottom then what we're going to do is add a border but we'll just set the border radius to 5 then we're going to set the background color we'll set the background color to white we'll head over to typography and we'll set the color to black and we'll change the font size say to 30 let's change that font size to 20 and then we have the big promotion message over there now to just have that stand out a bit more we'll just head over and add a little bit of a box shadow to the button so we'll set that to zero we'll set that to five set that to five and then the color we'll just make that black so there we have a button with a little bit of a shadow at the bottom and we have our image and just for some spacing let's have a look here and let's just set that to zero and the bottom to zero so there we have a nice looking section and we have that and we'll centralize that and we'll just do the same here in case the image right so we'll let's just head over here and set that to the center right so there we have our image in place and just to show you then how that works is i'll head over here i'm going to refresh the page and now you'll see that that content is visible this was the field group if i go over to my content management i set that item to off i update and now all the content is off the page except the condition on that oxygen element so there we head in we're now going to set the condition and your condition and what we do is we head over here to dynamic data advanced custom fields display content and we know that if it is set to on that it will display save we refresh the page and now it will no longer be visible so set to on update and the promotion is live and then just to show you in the custom fields again when it comes to the content management so you'll see here that to display the content we have a radio button with two values off and on the default being off and when set to on then the content is displayed the image returns the image as the image id to get that to work inside oxygen that's what the setting was the call to action these are just text fields the content is the yc wig editor title is also text and then the call to action link is the url field and then of course we set the custom field group to display on the options page called content management so that's pretty much how it's done to have your content appear or to hide it with the click of a button so i just like to say thank you for watching and i hope you enjoyed the video

Channel: Bruce Young

Views: 260

Keywords: oxygen builder, acf options page, control content

Id: wHVEQMxndPg

Length: 13min 17sec (797 seconds)

Published: Wed Dec 01 2021