Joomla

Featured

Joomla 4 tutorial (part 4). How to make your own website from scratch

Aleksej Khoroshevskij 12.03.2023

The information is almost entirely up to date for Joomla 5 (note added on October 21, 2023).

Video tutorial

«About us» page – 00:00:34.
Page title (alternative title) – 00:11:29.
Breadcrumbs module – 00:12:04.
«Gallery» page – 00:12:57.
«Portfolio» page – 00:15:54.

Better watch video with «1080p HD» quality. This and other video reviews and tutorials can be found on my YouTube channel.

Links and extensions from video tutorial

Previous article «Joomla guide for beginner (part 3). SP Page Builder tutorial».
Demo site.
«Joomla tutorial for beginners (part 2). How to make a website from scratch» – gallery in the footer.
SP Simple Portfolio.

The files are available for download under the article above the comments.

In previous article «Joomla guide for beginner (part 3). SP Page Builder tutorial» we created site main page in SP Page Builder 4 Lite and menu item for this page.

In this article, we we'll create an «About Us», «Gallery» and «Portfolio» page.

Video tutorial recorded March 10, 2023. List of software from the video: Joomla 4.2.7, SP Page Builder 4.0.7 Lite, SP Easy Image Gallery 2.0.2, SP Simple Portfolio 2.0.7.

How to make your own website from scratch

About us page recommendations

An «About Us» page is an essential part of any website, as it provides visitors with important information about your company or organization. Here are some recommendations for creating a compelling «About Us» page.

Be clear and concise. Your «About Us» page should be easy to read and understand. Use clear and concise language to convey your company's message.
Tell your story. Share the story of how your company was founded, your mission statement, and your values. This helps visitors understand what you stand for and how you can help them.
Highlight your team. Introduce your team members, including their roles and responsibilities. This helps visitors feel connected to the people behind the company.
Show social proof. Include testimonials, awards, and other forms of social proof to demonstrate your company's credibility and expertise.
Use visuals. Include photos and videos to make your «About Us» page more engaging and visually appealing.
Provide contact information. Make it easy for visitors to get in touch with your company by including contact information, such as your phone number, email address, and physical address.
Optimize for SEO. Use relevant keywords and phrases throughout your «About Us» page to improve your website's search engine rankings.
Update regularly. Keep your «About Us» page up to date with the latest information about your company, such as new products or services, team members, or awards. This shows visitors that your company is active and engaged.

Why we need «breadcrumbs» on a website?

Breadcrumbs are a type of navigation that provides users with a trail of links that shows the path they have taken to arrive at their current location within a website. They typically appear near the top of a page, just below the primary navigation menu, and often take the form of a hierarchical list of links that reflect the site's structure.

There are several reasons why breadcrumbs are useful on a website:

Improved navigation. Breadcrumbs help users understand where they are within the website and how they got there, making it easier to navigate back to previous pages or find related content.
Better user experience. By providing clear and concise information about a website's structure and hierarchy, breadcrumbs can improve the overall user experience and help users feel more confident and in control of their browsing experience.
Increased usability. Breadcrumbs can increase the usability of a website by reducing the number of clicks needed to access content and making it easier to find related content.
Improved SEO. Breadcrumbs can also provide additional context to search engines, helping them to better understand the structure and organization of a website's content, which can improve search engine rankings.

Overall, breadcrumbs are a useful tool for improving the navigation, user experience, usability, and SEO of a website.

In the next article «Joomla tutorial for beginners (part 5). How to build a website from scratch for free» we'll create contact page with a contact form and a Google map. We will also set up mail forwarding.

Article author – Aleksej Khoroshevskij

Aleksej Khoroshevskij

Ph.D., lecturer at Kharkiv National University of Radio Electronics, web developer, and SEO specialist with over 15 years of experience. Expert in website creation using Joomla and WebSite X5. Author of scientific publications, video courses, and educational content on web development and SEO. Runs a blog and a YouTube channel, sharing knowledge and practical experience. Provides services in website development, customization, maintenance, and promotion. Learn more about the author…

Contacts:

Social networks:

Publications and work:

Similar articles

3 Comments

