Text Layouts

See also:

• Special Layouts page for more complex layouts which enable display of news items, artists, featured events, events, activities (READ ON only), Child pages and specific items.
• Artist, Events & Activities Layouts pages for listings layouts.
• See also Matrix’s example layout page for more, clear examples.
• And there’s a couple of private pages you can experiment on:
  • Flexible Content example for playing with
  • Flexible Content Page example for playing with 2

There are so many details that need to be filled in, it’s easy to forget. Here’s a summary you can print out and refer to when you’re adding pages, posts, events, etc. More details are included in the following section – read that section if you haven’t added anything in a while.

• Pictures – NEVER upload large pictures – ALWAYS resize pictures to 1000 pixels on their longest side
• SEO – ALWAYS add SEO details: Focus keyphrase; Meta Description; Featured Image
• Titles & Permalinks – Both should be SHORT
• Layout and Formatting – follow the Brand, be meticulous, check everything when you’re done
• Text – NOTE:  when copying and pasting text from elsewhere, any html will also be copied and will mess up the look of the text. Be sure to copy rtf only.
• Categories – Don’t forget to tick all the relevant categories.
• Publishing Date – mostly for scheduling a post to publish in the future.
• Double Check – View the finished post/page when you’re done to be sure it looks perfect. If it doesn’t, rinse & repeat till it does.
• Pretty Links – when you’re done, set up a Pretty Link and share with Sara if relevant
• Facebook Debugger – After creating the post/page, make sure FB shares it properly.

News Items (Posts) and Pages (Site/Pages) pretty much work the same way in terms of look/set up.

Things to remember – and double check this list if you haven’t posted in a while:

• Bullets
  • Don’t nest bullets – as you can see it doesn’t display properly!
• Pictures
  • NEVER upload large pictures
    • they will takes ages to download for users – who may leave the site as a result
    • and, in the long term, big pics will overload the website
  • So ALWAYS resize pictures to 1000 pixels on their longest side
    • Lots of software does this – I find Faststone Image Viewer good for bulk alterations
• SEO (see also separate page with more info)
  • ALWAYS add SEO details
  • Focus keyphrase
    • one to three words – shorter the better – copy from Title
    • don’t include ‘the’, ‘a’ etc
  • Meta Description
    • copy from the text in the main post/page
    • if you can include the focus keyphrase, so much the better
    • this is what people see in social media shares and should be a readable para.
  • Don’t forget to add a Featured Image
  • Note the Readability and SEO summary in the Publish box at the top right are not accurate – they don’t take our layouts into account, so you can ignore them. If you’ve done all of the above, the SEO will be fine.
• Titles & Permalinks – Both should be SHORT
  • Titles need to fit nicely on one line of front page news listing – use a short heading (3 words if poss) in the main title and use a subheading for the rest if you’ve more to say
  • Permalinks: See top under the main post Title – Permalink: https://www.westcorkmusic.ie/layouts-for-sara/ ‎- should also be short for SEO
    • When you save the page, the permalink will automatically be generated from the title. If it’s too long, shorten it. No spaces.
• Layout and Formatting
  • I’ve included information below on this.
  • Use layouts, margins, etc to make the page look good.
  • Always check the look of the page when you’re finished and correct any problems with spacing, etc.
  • Separate all blocks of text/images/etc using appropriate layouts.
  • Use Title layouts for headers – don’t embed them in the text.
• Text – NOTE:  when copying and pasting text from elsewhere, any html will also be copied and will mess up the look of the text. To prevent this:
  • Click the Paste as Text button in the kitchen sink (hover over buttons to get a pop up explaining what they do) before pasting to remove any rtf text – this will also remove bold and italic.
  • If you want to remove the html but not the bold & italic, paste into something else first that strips one and not the other. Outlook works for me.
  • To see if anything extra has been pasted, click on the Text tab in the top right of the layout (usually we’re on the Visual tab).
• Categories
  • Don’t forget to tick all the relevant categories. Without this, the post/page won’t appear in the right place.
  • All news items automatically appear in the West Cork Music main site news, but I usually tick the category anyway to be sure.
• Publishing Date
  • You can set the publishing date in the Publish box at the top right, eg. can schedule a post to publish in the future.
• Double Check – View the finished post/page when you’re done to be sure it looks perfect. If it doesn’t, rinse & repeat till it does.
• Pretty Links – for sharing on social media you can set up Pretty Links here. And get more Help on them here.
  • Give it a sensible link – not a nonsense one
  • You can search for Pretty links we’ve already set up in the same settings too
• Facebook Debugger – After creating the post/page, you’ll need to make sure FB shares it properly. Paste the published page link in their debugger and click Debug till it looks right.
  • You also need to do this if you update the SEO/Featured image subsequently.

• Use Layout blocks to manage spacing and look of the pages. Usually the Margin Top & Margin Bottom selections (available in all layouts) together do good spacing, but you can add and remove spacing by using any or all of the four options in the Layout multi-select.
• Layout blocks can be moved up and down the page by clicking and holding on their header bar (this one’s header bar says 5 Content: Fullwidth).
• You can open and close layouts by clicking on the header bar (it can be easier to move them when they’re closed).
• I’ve illustrated the Layout blocks available below, in the order they appear in the menu.

• Use Title layouts for headings, rather than putting headings in text blocks. This keeps the spacing professional.
• Set the Title Type to h2/h3 etc depending on Title nesting. Have a look at the different heading styles on this page to see what I mean – h2 is for main headings on the page; h3 are subheadings and h4 subsubheadings! Shouldn’t usually need to use h4 (the Title layout for this section’s heading ‘Titles’ is h4).
• The first Title after the main heading will be h2 as the Post main heading is h1.
• Titles are usually left justified, though sometimes a main heading will be centred for emphasis.

This block of text is in a fullwidth layout. Other options (see also below) are:

• 2 column – 50%
• 3 column – 33%
• 2 column – 67-33 – usually for image on right, our default
• 2 column – 33-67 – not really used

NOTE: For this format and the following 3 cols one – if it’s being used for the display of images, you have to resize the images to be the same dimensions and resize in order for them to display nicely.

The ones below have completely different dimensions and won’t display well even if they’re resized. Don’t do this.

Again, the images below should be resized with the same dimensions to look correct.

Sometimes a Separator is useful to demarcate content – ie. the line above this text.

This layout is used not only for FAQs, but also for any blocks of information where all the details don’t need to be displayed at the same time, eg. the details listing our Board Members on Who We Are.