Training

Hello, and welcome to your training video.

Um, so first thing that we’re gonna, we’re just gonna jump right into it.

The first thing that we’re gonna look at is this dashboard right here.

So whenever you open up and you sign, and you should see, uh, this page right here.

Okay?

So this is your dashboard, right?

And it’s gonna have a couple videos right here.

The first thing that you’re gonna see is, um, your WordPress overview and your Elementor overview.

Okay?

Um, and so this video that we’re watching right now is going to assume that you have already watched these two videos, okay?

So we’re not gonna go through the ins and out of Elementor, and we’re not gonna go through the ins and out of, uh, WordPress itself.

What we’re gonna do is we’re going to go through the very specifics of your website and the things that are going to play a massive role in your specific site.

Um, things that are not generalized, but are very specific to you.

So let’s kind of jump right into it.

Um, the first, uh, also the first thing, if you’ve ever looked at WordPress before you, you’ll notice that this, uh, over here on the side looks a lot cleaner.

Um, and that’s ’cause we cleaned this up for you.

We made it a lot better, um, such that, um, you’re not getting all these, um, uh, this is essentially the essentials.

Um, it’s everything that you are gonna see, everything that you’re gonna come in contact with, and, um, it is, uh, and, and so we, there’s a lot of times this area will get really cluttered with things that you’ll never even touch, ever.

Um, and if you clicked on it, you might not even understand what any of it is.

So, um, that’s all of the, uh, that’s all of the backend stuff, um, that gets a little complicated.

So we clean that up for you.

And this is what it looks like right here.

If there ever is any kind of, um, permissions issue, um, we don’t normally have this, but if there is any kind of permissions issue, um, just make sure you reach out to us.

And speaking of which, um, this little, this little buoy right here, um, this is your support request, um, area.

So you, uh, you don’t have to come here every time, but this is where you’ll get the information.

So, um, if you want to send us an email@supportatcuus.com, um, that will open up some a, a support request and we can help you with any of the issues that you, uh, any kinda issue that you need, um, help with.

So, um, again, if you need help, come right here and we’ll take care of you there.

Okay?

So, um, let’s kind of jump right into it.

The first thing that we’re gonna open up real quick is your pages.

All right?

So these are your pages.

Um, and these are all the pages that you have in, uh, Elementor and all of the pages on your website.

So, um, so I’m gonna go over to this.

Um, I’m gonna go over to the components page, okay?

And that’s right here.

We’re gonna open this up and I’m gonna show you some of the things that we created for you.

So throughout your website, um, it’s gonna be really easy to create new pages, and I’ll show you that in just a second.

But I wanted to show you this really quick.

And these are your components.

These are the things that you’re gonna be able to, um, just kind of drop into your website.

Um, and we’ve put some, uh, just kind of, uh, basic information there, whether it’s from your actual site or whether it is, um, or whether it’s, uh, things that we made that kind of matched your site, um, that kind of thing.

So, um, so yeah, I just wanted to kinda show you this, show you what, um, when I speak about components, this is what I’m talking about.

These are the things that you’re gonna be able to just drop into a page and build a page out of.

So let’s do that real quick.

Um, you’ve got all of these pages that we’ve already built out for you, but I’m going to, um, run a new page for you.

Okay?

So we’re gonna open up a new page just for, just for, um, the sake of, uh, being able to, um, show you how to do it.

So if you ever wanna make a new page, you can add a new page, you can say, you can title it, um, you know, test page or whatever you’d like to call it.

Um, publish it.

Okay?

So now this page is live well once it finishes, but, um, this is going to be a live page.

And, um, then the next thing that you’re going to do is you’re gonna click this button up here.

This is a really important button, and it is edit with Elementor.

Elementor is our platform that we use to create the website.

Um, uh, WordPress is, uh, just the website itself.

It is the backend, it is the dashboard.

Um, and you can make some stuff on, um, without Elementor.

But our entire site is based on this, um, low-code, no-code, um, platform called Elementor.

So when you click on it, you’ll see what it starts to look like.

It’ll make this little thing right here, and then you’ll start to see, um, as things come in, lemme show you what this looks like.

Okay?

So this is what it looks like, alright?

Get you a little navigator over here.

Um, and this is gonna, uh, show you where, um, this is where things are gonna show up.

As you add things in.

Um, this is your, the name of your page, and you can easily get rid of that by going down to this little settings coming over here and clicking hide title.

Okay?

Now, when you get rid of that, um, uh, uh, I say that, um, but all of that is in your, uh, all of that is in your training video, your element or training video that I referenced earlier.

So I’m gonna show you how to drop in some components.

This is how you’re gonna build out all of your pages.

Now, what you don’t wanna do is you don’t want to just start building things from these containers and start adding things in.

You don’t wanna do that.

Um, and the reason why, uh, and you certainly can for other things, but if you have the option, first thing that you’re going to do, um, we’ve, we’ve created containers already specified for mobile optimization, um, and things like that.

So what you wanna do is you come, wanna come down here, and again, you’re gonna click on this little folder, not the plus button, but the folder you are gonna go to my templates up here at the top, and then, Oh, there, they’re wolf.

It just took a second to load it, threw out, threw me off there.

Um, and then all of those components that we saw earlier, these ones, they’re all saved right here.

So you can see the CMP means that it’s a component.

So all of those are in there.

So let’s say that we wanted to start out with some basic text.

You would click insert right here, and you would click don’t apply.

Just never click apply there.

Um, and see, you can see all these kind of weird things going on here.

That is because we’ve already optimized this for mobile, um, and other things.

So this is why you wanna start there.

Now, let’s say you wanted to build your own thing.

You didn’t want one of these components that we had built earlier.

Well, you can start here, actually, let me show you real quick.

The, um, this right here, um, is where you’ll edit all your words.

You can edit anything over here, and obviously it’s gonna go in there.

You don’t necessarily want to edit it up here.

Some weird stuff can happen as you do that, um, uh, when you edit, you want to edit over here on the left side, okay?

And you’re gonna see, um, these, uh, these features up here.

You can, uh, bold it, italics, underline, all that kind of stuff.

You can do whatever you want to.

You can even make some of this like a link by clicking this and say www.in our pasting your link in there, google.com.

I’ll just say that.

And there you go.

Now you got a little link right there, and it’s already pre, um, the, the, uh, the code there for what a link should look like, has already been, um, has already been written.

So it’s gonna look consistent all the way across the site.

Okay?

So that’s, that’s your basic text.

But let’s say you just wanted to build something from scratch, you didn’t want any of ours.

What you’re gonna do is come to component blank.

Again, you’re not gonna just start building, you are gonna come over to Component Blank.

And once again, this has some, uh, stuff in there that is going to be, um, good.

And I’m gonna delete this basic text.

Um, you’re gonna have all this stuff in here, uh, that I was saying, it probably looks pretty funky, but it’s gonna keep things really nice and consistent for you.

And we have a heading in there just so that way something’s filling in there.

But let’s say you wanted to do, let’s say you wanted to make this a, a big header.

Let’s say that you wanted to Go and add a video, you could put that right there, And there’s your video, and you can come up here.

And again, all this is in the, um, Elementor training video.

You can put fif, oops, I exit a 1 54.

You can get a little 15 margin down there at the bottom, maybe, maybe like a 25 margin.

It’ll give it some space, right?

You can go into your video and you can, uh, add in your, your link right here.

Or you could, uh, self-host one, um, and, and upload a video like that.

Um, you can do it, you can do it however you want to, right?

But that’s, if you wanted to build something from scratch, let’s delete that.

The other thing that you can do, um, so let’s say, uh, there’s some other content right here.

Like for example, the two column content that’s right here, Right?

So now we’ve got two columns already built out for you and that kind of thing.

So this, this is how all of this is, um, is kind of set up with all of your components.

And you can go through each one of your components on this components page, and it’s gonna show you exactly how these things work.

Now, one in particular that I wanted to show you that we upgrade.

So I know this is a strict conversion, but we like to go above and beyond on these projects.

And, um, we wanted to give some value to your artworks page.

So the artworks page previously was split up into different pages by category.

Um, so when you, when you hovered over artworks, it would break out over here as three different categories, um, as three different pages.

So we, instead of doing that, um, we had your artworks page as normal, right?

So this is your artworks page and it’s got all of your artworks.

Um, but if we wanted to do, say, um, if you wanted to do abstract expressionism, rather than having to go and click on a whole new page, you would just simply click right here and it would filter out abstract expression.

Or let’s say you wanted to do vertical landscapes, same thing works on paper, same deal.

Okay?

So that was one where we wanted to just provide some extra value there, um, and no extra cost to you.

So, um, all of these other, uh, pages should look exactly the way that, um, exactly the way that, uh, they were before.

So I’m gonna x out of this page, we’re gonna leave, we’re not gonna save it, but I, I do need to go back and delete the page.

So I’ll show you how to do that since I need to do it one more, right?

I could have clicked it right there too, but, uh, where’s it at?

Test page right here.

We’re gonna click trash.

All right?

And that’s really the biggest thing.

Um, but there is one thing that I wanted to show you actually, um, before I, before I go into that, um, I wanted to just mention, so for example, let’s say the collection.

Um, so on the collection, there is a gallery right here.

And whenever you hover the, um, description display, so I’m gonna show you what that looks like, um, on the backend, and I want you to know about this because it’s different from, um, that special category that I showed you before that was a custom type.

