How To Create A Portfolio Website Using WordPress 🔥 | WordPress Portfolio Website Tutorial!

In this WordPress Portfolio website tutorial, I’m going to be going over how to create a Portfolio website using WordPress step by step from start to finish. I’ll be showing you how to access professional pre-made website templates to make creating your Portfolio website an easy process. I’ll also be going over how to make your Portfolio website using one of the most popular drag and drop editors Elementor page builder so you can create a professional looking Portfolio website via drag and drop.

The great thing about this WordPress Portfolio website tutorial is it is extremely easy to follow along with even if you have no experience in starting and creating a Portfolio website. At the end of this video, you will have your Portfolio website successfully created. The first step I'm going to cover is how to choose and register your own domain name for free. A domain name is the name of your website. For example, the website name for youtube is youtube.com. Step 2 I'll be going over how to

choose a hosting provider. An easy way to think of hosting is it's like the physical storefront of your website. To have a website, you have to have hosting. Step 3 is going over building your site with WordPress and creating your WordPress Portfolio website using professional pre-made templates and building your site using the most popular drag-and-drop editor. Let's get started with the WordPress Portfolio website tutorial for beginners video. The first thing you want to do to create your sit

e is to click the link in the description below to be taken to Bluehost so you can take advantage of our exclusive Bluehost discount, where you will be getting a free domain name and up to 73% off web hosting for your website. Make sure you click the link in the description to get this great deal. A little disclosure. The link is an affiliate link, meaning I'll receive a commission from Bluehost at no extra cost to you. Plus, you'll get an awesome Bluehost discount. A little about Bluehost. Blue

host powers over 2 million websites worldwide. They are also recommended by WordPress.org since 2005. They provide 24/7 support via chat, email, and phone. And they have a 30-day money-back guarantee. If, for any reason, you are unhappy, you can cancel and get a refund within the first 30 days. Once you click the link in the description below, you'll be on the Bluehost page. Click the get started button. You'll now be on the Bluehost plans page. You'll see four different plans you can choose fro

m. The Basic, Choice Plus, Online Store, and Pro Plan. You’ll see the Bluehost hosting terms you can choose from are 12 and 36 months. You’ll get the lowest pricing per month with the 12-month term. You’ll save more long term if going with the 36-month term. The Basic plan is a great plan if you are going to have just one site. This plan comes with one website, and 10 GB SSD Storage. The Choice Plus plan allows 3 websites and comes with 40 GB SSD Storage. The Choice Plus plan comes with free dom

ain privacy, free automated backups for 1 year, and malware scanning. Domain Privacy protects your personal information from the public and will show Bluehost’s default contact information instead of yours in the public whois database. The automated backup will backup your site daily and will allow you to restore your site to a previous backup with a click of a button in case something happens to it like a website crash or an editing mistake. Malware scanning will scan your website for malware o

n your site and notify you if malware is found. The Online Store plan comes with 3 websites, 40 GB SSD Storage, and everything the Choice Plus plan comes with. This plan is good if you are going to have an online store as it comes with a bunch of extras like an exclusive store theme, store analytics, and extra E-commerce features for your online store like unlimited products, secure online payments, bookings and appointments, shipping labels, product search and filtering, gift cards, wishlist, a

nd customer account creation. Something I want to note is you can have an e-Commerce site with the Basic, Choice Plus, or Pro plan as well. You just won’t get the extra e-Commerce features the Bluehost online store plan provides. The Pro plan comes with 5 websites, 100 GB SSD Storage, and features such as the domain privacy, daily backups, and malware scanning. The Pro plan also includes a free dedicated IP and optimized CPU resources. With a dedicated IP instead of your site sharing the same IP

address with others, you’ll have your own IP. Optimized CPU resources is good for high-traffic sites or resource heavy sites. The Pro plan provides more speed and power for your site. For most, the basic, choice plus, or online store plan is what you’d want to choose from. You can always upgrade to the Pro plan as your site traffic grows to a high volume. I’m going to choose the Basic plan for this tutorial. Once you decide on a plan to choose click the select button. You’ll now be on the domai

