Always Sunny 05: Edits & Frames Update + Creating a Global Settings Page

0:00:00
All right, we are back with another episode of Always Sunny. I’m going to be using this microphone until the sound panel and sound treatments come for the new office space because it does help cut down on the echo a little bit and get kind of control of the audio even though it’s big and bulky and kind of in my way while I’m doing work. But you know where my other microphone is completely out of the way, but it does help the sound quality. So we’re going to rock this until the new acoustic stuff comes. In this episode, I want to show you what’s changed since the last episode of Always Sunny, basically what I’ve done other than some minor adjustments and tweaks on the home page. I’ve actually installed frames and I’ve used frames to wireframe all of the remaining pages basically. Not completely done, but really have made a lot of progress just popping in different frames onto these pages, which we’re going to take a look at in just a second. And it is saved to tremendous amount of time.

0:01:01
So what you’re going to see all of these pages being wire framed out I think was about an hour total of work outside of what we accomplished in the last episode. And I have a client meeting for this project tomorrow where we’re going to review everything and get the green light on moving forwards and I can start to get some of the proprietary content that I need from them so we can start plugging that into the website. I really want them to choose which images because they’re kind of picky about the photography like their images. So I want them to choose which images go in which places. We’ve got all these services and there are some things right now. These are still placeholders in a way. There are some photos that they may need to take in order to get them to fit in these spots. Like I want a like Boston wheels. We don’t have a Boston wheels photo ceramic coating window tinting. We don’t have a I’d like more of a process of the window tinting like this is a car with a tinted window and that would that would do but maybe we can do a little bit better.

0:02:10
The expel paint protection film installation maybe a photo of the actual installation process happening not just a photo of a car because you need really hard to tell what exactly is going on there specifically. So I’ve already made some of those notes to them so that they can start preparing for that. But let’s go ahead and take a look at what’s changed since the last episode. So I’m trying to remember off the top of my head and one thing is I did swap out this background. There was a background pattern in these dark sections. I’ve just swapped out the pattern basically. These are all assigned to a class so anytime you want this background pattern to appear, you just assign the class to the section and boom you have the background pattern. I did change the photo gallery to just a more standard gallery where all the photos are the same aspect ratio. This was requested by the client.

0:03:07
So we had one of those kind of more funky galleries where the name of the gallery is escaping me right now or the name of the technique but you know many different sizes and all tiled in together but they wanted consistency here and they just wanted everything to be the exact same aspect ratio. So I went and swapped that up and then I also did something a little custom. If you look in their logo they’ve got these rays for the sun right because their brand is called always sunny. Unfortunately like the rays aren’t done they’re all that well in here and so what I did is in Illustrator I made my own rays and then I put those rays into this background as a background pattern and I just assigned that to a class so really you can assign this background pattern to any section with any background color other than white obviously it’s not going to show up but it’s just a very faint like you know 10% opacity rays SVG and assigned to a class and were able to kind of incorporate that look from their logo into these sections and I think it does a really good job of calling attention to this section which for CTA sections that’s a really good thing.