Um, so this is, uh, In your gallery, so I’m just gonna show you see, there’s 20 images selected.

I’m gonna open it up, but I wanna show you what it looks like on the backend with your media.

So for example, if you click on this, the caption is right here within the media, okay?

So this is the thing that gets hovered whenever you hover over it, right?

So that’s what shows, okay?

I wanted to show you that.

The other way to get to it, not from, not from this end of things.

The other way to get to it from the back end is to go right here in media and it’s gonna have the same type of type of look and feel to it.

Um, and so all of your media items here, so like for example, if I clicked it, uh, well, that one doesn’t have a caption.

Um, yeah, here we go.

See, this one has a caption, and so that’s gonna show up if you hover over it.

Okay?

So, uh, you could edit it back here, you could edit it, um, when you’re editing an elementary, you could do it however you would like to.

Alright, now, so with this, um, we created this and it was very easy, but you had to give it a category, which means that you have to give it a custom post type.

So this is your special custom post type.

This is your artworks.

Okay?

So lemme show you what this looks like.

Essentially all you’re doing is you’re gonna put the image right here.

If you ever wanna add a p an artwork or you wanna edit an artwork, you’re gonna add the image right here.

You’re gonna put the title right here, which really doesn’t affect much that doesn’t show up anywhere, but it’s nice to have the title.

And then you’re gonna add the category.

This is what’s gonna separate it.

Then you’ll add a little excerpt over here on the side, and that’s what’s gonna show up whenever you hover over the image.

Okay?

So it’s as simple as that.

And I will show you how to add, how to do this.

So you’re gonna click right here, you’ll click add row, and that’s gonna add one.

Um, and I like to do quick edit that makes things a lot quicker.

And we’ll make this one a vertical landscape.

See these artwork categories right here?

We are going to, not that we’re gonna change this to published, and that makes it so that way you’re not working on a draft.

We’ll call this one the test image, and we’re gonna update that, okay?

Then we’re gonna go over to this artwork image right here, if it will, oh, if this, if it doesn’t, um, give you the option to edit right there, you just need to switch the toggle this in, light edit on.

So you’ll click this, Um, oh, I’m sorry, you need to go to media library, and we can just click any one of these.

Um, we’ll say a do this one, I’m gonna copy this caption here.

So we’ll put that one in there.

We’ll put this little excerpt right here.

And again, the category, um, abstract or what did we say?

So I already assigned it.

Normally it would show up there.

Um, I, so I got that all put in there.

You don’t have to click any save buttons or anything like that.

It saves as you do it.

So now we’re gonna go into the artworks, we’ll click on all, and we’ll just refresh it.

We’ll see what shows up.

It’ll probably come in right at the bottom.

There it is.

And it’s got a little excerpt in there.

If you click on it, it’s gonna show the full image.

All right?

And, uh, and it’s got that little hover on it, so it’s perfect.

Um, so that’s all the stuff that we inputted and it all came in perfectly.

So now I’m gonna trash that.

Alright?

And now finally, the final thing is I’m gonna show you your posts.

So if you look at your website, you have these right here, You have news and you have publication.

Okay?

So we wanted to, uh, go ahead and give these to you as, um, we wanted to make these as easy to create as possible.

So, um, back on the backend, we’re gonna look at this posts, okay?

All right.

And you can see all the little images that we have here.

So, um, there’s a lot of different ones, and you can see the categories right here.

So there were two under news, and then there were a few more under publications.

So what we’re gonna do here is I’ll show you how to do this.

Um, we’re gonna add our own and we’ll just, we’ll just work with this, okay?

So we’re gonna do quick edit.

Again, this, this kind of helps us, um, get some things done.

Now, if you keep it in uncategorized, it won’t show up anywhere.

We don’t have any places for just regular posts to go, but we’ll make this, uh, test, um, card, okay?

And we will make this a news and, um, make it not uncategorized.

Um, we’re gonna make this published.

I like to remove these things.

Um, we’ll click, click update.

Okay?

Um, so there are two images here, and lemme show you what they are.

So whenever you make a, um, see there’s, there’s this image right here, right?

You can see this.

And this is your little card image, alright?

But whenever you click on the post, there’s a featured image on every post, and it’s right here.

Okay?

So you’ve got your featured image, which is right here.

That’s the one that’s inside the post.

And again, you gotta click on inline editing.

So we will, um, we’ll do the same one, select that, and then you have to do a card image.

So this is the one that’s gonna go in the card, and we’ll do something drastically different.

So that way we, now we’ll do this pink one right here.

Yeah, no worries.

All right.

So there you go.

This one’s gonna go on the card, and this one’s going to go inside the content.

All right?

Now there’s this one right here, and this is mul multiple images.

And you can see that there’s only one here that has that.

This is the work in progress.

On the news side, I think it’s the news one, I think it’s the second one.

And, um, there was only one that had this, but if you need, and so if you ever need a gallery or a series of pictures, they are right over here and you can insert those, um, by just putting them right over here.

And it tells you right here, hold shift to select multiple.

So we’ll pull, we’ll, we’ll do that just for the fun of it.

Um, um, hold, I’m gonna hold click one and then hold shift and just click, you know, four.

So, and you can see they’re all checked up here at the top.

Um, we’ll do six.

Why not?

All right, so there’s six images and, um, for this image, uh, there’s probably an excerpt.

Yeah, here we go.

So I’m gonna take that excerpt, just ignore it around here, but I’m gonna put something in here, and I just grabbed that excerpt that was already in there.

I’m gonna put it right there.

So this is what’s gonna show up on this work page.

So if we go back, you’re now gonna see this test card, okay?

And it’s got this pink card right here for our card.

Uh, sorry, I clicked the wrong one.

Um, for our card right here, right?

It’s got our excerpt right here.

It’s got the date that we published it.

It’s got the title of it, it, when we click on it inside, it has the title, the date, the image, the featured image.

So that’s this one right here.

And then, oops, I keep clicking the wrong one, sorry.

And then that we put right there.

And then this down here is the gallery that we put right over here.

Okay?

So you might look at that and you might say, well, what about all this random space over here?

Okay?

So that’s actually what we call the post content.

And that content is going to be imported by you.

Just click on this, you click on your title, okay?

And in here is where you’re gonna import your content.

And again, you don’t want to edit with any of the, you don’t wanna edit with this editor right here.

You actually wanna click with edit with Elementor up here at the top.

Yes.

So while it’s loading, you can see, um, and I’m gonna just make this a little smaller so we can see it, right?

Here’s our navigator.

Now, this is an easy way, you could just click this, add new container.

You’re, you’re not gonna do the blank space.

The reason why is because these margins are not going all the way out to the edges of the page.

What they’re doing is they’re staying within this little square right here, okay?

So all you’re gonna do is just click this little plus, You are gonna click the down, and then you’ll just insert a text editor and you can just insert as much content as you’d like, And so there’s a bunch of content, right?

And if you’d like, you don’t have to just stick with a text editor.

You can say, you know what?

I think I would like to do also a big image right there.

And I would also like to do a button taking to a link.

And I would also like to do, um, you know, an, uh, um, you know, any of this stuff over here.

Um, Yeah, Uh, icon list.

There you go.

There’s some icons.

You know, you can put whatever you want in there.

So that’s what I’m saying.

So then whenever you update it, we will go back to the, the live website and refresh it and voila, there’s all the content, right?

So that’s all just gonna fill in that spot right there.

And so that’s as easy as that.

Um, you can do whatever you want with it.

Now these are gonna function the exact same way, but they’re gonna function, um, based off of whether or not you put it in the news or the publication category.

So they’re pretty much gonna do the exact same thing.

Um, but on your, uh, on this page, um, they are going to show up a little bit differently based off whether or not you’ve got news here or you’ve got publications.

So that’s put publications, and you’ll just see what I’m talking about.

I’m gonna change anything we thought I changed.

Oh, there we go.

All right, so then we can go to, um, publications here, and it should show up here on the second page.

And voila, There’s your card, there’s all the content, it’s all the same way.

It’s just all put on this side now.

And if you click on it now, you see there’s no, um, date here.

It’s because, um, the content comes over based off of, um, where you’re putting it.

So, um, this is all gonna function the same way, um, but it pulls different data based off of which, uh, uh, based off which, uh, category you put it in.

So, um, it’s perfect.

The other cool thing about it is, let’s say you’ve got something, um, some news that’s also a publication.

You can do both, and it’ll send them to both side, uh, to both sides.

Um, so, um, oops, I, I clicked to refresh rather than back.

So we can go to, uh, see this is publications and you can see it right here.

And if you go to news, it is also right there.

So there you go.

All right, so I’m going to trash this because we don’t want to keep it, obviously, I, But now you understand, you know, how to make your own post, um, you know, um, uh, how to make pages, you know, how to work through, um, your, uh, components.

Um, and uh, really there’s not much more to it than that.

Um, uh, as you click through your site, everything should be good.

There is actually one more thing that I wanted to um, point out to you, and that is this background.

So, um, you requested that we had a few in the background that were rotating a few images, um, and that’s great.

We haven’t got those at as of this moment.

We haven’t got those images from you guys yet.

So, um, I just put some stock images in there, but you can see what they’re doing.

They’re doing the Ken Burns and they’re, uh, and it’s, uh, rotating with some of the background, but I wanna show you how to change those images if you’d like.

So I just clicked edit with Elementor right here.

