This page is intended to show off different ways to use blocks of content for the home page, but instead of those blocks being separate widget areas (which are more complicated to edit), they are simply blocks within the page editor. I’ve created a temporary layout for this page as well, which only has the content area – no widget areas.
One other change is that this page uses an image for the entire topbanner – that topbanner image gets resized to fit on a smartphone screen and takes up much less vertical space than the old topbanner which is an image and then some text for the title, address etc. This topbanner image shrinks both horizontally and vertically to fit on the small screen, where the old topbanner stacks and takes up much more vertical space. Conserving vertical space for your page’s important content is the best way to go imho.
Conversely, the column blocks below will shrink horizontally only to fit a small (smartphone screen). They will remain as tall as the number of lines of text, image height or number of lines in the form fields (whether on small screen or large). On a large screen the column blocks will show side-by-side, on the small screen you’ll see them stacked.
This is good responsive website design, where blocks stack on the small screen instead of shrinking so far as to be unreadable. These blocks are simple Paragraph blocks (and above are a few images thrown in just for demonstration) so there’s no line boxing them in. Additional CSS code has been added to the website so that a box surrounds each column block (below examples).
Below is an example of a 3-column block, evenly distributed in width (33/33/33). This is suitable for relatively small blocks that have the same relative image width and amount of text.
Order your yearbook here and enter order number 4039.
Learn more how Amazon supports Marshall HS!
Next up is a 2-column block evenly divided (50/50):
A Parents Guide to Marshall High School
New to high school? This trifold is made for you!
Now let’s try a 2-column with different widths, so you can have a bigger block on the right than on the left:
Marshall School Website Link
Marshall High School is ranked #5 in Virginia and #247 nationally (17,843 schools were reviewed) in the 2022 US News & World Report rankings of public high schools.
Marshall won a gold medal as one of the schools with the highest College Readiness Index values! See full article.
Again, the column blocks above will show the different widths only on a full size screen or window. On smartphone the blocks will all be full-width and will stack.
And finally, here’s a contact form (using a plugin called Contact form 7). It can be customized to have any fields you like, and is currently set for testing only (fill out the form and it sends the site administrator an email). I’m showing the same contact form three different ways: as a full-width contact form, inside a 2-column block (66/33), and in another 2-column block (33/66).
Note that on the smartphone screen, all three of these contact forms will look the same (except the latter two will have a box around them because they’re in a column block where the first one is just a paragraph block):
Here’s some text just to fill space up and show you how the form would look in less-than-full-screen.
the form fields are generally the same as the full-width form as the left block is wide enough so the form doesn’t have to shrink.
Notice that the form fits in vertical space the same, so a column block would need a lot of text and other content to fill the space.
Here’s some text just to fill space up and show you how the form would look in a less-than-full-screen.
The form fields are shrunken to fit the smaller column block.
Notice that the form fits in the same vertical space as above (it only shrinks horizontally), so a column block would need lots of text and other content to fill the space.
Of course, you can use any of the available types of blocks (click the blue box with the white + sign at top-left to choose a block type). The most common types of blocks to use are Paragraph, List, Image, and Column. With an image block you can have a paragraph block wrap text around it (justify the image either right or left), or have the image centered on the page with text above and/or below it. The Gutenberg block editor used to be a separate plugin for WordPress, now it’s built-in. This gives you a lot of flexibility in placing text or other content on a page.