{"id":764,"date":"2021-06-02T16:35:24","date_gmt":"2021-06-02T16:35:24","guid":{"rendered":"https:\/\/www.design42.com\/blog\/?p=764"},"modified":"2021-06-04T15:50:58","modified_gmt":"2021-06-04T15:50:58","slug":"wordpress-layouts","status":"publish","type":"post","link":"https:\/\/www.design42.com\/blog\/wordpress-layouts\/","title":{"rendered":"WordPress Layouts"},"content":{"rendered":"

This post is to help you tell us what you want your new website to look like.<\/p>\n

There are a lot of different layouts available. Most sites use a mixture of these ideas.<\/p>\n

\"\"
Single Column Example
Storefront by WooCommerce<\/figcaption><\/figure>\n

Single Column<\/h2>\n

This is a single column layout from Storefront by WooCommerce. It looks like what you see on your phone, but it is used for the desktop site, too.<\/p>\n

WooCommerce Storefront ><\/a><\/p>\n

\"\"
Single Column Example
Justread from GretaThemes<\/figcaption><\/figure>\n

This is another example of a single column layout. The picture runs the entire width of the site, but the text is narrower. If your text runs too wide, it is easy to lose your place as you are reading. Justread from GretaThemes uses a Card layout for the home page with a single column layout for the rest of the pages.<\/p>\n

Justread from GretaThemes ><\/a><\/p>\n

\"\"
Single Column Example
ColorMag by ThemeGrill<\/figcaption><\/figure>\n

This is a traditional single column layout. All of the information is presented centered on the page.<\/p>\n

ColorMag by ThemeGrill ><\/a><\/p>\n

\"\"
Left Sidebar Example
ColorMag By ThemeGrill<\/figcaption><\/figure>\n

Single Column with Sidebar<\/h2>\n

This is a single column layout with a sidebar. The sidebar can go on either side and present more information and secondary navigation.<\/p>\n

ColorMag by ThemeGrill ><\/a><\/p>\n

\"\"
Right Sidebar Example
ColorMag By ThemeGrill<\/figcaption><\/figure>\n

You can look at the demo site for ColorMag to see other ways this Theme can look.<\/p>\n

ColorMag by ThemeGrill > <\/a><\/p>\n

\"\"
Right Sidebar Single Column Example
Storefront by WooCommerce<\/figcaption><\/figure>\n

This is a really basic example using the Storefront Theme by WooCommerce. This is the Blog section of their sample site. The right sidebar can have anything in it, the shopping cart, secondary navigation, banner ads, an excerpt from your Facebook Page, anything.<\/p>\n

WooCommerce Storefront ><\/a><\/p>\n

\"\"
Card or Tile Example
Justread from GretaThemes<\/figcaption><\/figure>\n

Card or Tile Layout<\/h2>\n

This layout is called a lot of things, Card, Tile, Grid, Masonry or Pinterest Style layout. It shows you a lot of information at a time<\/p>\n

Justread from GretaThemes uses a Card layout for the home page with a single column layout for the rest of the pages. You can see a demo site for Justread from GretaThemes to see other ways this Theme can look.<\/p>\n

Justread from GretaThemes ><\/a><\/p>\n

\"\"
Card or Tile Example
Kale by Lyra Themes<\/figcaption><\/figure>\n

Project Small House uses a Theme that puts excerpts from each blog post into a tile on the home page and search pages. The posts have a single column with sidebar on right.<\/p>\n

Project Small House ><\/a><\/p>\n

\"\"
Masonry Layout
Minimal Grid by Thememattic<\/figcaption><\/figure>\n

Masonry Layout<\/h2>\n

A masonry or Pinterest style layout uses blocks of content in any height floating in fixed columns.<\/p>\n

Minimal Grid by Thememattic is a good example of a masonry style Theme. The content floats up to fit the space available on the screen, depending on how wide your browser window is. The secondary pages use a centered column with a fixed left sidebar and a floating right sidebar.<\/p>\n

You can play with the design on their sample site.<\/p>\n

Minimal Grid by Thememattic ><\/a><\/p>\n

\"\"
Magazine or Multi-column Layout
ColorMag by ThemeGrill<\/figcaption><\/figure>\n

Magazine or Multi-column Layout<\/h2>\n

This layout presents a lot of information on the home page. Secondary pages usually have the content centered, with more information in the right or left column, or both.<\/p>\n

You have to have a lot of content for this layout to work.<\/p>\n

ColorMag by ThemeGrill > <\/a><\/p>\n

\"\"
Hero Image with Three Tiles, then Two Columns Example
Storefront by WooCommerce<\/figcaption><\/figure>\n

Combinations<\/h2>\n

Most sites use a combination of layouts on different pages of the site. And most WordPress Themes can be configured to look a lot of different ways. Above is another layout using the Storefront Theme by WooCommerce. This layout has top navigation, then a large Hero Image. Next are three Tiles, followed by two columns.<\/p>\n

You can click around on the sample site to see how the different pages look.<\/p>\n

WooCommerce Storefront ><\/a><\/p>\n

\"\"
Popular WordPress Themes<\/figcaption><\/figure>\n

WordPress Themes<\/h2>\n

There are a lot of WordPress Themes available. Be sure when you choose a Theme that you have enough content, text and images, to make that theme work.<\/p>\n

Also be sure that the Theme you choose is popular enough to continue to be supported.<\/p>\n

Free WordPress Themes ><\/a><\/p>\n

Scroll through the Themes. When you see one you like, click on it.<\/p>\n

Look for when the Theme was last updated. It should be recently.<\/p>\n

See how many Active Installations the Theme has. The more people that are using a Theme, the more the Theme will be updated. And the easier it is to find help if you get stuck.<\/p>\n

Many Themes have a Theme Homepage with more information. You can see some example websites using this Theme. It’s great if there are instructions. It is helpful to know what size to set images to before you upload them.<\/p>\n

Show Us Examples<\/h2>\n

Make a list of sites you like. Copy the link to the page on the site and let us know what you like and don’t like about it.<\/p>\n

A list can look something like this:<\/p>\n

Sites I Like and Why<\/strong><\/p>\n

https:\/\/www.projectsmallhouse.com\/blog\/2020\/12\/have-a-home-office-delivered\/<\/a>
\nI like the menu, but the colors are boring.<\/p>\n

https:\/\/www.deepdiscountlighting.com\/<\/a>
\nI like the colors and the tiles, but the pages are too long.<\/p>\n

https:\/\/www.design42.com\/hiltonhead\/
\n<\/a>I like the big photo on the home page.
\nhttps:\/\/www.design42.com\/hiltonhead\/category\/hilton-head-island\/
\n<\/a>I like photos and I like the way the sidebar looks.
\nCan we make this in different colors?<\/p>\n

https:\/\/www.mydesign42.com\/brighten-the-night-with-cafe-lights-and-string-lights\/<\/a>
\nI like the colors. I like the way the sidebar has a shadow.
\nI like the tiles at the bottom of the page that tell what page to go to next.
\nI like the search bar.<\/p>\n

https:\/\/www.design42.com\/ireland\/
\n<\/a>I like the little thumbnail images.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"

This post is to help you tell us what you want your new website to look like. There are a lot of different layouts available. Most sites use a mixture of these ideas. Single Column This is a single column layout from Storefront by WooCommerce. It looks like what you see on your phone, but … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":821,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[15,5],"tags":[],"class_list":["post-764","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-information","category-wordpress"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.design42.com\/blog\/wp-content\/uploads\/2021\/06\/featured-how-wordpress_layout.jpg?fit=1200%2C639&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8x1A8-ck","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/www.design42.com\/blog\/wp-json\/wp\/v2\/posts\/764","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.design42.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.design42.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.design42.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.design42.com\/blog\/wp-json\/wp\/v2\/comments?post=764"}],"version-history":[{"count":10,"href":"https:\/\/www.design42.com\/blog\/wp-json\/wp\/v2\/posts\/764\/revisions"}],"predecessor-version":[{"id":786,"href":"https:\/\/www.design42.com\/blog\/wp-json\/wp\/v2\/posts\/764\/revisions\/786"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.design42.com\/blog\/wp-json\/wp\/v2\/media\/821"}],"wp:attachment":[{"href":"https:\/\/www.design42.com\/blog\/wp-json\/wp\/v2\/media?parent=764"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.design42.com\/blog\/wp-json\/wp\/v2\/categories?post=764"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.design42.com\/blog\/wp-json\/wp\/v2\/tags?post=764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}