Um, it’s gonna be at the top of every page if you’re signed in, and you can just click that, that’ll edit the page that you’re doing.

Um, so the background, I, I mean under, uh, so I can show you what’s going on here.

I essentially made one big container and I did negative margins such that it went all the way up to the top of the page.

So that’s what, that’s the way it’s looking like this.

So you’re just gonna click this one big container right here, and I’m actually gonna rename this and say slides, edit slides.

He slides here and I’ll say, uh, in, in style.

So if you can’t read that, you can obviously just open this up a little, uh, open this up a little and, and, uh, you’ll be able to read it a little more.

Um, Uh, but anyway, you’ll click on that click style, and here I’ve got the background type as a slideshow.

And you can essentially just go in here and click on it and, um, just, uh, click add to gallery and you can, um, either insert some images here or just pick from the images or whatever you wanna do.

Okay?

So, uh, so that’s how you would do that.

Um, I’m definitely, well, actually, I didn’t change anything and I need to make that.

So we’ll update it and then, um, we’ll X outta that.

And that is essentially your website.

So, um, please once again, reach out to us if you have any questions.

If you have any support questions, then you wanna change anything or make anything, uh, make any big changes.

All you’re gonna do is you’re gonna go to this, uh, you’re going to um, send us an email and make sure and tag support@qris.com.

Um, if you do, that’s gonna make sure that it gets on our, essentially our to-do list, and we’re gonna get that done as quick as possible for you guys.

Thanks so much, you guys have a great day.

Bye-Bye.

Add a new, a new template, a new popup template and, and change your, you, you do use Elementor to build it out.

And you could use components or you could just use, you know, straight outta the box, right?

So here’s a little preview of our, of our popup.

And you know, I can come in here, I can change text.

You’ll notice this is just something I’ll mention occasionally.

You’ll see these little artifacts, but when you click on it, it does a weird layout thing.

Um, like you can see the space that’s added there.

It’s just an artifact of the way these front end builders work with the tiny MCE, um, wizzywig.

It’s, it’s true, it’s true for pretty much any tool like this.

Um, so you just have to get used to the fact that sometimes when you’re clicking on things, it temporarily does a weird glitch and when you click back it, it fixes it.

Um, but all, anything you put into this, uh, to this popup, you can use any of the tools here.

Um, or, you know, you could use some components, probably in this case you’re just gonna have a little bit of text a button, um, or in this case it’s a heading with a link.

Uh, pretty straightforward layout options here.

So you don’t need to really use components.

Um, but you can, you have everything in the platform available to build out these, uh, popups.

Uh, but in terms of controlling how and when they’re displayed, that’s where it gets a little more complicated.

There are two different places where you wanna look to control these things.

One is gonna be under your settings.

So this is where, like your overall location.

So you see how wide is this, um, does the height fit to the content or does it scroll?

Is it gonna be on the right, is it gonna be on the left?

Is it gonna be in the center?

Is whether we wanna show a close button, how we want it to animate in or out, and how long it takes.

So these are all, you know, your basic, how does the popup show up visually?

Uh, it’s under style.

It’s a little tricky to find it.

And so that’s one of those things that you just gotta get used to it.

It’s hidden here under this little gear in the lower left when you wanna deal with the overall display of the popup itself on the page.

But then you have to control when and where does this popup show up?

And that’s under you.

Don’t just click update, you click on the arrow and you’ll see, um, display conditions, triggers, and advanced rules.

Um, and if you just click one of them, it’ll, it’ll go from one to the others.

So, um, in this case, we have it set in to include on all singular event pages.

So if you open an event page anywhere, it’s gonna show this popup.

Um, and you can put any condition, entire site, uh, particular singular pages other than like make it up an actual page.

Um, we might want it to be on the beyond vis Gaia page for some reason, right?

We don’t.

But, uh, we could always set that as a condition.

So you can include or exclude.

So maybe you want it on the entire site except on certain pages or in a certain category, but accept certain pages.

It’s pretty flexible how you can set these display conditions and pretty easy to set.

So that’s where it’s gonna show up.

And then when is it gonna show up?

So you have different options on page load is gonna be your most common, but it could be scroll length.

So if you scroll halfway down a page, it would show up or scroll to a particular element or on a clicking a certain, um, um, element or after an, an active time or, um, exit page, which I hate that one.

So one of those deals where you try to leave and they pop it up saying, oh, you know, add something to your cart or whatever.

Um, your page load is gonna be your typical, and um, how quickly do you want it to be?

Instant, you want it to wait a couple seconds before it loads.

Um, so that’s where you do your trigger, where, where it’s gonna display.

And then under your advanced rules, you have, um, this is where you tell it like how often to show up.

So show up twice per month.

And once they’ve clicked on close a couple of times, then it’ll, it’ll, you know, count, it’ll tally.

So when they’ve clicked close twice in a month, it’s not gonna show up for another month.

Um, of course you could change this to days, weeks sessions, whatever.

You have a lot of options.

Um, and then you have all these other options show after a certain number of page views no matter what they are.

Or number of sessions from a user when arriving from a specific URL, this is great if you’re doing some marketing activity and you wanna do a call to action after they get there.

Um, hide for logged in users.

So you’re not annoying, you’re, you logged in users who are doing editing certain devices if you want it on just a tablet or just a mobile or just a desktop, certain browsers, lots of control here.

Um, and, uh, you can explore those options, but this is your default likely, um, change.

So save and close update.

And then this popup will display in those pages at those times, um, certain number of times, you know, in terms of the numbers clicked, popups have a lot of features to them.

These, this is the kind of thing where you may need a bit of help and we’re happy to, if you just reach out, we’ll help you, you, um, get your popups set up, um, and you can then just turn them off and turn ’em on again when you need them.

Uh, pretty easy to, to do.

So there’s your, your popups.

All right, so what we have left, oh, actually let’s look at your, um, let’s look at your template driven pages, which really, it’s pretty much your events.

Uh, let’s see here.

’cause most of your pages are component driven.

Uh, and so once you’re in the content, instead of them being template driven, they’re gonna be component driven.

But your, uh, events of course are gonna be template driven.

So when you go into the single details of an event, all of like this stuff here that you’re seeing on the right, your tickets, um, uh, let’s see, related events organizer add to Google, this is all a part of your template.

You don’t control it.

But anything in this, this is essentially your content area for this event.

All this here is in the content.

And in the content.

You can open up Elementor just like you can and use whatever you need out of Elementor for to create buttons or to create galleries or, uh, accordions and so forth.

And you can flesh out this content area of the page however you like, utilizing Elementor.

And then the rest of it is driven by the template.

So that can be a little bit confusing, uh, on certain pages like this where you, maybe you’re used to controlling the whole page using components, but you realize some pieces you’re not really touching and you can’t touch ’cause they’re a part of the page template.

It’s designed that way.

It’s to create consistency and, uh, dynamic, um, input of data for those elements that are driven by the content.

Um, and then giving you the flexibility to put in whatever you need to do in the content area using Elementor.

It’s pretty much the only template driven page of the site currently.

Um, so we don’t need to go into too much detail there.

So let’s look at your homepage.

cause this is the one custom layout.

In other words, if you wanna make edits to this page and you open it in Elementor, you’re not going to, um, be familiar with it based on the components which we’re gonna cover next.

And I’m gonna go over all the components and instead you would just have to kind of change things as you need them.

And uh, so you need to be a little bit more aware of what’s going on here.

cause this is just built out once, uh, that we did.

And you can make changes to it.

But the styling and the structures, uh, they’re more nuanced because it’s your homepage and it only happens once.

You will notice though that, uh, if you look at the navigator, it’s set up to be pretty helpful.

And this navigator is super helpful.

I almost always have the navigator on.

Um, if it were not on, if you didn’t have the navigator here, you would get to it right down here.

Uh, right here with this little icon.

Click on that.

There’s my navigator.

You can actually undo this navigator.

So if you need more, uh, horizontal room to work with, if you’re on a smaller monitor, you can just undo this and then move it around as needed.

Uh, it gives you a little bit more screen real estate this way.

Um, or you can just slide it over and dock it.

And now, uh, it just sits right there, which I personally find most handy.

And if I click on different parts, it’s gonna scroll down to the parts of the page, correspond with these containers, and you can open and close these containers.

This was all covered in the overview video.

You can do them all at once.

Get all of the containers open or all the containers closed.

Um, and you can move these around, which I’m not gonna do cause I don’t wanna mess up your homepage, but sometimes people, what if you’re dealing with pages like this and you’re not familiar and you, the kinds of mistakes you’re likely to make would be, um, you might take this and you could actually accidentally embed it inside another container, right?

Put it in between these and now it’s a big mess.

Like where, what’s going on?

Um, always remember you have your history.

So if I did make that change and it was messed up, let’s go ahead and do it.

Let’s pop this guy over here, let’s see where we can put him.

Well, it didn’t go in where I want.

Sometimes containers won’t let you put them into another container, which is quite handy, but I just moved it accidentally like, oh wait, that’s not supposed to be there.

Um, oh, here, I just did this.

Let me go back to where I started.

And as you’re working on a page, you’ll be able to, um, revert back to, um, your starting points anytime you need to.

So that’s a quick, easy way to fix something if you messed it up.

And then this revisions is a bigger history.

This is like from the beginning of the, when the page was even created.

And, uh, you can get back to different states.

So you have a lot of options here if, uh, you need to get back to a point where you might’ve messed something up.

