Web Design Bootcamp 1: Build websites without coding | Brian White | Skillshare

Web Design Bootcamp 1: Build websites without coding

Brian White, UI Designer / Brand Designer

Web Design Bootcamp 1: Build websites without coding

Brian White, UI Designer / Brand Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
11 Lessons (1h 46m)
    • 1. 1 INTRODUCTION

      0:57
    • 2. 2 Sitemap

      14:58
    • 3. 3 Hello Theme 1

      4:29
    • 4. 5 Sections Columns 1

      23:15
    • 5. 4 Elementor Pro

      5:20
    • 6. 6 Colors & Styles

      0:03
    • 7. 7 Page Templates Header Footer

      17:10
    • 8. 8 Homepage speed mobile 404

      19:53
    • 9. 9 Blog Posts

      7:23
    • 10. 10 Sermons Podcasts

      5:21
    • 11. 11 Elementor showcase and end

      7:31
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

29

Students

--

Projects

About This Class

How to quickly make and maintain a WordPress site for your organization or church by using the Elementor system.

Give yourself an edge in the world of website design by learning to design and build websites with Elementor and Elementor Pro.  This workshop / class walks through most of the aspects of building a WordPress site with Elementor / Elementor Pro broken into bite size chunks.  From User Experience and Site Maps, to Design Systems and Templating, you'll quickly learn how to design and build a website at the same time.  Brian uses a real non-profit client for this workshop / class to show how to build a project from start to finish.  Learn how to make consistent spacing decisions, mobile friendly pages, and more. OH! Don't forget we are not using code the entire time!

I've broken the workshop into chunks to help with your progress through the class. Please reach out with questions and I'll do my best to answer them quickly.  You will need to have WordPress installed and fired up with Elementor and Elementor Pro plugins installed. You can do the class without Elementor Pro but it is recommended. 

This class dives into these breakout sessions:

1. Introduction to Elementor

2. Sitemap, structure, WordPress Configuration, and plugins.

3. Theme, child theme, security, and SEO.

4. Design Systems, global styling, page blocks, and design.

5. Sections, columns, widgets, and spacing.

6. Brand colors, and custom fonts.

7. Page templates, header and footer templates.

8. Homepage build at 1200x, mobile design, and 404 page.

9. Blog Posts and blog templating. 

10. Sermons / Podcasts, and plugins.

11. Elementor showcase and class project.

Additional topics covered throughout the videos:

  • Coming soon page
  • Hello / Hello Child Themes
  • Layout, Style, Advanced tabs
  • Mobile Responsive Design
  • Styles / Style Page
  • Facebook integration
  • Single Blog Page Template
  • Animation / Motion 
    and more. 

Meet Your Teacher

Teacher Profile Image

Brian White

UI Designer / Brand Designer

Teacher


