Transcripts
1. Introduction: Hello, everyone. If
you are looking for a course that will
show you exactly how to build your own photograph portfolio website
without coding, without complications,
and at no time, then you've just found it. I'm Jans the Mercedes, photographer and web
developer, and together, we will create a stunning
portfolio website using Elementor SI site
planner step by step, even if you are a photographer and have never built
a website before. Here's a preview of
the final result. But let's take it from the top. For a website to be live
and accessible to others, it needs two key things. A domain name, your website's
unique online address and hosting the space where
your sites files are stored. Think of it like a
photography studio. It has an address and a
physical space to work in. Once we have those, we
will install WordPress and add a few essential plugins
to enhance its functionality, just like upgrading your
studio with new equipment. Now, let's dive in and use AI site planner to generate our website.
Let's get started.
2. Create website using AI Site Planner: First of all, what is Elementor? It is a web page builder
that allow us to make changes to our website
by making drag drop, replace images or texts. All right, let's dive in and use Elementors AI site planner to generate our photography
portfolio website efforts here. First of all, in this field, we type photography portfolio
and we hit Generate. Next, we create an account or continue with one
of these options. And then we answer the
questions based on your specific needs and
proceed to build the site map. Next, head over to the
Wireframe section and click Create website using
the free trial option. Once the process is complete, we move on to
editing our website. At this stage, we can see our newly generated website complete with demo content
on a temporary domain. Now it's time to
take the next step, setting up our own
custom domain and using our hosting provider to transfer and publish the website
we just created there. Let's get started.
3. Our "Physical" space and address: First, we need a hosting
package for our website. But what exactly is hosting? Hosting is essentially
a computer or server that
operates all the time, ensuring your website is
always online and accessible. Much like having someone at your photography studio
to greet clients. For this course, we will use the basic hosting
package from headnR. But if you already have
hosting from another provider, you can use that as well, since all the steps remain the same after Watress installation. Once on the Head NR website, we can navigate to
web web hosting. Here you will see the
available hosting plans. If you know in
advance that you will need more than 10
gigabytes of storage, you can choose a
higher tier package. We should not use images more than half megabytes for
website speed performance. Level one is just fine. As we see here, the cost
for this hosting plan is $2 per month plus a one
time setup fee of $10. This package includes
everything you need to keep your website online
plus a free.com domain. For comparison, a.com
domain alone usually costs ten to $20 per year if purchased
from other provider. There are several free
hosting options available if you would prefer to start
without any extra cost. Ultimately, choose the provider that best fits your needs. The Wordpress steps
we cover will work seamlessly regardless
of your hosting choice. Just be sure that the
hosting of your choice, it is suitable for Wordpress. Since ten gigabyte
is enough for us, we select the first package and proceed to create an
account on Hensener. Once registered,
go to New Order, select level one web hosting. And next, we need to
choose a.com domain name. For example, your
actual surname. A domain name is like
a physical address. It's what directs your clients
to your online location. Hedner provides a free domain
with a hosting package. So in order to make
the right choice for the domain name in case you
don't want to use your name, keep these tips in
mind. Easy to spell. Avoid names like
photographfor.com, which can be confusing. Memorable, choose
something short and catchy. Easy to pronounce. This helps with word of mouth recommendations.
SEO friendly. Try to avoid names that already generate millions of
results on Google, make it harder to rank. Once you have decided on a domain name, check
its availability. It must be unused
by anyone else. If your chosen
domain is available, select it and enter
the owner details. In this case, we can
see that there are already our details from the
account registration step. So we proceed with the
order and validate our email by clicking the confirmation link
Hdzner sends us. After verification,
visiting your new website might show a privacy
or security error. Don't worry, we will fix this
next with one simple step.
4. Enabling SSL for Secure Connection: To resolve the security warning, follow these simple steps. We go to consoleg.headner.com where we can see
our domain name. Navigate to services and
click on SSL Manager. Select the option free
Let's encrypt and click the bottom and enable
HTTPS redirect. That's it. If we make a refresh, we will see that our
website is now secured with SSL and the error
is gone. Very nice. At this point, we have both
hosting and the domain name. Now it's time to
take the next step, which is to install WordPress, which is the platform we will use for our photography
portfolio website. Let's move on to the next step.
5. Website Foundations (Wordpress): Now that we have our
hosting domain ready, it's time to install Wordpress
and set up elementor to move here our
photography portfolio from the temporary domain. To install Wordpress
from the heads panel, we follow these steps. We navigated to services, and we click on the
Wordpress Option. We click Install Wordpress
and then configure. We enter our website title, email, username and password. These credentials will allow you to login to your
Wordpress admin area. Okay, once the
installation is complete, click Go to Wordpress, which will take us
to our domain name. Congratulations. At this point, our website is live, and this is the form that
everyone can see now. In the Wress login area, we access the admin dashboard, which is only available
to site administrators. This is where we will
stall essential plugins, including elementor
and pro elements with just a few simple steps. Before we proceed to
the next step and see how we can install
these two plugins, we will put the site in
under construction mode. This step is important, so the visitors will see a maintenance page instead
of an unfinished website. In the WordPress
dashboard, go to plugins. Add New plugin. Search for under Construction. We click Install Now, Activate and click here
to go to settings. In the main section, we turn on the underconstruction mode
and we save settings. Now, if we visit our website in another browser where
we are not logged in, we will see another
construction page instead of our unfinished site. That was the first
installation of our plugins. Now that our website is in
under construction mode, let's install the
Elementor Page Builder, which is the designer
for our website, allowing us to edit
its appearance.
6. Our Designer(Elementor): We return to add new plug in section and we search
for Elementor. We click in Start
and we activate it. Then we connect Elementor
to our account, the one we created earlier
by clicking Connect. Finally, we choose
the yellow theme, we skip those unnecessary steps, and we close the notifications. Next, we will
export the website. Since we originally built our portfolio site on
a temporary domain, we need to transfer
it to our own domain. To do so, first, we go to the website, elementor dot Cloud
slash WP Admin. We go to Elementor Tools,
Import Export kit. Next, we click Start Export, then next and create Kit. We save the exported
file to our PC. As a final step before importing the website
and start modifying it, we need to install
the last plugin, which is the P elements plugin. We go to the pro elements.org website and download
the zip file. Then from the admin
section of our website, we go to plugins,
add new plugin. We upload the pro elements dot zip file and we activate it. Then we can proceed to import the website
kit to our domain. That is the website
we generated with the help of AI site planner. We go to Elementor Tools,
Import Export kit. We click Start Import. We select the exported
Elementor kit file, and we click Continue. Click Next, then
Import and skip here. Then we wait for the
process to complete. As a final step, we can visit our website
to see its form. Our portfolio site is live
with the generated content. This is where installations
and technical things end. We will proceed now to replace the content with the
help of the Elementor.
7. Effortless Drag-and-Drop Editing with Elementor: Okay, now we can easily edit our website to
add our content. To do so, we go to
edit with Elementor. As we can see here, when
we move the cursor, it gives us an idea on where to click in order to
edit that element. We will disable the title name, but if you do not want to do so, you can edit it here. We will save our work frequently with the published button. This section right
here is called header, and is the top section
of our website. If we click Edit here, we see that now we can edit our website logo from
change site Logo button. We click to choose our logo. We can at our logo
here in library. Once uploaded, we see that
it's already selected, and we click Select button. We save our settings, and if we refresh the page, we will see that it is
visible now to our website. Next, it is time to
replace the texts. We close site settings
first, and as we can see, after the click, we can replace
easily the content here. It is time to use HAGPT in
order to optimize our texts. We go to chagbt.com and describe what we need for
our photography needs. Feel free to ask AGPT for any modifications to the text until you have what you need. Okay, when we are happy
with the text from hATGPT, we can copy it and
replace the demo content. I will add some text
for the purpose of the skills or course in
order to see the process. All elements can be deleted
if we are not want them. For example, if we write, click here and delete, we save our work from publish and view page
to see our progress. Okay, let's replace
the text here. We click header to
activate editing mode, and then we click
on this text here. We then replace the
text with our title. If we click outside of
that area, for example, to edit something right here, it will prompt us
to save and live. Next, we will replace
some more texts here. If we try to paste our text
directly to this field, we will see that our
design is changing. We can hit Control Z to revert. In order to avoid
changing the design, we make all the changes
in texts from here. Now let's see how we can replace the images
in our website. If we over the cursor
on this image, we see that this is the place that we enter
in the edit section. From choose an
image, we can drag and drop our image
and click Select. Let's see our work
by HIT Publish. Let's move on to the next
image using the same steps. Make sure to select image
resolution to full. Feel free to edit all texts with the same steps
to add your services. This is a carousel,
meaning we can add multiple images that
change automatically. Since we do not
want many images, we can remove the
unnecessary items from here. Choose an image and select. Again, for the second one. Okay, let's play it with
a height to get it right. We can change the effect
here and publish. If we refresh the page, we see the carousel in action. Let's make some quick changes to texts and images here
with the same steps. We add here a bigger
image by clicking the dots here and go to style. We choose an image and
full resolution here. Let's edit our email here. We can add our
personal email here or add something which includes
our domain name like this. As we see, it is clickable
with the correct link. If not, we make the
necessary edits without removing mail to text. When we are done,
we hit Publish. Next, we click on Footer to edit the links to
our social media. We click the first
item in order to expand and reveal the
field with the link. Here, we will add our
Facebook page link and the same for our account. After we finish, we hit the published button
to save our work. If we go to our website, we will see now that
the buttons have updated with the links
to our social media. We have to update the links
to this location as well. We do the same to the other
icons, and we are done. If we want to edit the
other pages as well, like services, we go to Services page and
edit with Elementor. We edit texts and images as
we saw with the same steps.
8. Email Creation: Last necessary step is to
make a Wordpress email. We go to services, email and new mailbox. We add the name wordpress. We add a password and save. Optionally, if we want to make a new email like the
info we saw Earer, we add it in the
field as well and click Save. Okay, that's it. Let's test our new
email from webmail to check if we can send and
receive emails successfully. We add our email and
password to login, and we go to mail
and new message. We add a recipient, which is another email of ours, the text and subject and sent. We reply from our other email and wait a minute to
see if we got it. Okay, we got it. This means
that all work perfectly.
9. Project: This project, you need to create a document that defines
your photography service and outlines ideas for additional services to feature on your website's homepage. This will help you
focus your work and communicate
your value clearly. Define your focus.
You need to answer, what am I solving and to whom? By describing your
photography service and identify your
target audience. For example, we offer wedding photography services
for couples who want to capture the emotion of their special day with
beautiful timeless images. Brainstorm Service Ideas. You need to list at least
three service ideas that you can add to
your website homepage. This should align with
your target audiences needs and highlight what makes
your photography unique. For example, customized wedding packages, engagement
photo sessions, professional photo editing
and retouching services, professional studio photography, and product and
food photography. After you have write down this, it is time to create a document that includes your
responses to both tasks. Ensure your document is clearly organized
and easy to read. And upload the document to the class project section.
Let's get started.
Giannis Demertzidis, Web developer & Photographer