But in terms of changing content, you know, these are all labeled and most of the stuff you probably are not gonna need to change very often.

And if you did and you weren’t comfortable, you can, you could just reach out, may open a quick support task and we can take care of these for you.

Um, so this is for the video background and uh, you’ll notice that for the, that for this container, this video, it actually lives under the style menu as a background video.

And here’s my YouTube link and then here’s my fallback image.

I’m not gonna go into too much, um, detail here other than to note that you’re gonna see this show up in some other components.

Um, you can always drop a video into a container or an image into a container.

But in a case like this, we want it in the background so that all the stuff that overlaps it is, is overlapping.

There’s no content in the actual container.

So whenever you’re doing a background graphic, and you’ll see this with your, uh, full with media parallax images, that the, that the source is actually under the style menu under background.

And that confuses people sometimes, but that’s why we do the training video.

Um, there’s a spacer in here.

You could ignore that.

It was just needed for this layout, updates to your memberships there.

Um, now you could always just come right over here and click on the text and you’ll see how by clicking on it, it actually goes over and finds the element right in the container.

You could see where it lives.

And then it brings up your editing screen right over here.

Or you could even literally just type right into this view right here.

If you needed to make some changes, oh, which we won’t.

Um, and I, if you watch the training video, you know, I say it all the time.

If you are changing this text and you had the source of your text in a Word doc or something, don’t copy straight from a formatted source into this visual wizzywig because you pull that formatting in behind the scenes and then that formatting is gonna stick.

There’s no way to override it.

If you’re gonna copy and paste either make sure you’re copying and paste it from an un formatted copy or paste it into this view and it’ll get rid of any formatting.

And then go back to this view.

If you need to add a link or bold or italic, you do that there.

Um, so the easiest way, now, if you wanted to completely change this container, you wanted three instead of two, or I don’t know, you, you were gonna really change the layout, honestly, it would be better to have us go in and make those layout changes to a custom layout page.

Um, but over time you may get more and more comfortable with this and be able to feel comfortable doing that.

But um, so I’m not gonna go into like how we actually laid out these containers.

I would just be way too tedious and you won’t really use it very much.

Um, but if you just need to change the text and update the dates here, whatever, just like click on it, go over here, change your dates, hit save, you’re done.

Um, same here.

Just go in here, click on it.

Uh, oh, actually, well, no, here’s a good case where that’s not quite the case.

So this area here is pulling in events, but it’s using a dynamic posts carousel.

So here you’re not actually changing the text, it’s this text lives in the event information, um, not on this page, it’s just displaying them here in the format of a carousel.

So what do you do to, um, change which things are showing up?

Well, that’s under the query.

Now this is hopping into the deep end here a bit.

I’m gonna cover this a bit more when we’re talking about components.

I will be covering query in a bit more detail in using some of the other components.

But since we’re here, I’ll just show you that.

Uh, you click on the query filter and um, it will tell you.

So it’s, you can see it’s pulling an events by date to descending and there’s a query filter here.

I don’t know if it’s picking a category.

I think it might just be showing the latest.

Yeah, this is a very simple query.

Just show me the latest events essentially.

But your queries can actually get more complex.

And so we’ll come back to this later.

So this is dynamic.

You don’t have to worry about updating it when you update an event, it’ll show up.

Um, here again, if you wanna change this text, if you wanted to change the link to the button for some reason, um, you could do that here.

But the actual content is pretty straightforward.

You literally just click it and, and change it out and hit update.

So, um, since we’re not covering the actual laying out of these objects, it’s pretty straightforward.

Um, here again is another case where we are pulling in, um, in this case a short code.

Now again, we’re gonna come back to modern events calendar, uh, but I’ll just make you aware of the way the architecture works on this tool.

Uh, you’ll create your events, but in any given place, you can create a short code for just the kind of display you want of certain events by category, by tag, by whatever, and change the view.

Now this does get a bit into the deep end, uh, and so what you’re seeing here is a short code builder that’s telling you what kind of stuff you want to show in this case and how to style it.

And honestly, this would be a case where if you have an instance where you wanna show some related events in a particular place and give it a unique look and style, I would recommend making this a ta a support task just because there’s so many options here, uh, and so many different views.

And each view has different styling options.

Um, if you need a different kind of view of your related events and you wanna put it somewhere special on the site, I’d say reach out to us.

We can talk about the use case and then we can, um, basically design out one of these short codes.

But if this existed, if you wanted to just, um, take this exact thing and put it somewhere else, then once the short code exists, it’s easy to deploy that elsewhere on the site.

Um, so that’s what’s happening here.

So again, you wouldn’t expect to click this and change this text.

You would go to the event itself, which we’ll do later, and you would change your, uh, text or your details.

And then this will, it’ll just show up dynamically here.

Um, then we have our CTAs.

So again, super simple.

Click on this, change what’s in bloom, change your text, change your button.

Um, here’s another case where if you wanna change the image, then uh, there’s no actual image in this container.

See, you can see it over here in the navigator.

There’s a heading a text editor and a button, but no image.

The image is the background image of the container.

And background images of containers are always found under style.

So that’s probably the most, um, hidden thing that is used commonly.

Like there’s a lot of hitting things, there’s a lot of settings here.

All sorts of things you’re gonna do that we’re not gonna cover because we’ve already preset all these styles.

So you don’t have to, that’s part of our approach to this, to give the flexibility.

It’s all there if you need it, but we’ve configured it already and you don’t have to worry about it.

But the one thing that’s very commonly wanted to change is the background images.

And you do need to know that it’s under this style menu under background.

And here, once you, you know, once you find it, click on it, it’s easy enough to upload a new image or go to your media library and change it.

So changing it’s easy, just finding where to change it can sometimes be confusing.

Um, and here we have our, uh, our tabs component.

Um, so here, if we wanna change the content, um, you’ll see that these tabs relate to these, um, items over here.

And when we click on it, you uh, can change the title.

And then, let’s see here, where’s our tabs?

Here we go.

So this, this tabs component is interesting and it’s very similar to the accordion component.

So I’ll be explaining, and this, you’ll see this in the component too.

So this is kind of a preview for the tab component, um, and the accordion component.

But when you create a new tab item, really you’re just creating a bucket and giving it a name.

The content lives under here.

So if I were to add a tab Right now, you’re gonna see it just automatically.

C can created this container over here called tab six and let’s actually get rid of it.

And tab six just went away.

So you’re creating this bucket, this container over here to actually change the content.

You go into the container and now you can do anything you like.

Um, so this is, uh, from the archives.

Let’s see, looks like I’m getting a little bit of a glitch, uh, where it’s not showing me the content I want.

See here.

Oh, there we go.

Um, so once I’m inside this bucket, this tab one which was created, now I have these containers.

There’s an image on the left, right?

There’s my heading on the right second heading and text and button.

But the nice thing about this is the, these containers can contain anything, anything that you can build an elementary, you can build inside a tab, anything you can build an elementary, you build inside an accordion.

Um, and in, and in this case you do have some, you know, more complex, uh, layouts and that’s why we have it set up that way.

Um, but again, just click on it.

If you need to change the text, just click it, it’s gonna pull it right up here, make your change, hit save.

So at the end of the day, the actual changing of content is quite simple.

Um, it’s just that the content is contained inside of these containers and structures, which the, the containers and structures and how they’re set up.

Like how did we lay this out in such a way that we have, um, two containers.

This one has two more containers and they are set to display in a row horizontal, um, orientation and the padding involved, like that stuff we’ve done for you, you don’t have to worry about it.

Uh, it does get kind of complicated.

Uh, if you did need to build out some special layout in a particular tab, uh, and you weren’t trying to do it again, that would be something you could reach out for.

But by and large these are gonna already be structured.

You just need to go in find your background image, right?

Oh, actually no, this one has an actual image in the container.

Um, so in this case you would just click it, it would open up the image, change your image out, uh, and then, you know, change out your text.

Uh, so it should be pretty easy to maintain that content.

If you wanted to get rid of one of these tabs, you could delete the, um, you go back up to the actual tabs themselves and you would delete them here or add them Here.

I will mention if, so if you didn’t wanna add a sixth and you needed a the same layout, if you create add tab, it’s gonna start with a blank empty container, which might be quite difficult for you to then figure out how to make look like one of these.

So you’re probably better off just copying this whole thing and then you can swap out the content cause it’ll have all the structures of the container already in place and you just have to change your text and image.

Uh, then we have a vis Gaia gallery component at the end here.

And again, this is super simple, click on it.

Um, if you need to edit, add to the gallery, now you’re back right into the normal WordPress interface where you can add um, or upload, um, to your gallery.

Uh, this is the the gallery tool though.

However, it does have a lot of options.

We’ve had it preset here.

And again, I’ll go into these when we get into components, but you can have a grid Mason read.

This is such a justified.

And then for each one of those, there’s different options and how many columns and how tall and all that sort of stuff.

But these are all preset.

Um, we don’t recommend that you mess around too, too much cause we haven’t set all the styles for every possible view of every possible type of gallery.

So, uh, be sparing in your use of changing any of those settings.

But, um, if we ever do need, need to, they are there.

Alright, I’m actually gonna close outta here without saving, just in case I messed something up and didn’t notice.

Alright, before we jump into components, which will be the last thing we cover, I do wanna, I think I said I’d do events last, but I’m actually gonna cover events now and do components last.