n page where you can choose your free domain name for your site. You can type in and search available domains under the create a new domain. If you already own a domain name you can enter it in where it says use a domain you own. If you can’t decide on a domain name you can click the create my domain later link and you can choose your free domain name at a later date in the Bluehost dashboard. Click next to proceed to the next step. You’ll now be on the create your account page. You now want to

input your account information. Next, is the package information section. Next, is the Bluehost package extras section. What you see here can vary on the plan you chose as some plans come with some of these, or if you didn't choose a free domain name Domain Privacy won’t show. All of these Bluehost package extras are completely optional and up to you whether you want any of them or not. First is eCommerce. eCommerce can easily turn your website into an online store. With this package extra you’l

l get WordPress and WooCommerce installed for you. You’ll also receive specialized eCommerce features allowing your customers to purchase products and pay for them with popular payment processors like PayPal, Stripe, and Venmo. You can also book appointments and service requests, create wishlists, and custom gift cards. You’ll also receive customized my account dashboards for all your customers to track orders, review past purchases, edit profile information, and more. If you are going to have a

n eCommerce site this package extra makes things easier for you. You can also do these things without this package extra it’ll just take manual setup and will not be automatic. Next, is Domain Privacy + Protection. I do recommend domain privacy + protection as it'll keep your personal information private so that spammers and telemarketers won't have access to your personal information and contact you by phone and email with offers of their services. When you register a domain name no matter what

company you choose the domain goes into the public whois database as domain names are regulated. If you select domain privacy + protection it'll show Bluehost’s default contact information instead of yours. Highly recommend domain privacy + protection. Next, is Codeguard Basic. This will backup your site daily and you can restore your site to a previous backup with a click of a button with their one-click restore. An example of where this package extra can be good is if your site gets hacked in

to or you mess something up while creating it, or editing it you can restore it to the version right before whatever happened took place and everything will be back to normal. The next addon is Yoast SEO Premium. Yoast is the #1 WordPress plugin for SEO. Something I want to note is Yoast SEO is a free plugin you can download in WordPress. Yoast SEO Premium comes with additional features such as full access to Yoast SEO academy that helps you learn about SEO, 24/7 Premium support, it’ll save time

and spot ranking opportunities with Yoast SEO workouts, prevent your visitors from ending up on dead links, content quality and link suggestions as you write your content, you can view your blog posts and pages as they would show on search engines and social media posts to help you optimize better. In my opinion, the Yoast SEO free version is all you need as it is super helpful in guiding you to optimize your site for SEO. Next, you’ll see Single Domain SSL. Bluehost does come with a free SSL C

ertificate for your site so this add-on isn't necessary unless you want to upgrade to a Positive SSL Certificate which will allow you to show a site security badge on your site if you'd like and with the positive SSL Certificate you'll have a $10,000 limited guarantee warranty by Comodo which protects your customers. Next, you will see Sitelock Security Essentials. This add-on checks your website daily for malware and protects your site from hackers and malicious attacks. It will notify you if y

our site has been hacked into and malicious code has been placed into it. Sitelock Essentials also removes malware automatically. This add-on can be beneficial and give you peace of mind if your site were to get hacked into and malware is placed on it. It isn’t necessary though. The next add-on is Professional Email. This package extra provides you with an email address ending in your domain name along with other features provided by Bluehost such as shared calendar, contacts, and tasks. OX Docu

ments like text, spreadsheet, and presentation. 25 GB Cloud Storage, and enhanced Spam and Virus Protection. I do want to note that Bluehost does come with free email addresses ending in your domain name so this add-on isn't necessary unless you really want to utilize all the added features provided by Professional Email. The next add-on is Google Workspace Business Starter. This package extra provides you with an email address ending in your domain name along with other features provided by Goo

