From the course: Customizing a WordPress Theme from an Adobe XD Prototype

Using the customizer: Layout

From the course: Customizing a WordPress Theme from an Adobe XD Prototype

Start my 1-month free trial

Using the customizer: Layout

- [Instructor] With the WordPress Customizer, you can drastically change the appearance and functionality of your WordPress website. Some options in the customizer will be different based on the theme you're using. To access the WordPress customizer, you can either click the big customize your site button that's on the dashboard or you can go to appearance, customize. Inside the customizer interface, you'll see your theme preview over here on the right and the customizer menu on the left. In our example, we're going to alter some of the things in the customizer, but we'll also be using the Elementor plugin for some of the changes that we could also make here. We're going to use Elementor because it'll give us some more granular control, but let's review some of the features we'll be changing here as well as discuss some items that may be of interest to you, depending on your project. Some of the settings may need to be updated later when we have more content present, as well. I'm going to start off by going to the layout tab. In the layout tab, we have some sub menus available. The first one is for container. The container tab is going to let us make choices as to how wide we want the container to be. And currently, I'm making these decisions based on a desktop layout. I'm going to have my default container style be full width instead of contained. When I make these changes, you can see how they're going to update in the preview on the right. Once I'm happy with these choices, I can move on. For the blog and single post container styles, I'll leave them as is. I'm going to click publish to accept those changes and I'll click the back arrow to go back to the previous set of choices. The next element that we're going to look at is going to be content and side bar. Here, you can make site-wide changes to how you want your side bar to appear. Do you want it to appear on the right, on the left, or not at all? I'm going to choose not at all, and when I do so, you can see how the side bar disappears. I'm also going to change the overall site-wide content width to be 75. If you click this little button here, enable advanced options, you'll get more options that are going to allow you to control these settings for the blog, for single post, and for other pages, as well. We're not going to make any changes to these settings, so we will click publish and we'll go ahead and click the back button. Blog and archive are up next. Inside the blog and archive area, you can specify how you want your blog laid out. Do you want all the images on the left and the text to the right? Do you want them to alternate, or do you want them in more of a grid? I'm going to leave mine in the grid layout, but I'm going to change my grid layout to two columns instead of one. I'm also going to increase the excerpt length to be about 80. If you continue to scroll down on this page, you'll see that you have other options available where you can choose if you want your post pagination to be a numbered setting or if you want to use infinite scroll. You can also control how you want the post content order, and if you decide you want to change any of these things, all you have to do is grab these tabs and drag them up and down, so you can easily affect the order of the elements. I'm going to leave the rest of the settings as is, and I'll click publish. Because I don't have that much content in my site yet, I can't really review any of these changes visually in the preview area, but if you did have content, posts, and pages, then as you made these changes, you could actually visually see them. That could be very helpful if you're new to WordPress. The next option that we're going to look at is going to be the single post option. Again, this is where you can modify how you want the single post to look. In addition to being able to reorganize how the content is laid out, you can click the little eyeball and hide certain content. So if you don't want the tags to show, you could just visually turn those off. I'm going to turn off tags and comments for our project. I'll click publish, and I'm going to hit the back arrow button again to exit the layout setting. We're going to look at the footer setting. The footer setting is where you can control the footer on your webpage. And if I scroll down to the bottom, you can see what the current footer looks like. Now I do not want my footer to say Neve Powered by WordPress. So in order to edit this, I could click the pencil right here, which is going to allow me to edit this area, or you could click the copyright area down at the bottom. In this dialog box, there is some code that's being displayed. This is straight HTML code, so if you know HTML, you can actually add HTML code into this area. I'm going to simply get rid of everything inside of the paragraph tags, and we're just going to write BanksBoard, and then I want the copyright symbol to appear, so I'm going to use the HTML code to generate the copyright symbol and then I'll put the year, 2019. If we look at our footer, you can see that this is what the new footer's going to look like. So that looks good. We also have a layout section here and in this area, you can control the layout of your footer. So if you want this text to be aligned differently or if you want to set padding and margin settings, you can do that here, as well. Again, you'll notice that currently, it's displaying the choices for the desktop. If you click on the little desktop icon, it will actually toggle to a tablet or mobile version of your site. And if you wanted the layout to look different or the padding or margin to look different, in this case, for the small screen, you could make those changes here. I am not going to make any of those changes, but I did want to point them out. I'm going to click publish to accept the changes that I did make, and we'll click the back arrow button to get out of this area. I'm going to hit it twice and now I'm back to the main customizer menu.

Contents