Website Styling Examples

The below items are examples of website content presentation and hopefully will help you with ideas on presenting your content in the best light.

These (as well as this website) are all built using WordPress. There is a wide array of available widgets that offer pre-built styling for different purposes – sliders, image galleries and more.

Scroll through this page to see examples of what can easily be implemented in any WordPress website.

Image Gallery

There is one variation of an image gallery. You can have this in a number of formats, and when you click on any image the image pops up in a lightbox. In addition you can have captions that appear on the mosaic view upon hover. These are great for clients who want to represent their artwork or photography, or can be used for about any purpose where a picture tells a story.

Slider Gallery

This is an image slider. You can rotate a number of images and have them set to autorotate to a specific time. The images do not pop up in a lightbox however. If you use square images you can set the default background color to fill the image container.

Accordions

Accordions are expand/collapse sections which are perfect for frequently asked questions and more information delivered in a web text format. Accordions save space and provide succinct information at a quick glance.

Learn more

If you’re unsure of the technology, and the elements necessary for a website – here’s a handy reference that should help.

What are domains

Put simply - a domain is the name your website resolves to. Let's look at a few examples:

Google.com - Google is the domain
Markkoszk.com - Markkoszyk is the domain

The internet consists of websites sitting on web servers. Each site is unique and has an IP address. IP stands for Internet Protocol. An IP address is a number that is unique to your web host (more below on web hosts, name servers and more). TO put it simply - who wants to type a bunch of numbers into a browser? That's where domains come in. It is a quick unique identifier of your website. Of course there's more to it. When you type your domain into a browser - the internet needs to find the exact webserver that hosts your website files to deliver them to the user. So this is how it works. There's a thing called DNS - domain name server. It's this large inter-connected loop of name servers that pretty much translate your domain name to the exact web server your site is sitting on. Then, through the magic of the internet - your website appears. It's that simple - actually it's not, but that's why I'm here. I make technology simple. I handle the rabbit hole stuff, letting you focus on creating content and delivering that content.

More on domains

Let’s take it from the top. I’ll use an example. My name is Suzanne and I want to build a website to promote my consulting business. So I start to look for a domain name, something unique, catchy, that people will remember. I come up with something I like. The next step is – is the domain available? For example I’ll use my domain. There are only so many Mark Koszyks in this world. Hopefully I’m the first one that wants to use my name as a domain.

What I do – and what I suggest – is determine a domain I like, and a few alternatives. I then go to any domain register (seeing as nothing is free in the world, domain registrars serve the purpose of helping you find an available domain – and claiming it for your use). Going back to my example of “suzanne.com” – any registrar tells me this is not available. So, remembering my suggestion of having a few alternatives – I go to plan B. That might be “Suzanne-Consults.com”, or something else. When I find one I like – I buy it and I’m on my way.

The last thing is what is called the top level domain. More below on that below.

Top Level Domains

Website addresses end with .com, or .org, sometimes .biz. What’s up with that?

These are what are called top level domains. For some more detail you can click here

But the bottom line on this – while Suzanne.com might not be available perhaps “Suzanne.org”, or “Suzanne.info” might be.

So if you’re looking for the RIGHT domain – don’t get stuck on the .com, think out of the box and if a .org works it’s worth looking at.

About hosting

All websites need to be hosted somewhere, and connected to the world wide web – so when someone looks for your site, or types your new domain into a browser – they are directed to your website.

A website is a collection of various files that when sent to a web browser renders your website.

Website hosting services handle the infrastructure – servers, networking, power, operating systems – a simple way to look at it is you build the site, they host it and deliver it. And of course you pay them, and there is a wide array of hosting options available – all depending on the complexity of your site and the expected load and traffic.

What is WordPress?

WordPress is a open source content management system. 38% of the world’s websites are built on WordPress. Like this one. So perhaps it has it’s limitations, and for a web developer it kind of sucks. But it works, and for you I can build you an awesome web presence for about $1000, give or take.

Parallax image section

This is a parallax section. The image is fixed and the content scrolls over it. It doesn’t work on mobile but is a pretty slick presentation on a desktop. Best practice is to avoid using parallax on mobile so I suppressed it from that view.

Flip Box

A Flip Box is a section that flips upon hover, the content is unique for front and back. This can be used to ask questions and then answer then on the back side.

This is a question

This is the front side content.

And this is the answer to that question

When you hover on the flip box you will see the copy for this backside.

Click Here

Testimonial Carousel

A Testimonial Carousel is used to feature reviews and testimonials. It can feature numerous testimonials and they can be automatically rotated or manually cycled by using arrows.,

This is the first testimonial

This is the second testimonial

And this is the third testimonial

Blockquote

This is a fast easy way of inserting quotes. Since this is a section I can apply a background color to that section. To that end I can add background colors to any section.

This is a blockquote widget.

Author's Name here

Video

The video widget can use self-hosted videos or can call to YouTube for videos hosted there. The example video below is a random video I found on YouTube.

Animated Headline

This animated headline is sure to get one’s attention. This style is not for everyone but in case you like it – it’s available.