In this session we talk about how to create a responsive 2 column call to action box using the Carta Column System and the Agility Column System. The process to accomplish this involves creating a column wrapper and left and right columns where you add image links and add a class to style the column wrapper.
Member: My other question that I had hosted and started with is I’m running into this need to create a similar sort of I’ll use the word “box” and maybe it’s not a box, it’s probably a box. For what I had used on another site, the acualt.com site.
Rick: Right. You’re talking about the full width.
Member: Yeah and I used that box that was developed by ThesisLove I think it is which is just limited and I’ve got a need coming up where I need to have a similar look and I need to be able to incorporate putting my own custom image so there has to be a way I can do this without relying on that particular box which doesn’t serve the purpose.
Rick: Well and should it be laid out like this though?
Member: Well, yeah I’m thinking on the front page of the site they have something similar of this and then put the custom image that’s going to lead to their booking platform that’s a third party offsite booking platform that have the icon I want to use and several custom image and I’m going to be building this on Agility Nude so it would a similar look of this but I just need to be able to not have to rely on that box that had the limitations of the way he had it setup for that submit button and be able to put my own…
Rick: But I mean is it going to be like this with a little bit of text on the right and on the left?
Member: Yes, right. Text on the left and the image on the right, yes.
Rick: Alright. So probably the easiest way to do this is just to use a Carta column system where you…
Member: I’m going to do it in Agility.
Rick: Okay, an Agility column system.
Rick: Same thing they’re identical.
Member: Okay, an Agility column system.
Rick: So you create a column wrapper
Rick:: And then a left column and a right column and then put two boxes in, a text box in the left and a text box in the right and then you just put the HTML for each of those things in those boxes. Now, the HTML for this is just an image link, right?
Rick: It’s just… I mean like any other image link, these are image links, aren’t they?
Member: Those are just little graphics with links to another page.
Rick: Right, that’s an image link. Well, it’s essentially what you want to do here.
Member: Okay and by doing what…
Rick: Itzs a custom image
Rick: that links off to something.
Rick: That’s an image link.
Rick: So in this text box, you would put an image link just like you did here.
Member: Okay, and doing what you’ve just described would give me the ability to have the like the color box kind of look that I’m going for?
Rick: Well, sure because all you have to do is assign a background color to this wrapper.
Member: Okay, right, right of course. Okay, I’m going to experiment on that, that makes sense to me I appreciate that. I just couldn’t get my head around how I was going to accomplish that, this helps me.
Rick: And what I would do in this case, would be you know, Agility comes with a couple of sort of supplementary background styles right, style1 and style2.
Rick: You just use either one of those two things to define the styles for the colors here.
Member: Okay, okay.
Rick: And then all you have to do is you know, add the class style1 to your wrapper.
Rick: And then you’re good to go.
Member: Okay, I’m going to experiment with that. Thank you so much I appreciate it.
Rick: You’re welcome. Is that it?
Member: That’s it for right now. Thank you.
Rick: Okay, you betcha.
Member: Have a good day.
Rick: Have a good day. Bye.