gle workspace such as Gmail, calendar, chat, cloud storage with drive, video conferencing with meet, and many more Google workspace features. I do want to note that Bluehost does come with free email addresses ending in your domain name so this add-on isn't necessary unless you really want to utilize all the added features with Google workspace. Next, enter your payment information in and click the submit button. Bluehost will now email you your Bluehost receipt. You are now directed to a page w

here you’ll see your Bluehost account has been successfully created. Click the create password button. Next, enter a password to be used for your Bluehost account. You’ll see your user id for your account listed. Click the create password button. WordPress will begin installing. Once it is done, you’ll be directed to a make your dreams a reality page. Click the start setup button. It’ll now ask you what your experience with WordPress is. Select the one that fits your experience. I’ll click I’m a

n expert. Next, it’ll ask you what type of site you are creating. I’ll click business. Click the continue setup button to proceed. It’ll now ask you a subcategory for the category you chose. Select one that fits or type it in. Click the continue setup button. Next, it’ll ask you your top priority for your site. If you don’t want to do this part feel free to click skip this step. I’ll click skip this step. Next, you can input your site title, site description, upload a logo, and under social medi

a icons you can input any social media profiles you have for your business. This step is completely optional and you can input these in WordPress anytime you’d like. I’ll be covering this in the tutorial. I’ll click skip this step. You’ll now be on the tailor your theme page. For this tutorial, we aren’t going to be using this theme. I’m going to show you how to access professional WordPress themes and create your site via drag and drop. I’ll just click the next button. It’ll now show you the de

sign of the theme. If you want to use another theme just click the next button. We won’t be using this theme for this tutorial so I’ll click next. On this page, I’ll click the next button. On this page, I’m not going to worry about what is selected. I’ll click the next button. On the page template page, I’ll just click the next button. Next, you’ll be on the key features page. I recommend keeping what is selected and clicking the next button. You’ll now be on the your site is ready page. Click t

he complete setup button. You’ll now be taken to the WordPress dashboard. From here you’ll see your in the Bluehost tab in the left-side menu. From here, If you click Bluehost account it’ll take you to your Bluehost control panel. You can also get to your Bluehost control panel by logging into Bluehost. In the left-side menu click hosting. If you click edit site, it’ll take you to your WordPress dashboard where you can begin in creating and editing your website. You’ll see your Bluehost nameserv

ers are listed here below in case you need them. Before we choose a theme and start editing it, we want to change our domain name to be secure using https with the free SSL Certificate. I’ll click edit site to be taken to WordPress. I’ll Hover over Settings in the left-side menu. Click General. You’ll see WordPress Address URL and Site Address URL. Change these to https instead of the http. I’ll just add an s behind the http for both. Scroll down and click save changes. It’ll now log you out of

WordPress because we changed the url to https. Just log back in. Now I want to show you how to access free professionally designed WordPress themes and how to make any of these themes a Portfolio website. To pick out a theme for your site. On the far left, you will see tabs. Find the Appearance tab and hover over it. Click themes as this is where you can pick out a theme for your site. Next, Click add new theme. You'll now see WordPress themes you can choose from. There’s thousands of free theme

s to choose from. Now I want to show you how to access free professionally designed WordPress themes and how to edit them easily with a drag and drop editor. Type in Astra in the search field. Click the install button. Once it is done installing click the activate button. Once it is done activating the theme you want to find the plugins tab in the side menu. Click add new. In the search field type in starter templates. You want to click install on it. Then click activate. Hover over the appearan

ce tab in the side menu. Click on starter templates. You will now see how would you like to build your website? I’ll select the classic starter templates. Click the build with templates button. Choose Elementor for the page builder. It’ll now showcase a bunch of WordPress themes you can build your site with using drag and drop. You can type in the type of website you want to create to pull up templates based on that. You’ll see a bunch of categories you can hover over and select to build your si

