Session: How I Learned to Stop Worrying About My Theme, and Love WordPress

Andy: Welcome to WPCampus 2020 online. I am here to tell you to stop worrying about your WordPress theme. A little bit about me. My name is Andy Rush and I am an educator in the University of Florida. I am not a programmer. I've been using WordPress since 2005. I tinkered and created a media guide until September 2015. I am presenting from less than 10 miles from the ocean. I wanted to bring domain zone to Florida. I was on my own to manage faculty websites. What did I feel like when I discovered Elementor? [On screen.] My approach was to answer questions that I had in the beginning. How to navigate Elementor. A lot has changed, but my first question was, is it a theme?

Before I answer that, have you gone to the WordPress theme repository and gone through endless configuration and ran into the fatal flaw? We find a perfect theme and we do theme wrangling and we become sick of it. Lather, rinse, repeat.

I want to show you my new website with the coolest theme. [On screen.] Maybe it's not so cool. Why do I show you a theme that was created circa 2005 in the era of WordPress 1.5, when we are up to 5.5? Themes don't matter as much as they used to, and they matter in a different way. I will go into demo mode and show you how Elementor works.

This is the blog page. I will go to the about page. This is a sample page you could use. We are using this photo of a faculty member. There's Facebook links and so on. There is also this site demo page that looks really weird right now. I have basic content and a google map.

I will go back to a homepage. This is the site without Elementor. I will go to the plugins and activate the basic, free Elementor plugin. We will go back to the homepage and not a whole lot has happened. That's what we expect. We will go back to the about page, which should look different. Elementor is working in the content stuff, but the old header and footer are in place. I will click on the edit with Elementor button. This is what it should look like. You have different components on the page. You will have the heading widget. This is the text editor widget, and this is the image widget and you go here to make changes to the pages. I would click update and the changes would be submitted.

This is the stuff that's in the middle without the header and footer. We will go back to the home page and the demo page. This one looks quite a bit different. We have taken over this website in a sense and we have a lot going on on this page. It says a lot about the faculty member and a contact page and a map.

Nothing has changed in our blog. I want to give you an idea on what changes as we use the free version of Elementor. There is a coming soon page that uses Elementor. But it doesn't change the blog.

The next thing we are going to do is go to the customizer and switch themes. I will change my theme from the default to 2020. It will activate that theme. What you notice with the Kubrick theme is that there were no featured images. This is the blog post with feature images. Hoare is our about page. It has our header and footer provided by the 2020 theme, so it looks better than the standard theme. If we edit with Elementor, we are editing that middle part. What I want to show is on this settings page, you have different page layouts. You have full width, for instance, it will give me the header and footer to look at, but that's not how we want to display the page. We can also go to default and that gives more information. It depends what you have selected. We want to go to just canvas. Some themes won't matter with this as much. Canvas takes over everything. I will view the page to make it clearer.

We will go to the site demo. One other thing you might see is a glitch. We have this L hanging down in the 2020 theme. Let me edit in Elementor. This is in canvas mode. It takes over the whole page, so that's why you don't see the headers and footers. This won't be exposed in the page. If I go to the settings page and choose full width, my headers will come back. It will be full-width and not canvas. You can use what the theme gives you and edit the content in between. I am not going to make the changes and go back and view the page.

I will go back to the home page. Let's go to the customizer one more time and change the theme to Hello Elementor. We will do the live preview, activate and publish. You see the archives page and featured images for the blog posts. The Hello Elementor theme is controlling this. We have a header but no footer with this theme. I wanted to show you what is and isn't controlled with Elementor. I will switch back to the Kubrick theme because I know it's a favorite.

I am not going to turn on Elementor Pro and go to the dashboard. I will activate the Elementor Pro plugin. We will go to the site and now things are quite a bit different. This is a customized header and footer done in Elementor. If I click on a post, this is what [audio cut out]

I've got my about page that will change to using the Pro header feature and the footer. And also, we've got a CV page that is styled. We have a courses page and the rest are private. Before I talk about anything else, I want to tell you the pricing of this.

I want to bring up one more site here. Maybe you just want to know the cost of this. The free version gives you any number of sites for Elementor. If you want Pro for one site, it's 49 dollars a year. This isn't a paid sponsorship by the way. 3 sites is 99 dollars a year and we use the expert version which gives you access to a thousand sites at the University of Florida. We will come back to this page in a bit.

