We are so excited to be handing off the content updates of your site to you and your team! Here are a few tutorials we've put together to help you along. You may also visit the blog to search for individual lessons and further documentation. In this overview, we will discuss terminology and give you a brief overview of adding or editing content to find the most important items on your site.
Your menu may be displayed on the front end of your site, but often changes in which pages are displayed are found on the backend. There are a few exceptions where your menu is created using a list widget, but for the most part, you edit your menus from the WordPress backend.
WordPress backend > Appearance > Menus
You can simply click the check box and click the “add to menu” button to add a new page to the menu. For more detailed instructions, please see this tutorial.
The user part of the WordPress backend allows you to add, edit or customize Users and their permissions on your website. We highly recommend limiting the number of admins on your site and never giving out your password. You can utilize a plugin if you have hired a third party that needs temporary admin access. But suppose you have a care plan with us. In that case, you must send us the person's info, what specifically they need access to, and what they are doing for you or your company so we can decide what level of access they will need and create a backup to prevent any malicious behavior or breaks to the code of the site and track their behaviors. Suppose you do not send us this information, or they are not approved, and you enter them in as an admin yourself. In that case, you will void the security policy on your site and be financially responsible for any security issues arising after giving them access.
Please delete anyone who is no longer a member of your team to prevent any further security issues.
Contains
You shouldn't need to utilize this one.
Contains
Contains
In the media section, you'll find the pre-establish resizing settings of your images. These are auto-created by WordPress.
This is how the link structure on your site works. This is usually set to “post name” for best SEO practices.
Select the page that contains your privacy policy here.
In this area, you can approve, spam or trash any comments on your site. Please notify us if you are getting a lot of spam suddenly, and we will add some stricter policies.
This is an Elementor feature. It keeps a copy of all contact form submissions on your site. This way, if there is ever an issue with deliverability, you have a record of anyone who has contacted you.
You will get a knowledge base if you have any custom features on your website! This contains any tutorials specific to your site. If you ever request a tutorial, we add a copy of it directly to your website, so it never gets lost and you can easily onboard new team members.
There are three ways you could have products listed on your site (and three places to look for them!).
Full E-Commerce > WooCommerce Products
Funnel Feature > Studio Cart > Products
Affiliate Shop/ External Integration with Existing Shop > Products
Your site may have custom features such as services, podcasts, class schedules, or whatever was agreed upon in your proposal. To add new content or edit existing content for these items, please visit the backend of your site and find the correlated WordPress menu heading. From there, you will simply add a post or find the post you would like to edit. These pages are created with an Elementor Template by default – meaning that the content you add dynamically populates the pre-designed template.
We utilize the Studio Cart plugin for normal funnel systems and WPFunnels for WooCommerce integrated systems. You can locate these in the WordPress Admin.
We often create non-eCommerce affiliate shops for our clients. These are similar to WooCommerce but without the bloat. A template is designed for the site's backend with the needed fields to dynamically populate the pre-designed template on the site's front end. Please fill in all fields to properly display the content for your affiliate products.
We utilize the Hello theme exclusively because it integrates seamlessly with Elementor. But if you have any custom features on your site, you may see one of our child themes. A child theme contains any custom code needed to customize your site and the Hello theme. You need the child and Hello theme installed to ensure your site performs as expected.
If you have a care plan with us, please give us the details of the plugin you would like to install (the features you are looking for, the license code or login credentials, and the zip file), so we can double-check that feature doesn't already exist on the site, it is the best plugin for that specific feature needed, and so we can install it on a development environment first. Hence, we verify it doesn't crash your site.
*If you are on the site network, please send us the plugin information and feature you are looking for so we can decide whether we need to add it to the network collective plugin repository. We do not guarantee that we will allow your plugin, but you can migrate your site away from the network at any point.
This creates custom fields to help you add the content needed to dynamically populate your templates. If you delete this, you will lose all content associated with these fields and break your templates.
If your site contains Advanced Custom Fields Pro, deleting it will cost you any backend site settings and repeater content (content within your posts where you can duplicate sections).
This helps create dynamic content, such as recommending other posts/products/services related to the current post being viewed.
This is your visual builder. Elementor is free, while Elementor Pro is the paid version. If you delete Elementor Pro, you will lose all of your templates (headers, footers, blog post templates, etc.)
Human Presence is our spam plugin. It prevents excess spam from plaguing your blog comments and form submissions.
This is your SEO plugin. It allows you to set all of your SEO specifications within each post and handles things like redirects.
Only needed for sites that use budget hosting, such as GreenGeeks, or are on the site network. If this is added to your site, you will need to integrate it with an email system, so you receive emails from your site such as “lost password” or “contact form submissions.”
Please follow the link above to set up this plugin correctly on your site.
Breeze or other plugins utilized by your host to keep your site optimized and fast.
This is our caching and optimization plugin. It keeps your site optimized and fast.
This is our security monitoring plugin. It notifies us of all activity on your site.
Depending on your needs, you may have additional plugins on your site. Here is a list of the ones we usually use.
This plugin allows for funnel sales page checkout and integrates with Paypal and Stripe.
This is your E-Commerce plugin plus any additional features you might need, such as payments, bulk purchasing, etc.
*To add these additional features, please contact us for pricing
Front end of site > Customizer
This is where you can change:
The Complete Guide to Elementor
Some of your pages, such as your homepage, about page, and contact page, are created using a custom Elementor page, versus pages like your single posts are made using an Elementor Template. So what's the difference?
The main difference is how you edit the physical content on the individual pages. A regular custom Elementor page is edited directly through the Elementor editor while creating a piece of content like a blog post or service is done through the WordPress Backend. That content dynamically populates the Elementor Template.
So can you edit the Elementor template directly? Yes! You can change the template's design by accessing it on the front end of the site or the back end. Still, please be aware that there are sections with specific settings linked to your particular pages (dynamic content), which, if deleted, will break the template for all your posts, services, etc.
Please see detailed tutorials on editing your content (text and images)
After editing your content, creating new pages, or making any changes, please double-check how it looks on all devices.
Your global settings allow the same colors, fonts, and styling to be used sitewide. This keeps your website fast and allows you to create new pages easily.
Forms and sign-ups are created within Elementor in the Forms Widget. If you need to add a form to a post on the WordPress backend simply create the form as a template within the Backend of WordPress in the Elementor Templates area and copy the shortcode into your post.
Sign up are also created within this widget, but the API integration must be set up on the site's backend first.
To find where to add your API details, go to the backend of WordPress > Elementor > Settings > Integrations.
Then simply add the info needed for whichever service you utilize.
Once this information has been added, you can select Elementor Form Widget > Actions After Submit > Choose your service provider from the list > Choose your Form/List/Tag.
Elementor has a native way of adding custom code to your website (instead of adding another plugin or trying to add it to your theme's files). Read this tutorial to add custom scripts such as Google Analytics, tracking, or Pixel.
WordPress BackEnd > Elementor > Custom Code
You are welcome to utilize your custom fonts on your website. You simply need to upload the Web Font File to the Custom Fonts area of the site.
WordPress BackEnd > Elementor > Custom Fonts
Elementor Pro comes with a free template library where you can utilize pre-designed templates on any of your site pages.
The front end of the site/Edit with Elementor on New Page > File Icon in Section > Find Template.
Elementor has a native popup builder. (Do not add another plugin for popups – this will cause conflicts with Elementor)
To add or edit a popup
WordPress Backend > Templates > Popups
Dynamic content helps populate templates or pull information from other parts of your site. I use it on the sites I build to populate templates like the posts template, create one place to edit dates on multiple pages for funnels, and create various ways of displaying your content loops.
Most resources are listed in the details tab, but here are a few quick overviews to help you get started.
Getting Started with Elementor
How to Use Elementor – Getting Started
00:01
Hi, in this tutorial, we're going to go over the basics of WordPress and Elementor. So to get us all started here, we will just log in. So to log in, you go to whatever your website addresses plus WP admin. That's going to open up the screen. It's going to redirect you. So as you know, the link kind of changes up here.
00:22
You're going to enter your username or email address plus the password that was given to you. If you haven't been given a password yet, feel free to do the lost. Password and set your password. Alright, let's log. Let's discuss the two different types of content here. So the first type. What you should know is we're going to be looking at the front end of the site versus the back end of the site.
00:47
So this is considered the front end of the site. It's anything visually the that the user may see whether they have to be signed in or not, but it's what they see you when you sign in. We'll get this extra WordPress toolbar at the top of the site's back end. We call this the WordPress back end as it has all the WordPress configurations. If you're not familiar with WordPress is just. An application, software, and infrastructure allow your site to be easily maintained and edited. There are many customizations and codes, and you can make it as fancy or as simple as you want to when it comes to WordPress.
01:28
So we're going to start with the WordPress back end, and then we'll move to the front end and start working through how to access things in Elementor. So let's look at the locations of things to get familiar. So first of all, I will refer to the WordPress back end when we're talking about different things. That's this area. And this over here is the WordPress menu. So if I say, hey, look for this on the WordPress menu, you'll go through, and you'll check through this list.
01:57
Now we have a couple of different aspects. Within here is that we have our posts. So those are your blog posts. If you're not familiar with that, you may have other things called custom posts, which are custom coded into your site, which could be class schedules, serviced, or an affiliate shop. There are a lot of different custom things that we build into sites, so you would then find them over here. They are still technically considered posts; they're just not blog posts. They're posts that have to do with every custom feature. Then we have the media, so that's your library of pictures and images.
02:36
Transcriptions and different things that you want to input in the media. Now, just for a side note, never import videos into your media since we're talking about media. When people come to your site, it will load very slowly. So please host your videos on something like YouTube or Vimeo. It's going to be better for the longevity of your site. All right. Next up is pages.
03:00
So pages are just regular pages on your site. So that would be like your homepage, or you're about a page or anything. Comments are all the comments that anyone has made on there, and we'll come back to them, but you can mark them as spam and approve them. There's a whole process that you go through there. Elementor, obviously, is our visual builder. This is how we build the design aspects of your site. Templates actually go along with elementor. It's the different templates that. The problem that we have used on your elementor site. Appearance is, so that's going to bring up your themes. It will also come to your menus, which is the first thing we'll go over.
03:40
Plugins add functionality to your website, so plugins. We will discuss this further later, but plugins give those added features. Users are when where you will input new users or adjust their settings and their privileges. You probably will never have to use tools, so we're not going through that. Settings you may want to get to know with, but we'll go through that a little bit more in-depth—Wp mail. You may or may not have this on your site. If you do, there is a lovely tutorial on setting it up if you're unfamiliar. Still, essentially it helps the deliverability of your WordPress emails, meaning that your WordPress site has to send emails it needs to notify you.
04:27
For various things like changing your password or saying there's a contact form submission, there are all these different aspects that you're what your website itself has to send these emails to ensure those deliver abilities. We install this plugin on some sites we don't have on our hosting, usually because we have that separate. The human presence is your spam. Ok, now that we've gone through the back end and general terms, we're going to go through the most essential parts, the things you'll be looking for first.
05:01
So number one thing that always trips people up is your menu. So your menu is part of your header. Usually, it's up here. So your menu right here, this is your menu. And this, as well as I believe this, sometimes is adjusted off the site, and you can get to it in a couple of different places. We'll go through how to get it on your back end. But not all menus that appear as menus on the front end of your site are actually in this area. They might be added as essentially a list widget within elementor itself, like these are right here.
05:41
Otherwise, we're going to go through how to change these items. Ok, so you have a couple of options. The first option is to grab it from the site's front end and then go to the sandbox. Well, this would actually say your site's name and then click menus there, but we're going to look at it from the back end, and so you want to go up appearance and then menus. And this is going to give you the menus for your site, and you might have multiple, so there'll be a drop-down up here.
06:11
So to add and take off pages is simple. So we can add the sample page, we click it, we add the menu, if we want to take the sample page off, we just remove it, and then we just remember to save. Very simple and easy to utilize. All right. Next up are your users. So users. Okay, so I always say this and make this very apparent. Do not give people admin privileges unless they all have to; never give them your password or admin privileges. Add a new user every single time.
06:49
And I have some other notes in the details below on different ways of dealing with people and admin privileges. There is just. There have been many instances where people have given out admin privileges on their site, and then the people they gave it to have installed plugins that broke their site and have added malicious code. Many things can go wrong when people are given admin privileges, so just be very wary of who you provide it to. And if you are hosting with us, we like to input it just to verify that we know who's on there.
07:24
We are familiar with the users, and we can track their behavior. All right, so add so I have this set on a multi-site. You would have to add new users here, and then you would just enter their information and send them on their way. Next up are your settings. So settings are down here, and there are many different things you can do here. We're going to go briefly through each of them. So general, this is the site title, which shows up here.
07:57
This is the tagline. Your site language, your time zone, how you want dates formatted on your site, and then what the week starts. This will show up in Google your admin email. If you're hosting with us, then it will be our email, or if you are self-hosting, this will be your email, which is often used for WordPress to communicate with you.
08:22
Writing never uses this. I don't even worry about it. Reading so your homepage can be set here. It can also be placed in the customized panel, which we will cover when we get to the front end of the site. So you can set your homepage here. You can set up a blog page as well. So if you set the blog page, though, and you have a custom blog page in a template, it will override that. So just be careful. We'll go back to select a blog post to show.
08:53
We always recommend 12 because it's divided by so many, so many things. So no matter what your grid looks like for your blog post, whether it's three cost four cross to cross, it's always divided by 12. And then, obviously, if your site is live, make sure this is unchecked. Always good to check that discussion, so discussion has to do with your comments and who's allowed to comment when you're notified and who's restricted from commenting, as you can get hit with a lot of spam here. Media is just setting the WordPress resizing, so WordPress automatically will resize anything you put into it into very into these three separate categories. Then you can select these categories within WordPress itself or your widgets.
09:45
But I always recommend it. Only ever inputting an image to the full size, the biggest it will ever be on your website because I've seen a lot of people who import directly off of maybe images that their brand photographers took, and they are giant. They would probably cover your TV, and so they lag your site. ******** so. Try and never bring a. Image that is bigger than your desktop screen. All right, moving on, permalinks, this is how you want your site structured with links. I always do post names because that's the most SEO friendly.
10:27
All right, Next up, do we have comments? Ok, comments, so all of your comments will be in here. You'll be able to be unapproved, reply quickly, put them in spam, trash them, or even edit, I guess, so that you can monitor them here. We do have a plugin that we install that tries to restrict spam as much as possible, so it doesn't clog up your comments. So just be aware that if you're suddenly getting a bunch of spam, you need to let us know, or you may need to have a more strict spam filter.
11:12
All right. And then we have form submissions. I do not have this thing, so if you would like form submissions on your elementor site, it is not selected. So farm submissions are essentially anytime someone contacts you for your contact form. Instead of only emailing, you can collect those form submissions on your site. I like to install it just as a second option in case of a deliverability issue, so I tend to turn it on for most people. So we're going to go down here, and these are elementor experiments, so we usually turn all of these off because it will give you the most stable website, but there are a few things that are safe to do.
12:01
Form submissions. Alright, so now we're going to go into elementor submissions, and that is where you'll see any submissions on your site that people have sent just in case there's deliverability. Double-check this to see if things are showing up here but not in your email. All right, Next up is the knowledge base. So the knowledge base is only on any sites that we have added customization to. So you may or may not have this.
12:41
The other things I want to discuss are. You won't have a knowledge base if it's simply a template installation. But if you have custom features like we've added an affiliate shop, we've added costs, schedules, freebies, like different aspects that were not in a basic build, you'll get a knowledge base, and in the knowledge base, we'll have any. Completely custom two tutorials that you have requested from us, and every time we email them, we will include them in your library so you can access them whenever you want, and they're never lost. All right.
13:24
Post-class schedules, freebies, all of that stuff. Ok, so these are considered. So we have posted, and then we have custom posts here. That means that we have custom coded these into the actual website itself, and that's how you're going to add new things like your blog posts, your services, if there's a services section, your class schedule, whatever we have over here, you will add these on the back end and not the front end as they will populate a template on the front end. And we'll go back through that later. All right, we'll use the posts as an easy one since we already have that template set up, so we have this test post.
14:06
You could also just add new. And we'll go new post. You're going to fill in whatever you want to text here. And this is done through Gutenberg, which is the WordPress editor. So you can add different squares and do other things on the back end. The more you can input on the back end and not use edit with elementor, the faster your site will be. So if you are creating posts should always be added here. If you put edit with elementor on a position which I usually actually disable, it will clog down your site a lot.
14:48
You want to use the templates as much as physically possible. Ok, so some things you should know here. So you may have some custom fields. Those would be listed below depending on the template that's used. Say you have services instead of your blog posts. You might have things like price and who's suitable for and different fields that are added in here to help. Create that template on the front end, and we'll show you what this looks like on the front end. All right, when you're entering a new piece of content, make sure that you are setting everything you need to. So you want to put the title you want to check out anything extra you have in here.
15:31
Sometimes there's SEO. There are different things that will show up. If you have rank math installed, you'll be able to click here and get to your rank math to set the SEO. You can set your permalink, so that's the web address. You can use whichever template, so usually, you just want to use the default template because that will populate whatever templates have been created on your site. Or, if you want to do something custom, you can switch to elementor, full width, or canvas if you'd like the header to disappear, set your featured image, or select any categories you need tags.
16:07
And then add an excerpt. And then check whichever features you would like here. And this is pretty much how they're all going to be set up. Obviously, some of them will have extra fields, but they populate a template. Since we didn't do this with an edit with elementor, we just did a regular. Then you can go here, and we can preview it. So this is what it took from there. So this template was already created. You notice it took the title. And then it actually enters the custom. Data is in here. So if you would have put a bunch of images, and this is an example, so obviously, we have stuff already inputted here, but it would enter in whatever you did on the back end, and it would show up in this section here.
16:57
And look, custom content is actually right there text here. It shows up here. This is used as an example so you can see what a single post template could look like, alright. We're going to run through some more foundational things about WordPress. So WordPress is based on themes, and it's based on plugins. So themes are the foundation of the site versus a plugin that adds features. So all of our sites are built with the Hello Elementor theme. This is the central theme or the parent theme that we utilize. We will if you have custom features, we add a child theme which essentially just takes this theme and then customizes it.
17:46
However, we need it to be customized, so if you deactivate the custom child theme. You will actually lose any of the custom post types we have here that don't. That doesn't come standard with WordPress. So that means we wouldn't have freebies, we wouldn't have a class schedule, and we wouldn't have a knowledge base. Anything that's totally custom will be removed. If you remove hello, our custom child theme won't work either, so it's essential to keep both of those. All right, let's look at the plugins. I have a list in the details of all the plugins we use, but let's just go through just the basics of what a plugin is and how that exactly works.
18:36
Ok, so on this site, we're going to actually go to the leading site to view this. Alright, oh, I can't actually consider this from here. Ok, so you'd usually have plugins, and I'm gonna actually, I'm gonna bring up a different site here we're going to go to. My site is so you can have a look at that. Ok, so when we go in here, you'll have plugins listed unless you're on the network which set sites on the network, and then you can go to install plugins there.
19:12
So here you'll have a list of all the plugins on your site, and each of them does different things. Now you can check the details list below to see what each of them does so that if you ever want to uninstall or switch a plugin, you know what they're doing on your site right now. So if you uninstall it, what will pray essentially, or what feature you'll be missing? Just an overview, human presence is spam, and pretty links are redirecting for affiliates.
19:40
Rank math is SEO. Or we use the word Francis, security. Breezes are cashing; you may have your own cashing; advanced custom fields give us some of that dynamic content, and etcetera, etcetera. It's all listed below. All right, back to our sandbox. Ok, so we're going to switch over to the front end of the site to kind of equate to get you acquainted with what that looks like. So we have the front end of the site. The front end of the site is made up of a few different things. We have the header, which essentially in this situation is this guy's header. We have the main content, and then we have a footer.
20:25
So we're going to start with the header because we're going to look at the templates. So a regular page will probably be created in elementor. So if you hover over edit with elementor, you should be able to click that. So let's click it, and it will open up the page editor. So this gives you access to just edit anything that's physically on the page. This doesn't include the header, as you can Click to edit it separately or from the front end, but you can edit all of this content.
20:55
Say you want this to say fantastic dog. Instead, you can edit there. Edit all of this here. It's universal. If you want to have a landing page instead of the main page, meaning the header and the footer get removed, you can switch the template itself. So you go to settings, and you can do page layout. You can change it to a canvas, which is the landing page layout without the header and without the footer. Now you're gonna go through the tutorials after this and really have a look at how to edit your content, but we're just going through what things are called and kind of get you a quick tip. So this over here is considered the elementor panel, so it gives you your site settings.
21:41
These are your page settings. We have our widgets which are dot things up here, and these are all the little things that make up your site. So you can pull them, drag and drop, everything's drag and drop. You can rearrange things; you can move them, you can do a lot of things. Anything visually that you can think of, there is a way to do, even if you may need an extra tutorial to figure it out. The other part of this is when you click here, you can go to site settings. These are all your global site settings.
22:11
So these are things that are universal across your entire site. So we put your brand colors in here so you can easily grab those. We put your global fonts. Your type of typography is usually the fonts and things associated with your blog posts and other templated content. Your button styling. And then the big one here is. You may or may not have custom CSS on your site, but if you need to access it, it's here. Just understand it is all custom coded from there, so if you delete something, there's no way to get it back.
22:51
Alright, the other important thing that you should know is. You can utilize these things down here. So we have the navigator. So for some reason, you can't seem to get to like a spot on here. Like sometimes they're hidden behind each other, and there are all these things you know in the navigator to get to each one individually. And even then, you can rearrange. So look, we just moved it. Next up is undo. We can go to the whole history and all of the revisions for the page as long as you haven't optimized your database. All right, responsive mode. This is super important. So if you make changes to the page at any point you want to check the responsiveness, so this is considered the desktop, then you can go, and you can look at the.
23:44
The tablet view, and then you can make specific changes for just the tablet view and then the mobile view. And those are pretty much the most important things that you will know about the editor arts. Let's go look at the different pieces of the pile. Ok, so when you go in here, you'll see anything that's located on this page. So we have to edit with Elementor to get the entire page. Element or header, as you notice here, it's denoted as header, and this is represented as footer. So those will open up those templates. So header, footer template, and you can just go header, and it will open up just that top.
24:27
From there, you can put you'll do the update, and you can actually do display. And you can tell us where you want that to be located. Most of the time, it's the entire site. Same thing with the footer, same thing with your blog posts. So your single blog post. This guy's done with a thing. So you can notice that if you hover over edit with elementor, you actually can't click this button. You have to click one of these. This is a single post. All right.
25:00
Next up, we have forms, so we're going to go to the contact page, and we're going to add or not. We have a form down here, so we're going to edit it with elementor, so it's just a regular page. And then we're going to go down to this form, and there are lots of things to do with this form, and I can end in the list below. You'll see lots of tutorials to get more information there.
25:24
Mostly it's just the form fields which are these guys. Your buttons are here after submitting what you want to do. So if you've added in say an integration, you might bring up convert kit, and then you'll be able to add convert kits by form but active campaign for instance. We'll show your list. It really depends. You can decide whether to collect the submissions or not. Right now, we have it selected; we can have it emailed. So whoever you want to receive the email, the subject, and then how you want it to reply, we usually set this to your email.
26:01
Feel otherwise? It gets kind of confusing, and that sets that all up. I always recommend, though, if you are doing a new form, always do a redirect, and everybody's websites always have some kind of thank you page. This site does not, as it's my sandbox, but you can go in and have that redirect, so you click the dynamic tags. And you go to internal Earl. It might say internal content as well. Content, and we'll say we want it to redirect to the about page. That means when someone fills out the form; they get redirected to a page, so they understand that the form is actually submitted. It's also easier to track things if we do that.
26:43
Ok, so that is the signup form. The Next up is we're going to duplicate this, and we're going to say it's just a signup form, and I don't have it. So we'd have your name and email, and it would probably be like a submission. And so people, you might have this for your freebie or whatnot, so instead of having an email. So we delete collect submissions, and we probably delete the email. We still want the redirect, and we still want to select whatever email system you're using.
27:24
You might want to create a custom. Thank you page for any signups that you would like to do. Also, you want to integrate it with your API. Ok, that's pretty much what you need to know from the front end. Let's go to the back end again and kind of go through the different things that you should know about elementor and where to find things. Ok, so elementor has a lot of stuff. So, first of all, if you're going to the back end, you want to be familiar with the settings going to have your integrations.
28:03
So your integrations are how you connect, say your MailChimp. Your active campaign, your convert kit, or whichever systems you actually use. You'll probably need to go find the tutorial for whatever email system you use to be able to see where the API key or the API Earl is. But this is where you input it on the actual website site. And then we have your custom fonts. You can add those; you just have to make sure that they are in a web format.
28:40
So something like TTF or open type or any of those things worked. It just can't be the Photoshop version of the file. Ok, custom icon, the same thing. Custom codes are a bit different. So you may want to put in, say, your Google Analytics. So you put in Google Analytics, you'd say you want it on the head. You'd copy and paste the code in here and then. You'd update it, and then you can look at the conditions. If it's a new one, it'll bring up a dialog box.
29:12
If where you want it located, you can also just edit it here; say you don't want it on a single page. Yeah, you don't want it to show up on your front page. There you go, and you can add that condition. These conditions are also valid for your popups. All right, Next up, we're going to go look at popups. So you will probably want to pop up at some point; I know there. A lot of people hate them, but.
29:42
It's good to have them. They're practical marketing tools, so you may just use one of the designs. So this right here is the elementor template library, and so you can access this on any element or page within the edit with elementor area, and you can just grab one of these. And put it in. If for some reason, this isn't showing like right now, we can connect. It just means that it didn't get connected correctly, so we will go into your site and fix that. Ok, so let's add in. So you would want to then obviously adjust this to your information. So after submission, we're going to send it to the active campaign. You're going to enter in your busy campaign stuff here, and then you're going to want to do publish, and it's going to bring up this stuff here.
30:35
So from there, you can set the conditions, the triggers, or advanced rule conditions where on the side it's located. Triggers are how it starts. So whether you're it's going to show up when people are scrolling, on the page load, on click, whatever you want it to be, advanced roles are that maybe you don't want them to see it all the time, so after they visited your site three times, they don't have to see it anymore. You can set those specifications here. Alrighty, let's go back. All right, the last one is our templates. So we're going to go to the kit library.
31:25
And your kit library is going to have all of the templates that you have on your website. So the main ones, I guess, we don't have any ferret favorites, so they'll all have different things, whether they show up in certain places, whether they don't. There are a lot of other things that will show up here. So you can search for free, you can search by extra. You can do this will actually install all of the kits onto your set, which is nice. All right. So let's go back. We want to go to theme builder. Theme builder is.
32:05
Where we're going to find all the templates on your site. So your header, your footer, your single post, your archive, your four oh four, the single page template, and any other archives. I think this is a search results archive, so those are the main templates on your site. You can go here, and you can check which ones are active through here; and these are the most important ones. The other place to grab your templates is simply going to save templates. Do all, and you'll see every single template that's ever been. Created on your site, and you can use the tabs to go through those.
32:42
That is pretty much it for the overview of WordPress and Elementor. I hope this tutorial was helpful, and I hope to talk to you soon.
This section will cover the basics of simply changing the text.
Visit https://-YOUR SITE-/wp-admin and log in using your credentials. If you have not set a password or do not know what it is, click the “Lost your password?” link below the WordPress login box.
Go to the website or front end of the site and find the page you would like to make edits to.
At the very top of your website’s page, you will see a toolbar option that says “edit with Elementor” – click this to edit the page with the Elementor or builder or select which template you would like to edit from the drop-down menu in that tab.
Header Template: The top area of your site where you will find your menu and logo
Footer Template: The bottom part of your site where things like your terms and conditions may be found.
Single Post Template: A template for your single blog posts (or other things like services) – be careful when editing this content as it will edit every post that utilizes that specific template. PLUS, it often contains dynamic content – for instance, it pulls the post title from the WordPress or backend of your site.
Hover over the text you want to edit and click the pencil blue pencil button that appears.
Either edit the text in-line on the actual page or edit the text area in the Elementor Panel on the right-hand side of the page.
Press the green “Update” button to save your work
This section will cover the basics of changing the styling of your text, such as text size, color, and decoration.
Click on the element you want to make style changes to so that it opens the Elementor Panel on the left side.
In the Elementor panel, click the “style” tab for the widget and edit the way the text looks.
Press the green “Update” button to save your work
Elementor | Introduction to the Editor
00:01
Hi, let's walk through how you edit your content on your website. We'll start with the text on your website so you'll visit any page. Where Elementor is installed, you'd know that Elementor was here because it would say edit with elementor. So to edit this actual page, you would do it just edit with elementor. If you wanted to say do the header or the footer, those would be header or footer depending on your theme and what your template files look like, and what they're called. All right, so let's start with just the basic page edit with elementor. It opens up the elementor panel.
00:42
From there, you'll get access to all of our widgets. Of course, you can edit your text, which is pretty simple. If you want to add new text, you just, you know, rewrite it. So click on the little edit button, go over here, and design. The signer. Amazing person. Ok, so we have edited that text. You can do the same on every spot here. Now, changing the styling on the text is going to be your preference, so you may like how it looks, and that's great.
01:18
You may want to do custom styling. Then if you're going to do custom styling, you go to the styling panel. So you click on this element. Once again, you go to the heading, you go to style, and then you can go to typography. So just for reference, right now, this is set to a global element, meaning that everything that is set to this, so this is H1, all shares the same thing so that we don't have to upload lots and lots of various versions of the text so if you want to do a custom though, you can just click the edit.
01:52
And then you can change the family, the font family, so then the size. Each of these has a different kind of style. So PX is like the classic height. E M tom is kind of related to the screen. And then REM Is actually best for accessibility, so I tend to switch that over to REM Whenever possible. You can do the weight of the text, so how bold it is from 100 to 900 to, wherever you want it to be. And then from there, you can make it upper place. Capitalize whatever you'd like. Styles are italic, oblique, or normal. And then we can do an underline and overline a line through or none.
02:40
You can also change the line height, so that's the space between the text. Or we can even make it wider. So the letter spacing gets more or even makes it less. You can change the word spacing. And then there are many other things you can do that are more stylists. And that can be text stroke, so this is the outline of the text. So if we go like this, and maybe we change this to blue, you see that the outline changes. There's also a text-shadow, which'll give a shadow to the text. And those are the most important things you can know you can do there. So if you want to go back to the global color, you can come in here, and you can pick from any of the choices here.
03:31
And those are just preset things that you can kind of play with. So we'll go back to each one, and then we're going to set these back to default by doing this little circle. And it gets set back to where it was really simple. You'll notice each of the different widgets. So these are all kinds of different styles of widgets. We'll have different areas to edit.
03:53
For instance, this is an icon list, so you click here and change the text. Ace, ace. And then, you can add a link. The same thing with these is just haters. Same thing here. This guy, however, is a button, so you can change the button text, you can add the link. You can do something inside the site if you just want to look up a quick page internal URL. And then content. And then, just that you wanted to go to your about page, you can bring it up that way.
04:35
And then now this link is going to go there. You can style your button here or in the global section. We're going to go through styling it within the page itself. So you click style, you can change the typography once again, you can do text styling, and you can change the color. Let's make this black. Ah, you can also do it manually. Let's make it red. You can change the hover color, which means it changes to black when you hover over this. There is a motion element, so when they hover, a ball happens, and you can switch that out.
05:08
You can use nothing, or you can use a pulse or whatever feels best for you. The border-radius is around the outside, so let's give the background color so you can see what that looks like. Let's make this black, so now the outside, so border-radius. Let's start with padding is the space between the outside edges and your text. So we can change that to 50 and then say you want more of a pill shape for your button. You can then change this to a radius and then adjust it even more so whatever size or shape you would like it to be. Art is the main way of dealing with your text.
05:56
Now each element will have something different, but mostly you just need to remember to push the edit and then change the text within the element and the styling tab there. All right, good luck.
I recommend using the Page Ruler Chrome Add-On on chrome to measure the image directly on your desktop screen.
Now you need to resize your image! You can do this via your native photo editor to use something like I Love Img. But my absolute favorite way is to create a Canva template with those dimensions and simply add the image directly to the template – bam – auto resize – plus, there's a compression option and you can switch it from a PNG to Jpeg easily.
I always recommend using a Jpeg if you can, but if you are forced to use a PNG due to needing a transparent background, then make sure you compress the PNG! I like to aim for a file size no larger than 150kb.
(Jpegs are smaller files than PNGs)
Finally, the image is ready to upload to your website!!! You did it! You just need to upload it and add the alt-text to the new image.
To comply with US Website Accessibility laws, you must describe the image within the alt text, so those who are visually impaired can understand the purpose of the image.
Other Ways to Speed Up Your Elementor Website
Page Ruler – Measure how big your photo should be
Lena 00:01
Hi, so we're going to go through how to optimize your images for your website. So I'm using Canva right now. This is probably the most versatile of the design tools. I tend to steer more towards Photoshop if I'm working on someone's website, but for quick social graphics posters, that kind of thing, Canva is excellent. It has these pre-done templates, so you can click and go through them. Anyways, back to compressing your images.
Lena 00:31
And we are resizing. So let's look at this for a second. So we're just going to download this, and it can put the quality here, which is the same as the compression level. You don't want to go below 60, but for today we'll just set it at 60. So you go, and you download. All right. We have our file, and I'm going to leave it down there, and we're going to come back to it because we want to resize it.
Lena 00:59
And there are lots of web-based tools, and some that I include here. I'm going to use my computer to resize it, but let's find a place where it should go. So I have. The actual page where you guys are seeing this, and we're just going to add a section below with an image. So this image is right here. This is where it would typically go. This is technically the size we need, so we're going to, and I use an extension called Page Ruler Redux.
Lena 01:35
It's pretty much my favorite thing in the entire world. So you outline it, and then it tells you those exact dimensions, so 5-5-2 by three seventy. So let's open up that guy. And we've got it over here, so it doesn't matter how long it is for this because it will just get longer. But we don't want it more comprehensive, so let's keep that first one, the 5-5-2, and we're going to do this via just your desktop computer.
Lena 02:06
And whoops. We are going to resize, so right-click resize. And this is 5-5-2 save, resize. So resized right, all right. Then we'll open up another tab which w l be the compressed JPEG. And now you can do compressed PNG, which you notice I go to a lot over here, but let's compress JPEG. So then we uploaded that file that we had resized. All right, well, we didn't lose a lot of the size, probably because we took it down to 60 % in Canva, and honestly, taking it down this much with words probably was too much, so you might have to play with that if there are words on there.
Lena 03:05
Or do it. PNG PNG by def,ault, are a lot bigger files. They're usually at least twice as big of a JPEG, so I try and avoid them as much as possible unless you have fantastic hosting, which of course, if you are on maintenance with me, you have great hosting. But either way, it's just good practice, and you should be in the habit of using Jpegs over PNGs when you can.
Lena 03:31
PNGs are great when you have words or need a transparent background. You have to do a PNG. So those are things like logos, posters, or any items that will be more apparent in a PNG. So you can do that. Just remember to compress it, so we're just going to download this. Resize OK; then we'll go over here, and let's click out of our resize. Click here. And I am running on local, so this will be a little slow. This is not running on my actual server; this is running directly off my computer, so it's just a little slower, and there you go.
Lena 04:12
And now it's perfectly sized for this space, so it doesn't have to do anything. Like your website doesn't have to resize or do any extra commands. Make that speed much slower, so that's how you resize it. The last thing I'm going to tell you. Let's go in here. So we have this pulled up, right? You, the title is less important. You don't have to put something there, but you should always put all text, and this is an excellent opportunity to plug your SEO keyword for your page.
Lena 04:49
So you want to describe the image, but you also so if we like a woman on the beach. You also want to plug your SEO keyword. The woman, let's say we are a Beach Hotel. Women on Pacific Beach. Maybe that's the beach where the hotel is, and then you want to any words that are in that, you're going to want to write them out so it's like happy birthday so that anybody with a visual impairment can still know what's on there.
Lena 05:24
Otherwise, they have no idea because it's written on a poster they can't read with their screen readers. So make sure you do that. It's illegal not to, so always do it, right? That is it. I hope this tutorial was. Easy and fun, and always send me questions if you have them.
Finding where the image is within a widget can sometimes be a little tricky. But the main places you will find it are in an image widget's content tab, the style tab for columns and sections, the main settings area for the full page, and/or the advanced tab under the background.
Always add alt-text to any image you upload to the WordPress Library to comply with US accessibility laws.
Image Widget – Content > image
Image Box Widget – Content > image
Basic Gallery – Content > image
Sections – advanced tab > background
Columns – advanced tab > background
Spacer Widget – advanced tab > background
Page Settings – gear icon
Background Site Settings – site settings > settings > backgrounds
Lena 00:00
Hey there, I'm going to walk you through how to change the images on your website. There are a couple of different places always to check if you're checking out your website and you can't quite figure out where that image is, so I'm going to go through those as well as some details on how to style them. All right, so let's have a little look. See here. So first, I want to go over the page settings. So if you click the toolbar that toggles down here, you will open up the page settings and then add from there.
Lena 00:30
The featured image. So let's say we want. I don't know that to be our featured image awesome. Make sure you're uploading a photo, so you add the alt text and explain why the idea is essential. So say we have a coaching website. Be like you could add something like a fantastic coach. Is looking for. Xyz service. Or a tremendous coach in a white jacket. But the most important thing is that you have something that at least describes the image that is for compliance issues. So in the US, there is an accessibility law that dictates what or how things can be displayed on your website.
Lena 01:23
So if you don't have the alt text, you're actually violating that law, and you can be sued over it—so fun. Okay, you are so moving on. So let's put this as the featured image. So let's stick this guy in there again, and this is now the background of the site. So that will come out when you share the page on your social media and all of that stuff. The next place we visit is the style, so you can change the background or add an image for the entire site set. Let's see what that looks like.
Lena 01:55
Now we can adjust the styling on this. We can make the image centered; we can cover it. Most of the time, we use cover, and then that will stretch over the entire website. As you can see, anything without white has that image. Also, you can change the colors. But you'll notice that different things have a white background, so it's not visible. So we can make all of the background black if we want to. So there are lots of different things you can do gradients.
Lena 02:31
Now, similar. There are similar settings for each widget, so we'll go through what those look like on each. So let's reset these so they're not so funky, right? So we're going to go through the basics, and I have a couple of images down here to run through. So this guy. This isn't just a regular image. It's whatever you want to do there. You'll notice when I clicked, it opened up. That's important because sometimes you don't want that to happen; sometimes you do, so it automatically sets it to open in the media file. So you want to say either none or maybe a custom URL if you would like to do that, and you can add in that customer's custom URL now.
Lena 03:13
If your site has a custom rule, try to use dynamic tags. Internal URL and then find your content so content and then find your page, so you want to connect it to your about page. And then that's all set. Then if you change the URL on that page at any point, it just auto updates the link because you've physically linked it with the page instead of just the URL and the web address.
Lena 03:40
A couple of other things are so easy we click here and switch it out. Remember to add your alt text. Let's connect out of that. And so we now have this girl here. Then we can style this in a couple of different ways. You can play with how wide it is. You can change the opacity, and you can change the hover effects. You can do a CSS where like it goes essentially black and white when you hover. You can do different transitions and hover animations. Extra animations as it does affect the speed of a site. I usually advise against adding.
Lena 04:21
Plus, it's not accessible for many people, so there's some Gray area as to whether it is complete the Accessibility Act. For other stuff, we can add a border. We can add a box shadow. See how it adds the shadow. And then we can change margins. So let's go in here and make it 50. And so it's half the size with that background. So that is image one. The next one we're going to go through is the spacer. So spacers, I tend to use spacers a lot on sites because you can easily make it taller or shorter depending on your content.
Lena 05:01
So it gives you a little more freedom there. But to change the image, if you come across this, you want to go to the edit once again and go to the advanced. And we'll go to the background now if there is any element or widget on the page. You can set a stage for any device, which can be in addition to anything already there. So all of them, if you go to advanced, will have a background section, so we switch it out.
Lena 05:29
Make sure to add all your text. Or maybe we do a gradient, whatever you want to do here for your background. And, of course, you can add your border so we can do the same thing as the kind we do in the image; it's just bound in a different place. Those are the main things you should know about there. Okay, we have lots of various other versions of image elements. So we have; let's do a quick search.
Lena 05:58
We have. We have the image box. It's pretty much the same process as the image widget. We dynamically have an image box, a Carousel, Basic Gallery, and featured images, so let's not worry about that. We have the media carousel. All of these are edited the same way as the image. So if you look in here, you'll click it open, and you'll click that image again, so all the styling can usually be found in the style tab except some of the backgrounds, which then go in here. I hope that is helpful and that you can find everything you need.
Pinpoint your brand vision with my style quiz. You’ll get a free downloadable brand board and even generate a homepage with your personal brand style!