te. If you click a theme it’ll show you what it will look like so you can preview it. Click the x button to go back to the themes page. Something I want to mention, any of the templates no matter the category and what they are called can be used for your Portfolio website. You can easily change and edit the templates to what you’d like when creating your Portfolio site. Just find a template you like, and then you can start making it your own no matter what category the template is in. If you hov

er over the Personal Sites category. You’ll see Portfolio & CV. Click this to pull up templates that are great for Portfolio websites. There are a lot of great templates to choose from under this category. Select a theme you want. For this tutorial, I’ll choose this theme here and then we will make it our own to be a Portfolio website. You can upload a logo if you’d like. You can do this at a later time so if you don’t have one now no worries. I cover this later in the video. Click the skip and

continue button. You now want to choose the colors and font for your site. You can update these at a later time or change them whenever you’d like. I cover this later in the video. I’ll choose this one for this tutorial, click the continue button. You’ll now be on the tell us a little about yourself. You don’t have to fill this out if you don’t want too. Just make sure under advanced options you have each one selected. Click the submit and build my website button. It’ll begin building your websi

te. Once it is done you’ll be on the congratulations page. Click the view your website button. It’ll now take you to your website and what it looks like. Before we begin editing. We want to turn on some features in Elementor to make the editing process even easier. Up at the top you’ll see your site title name. Hover over this and click dashboard. Find the Elementor tab in the left-side menu and hover over it. Click settings. Click features. Go to editor top bar. From the dropdown click active.

Next, scroll down and find the flexbox container. From the dropdown select active. Click the save changes button. Now let’s go over how to make edits to the WordPress theme and how to use the drag and drop editor to create your site. From the WordPress dashboard hover over your site title name up at the top. Click visit site. To make edits to your site click the edit with elementor tab on the top of the page. It’ll now bring you to the drag and drop editor where you can create your site quick an

d easy. To make edits to a part of the page just click where you want to make edits and start making edits. I can change the text here from We All Love Nature to My Demo Portfolio Website. If you want to make edits to the background image right click on the section. Click edit container. Click style. Hover over the image and click the trash can icon if you want to remove the image. Click over the image and you can upload a photo to place here or click media library to upload images already uploa

ded in WordPress. I’ll select one I’ve already uploaded. I’ll click the select button. Next, let’s go over editing the button. I’m going to click into a button. You’ll be able to change the name of the text. You can link the button out to where you’d like it. If you click the settings icon next to the link. You can choose to have the link open in a new tab and make it no follow if you’d like. You can change the alignment of the button, the sizing of the button. Where you see icon you can select

to not have an icon with the button. Where it says upload SVG you can upload an icon. If you click icon library you can view icons you can add to the button. You can change the positioning of the icon, and more. If you click style. You can make changes to the font used and colors for the button. If you click hover. This is where you can make edits to the font and colors on the button hover. I’ll scroll down a bit on the page. If you click the plus icon at the top where it says add element, this

is where you can get back to where you can drag stuff in to the page. You can select what you want over on the left and drag it in wherever you’d like it. If you right click on an area you can delete it if you don’t want it. By right clicking you can duplicate something if you need to duplicate it. You can drag something over to somewhere else on the page by selecting it and dragging it over to where you want it. I’ll drag a text into the page. If you click to edit the text, you’ll be able to ma

ke edits to the text like make it bold, you can link out a text to somewhere. If you click the settings icon you can choose to have the link open in a new tab if you’d like. If you click toolbar toggle it’ll give you more options like changing the alignment of the text, changing the text color, you can undo and redo changes here. If you click style at the top you can then make more changes to the text. If you click the pencil icon where you see typography. Where you see Family from the dropdown