Next, the basic elements and widgets in Elementor are free and the pro elements are part of the pro package. It customizes custom posts, archives and 404 pages. If you have a nice theme with a good archive page and single post setup, you might not need more than the free version. You need to figure out which widgets you would need. Elementor eliminates the need to pick a theme. You pick a template instead.

I want to show you the back end of how we mange UNF faculty domains. We have WHM where I manage different sites out there. This isn't the whole interface, but a couple areas I want you to see. There's usernames and emails we don't want to put into public. What we want to do is create faculty pages. Let's see if we can get to . . . if faculty go in and create a page and install WordPress, this is what they get as a default template. There is an about page and a CV template. We want to give them more tools and get their page to look like this. These graphics are put together quite well.

I want to install this and show you what the template looks like. I will go to my control panel and go to WordPress and install this application. I will show you what installatron looks like in domains. I want to create a website here and show you the version section. We start with a WordPress clean install and build the faculty template you saw here. With the 2020 theme. We are going to get to this one with the full template. We will build the website off this intermediate one. We will keep the defaults and install. I am stalling for time now. All these links will be in my presentation notes. I will choose plugins now. Elementor eliminates the needs for several plugins. You've got a maintenance mode and coming soon page in Elementor page. They can do form building and media carousels, google maps, table of contents, sliders, and more.

Let's switch back now. Here is the one we just created. I will go into the admin mode of this brand-new website that should look like what I showed you before. I will now go into the themes area and show you what the faculty would have. It's using the 2020 theme. I also have Astra and 2016. I will activate the Astra theme and see what it looks like. It looks a bit different than our original site. Let's go back into the dashboard and look at Astra options. This is to show you the easy way to get into Elementor. There are starter templates. We want to enable this capability by installing the importer plugin. It should only take a couple of minutes and ask what page builder we want to use. I will click on Elementor and you are shown the templates websites you can use.

We want to make sure we don't get excited and pick one and see that it's not free, so I will pick all the free ones. We will create a site that looks like this one. I will click on import and there we go. It's going to do its thing and ask what import settings we want. We will leave it and import. This will take a minute.

We will go back to our build anything page. We can build a portfolio page and I've got thumbnails of the portfolio entries. This is all built in Elementor Pro. The portfolio can be set up so that you have thumbnails and also be broken down into category, like forest. If I don't want to see the tropical ones, there are categories I came up with that you can use in this example. There's book templates so we can promote our book. We are done with the installation.

I will click on visit site and here we are. Here is our page and I would swap this out for my name. There is also a footer at the bottom. Not only is this the free version, but somehow, you've got access to custom footers, in this case. If I click on edit with Elementor this is where I go in and change this template. I can change the title to just my name. If we go to the widgets page, which is this button here, you've got basic widgets, there are a few under pro and the general section. You might not see this lock but there is this feature here. If you click on that, you can see how it works, but you can't use it until you go to the Pro version. I will update this change here and go into the hamburger menu item here and view the page to see the changes

Here is the about page. Here is another page that says, "work for me." This looks like a holdover from a form, which we can fix. That's the idea between putting a website together that faculty can use. What if we don't want them to have to worry about that? If they want that control, great, but what if we want to give them just this part? We will use the installatron feature in WHM. This gives us all the possibilities in installatron. I will go to my applications and search for "Andy." I created this crazy website right here that I can use as a template. It's got the old thumbnail, but we created it with Astra and Elementor. If I click on this and give it a title and description. If I click on template, this is how you would create the template. It would read what's in WordPress and create a template for you.

We will now go down to templates in the installatron. This reflects what you saw when we installed WordPress. The UNF faculty template is what you saw earlier and this test one is what we installed with everything on it.

It will install this application in WordPress. I'll give it a directory name and use this template, which is the full version of the finished template with all those pages. I'll install and let it do its thing. This is the current version of WordPress that is installing. It will copy the directories and images.

Let's go back to our build everything page, which I will link to in my notes. A couple other examples, I've had people that wanted to put a conference on their site. Here is an example of that using Elementor Pro. It looks nice and has nice animations that make it dynamic. There are a ton of different templates and you just have to wrangle resources to find what to put into your site.

Now that this is done, I will go into the dashboard of the new site and view the page. Here it is. A faculty member would have this if they used the testy template. They can edit the site using the free version of Elementor. You can't use the pro stuff until the pro version is installed. You go from a fresh install to the UNF template and go to the fancy version with the free version of Elementor.

