DreamHost Website Builder Tutorial (2024) 🔥 WP Website Builder (Step by Step) Tutorial Hosting
In this video, I’m going to be doing a DreamHost website builder tutorial going over creating a website with the DreamHost WP website builder step by step from start to finish. I’ll be going over every aspect of the DreamHost WP website builder, even going over how to
Do the SEO setup of the pages you create so you are set up for success in your website creation journey. I’ll also be providing you with a DreamHost web hosting discount that will get you anywhere from 63% off up to 79% off over Dreamhost’s monthly pricing, depending on the Dreamhost
Hosting plan you choose, + you’ll get a free domain name on annual plans. Let’s get started with the DreamHost WP website builder tutorial. The first thing you want to do to create your site with the DreamHost website builder is
To click the link in the description below so you can be taken to DreamHost and so you can take advantage of getting 63% to 79% off the monthly pricing + get a free domain name on annual plans. A little disclosure.
The link is an affiliate link, meaning I’ll receive a commission from DreamHost at no extra cost to you. Plus you’ll get an awesome DreamHost discount. Once you click the link in the description below you’ll be on the DreamHost web hosting plans page.
Scroll down or hit the see all plans button to be taken down to the web hosting plans and pricing section. You’ll see two different plans you can choose from the Shared Starter and the Shared Unlimited plan. Above the plans you’ll see you can choose to pay for a monthly, 1-year, or 3-year term.
Something I want to note about the monthly term is you’ll only pay the introductory discounted price for the promotional term. After the promotional term it’ll renew at the full price of $7.99 for the Shared Starter plan and $13.99 for the Shared Unlimited plan.
For the monthly term you won’t get a free domain name. You’ll save the most money by going with the 1-year or 3-year term plus you’ll get a free domain name. Now let me go over the difference between the two DreamHost plans.
The Shared Starter plan is a great plan if you only need one website as this plan allows one website. This plan doesn’t include an email address ending in your domain name but you can add it for as low as $1.67 a month.
If you need more than one website than the Shared Unlimited plan is perfect as it allows unlimited websites. This plan allows unlimited email addresses to be created ending in your domain name. Once you decide on a plan and term click the sign up now button.
For this tutorial, I’m going to choose the Shared Unlimited plan. You’ll now be on the choose a domain page. If you went with an annual plan then you get a free domain name with your DreamHost purchase. You’ll see you can choose a domain later, register a new domain, or enter a domain if
You already have one. If you aren’t sure on a domain name now click choose a domain later and DreamHost will create a temporary domain for you to use and you can choose a domain name in the DreamHost dashboard after you’ve purchased DreamHost hosting.
To register a new domain click this and you can type in a domain name that you’d like. Click the search icon. If it’s available it’ll say congrats your domain is available. Click the add button. If you already have a domain name from another domain registrar click the I already have
A domain and enter the domain. Once you select one of these options you’ll now be on the secure checkout page. Over on the right hand side you’ll see domain privacy showing free. DreamHost offers free domain privacy with all domain names registered with them.
This protects your personal information showing in the public whois database so that spammers and telemarketers don’t get ahold of your information to flood your email or phone with offers of their services. DreamHost will show their default contact information instead of yours. You’ll see a few DreamHost additional options they offer here.
All of these are optional and I’ll go through them at the bottom of this page. Feel free to un-select anything now if you want too. Next, enter your card information. DreamHost also allows payments via PayPal. Below this section, you’ll enter your billing information and click the add credit card
Button if you chose to pay via a credit or debit card. You’ll now be at the account setup section where you’ll want to enter your account information to be used for your DreamHost account. The next section you can select additional options such as DreamShield Protection, DreamHost SEO Toolkit, and Google Workspace.
All of these additional options are completely optional and up to you whether or not you want any. DreamShield Protection will scan your website regularly to monitor its reputation and to find any malicious code, malware, out-of-date software, broken permissions, and more on your site.
If anything is found you are notified via email and in your DreamHost panel. If your site is scanned and your site is clean you’ll also be notified via email and in the DreamHost panel. This add-on is optional. The next additional option is DreamHost SEO Toolkit.
SEO Toolkit will give you guidance on things you can change or do within your site to make it more visible in search engines. SEO Toolkit will provide you with do it yourself tools, insights, and a personalized step-by-step SEO plan. Completely optional.
The next additional option is Google Workspace which will give you professional gmail at your domain name plus other Google Workspace tools like Google Drive Cloud, storage, Calendar, Meet, and more Google Workspace tools. Completely optional. Next, click the submit order button to complete your DreamHost purchase. DreamHost will now email you your receipt.
You’ll be taken to an order complete successfully page. You want to enter a password you want to be used for logging into the DreamHost dashboard. Click the continue to your control panel button once you’ve picked out a password. You’ll now be taken to the DreamHost dashboard.
You’ll see we are setting up your hosting service for you. This just takes a few minutes. Once it is done it’ll say setup has completed successfully. You can now manage your new website. We now want to install The DreamHost WP website builder. You’ll see WordPress in the left-side menu. Click this.
From the dropdown click WordPress. Click the learn more and install button. You’ll now be on the DreamHost one-click installer page. You’ll see install too with a select domain. Click this and choose the domain name you want to install the DreamHost WP website builder too. Where you see select a database.
It’ll say automatically create a new database. You’ll see Deluxe Install being selected along with the Install WP Website Builder. The deluxe install is optional. It’ll provide you with some great themes, standard plugins, and security enhancement. I’m going to keep mine selected. Click the install it for me now button.
You’ll now be taken to a success page. DreamHost will now begin installing WordPress within 10 minutes to your database. You’ll receive an email from DreamHost with instructions to configure your new software. Once you get the email it’ll have a link you’ll need to click to set your password. Input the password you want.
Once logged in you’ll be on the Bold Grid Inspirations page. You want to click the get started button. You’ll now see a bunch of themes you can choose from. Over on the left-hand side you can choose categories to view themes of that category.
If you hover over the theme and click it you can then see the theme up close on what it will look like. If you click the arrow button you can view other themes you can choose from. When you find a theme you want to select click the select button.
I’ll choose this theme for this tutorial. Once the theme loads you can then view the theme to see what it will look like. If you click the tablet device it’ll show you what it’ll look like on tablet devices.
If you click the mobile icon it’ll show you what it will look like on mobile devices. Over on the left under Page Set you’ll see it’ll say Base, Five Page, and Kitchen Sink. These are options on basic pages you can start with and functionality of your site.
You’ll see the base starts by giving you a Home page, About Us page, and contact Us page. You can add a blog to your site by toggling the blog to on. You’ll now see blog being added to the site. I’ll toggle the blog back to off.
Now I’ll show you the five page option. It’ll start you off with more pages to start from. You can add the blog by toggling it on. Now let’s go over the Kitchen Sink option. I’ll select kitchen sink. You’ll see the additional pages it’ll start you out with.
You can toggle the blog to on if you’d like a blog for your site. For this tutorial, I’m going to click five page. I’m going to have the blog toggled to off. You can toggle this on if you need a blog on your site. Click the next button to proceed.
You’ll now be on a page where you can put in your company and site title name, email, phone number, address, and any social media icons you want to use for your site. If you don’t want to display something you can click the do not display.
If you don’t want to fill something out on this page you don’t have too. Completely optional. This information is used for the contact information for your site. You can click a social media icon to add it. You can also remove the social media icons by clicking the x.
You can edit this information later which I go over in this tutorial so this is completely optional. I’ll click finish and install. Once the theme is done installing you’ll be in the WordPress dashboard. At the top in the menu if you hover over your site title name you’ll see visit site.
Click this to view your site. In the top menu you’ll see edit page. Click this to begin editing the page. You’ll be in the page editor where you can begin in creating your site with the DreamHost WP website builder drag and drop editor.
If you hover over an area you can begin editing that section. I’ll click on Quality Content Writing. I’ll change it to My Demo Website. Underneath, you can easily replace the text with whatever you’d like, like seen here.
You’ll see up at the top a bunch of things here to help make creating your site an easy process. If you click paragraph, you can change the text to different heading types, preformatted, and paragraph text. You can make the text bold.
You’ll see bulleted list, numbered list, you can change the alignment of the text. If you click the link icon you can insert a link that the text links out too. I’ll hover over website builder and click the link icon. Click the settings icon. You can then paste in the url.
You can select to have it open in a new tab, make the link a no follow link, have it be a sponsored link, or add UGC to the link. Down towards the bottom it’ll list out the pages and posts on your site.
You can easily click one or search for a page on your site to then automatically link the text to that page. Click the add link button to add the link. If you click the desktop view icon it’ll show you what the page looks like on desktop
While making edits, click the tablet icon to view what the site looks like on tablet devices, and click the mobile icon to view what the site looks like on mobile devices. Hover over this icon and you can click to change the text color.
You just highlight the text you want to change the color for and then click to change the color and choose the color you want. The text will change color. If you want to undo a change you made to your site click the undo icon to undo the changes
And click the redo option if you want to redo changes. There’s more options you can select from in this area and play with as you create your site. I’m going to click the button. You can easily change the text of the button to whatever you’d like.
When you click the button you can click the edit button and then click the settings icon to add a link to where the button links too. When you click the button you can also remove the link by clicking remove link.
Next, let’s go over how to change an image in the background for a section. I’ll click on the image. You’ll see the toggle bar here. Click on the background icon. Click section. If you click add media you can then upload or change an image to be used for this section.
Media library is where you can choose an image already uploaded in WordPress. If you click upload files you can then choose an image from your computer by clicking the select files button. If you click BoldGrid Connect Search you can type in the search field what type of image
You are searching for and it’ll pull up images you can add. From this main background image section. You can scroll through images and click to add to your site. If you click color you can change a color for the background, click pattern you can
Select a pattern for the background, click hover effects to add hover effects to the background. From the background image section if you click the settings icon you can then change the overlay color for the background image, position, size, and scroll effects if you want to add any.
Over on the left side you can change things like the padding, margin, border, animations, width, block alignment, and more. I’m going to click the back button. I’ll click add media. I’m going to select this image which I uploaded. I’ll click use this media.
The background image is now changed to the image for the section. I’ll now scroll down to the next section. You’ll see the image here. I want to change this to a different image. I’ll click the image. I’ll click the change icon image.
You can then choose an image you already have uploaded in WordPress, upload an image, or search with the BoldGrid Connect. I’ll click media library. I’ll select an image uploaded in WordPress. Click the replace button. You’ll see the force aspect ratio being selected.
I recommend keeping this selected as it’ll maintain consistency in the page design. You’ll see full image. Click full size and from the dropdown you can select different sizes for the image. I’ll keep it on full size. Over on the left side you can crop the image as you want.
Click the skip cropping or crop button. The image is now placed on the site. If you want to delete something in a section or on the page. Go to what you don’t want and click this menu icon and you can then delete it from the page.
If you want to duplicate something on the page. Click what you want to duplicate. Click the menu icon. Click the clone option. It’ll now clone it to the page. If you want to move something to somewhere else on the page just hover over it and you’ll see the move icon.
Click the move icon and you can then drag it to wherever you’d like too on the page. If you want to change the font on something on the page. Click that area. Click the menu icon. Click font.
Over on the right you can then click under font family and scroll through fonts to use on your site. You can change things like the font weight, font style. You can change the sizing of the text by moving the toggle over.
You can change the letter spacing and add effects to the font if you want. If you hover over a section on the page you’ll see this pop up with a plus and minus icon. You can click this to change the spacing of that section from the section above it.
Whenever you want to update changes you’ve made on your site click the update button found in the top right side of the editor. Now I want to show you how to add a completely new section to your site. I’ll scroll down to the next section. I’ll just click anywhere on the next section.
You’ll see the plus icon that says add block component. Click this. You’ll now see a bunch of options you can select from. Let’s start with the block. Click the block icon. Over to the right you’ll see block templates showing. You can scroll through to see the blocks you can choose from.
Up at the top you’ll see types. Click types and from the dropdown you can select different types of block templates you can view based on what you might be looking for. I’ll click About. It’ll now pull up block templates you can select from for an about page.
This makes creating your site quick and easy. If you hover over a block you like you can drag it over on the left side where you want to place it on the page. When you hover over a block you’ll also see add to page.
By clicking add to page it’ll add it to the top of the page. You can easily drag it to where you want it. You can easily drag any section of the page as you’d like. When you hover over a section of the page you’ll see the trash can icon.
Click this to delete that section from the page. You can change the zoom of the site by changing the toggle. You can click the undo icon to undo changes and redo icon to redo changes. Over on the top right you’ll see category.
Click the dropdown and you can choose between popular categories to find blocks based on category. Something I want to note is you can use any of these categories even if your site isn’t related to it. This is a good way to find templates you want to use for creating your site.
You can easily replace the text and images to make it your own. I’ll click fashion as an example. It’ll pull up fashion block templates you can choose from. When you are ready to proceed click the check mark icon button so the changes save.
Scroll through the page and you’ll see the sections are now added to the site editor so you can begin editing. I’m going to go ahead and click a section and click the add block component icon. I’ll select layout. This is where you can select a layout for that section of the page.
I’ll select this one. It’ll populate on the page. You can then start editing and putting in your content as needed. If you want to add something to a section or anywhere on the page. Click somewhere in the section. Click the add block component icon.
You can scroll through lots of things you can add to your site. When you find what you want, hover over it. You can then drag it to where you want it on the page and then you can edit it how you want it.
Next, I’m going to scroll all the way down on the page. Let’s say you want to have maps on your site that has your location. Click the map. Click the pencil icon where it says edit map. You can now choose which map to use. I’ll select this one.
You’ll see map settings and then the size. Click it and you can choose the size of the map to put on your page. I’ll click custom. I’ll just put something in random here to show you. You’ll see location search. You can type in the address and search it here.
I’ll just put New York and click search. I’ll click insert in to page. It’ll now show up on the page. An easy way to make edits to pages on your site is when viewing your site click the page you want to go to and click edit page to begin editing that page.
Next, let’s go over how to edit or add a contact form for your site. This is also how you can add an email newsletter to your site as well. Over on the left-side menu. You’ll see WP Forms. Hover over it and you can click on add new to begin adding a new form.
You’ll see welcome to the form builder. Click the let’s go button. Up here at the top you want to name your form. I’ll name this one contact form. You can now scroll through a lot of pre-made templates to help the form building process quick and easy.
Where you see Pro you’ll have to have the pro version of WP forms to use these. If you hover over a form. You can click view demo to see a demo of the form to get an idea on it. When you want to use the form click the use template button.
Over on the left you can search for templates or choose through categories to find templates for that category. I’ll choose the simple contact form for this tutorial. I’ll click the use template button. It’ll pull up the form builder where you can easily create and edit the form.
You can hover over an area to delete it or duplicate it. You can click an area and drag it to wherever you’d like it. If you want to add something you can drag it over from the side.
If you click Field Options you can click on a part of the form and then make changes from the side. You can select to make this part of the form a required or not required part to fill out.
If you click advanced you can click the part of the form you want to change and you can select between the size of the form field for that area and then change if you want anything to show in the form field where they input their information.
You can click preview to preview the form. Click save to save changes. I’ll click the x button to exit the form builder. I’m here on the page editor. I’m going to click into a section. To add the contact form, newsletter sign up form, or any form you’d like click the plus icon.
Scroll down to the bottom and you’ll see WP forms. Click this and drag it over to where you want it. You’ll see the dropdown that says select your form. Click this and you can choose the contact form or any form you’ve created to be placed here. You’ll see the form is now showing.
You can select to have the form name and form description show if you’d like. Before I go over how to edit the menu of your site, header, footer, and adding a logo and other customizations let me go over a little about WordPress.
To go to the WordPress dashboard from the page editor just click dashboard in the left-side menu. If you are viewing your site while logged into WordPress. Hover over your site title name and click dashboard. If you click all pages it’ll showcase all the pages on your site.
If you hover over the media tab and click on library it’ll show you all the images you have uploaded in WordPress. If you click add new at the top you can then upload or drag in an image into WordPress.
If you hover over posts and click add new you can create a new blog post for your site. If you click all posts, it’ll pull up all the posts you have on your site. If you click the comments tab you will see all the comments you have on your blog posts.
You can easily reply, mark it as spam, or trash the comment. If you hover over the plugins tab and click add new you can then search for or browse plugins to add to your site. Any feature or customization you might want on your site, more than likely there is a plugin for that.
Next, I want to cover the menus for your site. If you hover over the appearance tab in the side menu you’ll see Menus. Click Menus. This is where you can edit the menu on your site along with creating new menus.
You can add new pages to the menu or drag a page to a different order. If you click the tiny arrow you can change the name of it or completely delete it from the menu. If you want to create a completely new menu you can click create a new menu.
If you click on the select a menu to edit you can select between the different menus you’ve created and have on your site to begin editing. Click the select button to pull up the menu to begin editing. Now let me show you how to make changes to the header area of your site.
From the WordPress dashboard, hover over the Appearance tab in the side menu. Click on Customize. You’ll now be on the Customize page. Click design. Click Header. Click site header layout. Click select layout. You can now scroll through a bunch of different header layouts if you want to change the way
The header area of your site looks. I’ll click this one as an example. You’ll see the header layout changed to that. Click the Publish button to save your changes. Next, I want to go over editing the footer area of your site. From the Customize page.
Click design just like we did with the header. Click Footer. Click Footer Templates. Enable footer templates should be enabled already. If it isn’t just enable it. You want to click the button that says click here to create a new footer template.
You’ll now be taken to a page to begin the footer edit process. You’ll see Crio Pro comes with some sample templates to help get you started. Would you like to install these templates now? Click yes. It’ll now begin installing the sample footer templates. You’ll see two different footer samples.
If you hover over them and click view you can view what it would look like. You can edit and customize further but this is a good starting point. I’m going to choose the three column footer with menu. I’ll hover over it and hit the edit button to begin editing.
Up here at the top you can name it whatever you’d like if you want to rename it. The editing process is going to be just like editing the page like I’ve shown you. If you want to remove something, hover over the area and click the menu icon.
You can then delete it or make different changes that you’d like. If you click the plus icon you can then add in whatever you’d like by clicking it and dragging it in where you’d like it. If you click the preview changes button in the top right you can then preview changes
You’ve made to the footer area. Don’t worry about the nothing found that you see as this isn’t an actual page to your site. When you are ready to save your changes click the update button. Now let me go over how to place the footer that you created to the site.
From the Customize page. Click design. Click Footer. Click Footer Templates. You’ll see Use Customizer settings. Click this and from the dropdown you can select the footer that you created. I’ll click the footer that I created. It’ll now place it on the page for the footer area. If you click the pencil icon.
You’ll see Footer Colors. You can click this if you want to change the colors of the footer background or link colors. Make sure you hit publish to save your changes. Here’s the footer I created live on the site.
Now let’s go over how to make customizations to your site like the logo, favicon, and colors of your site. From the Customize page. If you click color palette you can then choose the colors for your site. Click the suggest palettes button and it’ll suggest palettes for your site that you can use.
You can keep clicking suggest palettes until you find the color you want. If you want to change the colors of your site manually with colors you want. Just click on a color where you see activate palette. You can then change the color or type in the color code here to change the color.
Hit publish when you are done to have the changes save and publish live on your site. Next, if you click fonts. You can then change the fonts for your site based on main text and headings. You can change the sizing of the text here.
At the bottom you can select a color for the headings font color. I’m going to click the back button. Click design. Click Header. Click site title and you can change the site title of your site. I’ll click the back button. I’ll click logo and icon.
If you click select logo under logo you can upload the logo of your site or choose the logo if it’s already uploaded in WordPress. Under site icon if you click select site icon you can then upload the site icon which is
Also known as the favicon for your site or choose it if it’s already uploaded in WordPress. I’ll click the back button. If you click tagline. You can put in the tagline you want to have for your site. The last thing I want to cover is the SEO of your site.
I’m here in the page editor for the main home page. You’ll want to do this for every page of your site. Scroll down to the bottom. You’ll see AIOSEO Settings. You can change the page title and meta description of the page for search engines.
You can just click in and backspace to delete what is there to put what you want if you’d like. It’ll give you the Snippet preview above to show what it will look like. You can choose between desktop and mobile devices to preview.
The Focus Keyword is what the main keyword you want your page to rank for. Down at the bottom you’ll see Page Analysis. This will give you guidance to help the SEO of your page and to rank better. Keep in mind this is just recommendations to help.
Getting all these green doesn’t mean you’ll rank at the top of search engines. These are best practices to follow. It’ll give you guidance on Basic SEO, Title, and readability. If you hover over the All In One SEO in the left side menu and click the launch the setup
Wizard it’ll walk you through some SEO settings you can setup for your site as a whole. You now know how to use the DreamHost WP website builder to create your site with DreamHost hosting with the drag and drop editor. That is my DreamHost website builder tutorial.
If you have any questions, get in touch in the comments as I’m here to help you with anything you need. Give this video a thumbs up and leave us a comment letting us know if the tutorial was helpful or not as the comments help improve our tutorials.
Be sure to subscribe to our channel for more DreamHost hosting tutorial videos.
DreamHost Website Builder Tutorial (2024) | WP Website Builder (Step by Step) Link to DreamHost: https://wpcupidblog.com/go/dreamhost Disclosure: We receive a commission from DreamHost if you use our link, which costs you ZERO and only SAVES you money. In this DreamHost Website Builder tutorial, you will learn how to create a DreamHost website using DreamHost WP Website Builder. The WP website builder offers many themes to choose from and you can easily edit your WordPress site using drag and drop. In this DreamHost tutorial, I'll go through everything from signing up for DreamHost, installing and setting up the DreamHost website builder, to creating, building, and building a website using DreamHost and the WP website builder. By the end of this video, you will know how to successfully build a website with DreamHost using the DreamHost website builder. My honest review of DreamHost Website Builder is that DreamHost makes building a website quick and easy and I highly recommend WP Website Builder. Link to DreamHost: https://wpcupidblog.com/go/dreamhost Subscribe to our channel: https://www.youtube.com/channel/UCNj8vKK87snkArzb1oFxHrg Let's stay connected Twitter: http://twitter.com/wpcupid Facebook: http://www.facebook.com/WP-Cupid-644671312372625 Pinterest: https://www.pinterest.com/wpcupid Sponsorship: hello@wpcupidblog.com Business inquiries: hello@wpcupidblog.com Music used in the video: This feeling – Atch https://soundcloud.com/atch-music Creative Commons – Attribution 3.0 Unported – CC BY 3.0 Free Download / Stream: https://bit.ly/atch-this-feeling Music sponsored by Audio Library https://youtu .be/6c-QjUUOUEE For more web hosting tutorials, visit our website: https://wpcupidblog.com/
#DreamHost #Website #Builder #Tutorial #Website #Builder #Step #Step
https://i.ytimg.com/vi/yI8KTgdjr1c/hqdefault.jpg
