5. Text, Links, Images and More

WordPress provides many options for displaying information on your pages.

To edit a page: From your Dashboard, go to Pages and choose a page. If you’re logged in to WordPress, you can also visit the live website and click the “Edit Page” option at the top.

You can start typing right away, or click the “+” button to choose the type of content block you want to add.

Be sure to click the gear icon in the upper right corner of the editing screen. This will give you more display options for each block and the page itself. (For CASE Faculty theme, some options are preset; be sure to preview the page as they may appear differently than in the editor.)

Links and Files

You can add links to pages on your website, other websites, or files uploaded to your website.

To add a link, highlight the text and click the link icon. Open links to other websites in a new tab so visitors don’t lose your site. For ease of use and accessibility compliance, the name of the link should describe its destination: “Visit CASE” or “For more information, visit CASE” – NOT “Click here to visit CASE.” In the last case, a screen reader might just read the name “click here” and may not tell the user where that link goes.

To upload a file, go from your Dashboard to Media and click “Add New.” Note that your MyWeb site has a storage limit of 600MB.

Blocks

Examples and descriptions of a few common blocks are below. There are many more to explore!

Text Blocks

Headings

Use header blocks to organize information within your page. Start with H2 and continue to H3, H4 and so on for sub-items. Maintaining an outline-style hierarchy of headers makes your page easy to navigate, and is especially important for visitors who are using assistive screen readers.

Lists

  • Use the List block to add a numbered or bulleted list to the page.

Columns

Choose the Columns block to split up your content. You can add paragraphs, images or other blocks inside the columns.

Consider how the page will look on a small screen such as a cell phone. Columns will stack themselves automatically for small screens.

Buttons

Note that button appearance (e.g., color) may vary from the editing screen to the live page.

Image Blocks

Guidance for adding images:

  • Choose an image you have rights to, such as one from FIU on Flickr
  • Prepare the image. Too many large images will slow down your page’s load time. Use an editor like Photoshop or Pixlr (free online) to edit your image.
    • Crop the image as needed.
    • Scale the image to an appropriate size. 1000 pixels wide is usually more than sufficient for an image that extends the full width of this content area.
    • Save the image as a JPEG – it’s a smaller file than a PNG. (PNG files can have transparent backgrounds, but this usually isn’t needed. Note that your MyWeb site has a storage limit of 600MB.)
  • Give the image a caption or alt text (invisible caption) if it’s not just for decoration. This is necessary for accessibility compliance – screen readers will read the alt text – and helps visitors understand graphic information on your website.

Image

The basic Image block, shown at right, prompts you to upload an image. Images can be resized and/or aligned to full-width, wide-width, or to the left or right of text content.

Alt text: Aerial view of the Modesto A. Maidique Campus.
Example Caption: Aerial view of the Modesto A. Maidique Campus.

Large Header with Heading – find in Patterns

Gallery

Select multiple images to display together. You can choose the number of columns and display size for the images.