I think that’ll keep things a bit more organized.

So here are your events and uh, you can obviously add them.

And this is a new system called Modern Events Calendar as opposed to the, uh, events Calendar Pro, which you used previously.

They’re both great tools.

They both have pretty much the same features.

They just structure them a little bit differently.

So there’ll may be a little bit of a learning curve here for learning how to use modern events instead of events calendar.

Uh, but we, uh, we go with events calendar.

I mean we go with modern events because it’s far more friendly to Elementor when we go to build out those single template pages I showed you earlier, we have all sorts of tools that they provide to build those out.

Modern, uh, events.

Calendar Pro offers us little short codes and you can tweak the short codes.

Then you have to style everything with CSS.

Um, so it just makes, um, the flexibility of that tool less flexible, uh, than we get with, with, uh, modern events calendar.

Now there may be, so the, you know, the overlap of features is not 100%.

Uh, and the way they approach different features differs a little bit.

So this probably would take the most getting used to.

But let’s go ahead and go through the process of adding an event just so you can see how this works.

And it’s pretty straightforward.

Um, you just have to get used to it.

So let’s create a test event.

Um, so here it just title of the event and the description of the event.

And this is where I think I showed on the example.

You could fill it with accordions and images and buttons.

You just use edit, edit with L Mentor.

But if it’s a simple description, if you just wanna say this event is happening, here’s the info, you don’t need to open it with ment, just use this regular old wizzywig and go ahead and put in your content and uh, and, and you’re good to go.

So that’s for the, um, let’s see here.

I think I still have this open.

Yeah, so this whole area starting from here, and in this case it is using Elementor and it’s using a lot of stuff in Elementor, right?

This is all, um, where is it?

I got too many tabs open in there.

There we go.

All here.

Whereas the rest of the info you put in is gonna be automatically populated down here and um, end up here.

So how do we do that?

Obviously you gotta tell at what time.

So pretty straightforward.

Start date, end date, start time, end time.

It could be an all day event in which case doesn’t have a start and end time.

You just check that some advanced settings here.

If you wanna hide the event time, the end, um, or hide the event end times.

Maybe you wanna say it starts at six but you don’t really have an end time.

Just hide that.

Um, using this, um, you’re repeating obviously very important.

You can in repeat all sorts of ways, repeat deal daily, weekdays, weekends, certain days, weekly, monthly, yearly, custom days.

Um, and then you even have an advanced set first Wednesday of the month, third Friday of the month, whatever, um, repeating whether it repeats, never whether it repeats on and after and how many times whether it repeats.

But you only wanna show one occurrence of the event the most, the next up.

So you don’t have to have all of them or you wanna have all of ’em in there.

It’s up to you.

So you have your repeating settings, Um, event data.

This I don’t think is configured and doesn’t have a use case right now.

Um, but if you had special custom stuff you wanted to add to your events, we could always do that.

If you wanted to add just to display a specific schedule to a particular event, like a bunch of sub events that are going on, on that particular bigger event, you could add a schedule.

I don’t think we’ve implemented this.

So if you did use this, we might need to do some formatting.

Um, because I didn’t, don’t think we had a current use case and so we didn’t do any custom formatting for this.

But it’s there if you ever need it.

Um, if you want to include the location, you just pick it, otherwise it hides.

Um, and again, if you wanna add locations to the list that’s in the pull down, then you would just add them over here.

Same with organizer.

I skipped link, so I’m gonna come back to it.

And then if there’s a cost, uh, just put the number in and the cost will display.

Um, the only, uh, and then of course, let’s see, um, we still have header image override.

You have your featured image over here somewhere, Featured image right there, your categories and so forth.

So the only thing I didn’t cover here, which is a little tricky, is the links.

So when you click on, when you create a an event, you wanna give it, um, you can give it links, uh, and there’s a couple of options and I always get ’em mixed up in my head.

Um, Yeah, I think so this event link, if you use this one here, like you wanna send it to an Eventbrite login.

If you put the link right here, then when you click that event in the calendar from the calendar or any of the short codes, it’s gonna just go right to that page.

It’s not even gonna go to a details page, it’s gonna go straight to event prep.

Whereas if you put in a link here, it’s going to, um, show up on the event page as a link.

So when you click, uh, RSVP from the single button on the page, it’ll then take you to that event page.

Um, and then you tell it.

Do you want it to stay in the current window or open in a new window or a new tab?

What you want the event info to say RSVP, um, buy, buy tickets, whatever the taste may be.

But this is the one, this is probably the more typical use where you’ll go to.

This will go to the events, single page, detail page, and then it will show what you want it to say and where you want it to go.

And they click that.

Then they’ll hop to Eventbrite or where to buy a ticket or so forth.

So most of the time you’re probably gonna use the more info link, but if you use this, then it goes straight from calendar link to external website or whatever the, wherever you wanna point it to.

Um, there are a lot of add-ons to event, uh, to modern events calendar.

So if there’s something here, a feature function that doesn’t exist, you might need, they have plenty of add-ons.

Um, they have ticketing, they have, um, e-commerce add-ons.

So you can take it pretty far.

Uh, if you want to, um, explore any of those in the future.

So that’s your modern events calendar.

And let’s finish up.

Well finish up.

There’s still a lot to review, but let’s move on to the components and, uh, we’ll show you where or how to use this.

We’ve covered some certain aspects of these already.

Um, but here’s your full list, uh, of components.

You have your basic text, pretty straightforward, your starting point for most cases.

Um, and then in some cases we notice there’s places where you want text, but you have that shorter, narrower column to pace a little bit more with some of the other elements.

So you have that option, basic text, narrow.

We have a couple of, uh, gallery options.

One is this justified gallery, uh, with this view.

And then, um, we have gallery with header.

I thought that I, uh, moved those around.

Lemme see.

I might just not have refreshed this page.

Whoops.

Glitch.

Yeah, I did.

So gallery and then gallery with header.

And this view is more structured.

Whoops, sorry about that.

Um, it’s, it’s like the, it’s the, uh, square ups with the, with the narrower spaces between.

Now, you could always mix and match.

Like if you took this gallery element, you could drop it into this container and use the justified one here.

Or you could just, you put, pick this and delete this whole container so you don’t have the header.

Um, so you have basically two different gallery options.

But in most cases, when we saw this use, there wasn’t a header header.

And in this case, sometimes there was, and sometimes there wasn’t.

So we have these two options of galleries.

We have three collo, three column info box structure.

Oh, there’s supposed to be a background graphic there.

I’m not sure what happened there.

But imagine a background graphic, um, related stories.

Again, this is, uh, something you drop in.

And then you can use the query to tell you what posts you actually want to show in your related stories.

We’ll go over that, your featured CTA and we have a large CTA and a small CTA.

Um, I’m not sure where that nomenclature came from, but that’s how they’re labeled.

We have your pull quote, uh, item, a media component where the media is embedded in a box with some example, text your tabs component, which we already reviewed on the homepage a little bit.

Um, a quote without any background.

Your accordion component.

Um, these two parallax options.

So you can see, I don’t know if you can see in the video here, but you can see that the image is like scrolling in the box and you have a full width option.

And then we found, there’s instances where you wanna show, show a row of images, but you also have this on hover, uh, caption reveal.

So we have that option.

And then this happens occasionally.

It’s, um, I’m not even necessarily sure if this needs to exist as a component.

It’s more like, uh, we used it, uh, in a couple cases, but if you ever wanted to list out posts by a category, you could drop this in, change out which categories you want, and it’ll just pull those code posts in using this layout, um, on a, a particular page.

So, um, yeah, again, I’m not a hundred percent sure whether you’ll use that one, but it’s there if you ever need it.

Um, and then that is it.

This is just, uh, you’ve probably seen this there, but we’ve, because you have to connect your Instagram thing to your domain name, and we’re using a different domain name for development.

We’ll have to wire this back up when we launch.

All right, so those are your components.

Now let’s go through how to actually use them.

I’m gonna hop over here.

I’m gonna create a temporary page, oops, temp demo, and I’ll hit publish and click edit with Elementor.

And this will open up the, that user interface.

And again, once you do this, stick with Elementor.

You don’t wanna go back to WordPress.

All right.

So let’s just go through, uh, one at a time and pull the components in.

Let me close off some of these other pages behind the scenes.

So basic text, let’s add a basic text widget.

So the mechanics here are pretty straightforward.

Um, instead of going over here and saying, I want some text clicking on it and starting to edit your text, um, which is basically Elementor in the wild, which you want to avoid because it doesn’t have the styling we put in place, doesn’t have the structure that, um, is gonna behave well and mobile responsive.

It doesn’t have special classes we use to control things universally.

You just basically don’t want to be using elementary in the wild.

So instead of doing that, you click on your little folder, your template library, and this will bring up your different kinds of templates.

And the ones we’ve built are under my templates.

And you’ll notice the components all have a, a little coding, c, MP, colon, and then the name of the component.

So let’s start with basic text.

And you just click insert.

When you do, you always get this little, apply the settings of the container to, um, it doesn’t really matter.

I always click Don’t apply.

There.

There are some cases where you may or may not want to, but in the use of this as a component, just if you hit apply, honestly, it wouldn’t really matter.

Um, but, uh, just get used to saying, don’t apply, because if there’s ever a case where it is needed, you might not want to.

So just hit tone apply, and we’ve dropped it in there.

And so now you’re ready to just click on your text and go over here and start working on your text.