you can select different fonts for the text. Where you see Size you can change the sizing of the text. You’ll see the image showing here. To change out an image. Click into the image. You can then click the trash can icon to remove the image. Click choose image. You can then upload an image or choose an image already uploaded into WordPress. I’ll select one I’ve already got uploaded into WordPress. I’ll click the select button. The image has now been added to the page. Scroll down to this sectio

n here. If you want to change an image of a section or add an image for a section right click in the section. Click edit container. Click style. You’ll see the image if the image is there. This is where you can edit the image, remove the image by clicking the trash can icon, or adding an image if there isn’t one there for the section. I’ll click choose image. I’ll select an image I’ve already uploaded into WordPress. I’ll click the select button. The image is now showing. If you want to add some

color along with the image. Click the background overlay section. Find the color tab. You can now change the color. Drag the opacity to the left or right to get the desired look you want. Next, scroll up to the section above this. If you want to change the background color of a section of the site. Right click in the section. Click edit container. Click style. Where you see background type click classic. You’ll see color under it. Click this and you can change the background color of the sectio

n. Next, let’s cover adding a section to your site. If you hover over a section, you can click the plus icon and then click the plus icon showing again to add a new section to the page. I’ll select this one. You can now drag in something over into the section. If you click the middle icon with the dots you can then edit that section. If you click the x button it’ll completely remove the section from the page. If you click into a section, click the middle icon with the dots, you can drag it up or

down to move that section to somewhere else on the page. Next, let’s scroll down to the bottom of the page to the drag widget here section. If you click the Starter templates icon. You can click blocks in the menu and then it’ll give you lots more page design ideas you can choose from. Up at the top, you can select categories for blocks to show. I’ll click Portfolio to bring up Portfolio templates. I’ll choose a block to add to the page. I’ll click this one and then I’ll click the import button

to import it to the page to then start adding your own content and editing it how you want it. Next, click into the Portfolio section. If you click into the images you can now select new images you want to have in the Portfolio section. I’ll click the x button to remove each image. Next, you can upload images or click the add to gallery tab to add images already uploaded to WordPress. I’ll select 6 that I’ve already uploaded to WordPress. I’ll click the add to gallery button. Next, I’ll click t

he insert gallery button. The images are now on the page. Click into the image gallery area. You can change the image resolution, how many columns you want, you can link the image out if you’d like, you can change the lightbox setting if you’d like. If lightbox is on or by default if you click into an image you’ll see it’ll pull up the image when clicked and you can scroll to the next one. If you turn the lightbox off you can click on an image and it won’t pull it up. You can change the order of

the pics. If you click Style, you can change the spacing of the portfolio images and border. You can also add a Portfolio section by clicking the plus icon in the top left. Then scroll down and you’ll see Basic Gallery. You can drag it in where you want it and begin to create your Portfolio this way as well. Now I want to cover the contact us form to show you how this works. To do this let’s first save our changes. Where you see the arrow next to Publish. Click this and from the dropdown click

Save Draft to save our changes. Next, click the eye icon so we can preview our changes. It’s going to bring up a preview of our site. Click contact in the menu. It’ll bring up the contact page. To edit this contact form found here hover over your site title name at the top. Click dashboard. Next, click on WP Forms. You’ll see the Contact us form here. Hover over it and click edit. It’s now going to bring up the builder for the contact us 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 anythin

g to show in the form field where they input their information. Click save to save changes. When you are done click the x button. If you click settings. You’ll be in the general section where you can edit things for the form. Spam Protection allows you to toggle on spam protection options, notifications is where you can put in the email the form info should be sent to and the from email address showing to the person who filled out the form, and the confirmations is where you can put in a confirm

ation message that shows to the person who filled out the form. I’ll click the x button. Now I want to go over maps for your site in case you want to have a map for your website. From the contact page. Click the edit with Elementor tab. Scroll down to the bottom of the page to the drag widget section. Click the plus icon. I’ll click this structure for the map. I’ll click the plus icon in the top left. I’ll drag in Google Maps. You’ll see the map is now showing. Where it says location you can put