Brian is the creative director of Brian White Design in Lawrence. He directs the studio’s strategic and creative growth while also serving as senior designer on many client projects. Enthralled by the color, layout, pattern and typography of branding, Brian loves to apply this outlook to clients and businesses. He brings an abundance of national branding industry and user-interface experience to the table and has developed a strong foundation in interactive brand strategy. Brian enjoys connecting and collaborating with outside agencies and design studios that share similar loves in brand and interactive design. Some of the companies Brian has worked with include: Motorola, PBS, Sprint, Dell, Capital One, Geico, Microsoft, Kansas University, Arizona State Univ... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. 1 INTRODUCTION: Hey everyone, my name is Brian Weiss, a UI and UX designer out of Lawrence, Kansas. I also do brand design and a lot of other things. This is quick to build, easy to update websites, how to quickly make and maintain a Wordpress site, reorganization or church by using the elementary system. It's not a movie needs to work with the missions organization that I've been working with since 2007 called ASO and redo their website for this workshop. So they would give it a new site out of it. And it would give me the examples, I mean, for you guys. So I'm going to have fly on the wall and be a little bit over my shoulder. I was trying to push my face facts much as I can. Enjoy the workshop and thanks again for being here. 2. 2 Sitemap: Alright, let's jump in. I want to take you through the website and show you some of the issues that are available right now. And the reason why I say this is that a lot of times when you're building a website, you're dealing with Oldstyle, especially with the church or a small business. It's been around for a little while that you're dealing with. Maybe a theme that's been customized by someone who went to school or took off and no one knows how to edit it or It's just super hard and clunky and no one wants to deal with it or add anything to the site, or there's just 20 plugins and half of them are out of date and security issues all over the place. So what we're gonna do is look at a site that's been around since 2008. It's had a few iterations and I did it. So anything that I say that it's bad about it, it's talking about what I did last pumping. So I thought it would be great. Missions group that I work with called possible, possible. And they are invariable accrues. And in Guatemala. And the main lady there we met when we were adopting our middle daughter in 2007. She's great and has poured her life into this. And they do food and educational support. So they do similar things like Compassionate International, it's just super personalized. So and then they also do food programs select for people who are super impoverished in that area. It's just super helpful for them. They do a little, little steps of Jesus, where it's a preschool, but obviously with COBIT right now, it's a little it's changed a little bit. And they do stove and fire safety as well. And as you can see, this, this homepage just keeps going and going. So what we wanna do is look in, as we're going through the site, see how we can simplify and make it easier for the user to get through. And then also we really want to work on support. What we'll do is look through the site really quick. So we've got our homepage, we've got get involved. We've got the standard ministries, educational support and basic pages in the site loads pretty quickly. But what we wanna do is make it really simplistic and clean out things that don't need to be in there, like water safety, water filtration, stoves. I heard that was like 1% of what they do. So we need to shift some thinking and we've got the updates, which is the blog. And this blog is pretty mundane and I did it. So what we wanna do is I bring in some featured images and look at some of the dynamic templates we can build with that standard con, contact. And then they have that link outside photos on Flickr. So what we'll try just keep that link because it's been around for a while. But I've redone the branding and some new. Just bringing templates and thinking about the fonts and the new, new fonts in a new color. So we'll, we'll look at implementing that as we go. So I know some of you are starting with a blank slate, which is great. And it'll be even easier for you to build your templates so you can still follow along. They'll work no problems. So what we're gonna do is log in really quick to the WordPress. And then they'll go to your dashboard. And you can see the pages right here. And there's 64 page and this just quite a few of them. And so what we'll do is we'll some of these pages and I won't take you through all that, don't worry. And then just think about how to make the site go faster, make the donations be easier to find and for all sorts of things. So what I wanna do next is take you through the sitemap. As I've shown you the site, I want to show you like a sketch, what I've done of how to make the user experience a little bit better through the sitemap. And this is a little bit nicer. Maybe then what you need. But I like to do is sketch out how the user experience will go and how it will flow through this site. And so high level, you know, the domain name is possible, possible missions.org. And so then this is the name that points to the web hosting files on the server. So whatever server you have, you'll have your WordPress Bill and all of your pages in here. And I'll show you how to do that. No problem. But wonder, walk you through the homepage and how people go throughout the site. And what I would like to do is originally I showed you the site, what it looks like right now and what was not working with it. And so this is just a quick explanation for your mind and for others to think about, Hey, what do we want to put a in front of other things and where do we want them to link? So the homepage right now is a little too long. So we're going to clean that up and have the call to actions for these ministries, these five main ones, the least used Ministries we might leave off right now or add them in later or put them under something else. But on the homepage we want an email sign-up that we have one here on the blog, on the sidebar. But we want like a pop-up on the homepage or a slide in so that people will be able to sign up if they don't go to the blog. The donations and support is super important for them. They need support. So if we can get that on the footer or on every page. So it's a global template, which I thinking is the footer. And we can do a custom menu at the top so that we just link to the footer. And it'll slide down if you want to support, and it will have it on every page. So on the homepage, we had mission and vision and about what we wanna do is move Matt altogether onto one page. And that will clean up the menu a little bit. Contacts stays the same, and then the blog. So this is just showing the templates that we'll use. So this is the, the blog feed page, that initial blog page, simple search page, usually don't get scared. It's really easy. It's just a basic page. But when you click on a blog item, it goes to the article single page. So these, these are all dynamics. So we'll make one dynamic template that will register for the blog posts. They also have this Flicker feed. For the sake of this class, I'm not gonna go into integrating and Flickr or Facebook feeds, but there are a little bit tricky sometimes because it changed. So, so we're just going to right now and just click out. Just have a simple link out. And that should clean up the site quite a bit and make it run a little bit faster. So let's dive in and go to Wordpress settings. So we're going to the missions I selected called Paso fossil mission subtler. We're going to WP dash admin. And that's where you get this log in screen. And after you've set up WordPress and we'll give you your credentials and you set it up and then this is where you go. So I'm going to log in and show you what this is. And you log in with your password. And once it logs in, you go to your dashboard. And remember I said, this is a pre-build site that we're editing. This is probably 90% of what will happen with you guys. So I thought that would be a better way. And then instead of hitting it just straight off with a blank side. We always want to look at updates. So this already has three updates. I think I updated about five minutes. It's the, it's the themes. So this is a good, good way to update it, but you can update the themes. I'm gonna get rid of the themes because I just don't like extra themes in there right now. And I'll show you later which themes we're going to going to use. So I'm going to click on these and delete them. So we don't have to keep updating. And you'll want to be careful I'm not delete the one juries. Alright. So now that we've worried, right now we're using a child theme for Debian and the base divvy. The reason why we use child themes is if you write any specific code or you have someone who knows how to write specific code, then they added to the child. And it's receiving this theme. And so we're going to have two things will have a child theme, and then we're going to use Hello. And it's a, it's a very basic theme, very clean, and the child theme has some functions. And I'll give that to you guys that one of my developers made for us. So let's jump over to. Plugins right here. I'm kind of in the way. So we're going to add element, or I've done that because one, the beta I'm showing you the newest version 3 that hasn't come out yet. You usually wouldn't build this live, but I'm doing it for this video. So what we would do is go to plug-ins and it looks like there's an update. I'll do that in a little bit. But you say Add New. And then you look up in the search plugins for elemental, and it will pop up. And this is the one element or page builder. And you click Install and then activate, and then you'll see it. It will look like this one right here. The difference between element or an element or pro is, pro is about a $110 a year is totally worth that. There's amazing things that you can get. There's even some good site templates that you can use with. So definitely something to look at will look at that in a minute. But once you get elemental loaded, then you can go back pages and you go to your pages and you'll see just, there's just tons of pages right now. But what we're going to do is just make a new page and show you basically how to start setting up element or settings for styles and for sitewide styles. So that you're not working on a live site. That's not possible. Sometimes, sometimes the server isn't available to stage aside and it's basically taking the site and duplicating it in exact form. You work on it, see how it works. Then once it's good, you publish it live. Right now. That's not available on this one on one host. I've got a better host for you and I'll send that link your way. But this, this side cannot be staged. And so to expedite it quickly, we want to edit the site without people coming to it. So what I'm gonna do is use a coming soon plug-in. And basically you look up, let's see, they say add a new plugin and then coming soon. And I think it's called a seed prod. Yeah. And so this one's already acted, but it's coming soon page under construction by c c prod. You activate it. And what happens is it will, it will say you go to your install plugins right here. And right here, you click on settings. And basically you can say, hey, are cited as being updated. If you need to get a hold of us, here's your contact information. Bravo Bach. And I'll put a donation. Thinks that this is still in my cashed yet. So like I've put this form, I have a form that an owl. So like if people want to donate which they need money right now. So so then what you do is you say, you can promote them if you want. It's not that bad. But basically under status you say enable coming soon mode. And when you save changes, basically what people will see is so possible site is getting an update. And what you see is the backend WordPress stuff. So I'm going to enable, see if the server is having troubles. So this is a good guinea pig for everyone. Yeah, five oh, three air. So the server's just junk. So we'll have to update some things and stuff and get that going basically, before you start messing with things, you want to have coming soon. But the next step I'll do is just show you and build a page and then start to show how elemental works on a page. 3. 3 Hello Theme 1: Go ahead and add our theme, which is hello, child is a child and then hello is the theme that it's using so that we can update Hello all the time and won't hurt the site at all or overwrite anything that we've done that's customized. So you go to Appearance Themes. And right now, the site is using an old Devi site and a customized the child theme. So we want to add a new theme. And you can find hello for free in any of these and asteroids and another one that's really good. It works really well with element or, and there's a lot of other ones too. But, and I'll go over that in a little bit too. But, so here's hello element or, and you can install this. And I'll provide the files for the child theme if you'd like that. So now you can go back to themes and you can see you have hell element torr. And we want to add a new one still. And we're going to upload the theme. And we're going to choose a file. So now we have hello element or child.type zip, and you just install it. And it will pop up. And you can go ahead and say live, preview or actively. It's gonna look a little weird depending on if this is a fresh install or not. So when we activate this, it will, it will use this and these two can be deleted. I would keep these just in case as we're building site. If something goes really wrong, key Indonesia, activate it, check out if this is working or not. I just keep these until with with the site. So I'm going to activate the hello child theme in just a minute, but I'm going to go ahead and jump over and start to build a page for you so that you can get a sense. So you would click activate here. And I have to be a little bit more careful because it's it is a line of sight, so I'm testing Some stuff to say. All right, before we build the page that we do need to plugins and it would be helpful. And we're building pages. One is for protection. So this is the security is looking at the word offense. This site currently uses WP security, and that one's a good one as well. But I just wanted to show you were pens. They have what actually we say add a new plugin since if we don't have it. And then you look upward fence and it will come out. There's an over 3.5 million. So you can install this. It works really well. There's actually a two-factor authorization now where you have an app on your phone that changes and each time you log in. So for churches especially that might get hacked, I think that would be great. So the next one to look up is called Yost. Some of these are interesting names, but this is a free plugin called Yost SEO and fall on solace so you can see what it looks like. But basically it puts it at the bottom of each of the WordPress pages. And there is a way to do meta data and keywords and some of the more specifics for SEO, it's not super complicated and there's actually a walk-through analysis so you can click and walk through how to set it up though we'll ask you what type of site you are and all sorts of stuff. So it's down below me, right here, IOS FC0. And so once you click on that, it will walk you through the settings. And as you building the site, I'll show you an ol tag, which is really nice for grabbing search engines for specific, specific focus words that you want people to be searching for. And they'll come to your site. 4. 5 Sections Columns 1: And the intersections and columns. So you can see when you click on the page that there is a blue outline around an a section and the blue is a section. So that's where this call. And to add a new section, you can hit the Plus or a deleted with x. Pretty standard wysiwyg information. What you see is what you get. When you click on it, you can actually right click to. So if you click on this menu, basically it'll bring up this section right here and you can edit it and do all sorts of stuff with it. You can right-click and edit it and then, or duplicated reset style save as a template, all sorts of stuff. So don't forget, you can right-click on almost anything. I'm trying to not inundate yeah, make it it's just super easy once you get the hang of it. So say for instance, you've got this loaded and you want a different background image. So you would click on a section and you go into style. And you can see this image right here. And we're going to add this background and bone. It's already added. You can do all sorts of positioning like center, center, so it shifts it up. This is element a widget for video, and this is an intersection. So what we're gonna do is look at the next one, which is a little bit easier to view because it's little bit wide and you can see what's going on. So in this section, you can see with your navigator that I need to open this up. You have two columns. And what's great about columns as they're movable. So to add a column, you can right-click on it and say Duplicate. And then you're like, I want this picture to be over there. You click and hold and move it over. So there's just a lot of things you can do really quickly to edit, edit content, edit photos. So when you mouse over these sections, you'll get this black box. And it's part of the layout. And you can add columns or delete them, even by just right-clicking and delete. So with the photos, you can click on the edit and choose your image or change the size, even auto sizes, all sorts of stuff. And then going into texts, you'll love this, you can swipe this n-type. It's, it's amazing just how quickly you can do all sorts of stuff. And for people to edit really quickly on the fly, and that's about it. So you can select these, Delete. And then if something messes up or there's some styling, you can always come in here. If you're, especially for, if you're pasting from Word. You get some kind of weird text issues and, and inline styling so you can change the icons. There's, there's prebuilt icons that you can put in with Font Awesome, that are just amazing. So you can drop it in, change the color. It's super-easy or get into the content and styling just second that you want two of these. And you want a photo here on the left and then texts on the right. So kind of a checkered effect. You can right-click on this, let's say duplicating. And you can see it made another one. You can click and hold and move your calm. And now you've got this and this. So second editing. All right, and so as you're going down, you can go into a different section. And you can see in your styling that this color is gray. So having movement with your eye through different colors in the background that's not too contrasting is really helpful. So all these sections, there's just numerous, numerous things that you can drop in. But the idea is that you want everything to match. It's almost like you have to be careful where you can grab them, clip art from all sorts of places and they don't match and just feels very unprofessional. So the next thing we'll do is look at global styling. Make this easy for you. I'll show you how easy it is to make. Since we, we cheated and dropped it in. How do you make it live from nothing. So if you don't have elementary pro, you can use this pink button and to do any custom work. And you'll start to see some things that you've seen before in Devi or Beaver Builder. But we're going to do the structure of two columns in this section, sorry, this section. So in this section we've got two columns, but it's all flat. So we're going to start jumping into that. The other two tabs, which style and advance? Advanced, Yes. But it's really not that hard. So you can see in here, if you click here and go to advance, the padding that they have is pretty large, it's 150. So you can come in here and you're like, wow, that's just way too big for me. You don't want to link all the values together because we want the left side and right side did not have any padding since it's just a standard box model. So let's say it was go for a 100 and so we do a 100 on top and a 100 on bottom. And you can see quickly, well, not with 1000 honored, that you've spaced it out. So then you've got your And this is called an icon box. So there's just so many things that you can, you can drop in here. And so what we wanna do is click this hamburger menu and go back and go to your widgets model. And so you'll be using means quite a bit and you can search them and do all sorts of other companies have like an element or elements and ultimate elements. And there's just so many things, but here you can see the difference between basic and pro. So I just, I usually recommend getting Pro. It just runs faster too. So we're going to use the icon box right here. And so all you do is click hold and drag it. And wherever you are going to place it, it will, it will highlight blue. So blue is their accent color. And yeah, that doesn't look the same. So what we need to do is style this really quickly. So I move my head again. And what we'll do is stylus to match this. So, whoops. So, okay, this is a good example. I messed up. I'm gonna go to History and I moved it. And then a quick added. And now I'm back where I started. And so I love that about it. You can go back almost as far as it as you've been messing with it. So I'm going to click on the Edit button for this section. And you can see that this has padding to match or to float in the center of this section. And this is a big square. So let's just say we dropped in our image. And what you do is you come back here and come to Image right here and drop it in the image. I'm going to put this one end just for the heck, my face keeps getting in the way. Ok, so there's our image. And you can have a space a little bit off to the left. So we're going to jump into advanced. And in here you'll see this padding again. And I want the padding on the left to be 50. So it automatically doesn't mean you see it right away. This heading doesn't work yet. So we're gonna say who is this for? And I'm going to leave the text as is for now. So I think that the pop in or whatever, but the icon, you can do all sorts of stuff with the style. So if you go into alignment for the content, for icon, right here is I composition left. So it's jumped to the left. And the style. Right now, it's light blue. That's like our accent color. And so this is getting into the colors, which is great because. You want to have your color set for your website to match. Its basically call it color scheme. And, and the idea is that you, you get a sense of your brand working together. So for instance, if you have like a red or a gold in the logo, you would have those in here as like accent colors and then some grades and might go directly with width that that brand. So for possible paths. So the new, the new brand has this kind of bold red teal and then this dark purple. And so what I've done is I've got all my colors here. And I can I can grab him, I hex codes and then copy them and just drop them directly into element or so. You can put them right here and then add. So now I've got the darker purple and you can see it came up right there. And I don't like that icon, so I'm gonna change the icon to I'm just making it all a software liquid. But to Subway and answer. Okay, who's this four. And so the text here, everything is under style for this, for this section. So you'd have your icon styling, your spacing, all sorts of stuff. You're sizing. And again, I can't emphasize this enough. Think about your spacing. If you're using a 100 pixels between sections and 50 pixels on intersections, maybe 25 on, on spacing for your icons. I use eight pixel increments as a little bit harder for math, but it's really divisible, which is great. Let's see. So if we want our content to change the title right here, we're going to make that purple And then you can go into typography. And so let's say that we want the size to be bigger. Like I was saved 50 pixels or 48. It's just super nice. There's just everything you can do to make it, to make it feel like your site. So now you're like, well, if I do this on each section and I build another page, how do I remember what fonts I use, what colors I used? And that's a really good question because before, like a couple of years ago you couldn't do that. And so now, in an element or three that the style will be even easier to implement. But for right now you can go back and go to Themes style. And so when you click this, what it's going to do is it global sections. So this is our global styling. And we'll go into topography, which is the fonts. And we're going to do the text color as this purple. And I'm not gonna mess with the colors for now that all, all proposals have not been watched a lot. But basically, we wanted to set what you're. What your link, you can change the link, not fonts. But we're going to set up the body copy so we click on the edit for typography. And the default, I'm not sure what it is. Looks like a robot or something. But let's go ahead and just do Open Sans for now. That's a good free body font. And I'm going to do 16. You can do pixels. Em is basically a system where if you say like 16 pixels is one, it will be one EM a 16 pixels. Then if you have 1, two VMs in my me, like 18.5 pixels. So there is a whole different way of a system. But for right now I'm just going to use pixels just to make it easier right now so you can change your weight. We're going to leave it as default, but these are like font-weight transform like uppercase. So sometimes I'll use header 3s or 4s with all uppercase, which is kind of nice. And then you can do it, towel, eggs, all sorts of stuff. But all of these bonds are from Google, thank you. Google fonts and they're all integrated and just easy to use. I won't get into it. But if you, if you have questions, there are ways of integrating Adobe fonts as well. If you have a creative suite for your team, you can grab an ID from Apple, ID, Apple, sorry, the other big one, Adobe ID firm like a web setup. You do a web package basically with different bonds. And then you can pin it integrated in here and integrations. So that's really cool too. And you can even upload your own true tight bonds and other websites bonds as long as you have the rights to it. And paragraphs, but it seems really great. You can set it up a little bit bigger. Some junior, unless a client right now. So between paragraphs, you've got 20 header. One can go for really big on these. But it's just really cool when you, when you have the set. Because if you don't like it and you're building the papers, you go back, change it, no change throughout the rest of the page. Super nice. Make this dark purple for now. I'll update those. And so I'm going to update this. And now all the rest of the pages that uses this, this standard font as you're building, will, it will change. Obviously these, we would drop these in, we cheated. These are specificly style and you can see it's already blue and they've put Playfair display in there. So sorry if you're downloading a theme like that, you're going to have to go in and watch. Go up to the top and say default. It will go to the DePaul header styling and inner section and doing some coloring. So one thing you can do is Azure building, say you're, you're building this page and you come across a style that you don't. Why? You can always jump into this cycle right here under Theme style and then edit it yourself. One of the things that if you feel like the fonts aren't changing for you, our something's going on. Don't forget that. There's a little note that says go to Settings page and you can click there. And you want to disable default colors and default fonts. This will inherit from your theme. So you save changes. And now anytime you do any changes for your themes, it will work for the rest of the site. So we're going to go in. And so for the header twos just said will make them like a medium grade for now and update. And then we'll, we'll make them Montserrat. So that's the font that pasta is going to use. So let's go in here. And this, this section right here, Learn from the very best. You can see that it has a header, some text. And then this is the part that has the fun stuff. So you've got an inner intersection so that you can see an inside blue section. And you can see when you click on the navigation, you can see in here you have the intersection. So it has two layers, was facing and you can see the spacing here and then another section. So this is two columns in an inner section. So this section only has one. So let's build up to a quick. So we'll do structure. And we'll do one column. Click here first dialing, go to their bands, and then do a 100 pixels at the top of a 100 at the bottom or spacing. So now we come here and what do we do here? We grab an intersection, drop it in here. Okay, so now we have the one section, that big one, then the intersection. So what we'll have is 22 of these pieces. So this is called an icon box. And just for time purposes, let's say we made it. What we would do is come in here and if you're looking for it, you can type Python box and then dragging him here and and style it to match however you want. So these are all left, left icons with spacing and then a little bit of white background. So I'm gonna just do understand, grab it and steal it, and then steal this one. Ok, but how do you make this? So this is a header and a header to. So what we wanna do is come back to our widgets heading. And it's getting a little bit harder to see. And obviously since we're going to be making this white, what will do is make this white. And we need this background to be this purple or whatever you want. So you go into style, background type, and you can just do like a standard background. Or you can go into Gradient videos. We can drop in a YouTube video what we're going to just choose an image and uses purple again. I'm gonna get rid of my head, just keeps getting in the way. Okay. So now we've got our background, we've got our header. Then. We'll just update as we're going. So this is a matter. We can drag it in on your sections so you can look up Google Maps, drop it in. You can even style those two. So, but you can see that you can drop it into any section you want anywhere. And if the navigator gets annoyed, just, just get rid of it. But you can see where you can put it anywhere you want, dragging and dropping. So you can see or you couldn't before, this had different spacing. You can space these elements or the boxes themselves. So say for instance, you wanted the widget space to be like 30 pixels. You can do that and it will flush with your style. Or you can come in and do each one. And let's say, let's say 2020 pixels. And then you can say link these together and then saved 20. So then these, these are spaced a little differently, but you can, I forgot. You can do control Z if you mess up like I just did. But you can edit, edit these. And in your space and you can see the bottom and let's face it, 40 pixels. And that's right here, but the margin was set by this box. So you might have to set this margin or the bottom 20 pixels, so matches, so it's 4040. So it's always good to think about your hierarchy and your spacing. So the more, the better spacing you have throughout your site, look better. 5. 4 Elementor Pro: Okay, let's get comfortable with ELL mentors. So what we'll do is we'll add a new page and we'll go to pages, add new. And we're going to just do a quick demo on how this works. So this is called the Gutenberg Blocks section that was built a few years ago, but we're not going to be using that at all. Or even if you don't have this version of Wordpress which you should, I need to keep it updated, but you click edit with elements. And so the page will jump to the element or builder. And this is what the builder looks like. If you don't have the navigator there. I'll show you this. So I'm going to move my head. And the navigator is Frank here. When you're building, it's kinda nice and you can see the layers of what's going on with where you're at on the site and what's going on. So this is our horrible header. No logo, no anything but in our navigation. And so this is the page number. And so if you go under Settings and you can take out the title by saying hi and Title. I usually do that just because I want to design it the way I want. I'm going to publish this just for fun. No one really knows where it is. It's not linked anywhere, so yeah, it's fine to mess with. So this is the area right here where you can add your own stuff for their stuff. So this is where elementary Pro comes in, is if you click this and you go to, if it'll bring up this, and you'll start to see Pro on a lot of things where it will say like, oh, this is only Pro and you can insert it only if you're, if you're member. This is super nice for churches or companies that don't have a lot of money up front and want to just jump in and drop continent edited and their colors and go and move on. I wanted to talk why I chose to use element. You're pro. And it's a plug-in, basically that you buy from an element or and it's about a $100 a year. I mean, I try and make everything as cheap as I can for churches. A lot of churches aren't super small budget for even small businesses, diversity on small legit can put elementary probe is technically an ad on the users. Can purchase to get more functionality out of the free element or plugin. So you can see right here, we have basic and it has the basic structure. And we also have like general. And you can do quite a bit with it. But I think it's totally worth it. And so the way that I'm going through this video is showing how words with elementary row. So you'll see we have post portfolio, all sorts of stuff. There's about 30 additional widgets. That header and footer builder which will go through later. Dynamic single post design for the log areas, pop-up forms for doing call to actions, all sorts of stuff. Even Woo Commerce widgets, you can drag and drop a small business you want to add. I'm clothing or anything that you want to sell. It's just super helpful. So I wanted to premise that first. Now that we have this element or pro install, what we'll do is insert this page. I know we'll insert the content, the sections and stuff, and I'll, I'll show you basically how this page is built. And obviously we're not mess with the header yet. You can see you've got a hero section who it's for. Our teaching team. And practice makes perfect. So this is a good basic homepage to look at as far as just to get started and to look at dropping in content and then change an improvement for your church, for small business. This navigator usually isn't there, so you can click it over here. I'll leave it off for now to kind of open up the space for you guys. What elementary is great at is that you have this left sidebar and you can see the page being built. There's other visual builders like Beaver Builder or dB. But there's, this one has just been tested in some image and it's just works so well for so many sites for probably the last five years for me. So anyway, let's jump in and we'll talk about sections. 6. 6 Colors & Styles: And sometimes there are whole and sometimes there's just amazing. So. 7. 7 Page Templates Header Footer: Into Feeney. This will start to make the site build really fast and really exciting. And so once you've got your style setup, some of that is a little tedious and you can skip it at first and then come back and fix it. But the more sites, I believe that the more time you spend on spacing and thinking about your font hierarchy, like the sizes of the headers and how things are spaced. It just, everything flows a lot better. So just to give you a heads up. But this is an interesting one because we're building onto a site that's already done, just lots of junk on there. And so I'm going to do some speed builds. You can kinda see really quickly how some pages are made and walk you through the process. But right now what we're going to do is look at the header and footer. So this is dynamic and we'll be able to change it on the fly whenever we need to get started. And so do you want to go into your dashboard and go into element or into Templates, which is right under element or and aim builder. So this will change this. This is going to be really nice. And this next section on elementary three-point, oh, it'll be little actual thumbnails of your templates. And they'll have a little green dot or not if it's on or not. But I'm having trouble with the Beta right now, so we're just going to run with this. It'll be even easier than us. So we're going to add a new template. And you can go into header or footer and just say add new header. This is kind of an easy way to do it. So I'm just gonna say main header. And you can see all of the different templates you can build. And yeah, that's pretty cool. You can even do pop-ups and styles or call to action to get people to sign up for a newsletter or stuff like that. So we're gonna create the template. And remember, we have a coming soon on right now so people won't be seen that if ever messing with it. So I want to keep it pretty simple and I have the dark background one. And so you can see some of these say pro, almost all we're gonna do actually to insert these, these blocks. So I'm going to insert this crap. I think I picked the wrong one. And that's okay. Alright, so what I'm gonna do is go back here and start again and I want the dark one. Okay. Good way to show you how to do your history. And in our work still having issues and stuff, but this, this drops in a nice header. You've got your search, and then this is your logo. So the site logo is done. And we'll do, we'll jump back and do that in a second. But wanted to come in here and get this squared away really quick. So you can click edit on this menu. And this is reading that you can see which menu it's reading. So if you have a footer menu or menu to or top menu, that will show which one you're editing. So you can do a vertical, horizontal dropped down, all sorts of stuff. We're just going to stick with the plain Jane for right now. We've got an underlying and it's just a vague right now, which is nice. You can do like a slide where it slides in and drop in and drop out. It's a little bit nicer. You can do all sorts of stuff in here. We might just keep with that laser like the indicator, select the arrows that go down like the Chevron. And these are your breakpoints. So mobile. So you're you got your tablet and breaks it at 10.5. And then mobile it's 768. And there's just all sorts of stuff you can do. But just for expediency sake, I'm going to keep moving forward. So this background, if you've come in here, you can't find the navigator. Click on this section. Go to the style and you can see it's black. So we're gonna go to that nice purple, kind of fades it a little bit. And I'm gonna go ahead and publish this and add the condition, that condition, that includes the entire site. It's really nice if you wanted to do a targeted page. Say you had a Google ad. That was saying you had theme coming pastor talking about something and you wanted to just have them go to that site or a new shop item. You can make a targeted page that fits your brand and style but doesn't have the header and the footer. And you can really focus on the content and the call to action. So then you exclude that page, that specific page. But for right now we're going to have it on the entire site so you can add a condition and say exclude a singular, and then, then it actually lists like pages. And then you can, you can actually type in your page. Like Fernando, I saw that guy. Like for instance, if you didn't want that page, just type it and and then it will, it will not go on to that page. So it's really powerful, really quickly, can have all sorts of headers. Okay, so we've got our header and it saved. We're going to do a little styling really quick. So we've got the topography is set to default. I'm going to take over and say, these are 14 pixels. One a little bit older. Whoa, wait to vote. Will just keep it. Yeah, cleaner. You can uppercase transform. We're just going keep it default for now. And then declaration wind high. So right now, the line, line heights wrapping and you'll see that this is the, the padding from, from this. So we might have to come back and look at that. And so I'm going to just leave it at one for now. So you've got text color and normal. And then hover. You can do hover and hey, I always do this lime green. So you're like, okay, I will change that. Maybe someone has their brand color with lime green and cool, and I'm done. So I think we'll keep it simple and keep the text color white. And then point your color is what's under, so the red. And then that's way too thick. And then now here's the padding so you can see it's just so nice and easy to on-the-fly. Say k online tech, ten pixel padding between all of these. And remember all corn to be flushed, stoves and water safety. So will really grab some of that menu back. And you can see some of the south. So then vertical patenting, this is what's between sections right here. So that's a little bit heavy. So we'll go down to 30 and see how it is that maybe even 20 or yeah, that's nice. And then space between this won't go back to ten. Maybe your eight. Yeah. I see how easy it was. And obviously, you can go in and style the drop-down. So the dropped down to the same, similar ones and then maybe making them teal. If they're there active. It can even change background colors. There is a divider actually. So you can do with solid divider between these and color. Darker, like our dark. Oh, we need a border width of one or two. So you can see quickly that you can just mess with it and get it redesign and really quickly. So we'll stick with white PR now between those. Yeah. Okay. And then you can mess with your patenting and your spacing. So all of these, you know, obviously if you wanted your logo over there, you can do that. But I wouldn't do that. So what we'll do is, is space this out just a little bit. And I'll show you really quickly how to jump in and make your logo here. So we'll go back to dashboard. And before I forget, we're gonna jump into menus. And we're going to take out these right here. Because if you remember in the sitemap, they weren't important for now and we're just going to take them out. And we might put photos on Flickr under updates. And Yeah, for now will look into the sitemap again. I spent a few days. Okay, so that will clean it up little bit. And then what we'll do is go into appearance, customize. And what that does is it gives you like you're sighted entity and then your menus. And then also you can go into the, this is a part aside identity. But there's just all sorts of things. Widgets, additional CSS. Sometimes I'll drop in some code there. But, but I usually put it on the child theme. We're going to select the logo. I've already loaded the new ones up. And we want the one that's white. So this one faces in a way again. And so then I'm going to skip cropping and then publish. And so you can barely see it. You might not even be able to see it. We'll jump back into templates and Scene Builder. And so there's our main header and edit with element or is our link that we want. And so now you can see are, are logos there. But we're not done yet. So what we're gonna do is look at this section and go into advanced. And you can actually stretch this, so check this out, we'll do all that. And it stretches it for the whole, the whole width of the site. And just the demographics people coming. We're not gonna do that for this sight. Sound, a logo in there, right? The menus working well. One of the things I wanted to notice wanted you to see is the updates. I've put photos on Flickr updates, this her blog and it's pretty important to them, or it was they're working on it. But I don't want people to miss that. And so what I would do is go back to appearance menus and then go under updates. And you can do a search here and just say updates. And say, I'm going to add to menu. And I'm going to actually just put it right here so people click on update, so get it. But if they're just clicking and going down in the menu, sometimes you're moving really fast and just click updates so that they don't miss it. It seems redundant and sometimes just thinking about user air, It's helpful to templates and dream builder. And we're gonna make a footer. So same thing out of Footer. Footer. I create a template and then we're going to, it will tell you later where you want, but you can do all sorts of fun things. We're gonna keep ours pretty simple. Maybe, maybe run just something like this. So I'm going to insert this one and maybe change our style background to match on the bars. And we can have the menu down there or the phone number which they don't want. And so let's get rid of that. And then these are the social media icons. So once I clicked on that base Sherpa, and this is kinda cool. You can quickly just google plus in there. I'm not sure why, but if you, if you click on it and go to Icon Library and you look at or just search it. Instagram comes up, inserted. And then you can make that first. And so you can quickly see and moving these around. So you've got rounded square circle. We can put them in a circle. And one of the things is kinda interesting is you can customize your colors too. So this is like this. Obviously blind greens coming in again. But we're going to make the size in like 24 pixels. And this is what's so great about setting up all your colors ahead of time. So you can set your secondary color to be this three. You cannot see the ship very much, but you can see quickly what it looks like. We might even make it look more clickable by doing that, that, that he'll these up. But you can customize it and so say you've gone and these circles to be a little bit lighter and white. And then you can pat it out a little bit and make these a little bit smaller. Just beautiful, just on the fly, really, really quick, ready to go. So I'm gonna get rid of that secondary colour. And you can make it hover like that. Really nice. We'll just keep this menu for now. So remember if you wanted to move it, you can move it around. I'm going to actually delete that. And then, and then type in what we want, say 20-20. And you can even insert like a customizable snippet in here. So change the date for you as well as every, every year it changes. Alright, so now we're going to publish, had a condition and we want it on the entire site. Later. You can go in anytime you want and say, I don't want to show it on a certain page. So it's just super powerful. This read is bothering me, so I'm gonna go in color. We're gonna make it. But Teal. Yeah, that's great. And so then it think about your, your orders. And this is a dotted ones and the cycle one pixel. So as I build the Sayadaw think, hey, I want to, to pixel lines everywhere. I'm going to use rounded corners on the buttons and all of them have four pixels. So consistency is the best thing you can do for your professional look and feel. 8. 8 Homepage speed mobile 404: So let's speed things up quite a bit at 1200%. And I'm going to show you really quickly how I built the homepage and took the template that we had used before and swapped all the elements, checked spacing, redid backgrounds, brought in the new branding colors, new bonds, spacing. You can really see how fast you can take over a page and make it your own. And have full control over editing possibilities for future ads and changes. That's what I love about elementary. Yes. You've got sections, everything going pretty well, spacing everything. What I wanna do is look in animation and what the deal is with animation or motion and how you can bring things in moving around, basically training people's eye to look for something specific. So for instance, dominates pretty important. I'm going to edit this and do entrance animation. And then some of the animations that you can do are a little bit too crazy, like zoom in. It just gets a little cartoony. So depending on your clients or your demographics, like a bits a kids play indoor play area. Do that unbalanced and do all sorts of stuff with that. I use Fade In a lot, just as really simple and you can stagger it so comes in a little bit later. And this is something that you can do on the fly as you design. But again, with typography and spacing, everything we want everything to match. So if you're doing bathed in here to fade in somewhere else, did it map it matches, not bounce in or, or vice versa or having different variations. So if you can, if you can do the animation and fade-in right now, you can change your duration to normal or slow. So it's a little bit slower that might grab people's attention. It's little bit soft like that. So you can do whole sections to. So for instance, when you win. This section area. And again, remember you have the navigator up here, but you can go to motion effects and then actually you can have it sliding down. Obviously that's way strong, but there might be a section that it calls for that. So it's pretty cool that you can do that. I tend to do animation on the pieces inside of the sections and knothole sections themselves. Some and turn that off. And that's a basic area for section for animation. If you want to animate bullets, you can space the bullets out so they'll come in. And then a second later than the second, 1, third, 1, fourth, 1. You've seen that in PowerPoint before, but you can do all that in here with photos, all sorts of stuff. But just be careful play with it. Setup your section or you're, what you're going to do on each of your templates and then stick with it. And that will help it be more professional. The main templating system, and what we're going to do is make a page for the rest of the templates. So we've got our homepage setup, but we want like secondary templates. So right now what we're going to work on admissions page. And once we have a page solidified, what we're going to do is work on using templates to save them and make the rest of the pages building easier. So when I went to the site and I clicked on the ministries for educational support, I was like, well, what does it look like? I forgot and I needed to kind of get a sense of it. This is what it looks like. So that's why I wanted you to save your old themes. So since we have coming soon active right here, we can go into our appearance themes. And I'm going to reinstate the old divi theme. And what that does is it puts no mess up the homepage again, probably. But what if we go into educational support? You'll see what was there before. So sometimes I like to do this and obviously having the old games is great. And just in case something happens and you forget, I forgot will picture I was using and use a new picture, but it's a good one for this page. So, and we need to do a blockquote designed for this, but we'll save this as a template and then get going. So I'm going to show you another speed build and this is the template for the secondary pages. And what's nice about it is utilized by four different ages. So we can inject the content from these pages into this one template, but shifted as needed. So you'll see really quickly how using templates will speed up your process and keep everything synchronized and looking professional. Now that we've got this educational support page pretty much done, what I usually do is tested for responsive then and see if it's working. Well. I'm moving quickly, Frigyes some. Keep moving forward, but we've gotten the spacing with a nice graded system, then the template and then the footer. So pretty simple page. But what we wanna do is make this a template. And so you can actually do it from the page itself. And so I'll show you that really quickly. So what you can do is just make sure everything's right. And obviously I haven't tested this yet. So you want to see if it's working in tablet mode, which is not so you would, you would come into here and probably fix your padding? It. I think it I think I had this spaced out just incorrectly. So so you can check your padding and everything. I try and keep it as simple as I can. Obviously, this is not working either at the bottom. The bottoms means like 30 pixels. So I try and shrink everything down in proportion. So I'm not, I'm not thinking I'm going quickly, but so if you have a 120, you might do 60 on iPads for the padding. And then and then 34 phones. And I usually do ten on the sides for phones, I like to use pixels because I'm constantly messing with things. You can use e m, which is more of like a percentage. So if you set a percentage of EM as your base, and then this is like 1.21 cm, so it's a little bit larger than the base. Then, then you can scale it dynamically. That works really well for larger sites. When their sites like five or six pages, I usually use pixel counts. So it's just However you guys like to do it. And what's great about element or as you can do it that way. So save this page is totally perfect. What we do is we come over here and it's pretty easy. All you do is click on this update. So I'm going to update it just because I did that one thing. But I'm going to click this little arrow and say Save As Template one for now, educational. And so when you save it, it, what it does is it puts it into a system with all of, you can see all the templates we've made already, the footer, the main header and then template one educational. So now that's ready to go. So what we do is we jump back to the site. And again, I'm, I have to click on me to remember what I had. But I think I'll be okay. So child sponsorship program. So this might be ridden on a little bit, but we're working on that as far as the pictures and stuff. But so I'm going to add, since I can't edit this with elementary because it's an indivi. Right now. What I'm gonna do is edit the page. And I did this before, you just didn't see it. And then all you do is click edit with elemental. And doing the same thing where we're gonna take off. Take off this in settings where you are, you're hiding your title and then setting it to elementary full width. And so what I'm gonna do now is is saved this content and I'm like dropping into Word or whatever. But I'm just going to save it. And then just in case something blows up. And then I'm going to come down here all the way down. Click on this. And now you'll see that this was from element or pro. You can pull in different, different templates. But what I'm gonna do is look at my templates. Go to educational, say insert. Now I say no first therapies and it's like I didn't yes. A few times and just didn't seem to work as well. I always say No. So you can see what happened is we have our content still up here. And then down below, we have the page that we built already. So what will do is, since this is child sponsorship program that will become in here. So sponsor, so should program and then changing the background. And so you're kind of building off of your template. It's going to make it super fast. And I usually do that for three or four templates for smaller page, the first smaller sites. So obviously this is probably the best image right now, but we'll, we'll find one later. But so you can see that it's really easy to keep moving forward, dropping in, dropping colors. And you've got your base template as far as for your quote at the bottom as well. These three or four pages will have similar quotes, similar things. And then once I moved forward into some of the other pages, like food program in my might shift a little bit, but if you're using a same templates are really nice and helpful. And if you've already set your responses, padding and everything, it will just start to fly really well. Work. So usually I do this at the start. When I do the, the main templates, I wanna make sure everything is working great. Because as you, if you work really hard and get one template, working great on all three break points. You have desktop, I've iPad style, or we call it tablets style and then mobile. If you do a good job on your templates, then you're not having to fix all these little changes between the different pages. So I want to show you what I did is if you click down here in responsive mode and you go to tablet, as it shifts down, what I've done is change the padding here. And then also down below and in-between here. I usually jump from 120 to 60 or, or like about half or about three quarters for the tablet version. As, as you're dealing with tablets, there are higher pixel percentage. So almost 300 pixels versus does a standard old monitor about 72 DPI dots per inch or PPI pixels per inch. But then same thing with your phone. It's about 333, even higher. I guess your eye can't see more than 300 dpi and that's what printed material is usually. The idea is that as you're holding a tablet, it's going to be closer to your face. So you can squeak down your fonts a little bit on each setting. And so even your phone is a little bit closer. So what I usually do is think about the percentages I'm using and push them down for, for the headers. So for instance, this is, this is standard defaults, so it's automatically shifting down. And I love that when that happens, then it's working great. But say this is too big for a tablet. What you can do is you can see that it's set on tablet. And so you can, you can bring your header down to 40. And, and this, this setting can be set in and the global styles too. So you can overwrite anything as well. So just be careful about that and keeping the stylus as consistent as possible. So you can see between this settings right here for the layout for these sections, the blue sections. That as you go down to Mobile, what happens is if you have two things, I'm going to jump back to tap desktop. Say you have two pieces of information next to each other. The way it stacks is basically this piece will always go underneath. But you can, you can mess with it too. So say for instance, you really wanted the right part to be above. Then you can click that section and you go under responsive. And you can reverse the columns. So you can even, even reverse and on tablet, but not on mobile or vice versa. So for instance, I reverse columns mobile, but it doesn't work because you really need to know what you're talking about and then the call to action at the end. So that's just something to watch for it, which is great. And so when you're done savior template and then go for it and flush out the rest of your template. So you're using or pages that you're using this template for you to do a quick template for a 404 page. And that's a page where basically if someone comes to the site, hits a URL that's not there. It will show on the page and take and have a link to go back to your homepage. It's helpful, especially with sites that you've been updating that had been around for a long time and have URLs that might not be there. So if you go to templates and builder and then come over to single and add a new single page. And then you can actually just pick 404 page. And then I'm going to name it for four template and created. And since we're using element or pro, we can pull some fun ones. And usually a big one like this. It's really easy with someone in the back and then we swap out the photo. Remember, go up to your section, go to style and choose Image. And I like this ball one, or I've got some other pictures of a really cool, that this is a really meet road in Antigua. It's kinda cool. So this is automatically set up to go back to your homepage and takes the styling pretty much from, from the rest of the pages. My app to swap out typography. And well, it's set on defaults, so I think we'll just stick with that. And you publish it and then say 404 page and save and close. And that's it. And it's a pretty cool, pretty fast. And you can style it however you want and make it really fun. 9. 9 Blog Posts: Show you quickly how to make the blog page itself. So we got our updates page than the one that's totally blank. And I'm going to edit with element or it will open up and I already hit the, the title. Or actually for summary, it's not there, but I was kinda messing with it for a second. But you can go into Pro here and go to posts. And you can see this and pushover and drag it. And you can see we're back here with your blog via basically so we can, we can style this where we are, we drop in our padding 12020, and it looks a little different. But what it is is this is classic. You can go to cards. And we're back to the card section and it's kinda got a nice rollover feature. And then I'll style this a little bit differently. You can say share or you can even do change to read more text. And the hovers, their dates, comments, even the author section, stuff like that. So this is the blog page. So I'm going to throw a header in here too. And I'll just call it updates and Header one. And what's cool is you can, you can do this background to that. I was kinda working on where I had the gradient with 30, 30% a year for 30% there. And we can throw a lot kind of wow. It's just maybe something a little bit different on this page. Just for fun. So you know that you're on a different page. And that's it. And then will, when, when I style this to match the other parts of the site, you would probably wanna go. We'll go into the singles and match the styling. So watcher, watcher custom fonts and make sure that everything's flowing through correctly. This looks awful right now though I'll get there then noticing and it's been interesting is the last post for the blog was four years ago and they've been doing a great job on their Facebook page. So what I wanna do is come back here. And I'm going to change this page from being the blog hosts at the top to two sections and then bring the base book bead in first. So I think they'll be important because they really want people to connect there. And then when they can update my News and other things for their blog posts. So what I'm gonna do and there's a weird jetpack thing happening here. Don't worry, that's not how I design. And all I will add, edit this page, verse, sorry, edit with element Tor. And what we're going to do is make a new section. So we're going to create an intersection. And we might have to do to calm version. I'm going to go to navigator, move this section up. And now our sections up here, we'll go to advanced, adding one twenty, one twenty. And I'm not making this subset go. So what we're going to do is go back to our widgets and lookup, facebook. And so there's a plug-in per pack. But here's the Facebook embed and Facebook page. And I forget what's what. But ok, so this, this is like the Facebook feed that shows the latest. And let's see what the other one is. Facebooking, Ben, I know that one is kind of crazy. That's core. A little bit bigger. And what we'll do is go to hospital TASO. And it might have to be that we have the have to find the posts VDD itself. But what I'll do is I'll, it's pretty easy. So basically if you come in here and I have their actual URL for possible possible mission, it automatically pop sedan and populates it. So a lot of times like this, I would do an intersection. So here is the intersection. And then either the right or left. But dropping your Facebook feed and then go back to widget, do Facebook, whatever. But, and then style it however you want. I'll, I'll look into this. I know that when you get into apps and like loop since tap with Facebook page, change it constantly. So it's kinda hard. But basically if we have this section with kinda that nice background style, we've got the background overlay where we have the image and we'll do the pattern. Maybe it won't do white this time, and then do the background tan. And then on this overlay, we'll do our own sizing. So we'll do custom sizing. And I'll show you sense a winner repeating this logo emblem. And you can do custom sizing and that's pretty cool because then you can get it just the way you want it. So like for is kind of it's a little bit too much. So we're going to bump this down. And yeah, it's fun because that's their logo. So yeah, all all styled the sub and look into that. But basically if we have our Facebook update and the updates here, remember right-click can save you tons of time. So that doesn't look good yet, but we'll get there. So but yeah, it's kinda fun that you can drop that in so if you can match your content and then I'll stack, all look great. 10. 10 Sermons Podcasts: And podcasting and video podcasts seeing all that stuff. And a lot of churches or like, where do we start? There are two main plug-ins that are well-known. And they're they're researched and they look like they work really well. One I haven't used, but I've I've had a demo for last couple days and I thought it looked pretty promising. And the other one is blue fairy power press. So just wanted to show you a couple other sites that I've done through element TOR and how they're utilizing these plugins for sermon podcast, CNN serving up sermons so they're easy to edit, come grab, and then filter in categories. So if you look at blueberry power processes in our plugins installed, This is my church in greenhouse Lawrence and really cool church. And they've been doing sermons for last five or six years on, on Wordpress. And so they're using power press. And this is a nice plug-in that utilizes integration with Apple and other things. So let's see. If you go into the feed itself. You have all these different settings where you can add enhancements directly, direct links to Apple, and categories and all sorts of stuff. So this one's a good setup. And let me show you how it looks on the site. So it four on this page here, I'm going to go back to the home page so you can see really quick. So you can see our homepage. This is, this has a little bit of movement, a little bit too much movement pi, but clean and simple, nice footer. And you can see how when you hover over the menu at changes. So there's some cool things you can do with that. So if you go into teachings and go to podcast, This is a separate category. And you can see in here in the URL, it's separated by the category two podcasts. And so we can, we can utilize the menu for a drop-down to the categories. So here's the sermons. So if you if you are looking at the, this is the single page for for the the sermons area. You can see we've got like the featured image. And it can be a video too, which is great. These are just podcasts and MP3s. So when you click it, it opens up the player and there's different player settings, all sorts of stuff. But then you can set related ones. So like in the sermon series, that kinda stuff. So that's one times blueberry power Press. And the other one is called series engine. And this is the second version. I guess they got bought and the management is doing really well. It sounds like with the plug-in there, keeping it up to date. But you can watch their video and they actually let me have demo, which I think is really nice. So if you're on the ministry team for attack, then I wouldn't I would recommend downloading it and seeing if you like it. And a lot of these other plug-ins to have like a 30-day trial as well. So there's a lot of different features and build for WordPress. And they're working on better implementation into element. Or I'm not sure if they'll have an actual element or widget to drought dragon, but should be pretty cool. So you can kinda see in the background here where inside series engine, you've got a really nice layout where you've got the series and types and topics, speakers, and ways to get the shortcodes injected. So for blueberry inside the podcasts, sermon posts. So you can see on, you can see on the homepage that as you scroll down, you have the sermon, podcasts and posts inside of the homepage. And it's just the short code that you put in as well. So that's blueberry and this is series to Forum Series engine. I'll show you how it looks. On the homepage. You've got all sermons. And you can see in here, they've got a lot of sermons, but you can watch or listen. And you can browse speakers. And you can do this all with element or two. This is a little bit more. Keep it together. And so once they integrate with Elhanan turned the widgets and systems so you can use your short codes, but it'll be a little bit easier. 11. 11 Elementor showcase and end: And I'll just show you a couple other element are sides so you get a sense of the variety you can make with it. So this was done for KU science lab earlier this year. And you can see it has vector systems in here with SVGs that are locked to the side. This is all done an element or these, these backgrounds shift. And so revealing in different sections over here, and revealing footers and all sorts of fun stuff. So sidebar navigation. Under research, you can click and go to the research page. Lines, move, wrapping, animation circles, translucent pings, all sorts of fun stuff. So and publications is the school day. We have this system in place where integrative video in the headers and a negative padding. Floating, floating modules and one sees are made and saved as a global element. You can duplicate them and keep using them that way as well. So it's just really nice. Just so a way to get a sense and feeling of and n style with different churches, different small, small businesses. So another one is about forms is called Still milk bread. They're using B-roll of, they had shot in their, in their Mill and not really a mill, but more that baker EPA. So you can see a little bit different styling in integrated custom aunts from Adobe. So this is kind of a cool like condensed form is tall. These are icons from I don't think these are favorite cons, but they're from nucleo. And you can insert him as SVGs and size them correctly, do all sorts of stuff. So, and then some of the layering effects that we can do, some really fun. Then all of these little gadgets are from element two are, these are the, this is the gallery with mosaic tiling. And then again a revealing footer with French bread. And let's see. So we've got like a breakfast menu. And I'm going to, I'm going to peek into the backend so you can see it really quick. So this is really cool because they're going to be editing the menu quite a bit. And the wave that the section for really well to move him around and, and edit and edit the content. So breakfast sandwich cuts for 75. This is a divider, this is $4.75. If it changes, they just type in and saving go. So if the French toast is supposed to be over here, remember you can click and hold and move it over there. You don't like it. And it commands seen backup. So as you go down and we wanted another element, you can right-click, say Add New Column. Or duplicate, and, and then you're good to go. So yeah, it's just super powerful. Let me jump out and show you really quick. Not gonna save it until we're, and then we'll go to the breads. And so what we did is integrated Woo Commerce with this, which is nice if you ever wanted to sell something on the side or if that's part of your business, then we have the B-roll again. And then inside here in elementary. And I'll show you this too. These are product filters. So there just drop, drop in. Products. Widget for elementary four will commerce. And then scratch this prime. Dropping in for Woo Commerce. Then filter it so that you're only getting the category of bread. So you can see under here product categories. So once you get the sense of how everything works, you can start to build really quickly and build into it and then shift and have different variations. I think. Food truck again, we had the Facebook integration, which is very easy. It's a widget and you just drop it in and do some styling and stuff, but then drop it in and you're good to go on. Basically, all you need is a URL and it works really well. Same here with this is a cart with slides out and you can feed the car checkout, take him off as well. So that's part of element or and making sure that the layering and is working correctly. This is one that's kinda fun, that's hasn't launched yet, but probably will shortly. It's a game rental place. And so you have Woo Commerce using a rental program. So it's like red box, but for video or not video games or games. So you have these different call to actions. This is an element or widget, then some of the products themselves. And so you can go the game catalog and go to the filter, CMR here. Then you can click on the products themselves and they load and you can zoom in, do all sorts of stuff with pick updates, stuff like that. But this, this is actually a single product and so this is a way of customizing your own product page. So when the products loaded this dissolved dynamics. So you can see in here if we're going to search and we do move, you can do pro, product grids, all sorts of stuff. And then even products themselves. You can do product filters, all sorts of stuff that's amazing. But it's kind of fun to see really quickly this sense of a different style. And the way that you can utilize fonts to really work with your brand new. Thanks so much for going through this workshop with me. I appreciate your time and patience as we go through all this little tedious stuff. But once you've done it and you build a page and you make it a template. And then he builds another page with that template and keep adding and keep adding and moving. It just gets faster and faster. But this is the fastest way I can think of to build a website that's more professional, more customized, way better than wakes. Anyway, thanks again and blessings.