Again, don’t copy formatted stuff.

Copy it into here, or make sure it’s not formatted copy.

And then you can start doing what you need to do.

Make it bold, so forth, whatever.

Um, I will point out, and I think we talk about this in, in talk about this in the video, um, but sometimes you’ll notice that, uh, sorry, I can’t, can’t really make it do it when I want to.

But, um, you’ll notice that sometimes the, the breaks don’t stick and you have to come back over here and do it in this view.

And then it doesn’t show up over here.

But if I click it, it does.

Again, that’s just that screen glitch.

Um, and once you click it, it’s gonna, it’s gonna be display properly, and it’s just a front end glitch.

So it’s to be aware of that anytime you use this text editor all the time.

Um, and it just has that, has that annoying feature to it.

So that’s your basic text editor.

That’s simple enough.

Um, let’s drop in our narrow text.

One basic text narrow.

And I’ll show a couple of features of these components using, uh, the two that are here now.

One is mobile responsive settings.

Actually, while I’m at it, I’ll just point out in the training video covers this, except I think the color, the color palette was different when I made it.

Um, uh, in the training video, I say stay out of the theme parts.

Um, and in this case where you see the blue header or single page, you really don’t want to click these.

This brings you out of this page and into the header template.

Or same thing with the footer.

If you click this, you’re no longer on this page, now you’re in the footer template, and it’ll affect the entire footer throughout the entire site.

So that’s like the one thing as you’re working on these pages, just stay, if it’s blue, just don’t click it.

If you get confused, um, let’s actually do this.

I’m gonna, I am gonna click it.

I’m gonna click footer.

Oh, uh, let’s go ahead and save the changes.

But you can see like it’s, it’s wanting to go to a new page and it just did, it went to the footer.

So now I could be working on the footer.

Well, once it loads, okay, so now I’m here.

Now I’m, I’m no longer on the page I was just working on, right?

It still looks like it, right?

But really I’m in the footer, and if I make changes, I’m making changes to the footer everywhere, and I didn’t really want to go in there.

Uh, so what would I do in this case?

I wouldn’t touch it.

Um, I can just go back to edit page and then I’m leaving the footer springing me back to the page I was working on.

Um, there we go.

So be aware of that.

And then, um, this, this icon here, responsive mode.

This is gonna pull up an extra menu where you can see what this is gonna look like in different responsive settings.

So, for example, this basic text, one of the things that we did to make this work is when you’re in desktop view, it’s set to like 70% width or something like that.

But if I go to tablet view, it’s gonna be closer to 80% because we don’t want to give it as much indent when you’re in tablet.

And if it goes to mobile view, it’ll be a hundred percent.

cause obviously we don’t need to indent if we’re in mobile view.

Those are some of the things that we’re doing behind the scenes to make sure all your temp, all of your components work well in any mobile responsive setting.

There’s other things that we do, like set global classes and assign global styles of typography and color.

Um, but all to make sure that things are consistent and you don’t have to worry about those low level details.

Um, the other thing I wanna point out before we move on to the other components is you’ll notice that if I select these two components over here, they’re stacked right on top of each other, right?

No, no padding or margin in between these containers.

And that’s on purpose because we never quite know what the use case is for a component.

Whether like in, in this case, if I had a series, if I wanted like full width text and then short text followed by full width text, I wouldn’t want more space.

I want, would want it to flow like a normal paragraph spacing.

If we gave these containers built in margin, in a case like this where you didn’t want it, you’d have to undo that margin, which is kind of more tricky than just adding margin when you need it.

So you’ll notice all components, they just stack, but you’re gonna want to give them margin.

So let’s actually do the next one so you can see how that might work.

Gallery, let’s pull up the gallery.

Gallery insert.

Don’t apply.

All right, so here we have our gallery.

And now in this case we might say, you know, I, there’s not enough air, alright, between my gallery and my text, I want some space there.

So the way you have to do this and this, I, I mentioned there are just a couple of things where you need to know how to dig deeper into where things are found in Elementor.

Most of the things are set already.

You literally just change your text and your images, but changing margins on your containers, getting that patty, that’s probably the second.

So one is finding your background images underneath the style menu.

That’s one.

And the second is where to find your margin.

And it’s under advanced.

So I’m on my gallery container component, click on advanced, and here I have margin and padding.

Um, honestly, it doesn’t matter which of these you use in this case because we’re just putting padding between two containers.

So adding padding would essentially do the same thing as adding margin.

Generally speaking though, you really wanna be do it, you wanna be affecting the outside of the container, which is what margin does padding affects the inside of the container.

Again, it, it doesn’t really matter, but when I change margin first I unlink these values.

Okay?

So by default these are all linked.

So if I wanna give 60 pixels in between the text and my gallery, if I don’t unlink them and I click 60, it’s giving 60 pixels all around, which is not what you want, right?

So first step unlink the values and then say, I want 60 pixels above and I want 60 pixels below.

And you’re all set.

Now it’s nicely spaced and you can, you know, whatever you wanna do, whether you want 40 instead or you know, it just depends on the context and that’s why we leave it, uh, zero and allow you to, uh, make it whatever you want it to be.

So that’s something you will have to be aware of when you drop components.

You will need to light off frequently, go under advanced unlink the margin values and give it top and bottom margin as needed.

Let’s check out our next, oh, and then in terms of changing out our content, click on it.

We already saw you.

Just click this, you know, add to gallery, upload, find stuff from the media library, all straightforward.

Um, now I will go over some of the settings here, even though you probably shouldn’t change ’em too much, but you can change it to grid, which is what, um, the next gallery that we’re gonna see is actually set to.

And you have a more typical grid, but then you’ve gotta change, you know, how your column gaps and so forth to match.

Um, you have, uh, a masonry review, which depending on the content, sometimes masonry is a nice effect.

In this case, it doesn’t really look all that much different cause these are mostly the same, but they kind of compress by size.

Um, maybe if we change the number of columns, you’ll see that more.

Yeah, you can see how like this one fits in more.

They just sort of tuck up and in and create a more cohesive grid, um, carousel even.

But again, we haven’t done all the styling for these different views in every case.

In this case, it’s designed to be in, in, uh, justified mode.

And again, when it is, depending on your, um, row height, it will affect how much, um, how they all lay out.

So you can play around with that if you want it to.

These are all pretty much set you pro, leave it alone probably.

Um, they’re set so when you click, it opens up a light box, right?

Which is your default.

If you didn’t want that to happen, you can say none.

But that’s pretty much, these are pretty much universal settings.

Uh, you know, after worry about lights, light box, options, options, um, we have the spacing already set up and that’s consistent throughout, so you probably don’t wanna mess with that either.

Um, and what happens with the, with the thumbnail when you, uh, when you hover over it, in this case, pretty much nothing but you could do things like scale and it’ll do that, but we’ll leave it.

Nothing for the moment.

Um, you could explore some of these things, but honestly, you know, just, just, um, you know, be sparing in your explorations.

cause we don’t want to have lots and lots of different styles all over the site.

We wanna kind of keep things, um, consistent rather than, uh, getting all over the place.

Let’s take a look at the gallery with header option, gallery with header.

Uh, and here you’re gonna find that we have, um, a couple different containers.

So here’s the container that contains a couple more containers with headers and text.

And here’s the container that controls the gallery.

So if you wanted the ge the, the grid view, but not that header, just click on this top one, right?

Most click delete And now you just have the gallery without the header.

I’ll leave the header in for now.

Um, changing the text, obviously very straightforward, changing this text, very straightforward and changing the gallery, again, you click in here and now you are in WordPress finding or uploading your images to add, and they will format properly.

Now, here’s a case where you very well may want to adjust, um, the number of columns and, uh, based on how many you have.

So here’s 10, but what if you only had, um, eight?

You know, you might wanna change to a four column.

I would say you probably with this square up kind of layout three, it starts to not look very consistent with the rest of the site, but 3, 4, 5, maybe six you could get away with.

So between four, five, and six, you can alter based on the number of items in your gallery.

But, um, try not to change them, uh, too much I think.

And, um, yeah, again, all of these settings are preset, so you really wanna be sparing, messing with them in unique instances.

Kind of keep them the, keep them the same experience throughout the site.

Next we have our three info boxes, okay?

Um, and here’s where, well, I guess this is a good, a good use case.

So for whatever reason, the component, this lost track of its background image.

So here, um, you can see I’m looking for that background image, not there, right?

Where does it live?

It lives under style.

I think maybe this, this image probably got deleted.

I bet we did it, we did some media cleaning and it probably, probably just got, Uh, cleaned when it wasn’t supposed to.

I’ll just pick this image.

And now that image will show up in the background there in terms of the content, same as everything.

Click it, click it, change it.

Very straightforward, very easy.

Um, with buttons, you add your link.

So you click on your button and your, your button text is there.

Your button link is there just, and if you start typing in, like maybe this goes to the beyond Visia page, just start typing in beyond in this case.

And it will, uh, pull up pages and you can see whether it’s a, like this is an actual beyond SCA a post.

These are posts, these are pages.

Um, and this is probably this.

One of them is the old and one of them is the new.

Let’s see, that’s the old actually, and this, we’re not gonna do this, but I wouldn’t want that.

Um, I also, I’m in the habit of removing the H-T-T-P-S from these, um, Uh, in part because we’re often in development and we don’t wanna leave our development domain in place.

