{"id":33400,"date":"2022-01-11T15:00:54","date_gmt":"2022-01-11T14:00:54","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=33400"},"modified":"2022-02-01T11:33:51","modified_gmt":"2022-02-01T10:33:51","slug":"how-to-change-wordpress-homepage","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-change-wordpress-homepage\/","title":{"rendered":"How to Change and Customize Your WordPress Homepage"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]WordPress being nothing if not versatile, it is no wonder that options to tweak, change, customize and otherwise modify a WordPress website abound. This central tenet holds true for your homepage, too: with WordPress, <strong>you can change your homepage easily.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, to borrow from the font of wisdom that is Jurassic Park, before you start changing things up, you better have a think about whether you should. In this article, we will be talking you through the ways of changing your WordPress homepage to better fit your style and desired functionalities. Before we do that, though, we\u2019d like to take some time to expand on<strong> what a WordPress homepage is<\/strong> and why you might or might not want to change it.[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-your-wordpress-homepage-and-why-change-it\">What is Your WordPress Homepage and Why Change It<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-set-a-static-homepage\">How to Set a Static Homepage in WordPress<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-edit-your-homepage-using-the-theme-customizer\">How to Edit Your Homepage Using the Theme Customizer<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-edit-your-homepage-using-gutenberg\">How to Edit Your Homepage Using Gutenberg<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-edit-your-homepage-using-elementor\">How to Edit Your Homepage Using Elementor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-edit-your-homepage-using-the-classic-editor\">How to Edit Your Homepage Using the Classic Editor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-your-wordpress-homepage-and-why-change-it\"><\/a>What is Your WordPress Homepage and Why Change It<\/h2>\n<p>[\/vc_column_text][vc_column_text]The homepage is where your visitors end up after <strong>navigating to your domain name<\/strong>. By default, a WordPress home page will most times <strong>display your latest posts<\/strong>. This is a consequence of WordPress\u2019s start as a blogging platform, and the solution by and large works for a blog. It is also known as <strong>a dynamic homepage<\/strong>, since it automatically displays newest posts without the need for a manual update.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But perhaps you want to showcase something different, such as your contact information or other important information, a manifesto or a mission statement, or create an arresting landing page for your latest product, or something else entirely. If you don\u2019t feel like putting your posts front and center, <strong>you should redesign your homepage<\/strong> and display your posts somewhere more appropriate.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]From a design point of view, the homepage is typically <strong>the entry point of your website<\/strong> and its central hub. It serves to set the mood and to offer paths to your content, if not the content itself. If your theme\u2019s homepage doesn\u2019t quite do it for what you\u2019re trying to achieve, you should look into making modifications.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-set-a-static-homepage\"><\/a>How to Set a Static Homepage in WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]You don\u2019t need anything apart from the basic WordPress functionalities to create a static homepage instead of a dynamic one. However, we suggest you <a href=\"https:\/\/qodeinteractive.com\/magazine\/enable-wordpress-maintenance-mode\/\">put your website in maintenance mode<\/a> when making major alterations such as this. For this demonstration, we will be using our free <a href=\"https:\/\/qodeinteractive.com\/qi-theme\/\">Qi Theme<\/a>, but the basic steps should work for all themes.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Sometimes a theme will come with a predefined homepage. You may want to use it, or to change it for another page. Or, you may want to create a new homepage altogether. To create a page, select <strong>Pages\/Add New<\/strong> from your WordPress dashboard.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Pages-Add-New.jpg\" class=\"attachment-full size-full\" alt=\"Pages Add New\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Pages-Add-New.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Pages-Add-New-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Pages-Add-New-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Pages-Add-New-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Give it a title and click <strong>Publish<\/strong>. We have named ours<em> Static Homepage<\/em>, but you can name yours whatever you like.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Title-and-Publish.jpg\" class=\"attachment-full size-full\" alt=\"Title and Publish\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Title-and-Publish.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Title-and-Publish-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Title-and-Publish-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Title-and-Publish-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Do the same for a blog page. We have named ours <em>New Blog Posts.<\/em>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you have both pages in place, you need to set them up so your WordPress framework knows which is which. To do that, navigate to <strong>Settings\/Reading<\/strong> from your WordPress dashboard.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Settings-Reading.jpg\" class=\"attachment-full size-full\" alt=\"Settings Reading\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Settings-Reading.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Settings-Reading-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Settings-Reading-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Settings-Reading-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To display your blog posts on a page other than your home page, select <em>A static page<\/em> from the <strong>Your homepage displays<\/strong> section at the top. Then, in the drop-down menus below, select the page you have created for your <strong>Homepage<\/strong> (in our case, it is <em>Static Homepage<\/em>) and for your <strong>Posts page<\/strong> (we have selected <em>New Blog Posts<\/em>). Click <strong>Save Changes<\/strong> when done.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"675\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Set-Static-Pages.jpg\" class=\"attachment-full size-full\" alt=\"Set Static Pages\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Set-Static-Pages.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Set-Static-Pages-300x209.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Set-Static-Pages-768x535.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Set-Static-Pages-620x432.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And, just like that, you have created and set up a static page for your homepage. We will show you how to customize it in the subsequent sections.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-edit-your-homepage-using-the-theme-customizer\"><\/a>How to Edit Your Homepage Using the Theme Customizer<\/h2>\n<p>[\/vc_column_text][vc_column_text]The theme customizer is a set of tools used to edit WordPress websites in a user-friendly way. It comes with your WordPress installation, and has many functions. Covering <a href=\"https:\/\/qodeinteractive.com\/magazine\/ultimate-guide-to-wordpress-theme-customizer\/\">all of the functions of the theme customizer<\/a> is well beyond the scope of this article, but we will go over the very basics of what you can do with your homepage. Note that this will vary depending on your theme.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To access the theme customizer, navigate to<strong> Appearance\/Customize<\/strong> from your WordPress dashboard.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Appearance-Customize.jpg\" class=\"attachment-full size-full\" alt=\"Appearance Customize\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Appearance-Customize.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Appearance-Customize-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Appearance-Customize-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Appearance-Customize-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Your page will now appear as it would to a visitor in the preview section, which takes up most of the screen. All changes will only take effect once you click the <strong>Publish<\/strong> button.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Editable areas of the page are marked with a blue pencil icon. There may be other editable areas which are empty or inactive. In the menu of the customizer on the left hand-side you can access your website\u2019s functionalities.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To keep this short, we will draw your attention to the <strong>Menus<\/strong> section just to point out that this is where you can set up where your menus appear. The navigation menu is a very important part of any website, so we can\u2019t address the <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-navigation-menu-in-wordpress\/\">creation of a navigation menu<\/a> in this article, but we will say that this is where you can set it up for display. The number and location of the menu areas on your website is theme-specific, too, but most themes, like the one we\u2019re using, will display a menu at the top of the page \u2013 at least for desktop devices.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The second important section of your customizer is the <strong>Widgets<\/strong> section. This is where you can distribute the widgets you need on your homepage. Again, the number and position of your widget areas is dependent on the theme you are using.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Customizer.jpg\" class=\"attachment-full size-full\" alt=\"Customizer\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Customizer.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Customizer-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Customizer-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Customizer-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]For example, say we wanted to add a widget to the left side of our footer, which is currently empty. We will find the area in the widget menu (Footer Top Area \u2013 Column 1), and click on it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Footer-Column.jpg\" class=\"attachment-full size-full\" alt=\"Footer Column\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Footer-Column.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Footer-Column-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Footer-Column-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Footer-Column-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]From here we can add a block to our widget. We will click on the <strong>plus<\/strong> sign and select an <strong>Image<\/strong> block for this area.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"624\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Add-Image-block.jpg\" class=\"attachment-full size-full\" alt=\"Add Image Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Add-Image-block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Add-Image-block-300x193.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Add-Image-block-768x495.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Add-Image-block-620x399.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We will then choose an image from our media library to populate it \u2013 the logo for our Qi Theme.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"650\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Image-Added.jpg\" class=\"attachment-full size-full\" alt=\"Image Added\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Image-Added.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Image-Added-300x201.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Image-Added-768x515.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Image-Added-620x416.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This way, you can locate and edit all the widget areas on your homepage.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-edit-your-homepage-using-gutenberg\"><\/a>How to Edit Your Homepage Using Gutenberg<\/h2>\n<p>[\/vc_column_text][vc_column_text]WordPress\u2019s default editor, Gutenberg, allows you more flexibility than the theme customizer. In order to use the Gutenberg block editor to edit a page, simply select the page you wish to edit from the <strong>Pages\/All Pages<\/strong> section of your WordPress dashboard.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"585\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Pages-All-Pages.jpg\" class=\"attachment-full size-full\" alt=\"Pages All Pages\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Pages-All-Pages.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Pages-All-Pages-300x181.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Pages-All-Pages-768x464.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Pages-All-Pages-620x374.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]From here, you can simply edit a page as you would any other page or post. Of course, your theme will likely come with the basic layout (or template) of the home page, or, indeed several. You can select among those from the <strong>Template<\/strong> menu in the <strong>Page<\/strong> tab of the right hand-side bar. Advanced users may also choose to <a href=\"https:\/\/qodeinteractive.com\/magazine\/create-wordpress-custom-page-template\/\">create their own page template<\/a> and implement it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"591\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Page-Template-Gutenberg.jpg\" class=\"attachment-full size-full\" alt=\"Page Template Gutenberg\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Page-Template-Gutenberg.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Page-Template-Gutenberg-300x183.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Page-Template-Gutenberg-768x468.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Page-Template-Gutenberg-620x378.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the case of our Qi Theme, you can find a lot of layout settings in the menu below. These vary from theme to theme, and some themes don\u2019t even have these settings at all, and pages need to be constructed from scratch.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The page we are working on has numerous settings distributed among various tabs, some of which are the same as the customizer settings, while others are specific to the theme. We can\u2019t go into the details here, but <a href=\"https:\/\/qodeinteractive.com\/qi-theme\/detailed-overview\/\">a detailed overview of the Qi Theme<\/a> is available, as well as <a href=\"https:\/\/www.youtube.com\/c\/QodeInteractiveVideos\/videos\" target=\"_blank\" rel=\"noopener\">a multitude of video tutorials<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"680\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Qode-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Qode Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Qode-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Qode-Settings-300x211.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Qode-Settings-768x539.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Qode-Settings-620x435.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can also add blocks as you would when <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-create-wordpress-blog-post\/\">creating a post<\/a> in Gutenberg: simply click on the <strong>plus<\/strong> icon and select a block. We will go with a <strong>Quote<\/strong> block here.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Add-Quote-Block.jpg\" class=\"attachment-full size-full\" alt=\"Add Quote Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Add-Quote-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Add-Quote-Block-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Add-Quote-Block-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Add-Quote-Block-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We will fill out the quote block fields with a quote we like, and the quote will appear on our page. Since the page has a header, and since this is the first block up, it ought to appear right below the header.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Fill-Quote.jpg\" class=\"attachment-full size-full\" alt=\"Fill Quote\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Fill-Quote.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Fill-Quote-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Fill-Quote-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Fill-Quote-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And this is what it looks like in the preview!<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"491\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Gutenberg-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Gutenberg-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Gutenberg-Preview-300x152.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Gutenberg-Preview-768x389.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Gutenberg-Preview-620x314.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And if you want to remove a block, all you need to do is click on the ellipsis menu (\u00b7\u00b7\u00b7) which appears when you hover over a block, and select <em>Remove Block<\/em> from it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"561\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Remove-Block.jpg\" class=\"attachment-full size-full\" alt=\"Remove Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Remove-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Remove-Block-300x174.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Remove-Block-768x445.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Remove-Block-620x359.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There are blocks for text in various forms, columns, images and other media, as well as interactive features from accordions to buttons to tabs \u2013 if you include some of the free and\/or premium addons. Combine them with your theme options for best results: pick the functionalities you need and the aesthetic features which fit your brand and your style the best.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-edit-your-homepage-using-elementor\"><\/a>How to Edit Your Homepage Using Elementor<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you prefer Elementor, the premier visual editor for WordPress, you probably already know you can edit your homepage, as well as any other page, using it, while previewing your work in real time.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will be using our own <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\">Qi Addons For Elementor<\/a> plugin to supplement the already great range of options Elementor\u2019s free version comes with. With Qi Addons, you get 60 brand new beautifully designed widgets for absolutely free \u2013 all you need is the latest version of Elementor, and Qi Addons will work with the free version, too.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In order to edit your homepage with Elementor, you first need to have installed and activated Elementor (and, optionally, though we highly recommend it, Qi Addons). Open the page as you normally would, and click the <strong>Edit with Elementor<\/strong> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Edit-With-Elementor.jpg\" class=\"attachment-full size-full\" alt=\"Edit With Elementor\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Edit-With-Elementor.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Edit-With-Elementor-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Edit-With-Elementor-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Edit-With-Elementor-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If your theme comes with page templates, you can activate them by clicking on the <strong>folder<\/strong> icon.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Folder-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Folder Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Folder-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Folder-Icon-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Folder-Icon-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Folder-Icon-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Your Elementor library contains ready-made solutions for a number of layouts and functions, which you can choose from the <strong>Blocks<\/strong> and <strong>Pages<\/strong> templates \u2013 and our Qi Theme offers a whopping 100 complete website layouts, images and all, for free. If you have created and saved a template earlier, you can choose one from the<strong> My Templates<\/strong> tab. Further on the right hand-side we find the<strong> Import, Sync<\/strong>, and <strong>Save<\/strong> buttons. We like this basic layout, so we won\u2019t be changing it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"647\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Elementor-Templates.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Templates\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Elementor-Templates.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Elementor-Templates-300x200.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Elementor-Templates-768x513.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Elementor-Templates-620x414.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, say you want a two-column structure immediately below your header, with a video to the right and some <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/highlighted-text\/\">Qi Addons-powered highlighted text<\/a>, explaining what your video is about, to the left. The first thing you need to do is split up your active space into two columns. There are many ways to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-create-wordpress-columns\/\">create columns in WordPress<\/a>, and, in Elementor, you can do it easily by using the <strong>Inner Section<\/strong> widget.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Inner-Section-Elementor.jpg\" class=\"attachment-full size-full\" alt=\"Inner Section Elementor\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Inner-Section-Elementor.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Inner-Section-Elementor-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Inner-Section-Elementor-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Inner-Section-Elementor-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This creates a structure of two columns of equal width. To change that, we will select the structure section in the <strong>Layout<\/strong> tab of the section, and pick a different column ratio. We will go with 33, 66 to leave as much room for the video as possible.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Layout-Structure.jpg\" class=\"attachment-full size-full\" alt=\"Layout Structure\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Layout-Structure.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Layout-Structure-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Layout-Structure-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Layout-Structure-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To add a video, you need a video element. You can simply drag it from the left-hand side menu.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"549\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Drag-Video.jpg\" class=\"attachment-full size-full\" alt=\"Drag Video\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Drag-Video.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Drag-Video-300x170.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Drag-Video-768x435.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Drag-Video-620x351.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We have populated it with one of the tutorial videos on <a href=\"https:\/\/www.youtube.com\/c\/QodeInteractiveVideos\" target=\"_blank\" rel=\"noopener\">our YouTube channel<\/a> simply by pasting the link into the <strong>Link<\/strong> field. There are several video options below which we won\u2019t be going into, as they are pretty much self-explanatory and would take a lot of space in this tutorial.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Video-Link-Added.jpg\" class=\"attachment-full size-full\" alt=\"Video Link Added\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Video-Link-Added.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Video-Link-Added-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Video-Link-Added-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Video-Link-Added-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, we will add our highlighted text. To start, simply find the widget and drag it to the smaller section.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"672\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Drag-Highlighted-Text.jpg\" class=\"attachment-full size-full\" alt=\"Drag Highlighted Text\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Drag-Highlighted-Text.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Drag-Highlighted-Text-300x208.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Drag-Highlighted-Text-768x533.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Drag-Highlighted-Text-620x430.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We have entered some text to replace the placeholder, and styled it to fit the space best. This took us about two minutes in real time, but, examining the widget\u2019s many options in detail is beyond the scope of this article \u2013 we have a whole <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-highlight-text-in-wordpress\/\">tutorial for the highlighted text widget<\/a>. With some little effort, you have an eye-catching feature for your home page.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Style-Highlighted-Text.jpg\" class=\"attachment-full size-full\" alt=\"Style Highlighted Text\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Style-Highlighted-Text.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Style-Highlighted-Text-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Style-Highlighted-Text-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Style-Highlighted-Text-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Of course, there is no shortage of useful and interesting Elementor features which you can use to their best effect with the editor\u2019s WYSIWYG interface \u2013 especially if you supplement it with the Qi Addons widget.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-edit-your-homepage-using-the-classic-editor\"><\/a>How to Edit Your Homepage Using the Classic Editor<\/h2>\n<p>[\/vc_column_text][vc_column_text]Finally, you may prefer the Classic Editor. You can use it to edit your homepage old school style. To do that, you need to install and activate the <a href=\"https:\/\/wordpress.org\/plugins\/classic-editor\/\" target=\"_blank\" rel=\"noopener\">Classic Editor plugin<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you have done that, simply access the page from the<strong> All Pages<\/strong> section of your WordPress dashboard.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/All-Pages.jpg\" class=\"attachment-full size-full\" alt=\"All Pages\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/All-Pages.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/All-Pages-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/All-Pages-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/All-Pages-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Classic editor was designed to accommodate HTML-savvy users, so we don\u2019t recommend it for the general, coding-unsavvy population. However, some features are easy enough to use. To start with, we will populate our homepage with some <a href=\"https:\/\/qodeinteractive.com\/magazine\/lorem-ipsum\/\">placeholder text<\/a>, as a homepage is typically not a bad place for an About text. You can find the text formatting tools in the header of the editor.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Classic-Editor-Text.jpg\" class=\"attachment-full size-full\" alt=\"Classic Editor Text\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Classic-Editor-Text.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Classic-Editor-Text-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Classic-Editor-Text-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Classic-Editor-Text-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, say you want to add some media to your homepage. Using the <strong>Add Media<\/strong> button, you can easily add media from your media library. To add media not hosted on your website, the easiest thing to do is to simply paste the URL into the body of the page and hit enter and let WordPress do it for you.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Having clicked on the <strong>Add Media<\/strong> button, all you need to do is select an image from your media library, <a href=\"https:\/\/qodeinteractive.com\/magazine\/image-titles-and-alt-text-in-wordpress\/\">add attributes such as image alt text<\/a>, caption, and others, if needed, and click the <strong>Insert into page<\/strong> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Insert-Into-Page.jpg\" class=\"attachment-full size-full\" alt=\"Insert Into Page\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Insert-Into-Page.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Insert-Into-Page-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Insert-Into-Page-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Insert-Into-Page-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can adjust the style and display settings for the image in the on-hover menu.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"590\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Adjust-Image.jpg\" class=\"attachment-full size-full\" alt=\"Adjust Image\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Adjust-Image.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Adjust-Image-300x183.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Adjust-Image-768x468.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Adjust-Image-620x378.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This is what the <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-changes-not-showing\/\">changes we made<\/a> to the homepage look like in the preview.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"486\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Classic-Editor-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Classic Editor Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Classic-Editor-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Classic-Editor-Preview-300x150.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Classic-Editor-Preview-768x385.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Classic-Editor-Preview-620x311.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you are a tech-savvy user, you can switch to the <em>Text<\/em> view of the classic editor in order to leverage your HTML knowledge to full capacity. Remaining in the <em>Visual<\/em> tab, you get a better impression on what things will look like. If you choose to use the Classic editor, we strongly suggest you bone up on your HTML.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As you can see, possibilities abound. With WordPress, anyone can make a website, and there are literally countless possibilities to choose from. Changing and customizing your WordPress homepage alone is virtually impossible to cover in totality, with its myriad choices of editors, features, widgets and styles. We do, however, feel we\u2019ve given you a good head start.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Change your WordPress homepage to something which perfectly fits your brand and style &#8211; we will show you how.<\/p>\n","protected":false},"author":16990,"featured_media":33442,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[193,72,4,13],"class_list":["post-33400","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-elementor","tag-gutenberg","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/33400","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=33400"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/33400\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/33442"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=33400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=33400"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=33400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}