Parts of a Website: Essential Website Elements, Explained

Your ecommerce website isn’t just a virtual storefront—it’s your hardest-working sales rep. Day or night, it’s out there engaging potential buyers, turning passive users into active shoppers. But while most business owners focus on flashy banners or catchy headlines, the real magic happens under the hood. Every piece of your site, from headers to footers, plays a crucial role in how effectively it can sell.

Let’s break down the key parts of successful ecommerce websites and explain how they contribute to a positive user experience, support your website’s SEO, and keep your customers coming back for more.

Why each part of a website matters

No matter how you create websites—whether you’re using templated website builders or teaming up with a web designer to handcraft each element with HTML code—every part of your site should pull its weight. From the second someone lands on your homepage to the moment they (hopefully) click Buy, your site’s anatomy needs to work toward one clear goal: keeping visitors engaged, informed, and moving forward.

Take Graza, a high-quality olive oil ecommerce company. On an episode of Shopify Masters, founder Andrew Benin shares how the brand’s website is a key vehicle to make all that happen. From a web development perspective, Andrew says there’s a monotonous sameness to many ecommerce sites: “Standing out is more difficult. We took a more expensive route to our site development, a custom build—a more risky approach to ecommerce best practices, and it worked out for us.”

Andrew says it’s essential to design your company website based on the story you want to tell. For Graza, every page was based on the storytelling goal. It’s what allows each part of the company’s website to play a part in a larger whole.

Parts of a website

• Featured image
• Header
• Logo
• Menu navigation
• Website content
• Sidebar
• CTAs
• Footer
• Landing pages
• Forms
• Blog

To make your site stand out, it helps to understand how each individual element contributes to keeping user attention and encouraging conversion. Let’s dive into some basic website terminology so you can get a handle on how each of these cogs makes the entire machine hum.

Featured image

The featured image, also known as a hero image, is the large high-resolution picture or looping video at the top of a webpage. Its mission is to immediately capture attention. Visit most websites and you’ll find these splashy images on the homepage. They give users a quick visual connection to what your brand is all about—which is why you’ll often see them combined with a headline or call-to-action (CTA) button.

A featured image conveys something vital about your products or services. It also gives a site visitor a representative lifestyle vision of the target audience. Nowadays, you can also swap out an image for an auto-play video to achieve the same effect. For example, the Graza hero area fills with a catchy video sequence showing the company’s olive oil in action.

Header

The header is a signpost at the top of nearly all regular website pages. It sets the vibe and quickly informs website visitors about your brand and where to browse for products.

Essential elements found in a header are usually clickable. They often include the company logo, navigation bar, search bar, and login. A well-designed header includes only essential information needed to steer visitors to the main pathways into the website.

Consistency is important. Headers are meant to help users navigate the site. Make the website easy to browse by keeping the header and navigation menu where visitors expect them. Users on mobile devices will appreciate a brief header, which often includes a hamburger menu (☰) that neatly tucks away the full menu. The Graza header embodies this minimalist design.

Logo

Your logo is a key branding element representing your business. As seen in the Graza header example, the logo is usually found in the top left corner of the website header. It’s also often clickable on other pages, sending visitors back to the homepage.

Menu navigation

Menu navigation, usually located within the header in a classical horizontal menu, guides visitors to different pages. Design a logical organization for your menu that is optimized for your business purpose and shoppers’ expectations. Many menu styles can be used:

• Horizontal. This is useful if you only have a few menu categories.

• Vertical. Placed in sidebars, the vertical menu accommodates many menu items handily.

• Dropdown menu. This option organizes content into subcategories.

• Mega menu. Larger mega menus flood the display area, good when many options need to be shown.

• Hamburger menu. The stacked lines hamburger menu icon expands when tapped on mobile devices. It’s a great space saver.

In the Graza example, when you hover over the Shop menu link in the header, a mega menu opens at the full width of the screen.

If you’re thinking about what needs to show up in your menu, here are a few options to consider.