Uh, once it’s on the live site, it really doesn’t matter whether it contains the full URL or not, but that’s where you put your link.

One thing to keep in mind, if you did want to, if this link did go outside of the site, especially for buttons, event buttons where you have to RSVP or tickets where you have to jump over to Blackbaud.

Um, always helpful practice.

If you’re gonna take someone to another site, click on the settings, open it in a new window.

So if a link goes to another site, you know, click that.

It’s pretty much good practice.

Of course, in a case like this, we’d also want to go into advanced unlink our values, give ourselves some padding margin, rather get some space there.

Um, but that’s pretty straightforward.

Now you could, so let’s see here.

We have box one, box two, and box three.

Theoretically you could delete one and just have a two container box.

Um, not a hundred percent sure that’s an optimal layout for that situation, but, um, you could, you could always do that if you needed to.

Let’s check out another component related stories.

Okay, yeah, let’s do this.

’cause this is gonna be where we need to understand the query.

One of the more, uh, complicated aspects.

Let’s see, related stories.

All right, so here’s our related stories, um, the titles and so forth.

This is all straightforward.

You can, you give it this, uh, context, but when you click on the actual related stories, again, these are not, these stories are not in this content.

They are posts being pulled in via this dynamic posts, um, and then formatted according to how this component is being told to format it.

So the question is, how, how do you make this the organ and this the Southern Lady magazine and this other be light?

Well, you do that using query.

So you click on query, um, and in this case the default is show me my posts.

Um, and it doesn’t have to be posts.

It could be beyond vis Gaia posts or yours truly posts, or it could be pages, but in this case we’ll leave posts.

Uh, and then we want to tell it, um, which posts.

And that’s where we can, um, pick by terms and taxonomies.

We can, uh, say I want all posts that have the category.

Um, let’s see, what kind of categories do we have here?

Um, Let’s See, let’s see, design and nature of the environment.

And now it’ll pull in those, those categories.

So you have those options.

And this, so this is where you get probably deepest in the weeds, um, where we have queries and query filters.

Another option, so this is telling me to pull in posts.

Um, another way you might wanna do this is just picking your own.

Which one of these is it from specific posts?

Probably, you know, you have all these fancy options, but it’s probably this one from a post type and then from specific posts.

And here’s where you can mix and match, right?

So I can just hit, um, oh, let’s see.

I wanna confirm that this is the case.

Yeah, so you can see how I could even include a page within my set list, but pretty much any, any posts I want, I can add another one And just pick my particular stories that I wanna show here.

You get the idea.

So this icon lets you pick the specific posts you want to display.

This one does it by the post type.

Um, and then if you are using a post type like posts or beyond vaca or yours truly, then you could even go further and use the query, filter and pick by a certain term or author.

You can also set specific posts to not display, like maybe you want this, but not let there be light.

You could just exclude, let there be light.

Um, you get the idea.

It’s pretty robust.

And, um, we even have the ability if we needed to, like, let’s say there was some really complex query, uh, that was somehow really important.

You wanted to be able to pull, uh, we could write something and make it anything in the database to show up there, but your options are likely gonna be from post type, perhaps filtered by a, by a taxonomy term or picking them manually, whichever ones you wanna show.

So that’s, this is probably the most complicated thing, um, that you will need to know about in using this platform.

Um, everything else is, you know, there’s a lot of places and options and styles, uh, but this is the most probably technically complex thing you need to be aware of when you’re using related stories.

All right, related stories, CTAs, these are gonna be pretty quick.

Uh, they’re nothing terribly fancy, especially since we already know about background images.

Um, so we have CTA, which one do we wanna do first?

Featured C-T-A-C-T-A featured, Um, oh yeah, this is probably important to remember.

So in, in a few cases we have this fancy typography where we have, um, larger, smaller, and larger text inside of, uh, one headline area.

And so the only way to do that unfortunately, is to embed some CSS.

So, uh, when you open up this one, it has by default this class CT, a larger.

And so that’s what’s making the word featured bigger.

Uh, and so it, it comes with this already in place.

If you didn’t want it, you could just delete it and put in regular text and it’ll be all the same size.

Um, but you, you know, be aware that this is just a tiny bit of, uh, HTML there, adding the class to that word so that it gets bigger.

Um, that’s, there’s a few instances we have something like that.

I think other CTAs make certain parts smaller as opposed to certain words bigger.

But, um, it’ll be there if you need it, change it, swap out your word if you don’t need it, just delete the whole thing and put in just standard text.

Everything else here, very as you’d expect.

You got your buttons put in your link.

If they go as external, check that and click open a new window.

Um, same here.

And then for the background graphic, we now know we click on the container itself and you can see I can get to it here, or I can click on the gray container icon and I will find under style where to change out my, um, option actually, as I’m looking at this, lemme point out one other thing.

This is a low level thing, but it’s good to be aware of for, uh, keeping your site nice and fast and not, uh, burdened with too large images.

But when you pick an image, you also want to pick a resolution that matches your space.

That’s kind of big.

2 42 48 is quite big.

Um, this whole span I think is about a thousand pixels, maybe 1,050.

So probably this view here, 1536.

Um, as long as your res resolution is bigger than your container, you’re not gonna lose any detail.

Um, if you put more when you don’t need it, you’re just making people download larger images when they don’t really need to.

Um, or this large would work too, right there.

Large 1400, that’d probably be the best option for a full width image like this.

Um, so when you’re setting your background images, uh, make sure that you, you know, pick the most, the best corresponding size.

In this case, it would be large.

Um, let me open up this one too, just to sort of show you the same thing.

I, Oh, oh, actually, sorry, I can’t, this one here, right?

So, yeah, so here’s another one where I dropped that image in, right?

But I left it at full image resolution, which I shouldn’t have.

Um, I should pick something like, how big is this?

This is probably no more than 400 pixels, probably less.

So maybe this one or even medium large.

Medium large is a decent, like if you’ve got a container, um, that’s gonna be a better option than full because now I’m gonna download just one that’s I just 700 pixels wide and it’ll just help, um, things download faster.

So be aware of that.

It’ll be the same thing.

Um, let me, let me just quickly, uh, where’s the best place?

Let’s go up to, um, this media, this area here.

Let’s say we just dropped in an image and we will pick that one.

Um, same thing when you just drop an image in.

So whether it’s a background graphic under style or whether it’s an image itself.

Um, so let’s say for example, uh, that, uh, let me just quickly make this smaller just so for sake of example, let’s say this image was being displayed this size, right?

Well, 1400 pixels is way too big of an image in this container.

Uh, we want to come down to, um, either, you know, maybe, maybe this 300 by 300.

Oh, that one actually affects its orientation.

Um, yeah, let’s just try the 700.

So this is gonna be, it’s still kind of a bit big 700, but it’s much, much better than the full size.

So be aware of that.

This little image resolution.

This is something you could use to make your site speedier.

If you, whenever you upload an image, you remember to just pick, you know, the closest best, uh, size that’s bigger than its display, but not more than it needs to be.

So I just wanted to mention that.

Let’s delete that.

Um, let’s see.

I think I’m gonna skip the rest of these CTAs cause they’re exactly the same.

Um, you’ll find, again, here’s one where like we’re using that.

This is gonna probably have a smaller class that you would use.

Um, and the image here is also probably in the background of this spot here.

Same thing here.

Um, there’s some smaller text, right?

So this would have a class around it, which you could either use and replace the text or you can, Um, just replace it all together and keep it all the same size.

Let’s check out the pull quote though.

There’s some different, here it’s going on.

Pull quote.

Here we are.

All right, well, let’s, uh, let’s, since we’re in here, Let’s go ahead and, uh, I’m gonna give it some margin just so we have some, see what we’re working with here.

Okay, so pull quote, the actual quote itself is pretty straightforward, right?

Just change out your quote, change out your, uh, attribution.

Of course, the image, as we would expect is gonna be in the background.

So I’m clicking on the container icon there, clicking on style, and there we have it.

The thing I wanted to point out that’s different here.

Oh, and let’s, uh, let’s do our best practice.

Large is best for that.

We don’t need anything bigger than that on our image resolution.

Um, all these other settings you wanna leave, but notice this, the vertical scroll.

So we have a little parallax going on, right?

So you can see that when I scroll, you see the doors on the top, they’re, they’re getting closer and closer to the top of the image spot as they scroll.

That’s this vertical scroll.

And when I click it, um, you have some speed control, and if you make it really, really low, then you’re gonna see very little movement.

It still moves, but so slightly.

And if I turn it all the way up to 10, then you can see that it moves very, very quickly as you’re moving.

And it scrolls a lot.

So that’s, I think we had it set in the middle by default.

It’s probably a good speed for this.

Um, nice subtle little movement going on, but you can always control that here.

Vertical scroll.

Or if you wanna turn it off altogether, just click that little, um, undo refresh and it’ll stick.

It’ll, it won’t move at all.

Click it again and it’ll be back on.

So this is important to note, and this is gonna come up as well for your parallax image, um, component.

So let’s see.

Let’s go ahead and I think, oh, no, that’s not coming up quite yet.

Where are they?

Oh, they’re down here.

Okay, we’ll get to them.

Uh, let’s look at our media component.

All right, um, here we go.

As you expect text, and again, here you can see that class span, class CT, a larger small cap, whatever it’s doing this.

Um, and then, uh, dropping in your, your video.

So you click on your video and you can, um, embed either YouTube, vim, Vimeo, Dailymotion video press, or self-host it.

