Cards are a useful and stylish way to display links to your content. Cards are displayed in a 3 column grid on desktop devices, and just a single column on mobile devices.


To add the Cards Widget to your homepage, log into your iHOUSEweb admin menu, click Edit Website, then click Edit This Page while viewing your home page. In the column of your choosing, click Add new content, then from the dropdown, select "Create new Cards Widget", and click add this content.


Click Edit to change the widget name, or to add, edit, or delete cards. The first time you edit your new cards widget, a number of template cards will be provided. You are free to remove the ones you don’t want, or to customize them to your liking.




To move a card into a different position, simply drag the top left corner into place. To delete a card, hit thein the top right hand corner. Adding a card will place a new generic card at the end of the grid.


Clicking EDIT on a card will flip the card over to edit its properties. You can change the card type, select the background image through your File Manager, choose from a large selection of icons, choose where the card will link to, and the card text.


NOTE: Images should be no larger than 700px wide. Oversized images could negatively impact page load times


Types

Flip Card

The flip card uses a white icon and text over a tinted background. When hovered over, the card will flip over to show a negative of the card, with a black icon and text with a tinted white background image. 


You can choose to not display an icon by selecting "NONE" in the icon field.


Featurette Card

The featurette card foregoes the use of an icon and flip animation. This card uses a simple and slight zoom enhancement on the featured image on hover.


Sub-text under the main image is optional and appears by writing in the "Text 2" field.


Link Out

Selecting Link gives you the following card link types: 

  • Page allows you to link to an existing page on your site. This will be sorted by the page title. 
  • Email allows you to link to an email address. When the email address is selected, it will open your browser's email client and start an email to this email address. 
  • Phone allows you to link to a phone number. When the phone number is selected, it will bring up your phone app to prepare a call to this phone number. 
  • URL allows you to link to anything you want. Enter the URL* then select from the Open Link In drop down menu either Same Window or New Window/Tab. 
    • Same Window will open the link in the same window/tab you currently have open. If you are linking out to an external website, this will direct the viewer away from your website. 
    • New Window/Tab will open the link in a new tab while keeping your website open in the current tab.

*Note: The full URL must be used, not only the domain. For example, use https://www.google.com/ instead of google.com. Using only the domain will result in an error when the card is clicked: 404 The page or file requested is not available.