Website
      Back to home
      1. Member Jungle Help Portal
      2. Website

      Display Cards

      Display Cards are a fantastic Content Block for use when you need to display an image along side text

      When To Use Display Cards

      • Display Cards are a fantastic Content Block for use when you need to display an image alongside text.
      • The Display Card aligns the text with the image, and providing the images are uploaded large enough, it will automatically resize and align the images. 
      • Display Cards act like a two column table, but are mobile responsive.

      How To Add Display Cards

      Once you have followed the instructions on Adding Content Blocks, locate your new Content Block on the Widgets page, and click on the  to enter the settings page, and complete the fields;

      • HTML Content: Add your text that you wish to display with your image, as you would Using the Editor.
      • Image: Upload your image.
        Displaycard editor

      Advanced Options

      You can edit the advanced options in your Display Card to give it more styling. To do this, below the image uploader, select the Advanced Options link. This will open the settings:

      • Container Class: For custom styling
      • Card Class: For CSS custom styling for this Display card.
      • Background Colour: This colour will be displayed behind the Quicklinks as a background. If you upload a Background image, then this colour will be used as an overlay over top of the background image.
      • Text Colour: Changes the text colour.
      • Image Location: Select from the drop down list where you would like your image positioned.
      • ALT Tag: Insert an ALT Tag for your image.
      • Image Shape: Select what shape you would like your image to be.
      • Image Size: If you would like the settings to resize your image, select from the drop down what size you would like the image displayed.
      • Display Type:
        • Standard display will contain your Quicklinks within the content body area of your website.
        • Full Width will display your Quicklinks the full width of the page to the edges.
        • Background Full Width with contain the Quicklinks within the content body area and the background colour and/or image (which can be set below) will expand the full width of the website
      • Background Image - The background image will be displayed behind the Quicklinks as the background. You can use the Display Type to dictate if you would like this to use standard display or show the background as full width. If you set a background colour as well as upload a background image, the background colour will be an overlay overtop of the background image.

      Click Save.

      Displaycard advanced

      TIP:  If you need to expand the editor page, you can click and drag the bottom corner to increase the size.

      You can add as many Display cards as required, by repeating the above steps.

      Content Blocks are live on your website page as soon as you click Save. So it is a good idea to preview your page and ensure the update is correct.

      Below is some examples of how the Display Cards can appear live on your website, dependant on your Advanced settings. (Note: The text and colours may differ depending on the styling of your website).


      Display CardsLive