Subscribe Unsubscribe

Loading comment... The comment will be refreshed after 00:00.

This commment is unpublished.
Pam · 10:15 23.04.2023
Hi Alexsius I have a question ... I've followed your videos & created a site ok. However I just went to change my home page to change layout... I went to system > template styles > then in layouts as per the image I changed it from 3+6+3 to 12 (thinking I was changing just that page). Then all of my content disappeared, on all pages as you can see the footer has how joined with the header. The content still exists in the pages, I've checked. When using the 3+6+3 layout I actually widened the 6 (center column). I'm wondering if I can restore it how it was so the content appears again or will I need to start from the beginning again? I would greatly appreciate your comment...
Pam
- Reply
- This commment is unpublished.
  Алексей Хорошевский · 10:43 23.04.2023
  
  Hello. 1) To change only the main page, you need to create a separate style and specify only the main page in its settings (Menu Assignment). 2) "Then all of my content disappeared..." - You may have disabled position with Component Area. Turn it on.
  
  Reply
  
  This commment is unpublished.
  Guest · 03:41 24.04.2023
  
  Thank you for replying to my query.
  I checked & the menu assignment was assigned ok. In the page editor I can change the design of the 'header' etc, but in 'layout' (where it all went wrong & my content disappeared from front end, mind you it was only ipsum lorem text in one central column) .. none of the content appears.
  
  Reply
  
  This commment is unpublished.
  Алексей Хорошевский · 09:27 24.04.2023
  
  Do you have a position with "Component Area" in the layout?
  
  What content is missing? SP Page Builder Pages?
  
  Reply
This commment is unpublished.
Pam · 10:21 23.04.2023
the image wouldn't post, a pink error notice displayed ....
- Reply
- This commment is unpublished.
  Алексей Хорошевский · 10:34 23.04.2023
  
  Hello. What is the format, size and resolution of your image? What browser are you using
  
  I don't see any problem with uploading images.
  
  Reply
  
  This commment is unpublished.
  Guest · 03:36 24.04.2023
  
  I see, probably then they are too large? The image format JPG. (Tho did try PNG) The resolution details show 96 px per inch. I was using FireFox. (now in Opera).
  
  Reply
  
  This commment is unpublished.
  Алексей Хорошевский · 09:28 24.04.2023
  
  You can upload JPG, JPEG, PNG up to 10 Mb.
  
  Reply
This commment is unpublished.
Guest · 10:46 24.04.2023
I'm a bit lost to be honest. I had built several pages in page builder (contact, home, about, gallery), menu was working ok, could open each page, had one central column of ipsum text in them (3x6x3). But suddenly there was only the menu, the header and the footer there. They are joined to each other with no page in between. When I go to a page & click edit, the page as described comes up but I can't edit it. There is no front end edit button like there was before. And if I try to add columns or rows a circle with a bar across it appears. It won't let me add addons.
So the page builder pages are there but when opened to edit, the central content is missing and I can't edit it. I will try screenshots again. Thank you again for replying.
- Reply
- This commment is unpublished.
  Guest · 11:03 24.04.2023
  
  screenshots added ... the first is in the helix template, second the view where I try to edit and can't and the third are obviously the pages in sp pagebuilder
  
  Reply
  
  This commment is unpublished.
  Алексей Хорошевский · 12:21 24.04.2023
  
  In the screenshot, I don't see position settings for content. Maybe there is no such position.
  
  Reply
- This commment is unpublished.
  Guest · 11:07 24.04.2023
  
  Only can post one at a time
  
  Reply
- This commment is unpublished.
  Guest · 11:08 24.04.2023
  
  pages in sp pagebuilder
  
  Reply
- This commment is unpublished.
  Алексей Хорошевский · 12:19 24.04.2023
  
  I looked at your site http://pamvernon.com/. There seems to be something wrong with the template. I see an error in browser console: Uncaught TypeError: MutationObserver.observe: Argument 1 is not an object. http:// pamvernon . com/ templates/shaper_helixultimate/js/main.js:356 Perhaps there is a conflict between extensions. Try disabling third party extensions.
  
  Reply

or post as a guest