If you have your own video and you just wanna upload it, if you ever do that, keep in mind that you are, uh, bearing the cost of all of the bandwidth that’s used when people view it off of your server.

Usually YouTube or Vimeo is a better option.

Um, but just put in your URL there and, you know, there’s some extra tools here.

You can set a certain starter ends time if you want, whether you wanna auto play mute on by default, loop it whether to give the controls, um, or not show the controls.

There’s a lot of different options for, um, how the videos show up here.

Uh, but it’s pretty self-explanatory.

I don’t need to go into too much detail there.

Uh, we reviewed our tabs already.

Um, let’s, let’s see, I think we can skip this one.

It’s pretty much just text with special styling.

Um, so no, not nothing new.

If we review this component, um, let’s pop into the, so let’s pop into the accordion And you’ll see it’s gonna have the same architectural features as the tabs do.

So component accordion.

All right, uh, so we have this, we have a, a little title in here heading.

You don’t always give your accordions, um, a title, so you can just delete that if you don’t need it.

But the accordion itself lift over here and we have, um, one item.

And again, keep in mind we’ve pre-structured it.

So we have this title, this image, and this text, right?

If I just click add item, then we will see under here, under accordion we see item one, it created a new bucket, item two, which we can now start to, um, work with drag widgets in, put a component in whatever the case may be.

But it might be difficult to get this correct layout with your item amount of padding.

And so you, rather than creating a brand new bucket like this, you’re probably better off copying the current one and then going in and, you know, changing out your text.

Uh, and then you already have those containers set up down here.

There we are.

Got a lot going on on this page.

It’s just glitching a little bit.

Um, I will point out one thing.

So here’s sort of a, here’s a little layout trick, um, the way containers work.

So you could say, the way we structured this is we have a container inside the container are two more containers left and right, right?

Um, but the parent container of the two has this directions feature, right?

So what if you wanted to have alternating where this one has the image on the left, but the next one has the image on the right.

Well, you can actually do that pretty easily by going to this, you have to get the right container.

Um, and it can be tricky.

It can be tricky because this container overlaps the overall container, right?

So I gotta come here and click it.

So now I’m in this overarching container that contains the two inner containers, and if I just change this direction, it will change your orientation.

So I can just swap it like that.

And if I did this, it would stack it and then it would stack it in the opposite direction.

Um, probably, probably wouldn’t wanna do that, but, um, you very well may wanna just have an alternating layout.

And you just do that by clicking row reverse and it’ll swap the two columns in how they’re oriented.

So this is, this is kind of deep in the weeds on Elementor, or it’s not really just Elementor, it’s a, it’s the flex box model of CSS, which is used all over the place on the web.

Um, but this is the way Elementor implemented it so that you can, um, just change the flex direction of some co containers within containers.

Something to be aware of a trick you might wanna have up your sleeve in case you want to do something like that.

Um, it is a little tricky ’cause you have to make sure you’re doing it on the right container, the container that contains the two that you want to swap their orientation.

And then once you get into the content, obviously it’s just same old and you can add more.

Let’s say we needed a button in here, we can just drag our button over and, uh, you know, give it its link and so forth.

Um, so once you’re in these containers and you just need to, to work with them, um, that’s pretty simple.

You just drop any little, these basic elements in there as needed.

All right, we sort of already covered the parallax image and we have two options.

One that that’s, uh, not full with, and one that is, let’s go ahead and just drop, we’ll just drop the regular one in here.

Um, but there’s really nothing new from what we saw in the pull quote component.

Um, in fact, it’s a lot easier cause there’s nothing else going on in this other than the image in the background, right?

So we go here and, uh, vertical scroll.

I think with this one we turned it all the way up.

We figure if the whole point is to have a parallax image, we kind of wanna give it a maximum amount of scroll.

Um, so these are, these are typically turned up, but maybe you wanna turn ’em down and you can adjust that as well.

Um, this component is used in various places.

It was actually used quite a bit in the beyond sca or the yours truly.

Um, but I think I noticed it throughout the rest of the site occasionally as well.

So this image row where the caption reveals on hover, let’s drop that in there.

Image rows with caption, hover inserts.

Okay, so here we have, um, three containers, uh, inside one container, and inside these containers are images.

So that’s pretty straightforward.

Three containers with three images.

Um, and I’ll just point out, here’s a, here’s another potential little trick you might on have up your sleeve.

What if you wanted a fourth container, a fourth image in this row?

Well, you can hover over this image, right?

Most click and just hit duplicate, bam.

Now we have a fourth image and we can swap out the image and, and the caption.

So, uh, you can, I mean, I probably wouldn’t do more than four, I would think.

Uh, but, uh, you have, you have that option just by duplicating the whole container.

And now we’ve got four of ’em.

So in terms of how is this working, it’s all CSS.

So just click on the image, pick your image, Remember to get the right size, the best size, and then the caption is coming from here.

And it can be one of two things.

The attachment caption, well, it could be none, but then there’s really no point to using this component or a custom caption.

So the attachment caption is back here.

It’s actually a part of the media library’s, right?

Um, content.

You put it right in there when you upload, the image itself is attached to the image itself.

Um, and so that’s going to be, uh, what’s gonna show up there if you use attachment caption.

But if you want it to say something else, like maybe, I don’t know, maybe this was used in yours truly, and it needed a particular caption in that context, but here you’re picking the same image, but it’s a different context and you don’t wanna say the same thing.

Just give it a custom caption and put your, um, text in there and it will show, uh, that caption way too much there.

But you get the idea.

Um, so that’s your options for your, uh, your image row.

And again, this archive type, let’s, we’ll drop it in there.

I’ll just, for the sake of thoroughness, again, I’m not sure if really, um, We may have even added this one only because we needed to use it in a few different places when we were building out those special pages that aren’t typical, but we’ll put it here.

Anyway, so you click on this, this is again, the Dynamic Dynamic posts feature, which is what you is used for related posts.

Um, but it’s a different structure here.

And this case it’s grid with filters and it has, um, some special, uh, custom templates being used for its display.

So you wouldn’t wanna mess with any of those things, but if you wanted to use this, um, it’s, it’s using whatever a particular post types particular taxonomy or categories might be.

So if we go into the query, we’re gonna see it’s using, in this case, we have it set to beyond vis Gaia.

So it’s pulling in beyond vis Gaia posts.

And I don’t know if it’s, yeah, there’s no query filter, but the filters are already set up here.

They’re turned on here, and we’re telling it which themes to use the beyond themes, obviously in this case.

But if you, if this was just gonna be your blog posts, then you would want, you wouldn’t have, obviously these taxonomies, you’d have your blog taxonomies.

Um, again, I don’t know that you will use this, um, But in case it’s there, uh, more likely if you have a use case, it probably will need to be tweaked a little bit.

And so we might, you know, handle some of these picking of the various themes and queries, uh, for you.

So that’s pretty much.

Now the nice thing about this component structure is it’s very easy for us to add new components, uh, for you.

So what we recommend is, uh, again, not using, not using content in the wild, right?

So avoiding just creating your own containers and hopping over here and throwing in Google Maps and whatnot, right?

I mean, there’s nothing stopping you and there’s all sorts of stuff to play with, right?

That’s part of the flexibility, right?

Here’s a countdown clock, right?

All sorts of stuff you can play with.

Um, you know, be careful you don’t want this site to become a mess.

Flip boxes, you know, some things are a little more fitting than others, of course, but, um, one of the nice things about the platform is it does have so much flexibility.

There are so many options.

So what we recommend is, if you wanna play around, is you get more and more comfortable with the platform.

Um, and you want to play with different elements and um, you know, an image slider’s gonna come in handy or a logo carousel or a card slider, whatever, right?

You can go nuts.

Maybe you wanna put recipes, right?

Um, there’s all sorts of things you can play with go ahead and play.

But then like once you find something you’re like, you know what, I really do wanna use this.

This would, this is kind of fun.

Um, let’s start using this as part of some of our blog posts.

And, um, but before you just deploy it, uh, reach out to us, show us what you’re doing, show us how you have it.

We can take this container that you’re playing around with, we can do the things that need to be done.

Um, there’s an architecture to the structure of the containers we use so that mobile will responsive, um, flows well and the margins are maintained.

We can set mobile responsive settings so it all looks good in the different, um, mobile, tablet, uh, and desktop.

We can set the universal classes, which you don’t really know you need until you need them.

And if they’re not there, then you’re stuck because you don’t have a hook to go in and affect that component anywhere and everywhere in the site it may have been deployed.

There’s a lot of things that we do when we create a component, but it’s not that hard for us to do that.

So as you’re playing, you come up with a use case, you don’t have any of the current components doing what you want.

So you build your own, don’t just move on, reach out to us, say, Hey, I did this on this page.

Can you go in and backfill, make it a component.

We could even then add it to the component library so it’s here and you see it listed and you have it available to use elsewhere in the site.

It’s a much better practice and it helps to keep maximum flexibility and options, but also keeping everything, uh, in style and consistent throughout the site and the site, not, uh, becoming a mess.

So that’s our recommendation for how to extend this in ways that, um, aren’t currently in components, uh, but think keeping things all, uh, within the, the correct styling of the rest of the site.

So if you have any questions at all, please reach out.

We’re happy to help.

Um, we can go over any of these things or if you need to do more advanced kinds of things at times, we can either help out directly or just provide you with additional training.