黑料网

Skip to main content
School of Medicine IT Web Guide

Half Image

Creating A Half Image

Many fields are self explanatory and will not be addressed in this documentation. This documentation will focus on tips, best practices and explanation of fields that generally need some clarification.

  1. Determine where the Cell will be used.
  2. In the Dashboard, select Cells in either the top or left-hand navigation.
  3. Select the Add New button.
  4. Cell Name: provide a descriptive name so site editors understand the purpose or placement of the cell. This field does not display anywhere other than in the Dashboard where it lists all Cells for a website.
  5. Layout: Single Blocks
  6. Block Category: Image Blocks
  7. Block Style: Half Image
  8. Cell Header: this is the main text header.
  9. Cell Text: this is the description within the block. Provide additional information related to the header.
  10. Media Type:聽 allows you to use either an image or a video.
    1. Image: Upload and image. Parts of the image may appear cropped due to the聽responsive design of the cell. View our Image documentation for information on where to find images, image size recommendations and more.
    2. Video:
      1. Ensure the video is captioned before adding it to the cell.
      2. For accessibility reasons, the embed code needs to include a title attribute. The embed code from some sites, like YouTube, include a title attribute while others, like Panopto do not. If the code includes the title attribute, simply update it with a description of the video. If the embed code does not include the title attribute,聽 you will need to add one. Simply add title="Add your descriptive title here" inside the brackets of the embed code. Be sure you replace聽Add your descriptive title here, with a title that properly describes the contents of the video. Example code can be found on our Video documentation page.
  11. Image Horizontal and Vertical Alignment – The image in this cell is designed to fill the entire background of its container without leaving any empty space. However, if the aspect ratio of the container and the image do not match, parts of the image might get cut off or clipped. To control which parts of the image stay visible, you can adjust how the image is positioned within its container. This allows you to decide which parts of the image are most important to display without clipping.
    • The smaller dimension of the image (width or height) will fill the container 100% and excess of the larger dimension will likely experience some cropping.
    • In most cases Left and Right alignment has no effect on images using a portrait ratio. Likewise, Top and Bottom alignment has no effect on images using a Landscape ratio.
  12. Sticker Text and Link: Allows you to display a small banner in the upper corner of your background image.
    • Text Limit: The sticker text is restricted to 40 characters. This limit helps ensure that the sticker remains clear and uncluttered, especially on smaller screens.
    • Link Option: You can add a hyperlink to the sticker, making it possible to direct users to additional content or external sites.
    • Media Type Compatibility: The Sticker feature is only available when the “Image” media type is selected. It is not supported for video media types.
  13. Add Button: adds a button below the Cell Text.
  14. Add Custom Menu: allows you to add a stylized menu of links.
    1. Custom Menu Title: this optional header displays above the menu
    2. Custom Menu ID: Add the menu number to this field. See below for more details.
  15. Layout Options
    1. Image Width Percent (%): controls how much of the banner is dedicated to displaying the image. The remainder will display the text. For example, If you set the Image Width Percent to 60%, then 60% of the banner will display the image and the remaining 40% will display the text content.
    2. Image Minimum Height (px): by default the minimum height is set to 350 pixels. However, the height will grow to accommodate lengthy content. This setting is useful for two things:
      1. Set this above 350px to increase the height of a banner with minimal content.
      2. This setting is useful to control the height of the image on mobile devices where the image stacks above the text (rather than side-by-side). You can resize your browser window (really thin) to see what this looks like.
      3. Setting the Image Minimum Height to 0 (zero) will hide the image on small screens.
      4. Tip: at smaller screen sizes (like mobile devices), where the image stacks above the text, the image sometimes gets cropped in undesirable ways. There are two ways to combat this:
        1. Try increasing the Image Minimum Height (set it above 350px) and/or modify the Image Horizontal and Vertical Alignment. Be careful how much you increase the Image Minimum Height. Increasing it too much might make the image too large for small screens.
        2. Set the Image Minimum Height to 0 (zero). This will hide the image on small screen sizes and may present a cleaner layout without cropping issues.
    3. Text Alignment: choose your preference. These options impact both the Cell Header text and Cell Content text.
    4. Add Title Accent Underline: selecting Yes will add a small yellow bar below the Cell Header. This option does not work when the Text Alignment is set to Center.
    5. Image Right: by default, the image (or video) will display on the left side of the banner. Selecting this option will display it on the right side.
  16. Click the Create Cell button.
  17. If you’re ready, you can display the Cell on your website.

 

Adding a Custom Menu

Screenshot showing the WordPress interface where you create or edit menus.You’ll need to create the custom menu before it can be placed in a Cell. Note that only Site Administrators can create or edit menus.

  1. In the dashboard, go to Appearance > Menus.
  2. Select the create a new menu link.
  3. Give the menu a meaningful name.
  4. Add items to your menu. The two most common items to add is Pages and Custom Links.
    1. Pages – add a check next to the page(s) you wish to add to the menu then click the Add to Menu button.
    2. Custom Links – provide the link text and url then聽click the Add to Menu button. This option can be used to add both internal and external links.
    3. Reorder Links – links will be listed in the order they were added. Simply drag and drop to reorder them.
  5. Click the Create Menu button.
  6. Just after creating the menu, look at the page url. The end of the url will say menu=. Whatever number follows is the number that gets added to the Custom Menu ID field when creating the cell.