• Cover the basics. Add menu items for standard pages like About, Shop, Contact, and Blog.

• Tailor the menu names. For example, online retailers might organize by product categories.

• Don’t go overboard. Restrict menu selections to five to seven items to avoid overwhelming visitors with too many choices.

Always use clear labels and test menu designs regularly for broken links on desktop and mobile devices.

Website content

Website content is the main course—the substance of what visitors want to see and interact with on the site. This can include written text, images, videos, animations, and audio. Product descriptions, product lists, blogs—they all show up in the website content area.

On the Graza site, a variety of web content displays as you scroll down the home page. Below the hero area are product promotions, iconic illustrations, featured products, and a CTA button. Continued scrolling leads to fun facts, recipes, a Learn More About Us CTA button, and social media content.

Sidebar

A sidebar is a narrow vertical column along the left or right side of the main content area. It provides extra options, links, and information without taking up too much space. A sidebar makes sense for menus, CTAs, social feeds, links to recent blog posts, email opt-ins, author bios, shopping widgets, customer testimonials, contact page, or ads.

While useful, a lot of websites are moving toward full-width layouts instead of sidebars because a sidebar menu can sometimes seem less critical than items in the header. Sidebars also don’t function well in a mobile view. The decision to use a sidebar depends on whether it works better as a conversion tool for your web layout.

CTAs

Adding small words on buttons or menus sprinkled inside web content—like Buy Now, or Sign Up—will guide visitors to take action. This is a call to action (CTA), which is a short “do this” link or button that directs users to take a specific next step with your business. 

Effective CTAs are key to better engagement. CTA phrasing should be urgent but not pushy and match the brand’s tone. At least one CTA should be above the fold (i.e., visible as soon as the user lands on the page without scrolling). This increases the likelihood of interaction.

The CTA is a small but helpful element that shows up in various forms, such as:

• Buttons

• Pop-ups

• Ribbons

• Slide-ins

• Simple text links

Footer

The footer sits at the bottom of a website page. It typically remains consistent across every page on the site, like the header. It’s a perfect spot to place a secondary menu of additional information that’s important to visitors and customers, but would cause clutter if it were in the header.

In the footer, you’ll find things like contact details, privacy policies, terms of use, legal disclaimers, and social media icons. Sometimes it will contain a sitemap with links to all pages on the site. In the Graza footer, there’s a CTA for email signup, and a three-column menu for a more granular exploration of the site contents. Compare this to the brevity of the horizontal menu in the header.

Landing pages

Landing pages are special-purpose pages designed to drive engagement. Visitors come to a landing page after clicking a link from an email, advertisement, or social media post. Usually, the specific page is targeted to a single marketing goal, like subscribing to a newsletter or purchasing a promoted product.

Landing page design should be simple and distraction-free, with a bold headline, feature image, a clear CTA button, and single message content. Elements like headers, footers, and sidebars are often removed or minimized to keep visitors focused on the task at hand.

Forms

Forms serve various purposes, like gathering basic contact information for customer service communication, order forms, and signup forms to collect leads. Forms can process surveys, shipping updates, and loyalty programs.

The main goal is to make forms easy to fill out without disrupting the user experience. Keep forms short and include a statement about how user information will be used, to allay privacy concerns and remain in legal compliance.

For example, click the “Subscribe” link in the Graza footer, and you’ll see a manageable range of options. The form is tidy enough to avoid scrolling.

Blog

A blog is a section featuring engaging and informative posts published on a blog page, resembling journal entries or magazine stories. Blogs for businesses serve a marketing function. They educate consumers with more in-depth information about products and services, promote brand loyalty and customer engagement, and generally help visitors understand the business better.

Blog posts are organized chronologically, and you can even include themed categories. Blogs have a more casual, conversational tone than formal web pages. Graza’s blog, dubbed Glog, categorizes content by recipes, culture, and education. These stories help them with organic search engine optimization (SEO). Someone searching for extra virgin olive oil might come across the 10 Fun Facts story and click through to the site.