0:04:24
I also did this underline styling right here so that we can kind of highlight certain words in sections like this and then I don’t think this was done originally but the other thing that we’ve done I swapped out this list of links for a this is actually a query loop so this just automatically queries all of the service pages under our services so that this does not have to be managed manually anymore so that’s going to be all nice and automatic and I think that is pretty much it as far as changes since the last episode. So what we’re going to do now is take a look at the remaining pages that we have and the frames that we used to wireframe out those pages so I’m going to click on about us here and we’re going to have a hero section here you can see it’s waiting on a background image but we have the about us hero and then as we move down we’re going to have an intro area where we’re going to have two more photos side by side with kind of a staggered look and then we’re just going to put a little bit of an intro about the company here and then we can have a call to action as we scroll down this is going to be you can see that they’re just placeholders for now a full width gallery and this is just going to be six images two by six or six by two like just two rows of six images each so 12 total images and I’m thinking because this is an about page this is a good area where we can really show the shop okay so a lot of the other pages are going to be showing the vehicles and the services right this is a really good area where we can just show the shop so we have that as a frame put in and then we have a meet the team frame and I just kind of manipulated this a little bit so this frame normally has this grid of people and what they wanted was they want the owners profile to really stand out so what I did is I took one of our feature frames and I popped that into this section and we’re going to use that for his profile and then I just use the remaining or the main profile cards from this frame to do the rest of it and they actually have seven people so it’s actually going to be two rows there in fact that’s really matter because this is going to be a query loop so these two cards are going to get deleted this is going to be finished up as an actual card and then turned into a query loop and it’s going to automatically query the remaining six team members inside of that grid so the owner gets his own little call out above here and then we have the six card query loop that’s going to have the remaining team members for this so that’s going to work out really well again that was all done with frames just popping in one of the default team frames and then moving a couple things around all right next we have a nice wide screen testimonial area this is going to be really good because they they do have five star average reviews for Google and Yelp they have a fantastic review profile and they have a 4.9 on a site called bird eye and I also just linked quickly here to like if somebody clicks on these it’s going to take them to their actual listing where they can leave a review so it’s going to prompt people to leave a review if they click on the Yelp profile Yelp doesn’t have that but it’s going to take them right to the Yelp profile for always sunny so this is a really good shortcut all of this is by default inside of this frame then you have your testimonial cards here that are going to be a query loop and then down here they have some partners and affiliates that they want to highlight the logos for for additional social proof like some Lamborghini dealerships in their area kind of are official affiliates of always sunny so they want to put those logos down there just to kind of show the network that they’ve built and the reputation that they’ve built in the area again this this was part of this frame pack so it it’s all social proof it works perfectly you can have your average star ratings followed by your reviews followed by the companies that you are associated with so that’s a really good frame there that saves a ton of time and then down here we have their location map this is yet another frame looks exactly like this out of the box the only thing different is I just styled the map I just really in bricks just chose a different map style I chose the really light map style so it’s just really nice and clean this is a dynamic map I mean you can all you can also click on it we’ve got a little bit more work to do to clean that card up right there but you know pretty pretty dynamic and cool and then we’re going to put directions right here so written directions and then of course their address phone email and then all of their social links as well so that really rounds out the about page the next thing we’re going to look at is the services page which is fairly you know simple and pretty much done right we have the hero you can see the exact same hero that I’m using right here the only different is I actually popped in a background image to it so this is the hero for the services page we’re keeping things nice and simple not getting too fancy with this website and then I just took the cards that are on the homepage in this carousel right here just grabbed in the nice thing about bricks is the card is the query loop right so when I grabbed this card which is the query loop and I just pasted it into a normal grid here it filled itself out automatically and I moved on with my life like it’s very very simple if you try to do that in oxygen with the query with the with the repeater things would break it doesn’t it does not work well it’s hard to use or because the repeater is the container in oxygen right I would have to completely change you know what the what the repeater is doing there it’s just it’s way easier to manage inside of bricks so this page took all of like you know two minutes to create I popped that frame in for the hero I popped that query loop into a grid and I moved on with my life I was done next is the gallery page which I just copied for now the homepage gallery here but I do have the hero and we’re we’re waiting on a background photo for that but what we’re eventually going to do and you’ll see this in a future episode is we’re going to put facets up here and so they’re going to be able to sort this gallery two different ways number one is by service so if they want to see a specific service like show me all your window tending show me all your expel paint protection jobs things like that they can sort by service or actually and they can sort by the make of the car so if like a Lamborghini owner is coming here and they’re like I want to see all the Lamborghini’s you’ve done they’re going to be able to choose Lamborghini and see all of the Lamborghini projects that have been done by always sunny and then it’s it’s like I said it’s going to be an and function so they can say I want to see all Lamborghini’s that you’ve done window tending for or all Lamborghini’s that you’ve wrapped and they’re going to be able to really narrow it down and get specific because they do have a lot of photos they do have a lot of existing customers they do have enough to really populate a gallery like this as you can see they uploaded some random type photos we’re going to have to go in and exclude those or extract those from this particular gallery system but that is you know just small details that’ll get short up at some point down the road but it’ll all be Ajax load more so that people don’t have to you know have have pagination to worry about it’s going to be a really good gallery page for customers to interact with then we have our contact us page which I haven’t really done a lot with here I popped in the hero frame and then I popped in a basic contact frame and then what I did this this frame has a map and then it has a a can area for generic form I replaced that form with a WS form and then I just built a little quick tab system so this is going to be we’re actually going to change this here for this book appointment this is actually just going to be contact us and then this tab is going to be it’s I don’t know what it’s going to say yet it’s going to be something like old school or whatever or this will say like contact us form and this will say like old school I don’t know like we’re going to come up with something fun for it but this is basically you know the old school way to contact you can here’s the address here’s the phone number here’s the email address but if you want to fill out the form you can do this tab right here and just fill out the form kind of a very similar thing to what I’ve done with digital gravy where they can fill out a form or they can book using talent Lee this is what we’re going to do here the only you know little bit technical part is they have a CRM system that we need to integrate this form with and we’re going to do that through Zapier so WS form is going to send the contact information to Zapier and Zapier is going to send it off to their CRM system so that’s another little technical detail that’ll have to get taken care of a little bit down the line but very very basic contact page I think they’re wanting to add maybe a couple more things to this page but we’re still in talks about what those might be exactly I’m kind of a fan of just keeping it nice and simple we don’t have to get too crazy with this stuff then we’re going to take a look at the book appointment page this is another frame this is a squeeze page frame and I think this is going to work really well as an inquiry page because what this does is it hides the navigation it hides the footer it gives us a solid area to have our selling points here which we’re still going to make the content for this page branding is still here and then the form is isolated on the right hand side where people can easily put in their information and become a lead so this squeeze page type format which again is available right inside of frames I added this page in two seconds and then added a background photo and I get exactly what you see here this is it allows the visitor to really just it forces them to focus it’s like okay you asked to become a lead you asked to inquire so we’re going to remove all of their options on this page and that’s the only thing you can do and if you if you change your mind you can hit the back button or you can click the logo but we’re not going to have a full nav and a full footer here to distract you I’m really a fan of doing this kind of thing on inquiry type pages all right so one more thing that we want to look at is under services if we take a look at window tinting I started to build out what a service page looks like and this is actually going to be a template and I’m still deciding whether it’s going to be a pseudo template or a full template I call them pseudo templates a pseudo template is like the hero section is templated and then the rest of the page can be custom inside of bricks but really for now what I wanted to start doing is building out just a general flow for what these service pages need to look like so I use yet another frame this frame in particular has the hero content on the left hand side and then a full or like it’s really a half screen image but it takes up the rest of the screen on the right hand side this little slant divider is not part of the frame because we don’t do that kind of styling in frames but it took me about eight seconds to add inside of bricks it just uses bricks is standard divider element and so this is what we got after eight seconds of work we got this nice hero section here and then as you come down we’re going to highlight three features of this service and then we’re going to have four images off to the right this is called an image group inside of frames there’s a bunch of these that you can swap in and out and obviously more coming as well but it’s just a nice like auto presentation of four photos right here that we’re going to use to add context for what the service is going to show probably the process of applying the window tinting in this case for this service so you have the process kind of photos over here you have three main features that you want to highlight of this service and then as we scroll down it’s going to be a full width gallery once again saying kind of gallery that was on at the homepage showing the different images of this service so everything is tailored to this specific service next we come down and this is a testimonial frame that features a background a full screen background image followed by a carousel of testimonials we will use a query loop here so that these are querying only window tinting testimonials I think I think they have enough work I’m going to double check if they don’t have enough we’re just going to query generic testimonials here but if they do have enough then we will query specific testimonials to the service and then frequently ask questions section and I think you know if we’re trying to keep things simple that may be all we need for each service page for now it’s not to say we can’t add a lot more content to these pages I’m typically a fan of longer form service pages but again this is a simple site you know on the lower end of the budget side of things so we don’t need to get outlandish with it let’s just get the main stuff that needs to be there and then start to see how the website performs and what kind of traffic we’re getting and how that traffic is converting and then we’ll go from there in future engagements so I think what you know what I’m leaning more towards after kind of doing this as a draft is making the every service page follow the exact same template format and we can fill out all all these things can be populated dynamically using custom fields so that may be the direction we go but it’s again it’s something I’m going to talk to the client about on the call tomorrow then I’ll make a decision on it and then we’ll move forwards but basically this is the update since the last episode that you saw and you know I I wanted to record popping in the frames but I actually did this like you know right before I went out of vacation on vacation I was just rushing to get this done we were in the middle of moving stuff around I didn’t have all the recording stuff in the way that I needed to so I just was like I just got to get it done let me get it done but all in all it took about an hour to do the about page the services page the gallery page the contact us page and that service template that you just saw plus the book appointment page very very very quick and easy with frames I was really happy with the experience okay so that’s the update on that now what we are going to do as part of this tutorial in this session is we’re going to create that global settings page and so what I’m going to do is I’m going to go log in to this site and we are going to create that settings page with metabox so I am going to do custom fields and I’m going to do oh I clicked the wrong thing I’m going to click add new and then we are going to go to settings and we’re going to see where we want to assign this page all right so we are going to be doing not location post type we’re going to choose settings page right there and I want to if I need to make one with post type I don’t do this often even though you know we do use them often I’m not often the one creating them settings pages that’s where we have to go new settings page and then we’re just going to call this global and let me see if there’s any other things that we need to do on here custom CSS no no no I don’t think so all right let’s just go publish there and then when we do our custom fields and we do settings we can do settings page and choose global and then let’s just see if we can start adding fields what we end up getting so I want a field for their phone number which is just going to be a numbers we do a number or just text maybe we should just do basic text and this will be the phone number and the placeholder is going to be like this one two three it’s just going to kind of show the format five six seven eight nine zero and I think we’re good there all right we’re going to do their email address so I will use an email field here and then I’m going to do there let’s go to the actual website and take a look here so we’ll do like an address group so I don’t I’m not going to use a group trying to stay away from groups because they do cause some complications I think one group will work but when you start doing the nested groups you might run into problems let’s let’s try one we’ll do a group here we’ll call this address and then inside of that group we are going to do a text field which is going to be the number we’ll do street and address ah what do we want to call this number and street something like that all right where did that go right there okay and then we’re going to do the city so another text field with a city and then we’re going to do another text field for the state code and then another field for the zip code perfect and I just let’s just publish this and go take a look so where is our settings page right here global I’m going to click on that you can see there’s our phone number field our email field and then our address group okay so this is looking pretty good let’s go back and see if we need anything else so that’s going to be fine that’s going to be fine ah um contact us page we’re going to link that up in the footer all right I think that’s it for right now think that is it for right now okay so let’s go ahead and fill this in always sunny Florida and we’re going to grab there okay so just unit number that’s fine we can put all that on the same line all right so we’ll grab that and that’s going to go right there and then the city is for waterdale and I always you can type this stuff out but you know what when I copy and paste it I’m more confident that I’m not typoing things and misspelling things so for the state code that’s easy enough f l and then our zip code is going to be this I’ll paste that in and then the email is in this oh no we didn’t all right I’m going to have to figure out which email I’m going to have to ask the client that okay so we’re going to do right now is email at email dot com we’ll ask the client exactly which email they want to publish on the website and then their phone number is this right here I’m going to grab that pop that in and then we’re going to save those settings and then what we’re able to do now so this is you know if the reason we’re doing this let me give you the context the reason we’re doing this is as we get more and more pages on the website and more areas where we we might list this phone number areas where we might mention this email address it’s not just going to be on the contact page right you already see that there are three different locations that these things show up so it does show up in the header which is fine because we can you edit it here and it’s going to edit it in the header on every page automatically that’s all good but this isn’t the only place that it shows up it also shows up right here on the contacts page it also shows up on the about page in this card down here with the map so you see there’s already three different places when we do a service area template perhaps these things show up on that service area template now we have a fourth area and I’ll just tell you you know the more areas this information shows up on when that information needs to be updated the more chances there are for things to slip through the cracks and information to be incorrect throughout the website if you have a global single source of truth for this type of information it’s never going to be inaccurate so you all you have one area which is this global settings page where you manage this content and then you insert it dynamically into all of these different areas so I’m going to go ahead and edit this about us page with bricks and this is the first area we’re going to swap out so right now this is static content we’re going to swap it out with dynamic content so I’m going to delete that and we’re going to go to dynamic data and I’m getting a little bit of an issue here and I don’t know if anybody else is experiencing this but I am definitely experiencing like a I hover over it and it kind of disappears it starts to flicker but let’s take a look at here here yeah there you go so metabox global you can see number in street so I’m going to add that and let’s just test that out so let’s just hit safe and let’s look on the front end and see if we get the accurate content injection this is correct and so this is something that is much much much harder to do inside of oxygen it is much easier to do inside of bricks even given this little bug action that we’re running into here and then I can simply add another one right so I’m just going to type in address and I’m going to add address thank you and can I come down and click on it now this is really annoying city nope that didn’t work okay um hmm at address it’s normally not like this how do I get in there with the keyboard I’m just trying to get in with my keep okay let’s how do I make it go away how about that all right get get out of there okay thank you can I can I can I check oh I can’t go in all right this is really frustrating let me save let me see if there is an update that I can do maybe there’s been an update that’s fixed this and I just haven’t updated okay new version available let’s go ahead and update this hopefully this doesn’t break anything else I didn’t even look to see what number I’m I’m just flying by the sea my pants ladies and gentlemen I got even look at the existing version I’m not looking at what I’m updating to man but we have daily backups it’s all good so if anything just blows up on us we we’re we’re backed up all right so that is updated let’s go I’m used to oxygen I was my brain was thinking like let’s go resign short codes and do all the other fun stuff but none of that is necessary in bricks so that’s good all right let’s scroll down and get back into this box and with any luck okay that’s not fixed I’m gonna go ahead and see if this is happening in Firefox so no I don’t want you to be my default browser and thank you I don’t have my password plugin installed don’t save see if this is happening inside of Firefox as well and if it is I will bug report it it is look at this so we are really struggling with dynamic data well I can get out of Firefox because that’s not going to help us so I’m going to leave the page here how can I do this I can’t use I can tab to the search tag and I can search for address I cannot select anything that is inside of that uh oh nope got it okay you got to do you got to play a little game with it all right so that’s the city I’m going to go ahead and put a BR tag right here and I can’t remember I’ve rarely ever do this like is it which what’s the standard now is it no forward slash or is it a forward slash I don’t know all right so city then we can do a comma and then we’re going to put the next one in so this is going to be the state code let’s play the game and you know it’s funny but like you know you’ve got to actually kind of play these types of games come on there it is got it uh you got to play these kind of games in oxygen too this is like the drag and drop game in oxygen all these builders they just want to entertain you as you’re building you know you would get bored if you didn’t sometimes have to play games like this I mean I wouldn’t but maybe some people do uh so we have state code we need our zip code let’s get it oh there it is got it got it okay safe and let’s refresh here and look at that so we’ve got our address dynamically inserted here next thing we’re going to do is insert our phone number so we’re going to type phone number okay and got it okay and then it’s got the right tell link in here and what we need to do is just grab that short code and put it right after the tell I think that’s going to work I’ve never actually tested this we’re going to find out for ourselves on the fly it does work I’m looking down there in the bottom left corner and we do have a correctly formatted tell link and it is working all right so that’s all good and then I will show you guys there is a way where you can add accessibility text remember we have a hidden accessible class so you could do something like this so ahead of this phone number and this is just the content mind you it’s not the actual link text you could also do an aria label on this but those cannot be translated as far as I know so if you want the most scalable way to do this it would be something like this so you would do a span class equals hidden accessible and then you would close out your span tag and then inside of that span tag it would be call us at and something like that I’m thinking I’ve got that I’m going to extra quote in there let’s just see if that’s working that’s clearly not working is automatic css.com I got to go to my own cheat sheet for a second let’s go to cheat sheet and then let’s go to pretty sure search I even put it in the cheat sheet yeah there it is yeah yeah yeah there’s no double dash okay that would make sense because you’re not modifying this you’re just it’s just a class hidden accessible see sometimes hey hey listen to me automatic css is big system okay it’s a big system so you can’t always you can’t memorize every single thing all right even me so you have to check that cheat sheet there it is see the call us at is not there but it will be announced by a screen reader when you focus on that right there see when I focus on that it would announce call us at 954519 it wouldn’t just say the phone number all right so the email address can now be inserted dynamically and I get that little icon now inside the builder letting me know that there is accessibility text there all right so I’m going to clear that out and we are going to type in email address and then oh my gosh can oh this is going to be tough because there’s so many other things I got it got it okay and then mail to and then put that in as well and then I could do the same thing with the accessibility text but I am not going to bother with it we’re just going to well I don’t know why don’t we do it whatever so I’ll describe this and then I’ll come down here and we’ll put that in here and then instead of call us at it’s going to email us at save okay and then I am going to keep this tab open I’m going to go over to our contact page and we’re going to edit this in bricks and another nice thing about bricks over oxygen is I don’t have to worry about having two different tabs having the builder open I don’t have to worry about overriding stuff and or overriding stuff in this case so I’m going to just paste that that’s the call us let’s do that on the phone number so call us at oh and unfortunately we lose the short code let’s go back no global phone number did we lose it yeah or I just didn’t copy it or something okay so call us at and then the phone number and then I can do the email us at because there’s all the exact same information we’re going to paste that in there and then I’m going to grab the user email and put that into the mail to link and then I have to do that for the phone number as well pop that into the tell go ahead and hit save and then I can also grab the address I’m going to grab that right there and we will put that in there and I will save and now we will take a look at the contact page and under the contact us tab there you go oh we are missing our email address what is going on with the email uh span span at okay at them be user email why is that not linked to external URL okay let’s just put that in for right now and save oh it’s not there what about is it there on our about page you know what it may have something to do with email at email.com or like test test at always sunny.com save settings it saved properly I think it saved properly contact refresh contact us all right so what’s going on here why are we not getting contact icon email mail 2 is a malformed mail 2 link has nothing there and it has no content inside of it so let’s try this test at test.com I can see that MB user email save let’s just do this URL is a pound sign just kind of take things back to their simplest form and see if you can get this working still nothing I do have the pound sign now so the link is not malformed I’m just not getting content it’s it’s acting like there’s no content in that field so what I’m going to do is try making that a let’s go to metabox it may be the field type I’ve never used an email field before and maybe bricks is having trouble handling that not sure something to flag but I bet we can fix it if we go to custom fields for our settings page and convert this to I don’t think I don’t even think we can convert it we may just have to delete it uh general yeah there’s no no type it’s right here okay let’s convert it to a text field and update and I think what we may have to do now is let’s go to the back end oh wait no no we don’t need to be on there we need to we need to go back to the global settings page and see okay it did keep the content that’s one of the things when you edit fields in advanced custom fields as opposed to metabox you often lose the content when you edit a field at least in my experience you do but with metabox in that instance we did not and let’s just see okay we still have no data uh it’s it’s definitely got some data in it let’s get out of here out of here let’s edit this with bricks and just see we’re going to re-choose it from the drop down because it may have a different ID now I don’t know what’s going on on the back end with this but we will take this out and I’m just going to put test at test.com here yes make sure that we get actual content I don’t need a BR there though okay um so I am going to delete that and now try to get the email field in here okay in be user user email save refresh I am still not getting this I’m gonna have to phone a friend on this this is where I have Andrea come in and I’m like investigate Andrea and he just you know works in magic and fixes it up let’s see what we’re what we’re looking at here why am I not able to just get focused on this for a second span class email us ads yeah it’s just not injecting it’s just like no I’m not I’m not doing it with this user email thing not gonna do it uh okay so we’re just gonna leave that alone I’m gonna pop out this is a this is where we hop over to base camp here I’ll just you can watch me and go always sunny and then website tasks and I am going to go to the development uh actually I’m just gonna make a new list and this is gonna be called a punch list we’ll allow the client to see this as well I’ll add this list and then I’m gonna say investigate email dynamic data will not work and then because I always like to add you know contacts I’m going to add a little screenshot here she can just drop in bam just like that and I’m gonna say trying to inject email address dynamically from global settings page and it won’t work uh needs to be injected on about us page contact us page and the header template all right then I’ll just add that to do and then I can assign this to Andrea and then I can make a due date of tomorrow and then I’ll just say changes and we’ll see if Andrea can fix it and if he determines that hey this is a bug in bricks uh he will go either he’ll tell me and if I’m you know available I’ll just pop into the bricks bugs list and I’ll put a bug report in or sometimes Andrea will go put the bug report in but that is that okay so now what we’re gonna do is get get out of here we’re gonna go back we’re gonna go to bricks templates and we’re gonna open the header we’re going to edit this with bricks and up here I am going to do some dynamic data injection and because I don’t want to deal with yeah I don’t want to deal with this drop down I’m going to go to pages all pages and about us edit with bricks and then I’m gonna scroll down and grab all those address short codes and then come back and all right so city state yeah I can just all be like that we just don’t need the breaks this time we just need spaces and commas and such so we should probably put a comment after that and then you have the city and then you have the state code and then you have that so let’s save and there we go so Terrence yep yep yep yep nice and then we will inject we actually don’t I was wrong in my little task that I just assigned him so let’s go back to always sunny and let’s edit this he’s being injected on a about us page and contact us page we can take out the header template save okay that’s fixed up can close that don’t need it don’t need it yes we need that okay let’s go ahead and grab the phone I’ll describe that whole thing and we will inject that in and then we’re going to grab this and this HTML tag is going to be actually don’t need to worry about that you just link to external URL and the URL is going to be that right there paste that in and save awesome we’re going to preview on the front end and we lost hour what do we lose oh gosh we lost our divider that little divider right there has just gone away and why has that gone away because I think that is a class that is that’s a pseudo element on this class if I remember on top header underscore link mmm top header link what happened what happened that it would make that go away let’s investigate that is the a and it’s got a top header double underscore to link let now we’re going to have to go over to wp code box and investigate how this is applied in our global here’s the link so the top header link first of type gets a display none so all top header links get it okay this isn’t showing me anything display flex display none got it okay where is my let’s just do a search for um for before that’s a learn more service card before what’s it highlighting now okay an H accent before and then a border accent before how is that done my gosh I don’t even remember how this was done okay so top header link let’s check here pseudo before there it is okay we’re on we’re on to it layout and this this is why I say put everything said I didn’t put this in wp code box or I was like try to put all your customs the SS and wp code box because then you don’t have to go searching around for stuff thankfully I found it uh margin right and left a yeah so now I’m now I’m just really confused it’s got a before pseudo element on it is there anything else in the list no okay oh my gosh all right so what I’m going to do I don’t know what’s going on here I’m going to delete this before pseudo element and we’re going to go check out okay so that’s that so now I’m going to go do this the right way inside of wp code box so top header double underscore link top header we’ve already got something for it so top header underscore link display flex this goes away on that’s interesting okay so 479 in op it’s display flex with the before that’s probably what it’s doing right there the first of type before top header link first of type before that still should not change it okay so what we’re going to do is we’re going to inject here top header link display flex we’re going to do a before here okay I’m still on like a vacation brain a little bit I haven’t done any web work I’ve been doing a bunch of other stuff since I got back but not any development work okay so min with 479 in up we’re going to do a before with a content of that and then a display flex and then a height of 100% and then a width of one pixel and a color of white for right now and then it should be all we need yeah see if we can get okay uh no we have no pseudo element in there let’s do this top header link before content a that should show up no matter what that doesn’t even show up my gosh what is happening that is a top header link that is a top header link both of these should have a before pseudo element it’s this first of type I bet you it’s this causing the problem watch dude for real oh my gosh commented out Jesus all right let’s go to refresh there’s my a see it there’s my a it does not like the first of type it’s acting like both of them are the first that’s a really really odd issue my brain always confuses this guys it’s not it’s the first of the type of dumb element it’s not the first of the type of class okay so it doesn’t count the number of the items with the class it’s actually targeting the dumb element right so because this is a div and this is an a they both effectively are the first version of themselves right even though they share the same class in the dom tree they’re the first version of themselves this is this has been the problem the entire time and I’m just like being a moron about it right now um so what I need to do is uh we need to find a different way to um target this okay so I I’m actually going to make both of these an a so these are going to go this one right here and I’m going to label these so this is going to be address this is going to be phone so the address is going to link to an external URL that’s going to go to their uh and this is another thing we need to add probably okay so always sunny lorda it’s going to go here uh where do I know that’s not what I want I’m gonna have to go into maps okay let’s go to maps.google.com gosh I feel like my brain is like malfunctioning today always sunny okay share I want this link right here copy this link all right and then I’m going to go to metabox custom fields okay save changes yet okay no I don’t want to do that I want to save these changes and then I want to go to metabox I don’t want to go to custom fields thank you settings address email out of field just to text is fine and this is going to be uh google g we’ll just call this gmb profile link and we will oh yeah how do we want to do this okay this should be the full link I think that’s a work uh gmb profile link so we’re just going to hit update here and then go to global and gmb profile link save changes okay so it’s the full URL and then we want to we want to save this we want to refresh the builder and we want to inject that dynamically into here so the URL is dynamic data gmb profile link let’s play the game now gmb profile link let’s save refresh okay yep that does go to the right place now I can go back to code box I can get rid of the a so the content is going to be blank uh the display is going to be flex the width is going to be one pixel the height is going to be 100% the call the background color is going to be white save there you go so you can see it happening there at first of type before display none there we go all right so now the before needs a margin of top and bottom zero and then one M left and right now we have our space back and then our divider needs to be var uh let’s do base trans now what do we what do we want to do here uh base light trans 20 that’s too light 40 let’s get rid of that yeah that looks perfect okay all right so that is fixed wow uh let’s check this out on mobile now which I can’t really do here very well so we’re going to have to do it here well what’s going on what’s going on there oh it’s like snapping hold on I guess there isn’t a problem there it’s just yeah it was appearing as if there was a problem then it fixes itself okay I don’t think that’s an issue there because that address is quite long okay I’m thinking about a bunch of different things we’ll tackle that in a future episode but for now we at least have that back to where it was supposed to be this is all dynamically injected so and I’ll show you guys here um you know if I wanted if we want to change the phone number to 8067 right so we’re going to go to our global settings page this just kind of shows you the scalability of this so 8067 I’m going to save settings and then if I just go to the front end and view we have 8067 there I go to my contactless page this tab 8067 the link is the 8067 uh if I go to our about us page and I check that card down here 8067 the link is to 8067 so you see everything is dynamically injected everything is very manageable so I’m going to switch it back to 8066 and that’s going to be the end of this episode so obviously in a future episode we’re going to have to really tackle this header that’s going to be a challenge and then hopefully in the next episode we’re going to start doing some content injection and some customization of these frames or just the finishing up with the styling of these frames that I inserted but that is it for this episode had a bunch of brain parts there that was fun and we’ll be back very soon cheers