How to use iDesign

  • HOW TO USE iDESIGN
    • Creating a Tile

      Select Tile Type: The first thing to do when creating a new tile from scratch is to choose a ‘type’ for it. There are several tile types to choose from, and each has a unique html/css structure and most sport different animations. For convenience, these types are categorized on the basis of their most likely ‘purpose’ such as ‘image’, ‘button’ etc. Browse through the tile types and pick one that suits your requirement. For example, if you’re looking for an ‘image’ based tile where the primary focus is on the image element of the tile, so that the text should only be revealed on hover, then choose the ‘image’ type. Another example is ‘notification’ type where the focus is mostly on text, and the image is just incidental, can even be skipped altogether. It’s convenient to experiment with tile types as they’re just a single click away and can be changed at any time, so just cycle through various options and get a feel for which you prefer for the occasion.
      Fill-in Content: Next up is the ‘Content’ panel. While this one is mostly self-explanatory, there are a few things to take note of – Firstly, for the ‘image’ element, you can choose to use a font awesome icon instead of the image. This feature can be very handy thanks to the bevy of free and lovely FA icons available. As compared to images, they load fast and scale brilliantly. You can switch to FA icons by checking the option right under the image section. An input box will now appear where you can type the FA code for the icon. To browse through FA icons and get their code, click on the link icon next to this option and you’ll be taken you to the FA icons’ index page where you can view all the icons and their codes.
      Secondly, tiles can be linked to google maps, YouTube, Vimeo or DailyMotion videos, for which you just need to type in their link in the media input and the media pop open up in a lightbox. But if you want a regular image to open up in the lightbox, then check the ‘Enable lightbox image instead’ option for that instead. This option opens up the input for setting up the lightbox image. If no image is selected, then the tile’s main image itself is used by the lightbox as well.
      Styling the Tiles: Now, in order to style these content elements move on to the ‘Other’ section of the tile panel. Here you’ll find various options for customizing the visual look of your tiles, with many properties allowing a ‘hover’ style beside the regular style. In the case of the ‘link’ element, you can choose to add additional links beside the main link element and provide them with customs styling. You can also choose to have ‘text’ for the links and/or a font awesome icon of your choice. There is also an option to hide all links and instead have the entire tile link to the main link directly. In the ‘lightbox’ customization section you can select which elements to display in the lightbox content on hover.
      Correspondingly, every text element has the option for being hidden from view, and if you so choose, being revealed only on lightbox hover. Last but not least, there’s an ‘overall’ section where you can apply customs setting for the entire tile. This section also holds a ‘color presets’ option for one click application of colors across your tile. Another feature for greater convenience is the option to ‘import or export’ the tile’s settings. You’ll find this option as well in the ‘Overall’ section. This feature is very handy when you are working with several tiles and want to copy customizations between them, Or when you wish to import settings from a tile that you wish to use as the base for your new tile.
    • Using Presets

      Presets make life easier for web designers, but they’re only very useful when they support full customization, which is the case with iDesign. 

      Check out the designs on the preset pages, you’ll find a blue icon appear at the top-right corner of each set upon hover, clicking it opens up a lightbox popup with that set’s export code. 
      Just select an area on your blueprint where the preset should be copied, combine that area, click ‘customize’, and then use the import option in the tooltip to import the set. Alternatively, you may want to import the settings to an existing set and not lose the set’s content. In such a case, go over to the tile’s setting panel after hitting ‘Customize’ in the tooltip. Now use the preset code in the the ‘import’ section of its settings panel, deselect the ‘overwrite’ options below. You’ll have to press ‘Apply’ to actually make the settings take effect on your set. 
    • Using the Blue Print

      The blueprint is your canvas for creating new designs. Its blue cells and white lines are there to help keep you visually oriented while designing.
      Re-sizing the Blueprint: You can re size your blueprint by hovering your mouse over its bottom-right corner. There you’ll find a blue colored resize key appear. Now click and drag that key in order to resize your blueprint. Release it and a confirmation tab will appear for whether you definitely wish to resize as specified or revert to the previous size.
      Blueprint Settings Panel: The blueprint’s resizing can also be managed via ‘Blueprint Settings’ panel at the top of the screen. This is often useful when you wish to quickly resize to much larger or very precise dimensions. You can also manipulate the white space between the blueprint cells or the size of the cells themselves through this panel. 
      Drawing on the Blueprint: To begin drawing tiles on the blueprint, simply click and drag over the cells you wish your new tile set to be formed across. The selected cells change their color to orange, and a tooltip appears whenever you hover over them. Making a selection elsewhere on it causes these cells to become unselected once again. Click the ‘combine’ option in the tooltip in order to create a new empty set at that location. You can also choose to break the set at any point, or move or resize it. When you’re ready, choose the option to ‘customize’ in order to begin shaping your new set.
      Tweaking Front End View: On the front end, the design will appear in the same dimensions as the blue print does on the back end, unless the design has gone into responsive mode because of not having enough area to fit inside. In the ‘Design Settings’ section’, you can choose to have the design float or align itself to the left or right when it is placed adjacent next to other elements on the front end. Choosing the ‘center’ alignment will cause the blue print to stand in the center of its parent element and if a background color/image has also been enabled via the ‘Design Settings’ section, then that color/image will stretch across the parent element in a wide band behind the design.
    • Creating a Set

      A set can comprise from 0 to as many tiles as you require. It can also have it’s own custom settings and a title. A set may be turned into a slider or a filterable selection by choosing the appropriate options. You can set the content for the tiles of a set either manually, as in the previous example or else automatically, via blog posts or woo commerce products. When choosing the ‘automatic’ option, you only need a single tile settings panel to provide custom settings for all the tiles in the the set. However, you can choose to have multiple tile settings panels in order to create design patterns. For example, of you had two tile settings panels, one with a black background, the other a white, then all your tiles in the set will be alternating between black and white backgrounds. By clicking and dragging the top section of the tile panels, you can re-sort their order.

      The import/export options are available for sets as well, but please take note that while importing, you need to enter code that was was exported from another set, and not from a tile. Same goes for importing tiles. Most sets on the iDesign demo pages have a blue icon appear whenever you hover over them. Clicking that icon opens up a lightbox with the export code for that set. This makes it very convenient for you to copy any set you like from the demo pages, and use it as a pre-built foundation for your new custom set.

    • Optimizing Responsiveness

      The designs you create with iDesign are structured to be fluidly responsive. Normally this means the design breaks up into sets and resizes as per screen size when the device is narrower than the width of the design. 
      However, with iDesign you also have a variety of options for retaining control over the responsive behavior of your creations. 
      Firstly you can choose to create multiple variations of the same design, and provide them with specifications of the scree size range in which you want them to appear. This is done via the ‘Display Above’ and ‘Display Below’ options of the ‘Design Settings’ section. More conveniently, you can simply type in ‘phone’, ‘tablet’ or ‘pc’ in these size specification fields to decide where that particular design shows up.
      Then there is the option of ‘flex’, which is the percentage limit until which the design will readily squeeze it’s width before breaking up into sets. This can be very useful for narrowing down small designs for tablet screens without resorting to breaking up the look.
      The options for hiding from mobile and setting a flex limit are available for individual sets as well, which further helps you refine responsive behavior as there may be non-essential elements that you don’t want occupying your phone screen space.
      But keep in mind that on phones, the designs will necessarily break up, and their tiles will appear in responsive mode where all the content is revealed without mouse hover. This is because fancy effects can crash browsers on weaker devices and users are far less prone to try and ‘hover’ over tiles on phones by clicking them and therefore may miss out on content meant to be revealed on hover.

    Leave a Reply

    Your email address will not be published.