I will go back to my presentation and talk about something you may have been thinking about. Where does Gutenberg fit into all this? There is an Elementor block for Gutenberg, so you can bring in Elementor content in Gutenberg, so there are integrations. I will have both of these links available in the slides. Let's go to the -- bear with me and we will find it. I've got too many tabs. Let’s get there this way.

This particular website looks similar. Here's our Hello World. We will go to the dashboard and we have WordPress 5.5, beta 3. If you need to know how to do this, you can look for WordPress beta tester, the full version is coming out in a couple of weeks, but you can test it here. If I edit this Hello World post, the editor in WordPress looks a bit different now in terms of Gutenberg. If I want to add a section or block, you see the plus signs and if I click in the paragraph area you will get the plus sign. You will get the inline chooser. But there is a new way to look at things. If I click on this button, the blocks are in the sidebar. It kind of looks like Elementor now. You can pick the widgets that go into your page.

If I do video for this, you can upload media or choose it from the library. You can put in a quote and type in text. There is a convergence of technologies where Gutenberg and blocks will look more like Elementor. They might have used them as the start point, so you might forget which one of them you are in. I wanted to show how the Gutenberg editor will work.

There are a bunch of combinations I can't get into. The last thing I will show you is under themes. We have the Kadence theme and a plugin called Gutenberg Blocks for Kadence. It peaked my attention because it looks like Elementor. You can install this, and it will look fancy, like Elementor does. I'm going to go to my ending of the session. Don't forget the feedback. Be gentle with me because this is live, and not too many things broke. I can take questions. We have the demo sites and the faculty pages I've shown and the sandbox demo with the about page using Elementor page. These are some of the themes we worked with. We went from a clean install and went to the faculty template, then to the fancy shmancy template.

With Gutenberg you have the Kadence theme and Gutenberg blocks. Just some basic notes for what I used for the slides and presentations plugins. There is also a link to Dr. Strangelove. I am taking questions now, or you can email me at andy.rush@unf.edu. It's also on my WPCampus page if you want to contact me or I can take questions now.

Eric: Thanks a lot, Andy. I have a couple questions for you. My university uses Divi. How is Elementor doing in the page speed area? Especially in the image loading area.

Andy: The performance is pretty good. The way these pages are built are using JSON. You need to optimize your images, but they come in cleanly. The advantages of the Hello Elementor theme is that it's very light. It's one of the quickest themes and everything loads on top of it. I've never had issues and pages came up quickly. I never tried Divi. I've used Site Origin, but I've never used Beaver Builder because Elementor was the Ah-Ha moment. We started using it in 2018.

Eric: Something you brought up coincides with this question. They asked if you used Beaver Builder and how it relates to the product you are using.

Andy: I think it was a word camp in Jacksonville that said we should check out Elementor and I had been looking for something to build interactive pages and I found Elementor and it was amazing. There is a learning curve, and it's been interesting that Elementor has been responsive to feedback so the things that were part of the difficult learning curve has gone away. This isn't a theme, but a plugin to give you these capabilities. They are also building kits, like for real estate, for instance. I can't speak to other visual builders besides Elementor and Site Origin, which no one is using, and I stopped looking after Elementor. It's great to use it on a thousand sites and hopefully we can get to that point for another 2000-dollar license.

Eric: How does Elementor compare to full site editing? It will be included in the WordPress releases coming up, so Elementor might become obsolete.

Andy: Great question, and no one knows. I am not a programmer. Once upon a time, like we have talked about, you are looking for a theme that everything is included with. If something is close to perfect, it is that Astra theme where Elementor is built in. What will be built into core and how close Gutenberg can get? You still have to modify archive pages and 404s and other stuff you have to go into the code to change. Elementor goes beyond the code so you can change it visually. I am curious to see how long Elementor survives. Apple comes out with the new operating system and a feature is killed because it's built into the operating system, but I would imagine we are a few years away from that. I was excited when I heard about Gutenberg, but you might not want to use it all the time, and I got frustrated typing text into the block and losing it because I didn't change it properly.

I'm interested to see what the convergence looks like and I will keep working with it. If Gutenberg does what Elementor can do for me right now, I will call uncle, but Elementor works better than Gutenberg for this right now. I can still use the classic editor on pages, but if Gutenberg does all those things I will change, but I don't think Elementor is going anywhere soon.

Eric: I think we are out of time, and more questions will be in chat for you afterwards. Thank you for the presentation today!

Andy: Absolutely.