in the address of your business. You can toggle zoom to get the map to look how you want. The height will change the height of the map. Next, click the arrow next to Publish in the top right. Click Save Draft. Next, refresh the editor by clicking the refresh button in your web browser. Scroll back down to the maps section. Click the pencil icon on the map. You’ll now see the notification showing about the Google Maps API key up at the top. Click the create your here link. It’ll take you to this

page. Scroll down and click go to credentials page. Click create project. Put in the project name. You could just put in your site or business name. Put in the address and click create. It’ll then give you your API key you can copy and paste in to the API key field. Now you want to click the integrations settings link. Paste the API key here and click save changes. Your map will now show live for your site visitors. Let’s get to know the drag and drop editor Elementor better. You’ll see publish

in the top right. Click this when you want to publish changes you’ve made to your site. If you click the arrow you can save the page as a draft or save the page as a template to then use as a template for another page you create. To view changes you’ve made to your site click the eye icon and it’ll show you a preview of your site. If you click the desktop icon it’ll show you what your changes look like on desktop devices, the tablet icon will show tablet devices, and the mobile icon will show m

obile devices. If you hover over the site settings icon and click it you can change things like the colors of your entire site, fonts used, and more. If you click the Elementor menu icon and click history and then click revisions it’ll list out all the revisions for your site that it has pre-saved. If you click one it’ll bring your site edits back to how they were at the time of that edit. If you click the Elementor menu icon and click exit to WordPress. Then click the WordPress icon in the top

left. It’ll take you to the WordPress dashboard. If you hover over the pages tab click add new to add a new page to your site. 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. If you hover over the appearance tab in the left side menu click on menus

. This is where you can edit the menu on your site. If you have multiple menus on your site you’ll be able to select them from the select a menu to edit area. Click the select button to select the menu you want to edit. If you don’t see anything here then that means you only have one menu currently on your site. 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 cre

ate a completely new menu you can click create a new menu. If you want to have sub-menu items show in the menu just add the items to the menu and place it a bit to the right under the menu name you want it to show under. I’ll add a few under Services. I’ll click save menu. I’ll now pull up the view of my site and you’ll now see the sub-menu items showing in the menu under Services. Now let me show you how to make edits to the footer area of your site along with editing the header of your site, u

ploading a logo, favicon, and other customizations. From the WordPress dashboard, if you hover over the Appearance tab in the side menu and click Customize you’ll be on the customize page. Click the footer builder. You can then click an area in the footer area to start making edits to that section over on the left side. If you click the design icon you can then make additional changes for that section in the footer. If you don’t want something in the footer of your site click the x button to rem

ove that area from the footer. If you click the pencil icon here on the left-hand side you can then choose how many columns you want your footer to be. You can then click the plus icon to add sections to that part of the footer. I’m going to click the back arrow twice. Scroll up to the header area of your site. If you click into the header area of your site. You can make edits. For example, to edit the button. I’ll hover over it and click the pencil icon. You can then make changes. If you want t

o remove the button you can click the x button where you see button to remove the button from showing. In this section, you can move things around to change the look of the menu area to get it how you like it. If you click the pencil icon where you see the logo it’ll pull up where you can remove the current logo and add your own logo. You’ll see Site Title. You can input your site title here. Where you see tagline you can input the tagline for your site here. If you click the design tab you can

make color changes to the logo. I’m going to click the back arrow twice. If you click Site Identity you can then upload a favicon which is the site icon for your site. I’ll click the back button. If you click Global. Typography is where you can change the fonts used for your site. Colors is where you can change the colors for your site. Buttons is where you can change the button presets and colors used. You now know how to access pre-made professional templates, how to create a Portfolio website

in WordPress, and making edits to it using the drag and drop editor Elementor page builder. That is my WordPress Portfolio website tutorial going over how to create a Portfolio website step by step. 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 websi

te tutorial videos.