Isometric Image Tiles for WPBakery Page Builder

Isometric Image Tiles for WPBakery Page Builder

(formerly Visual Composer)

Add a beautiful spin to your webpage using Isometric Tiles for WPBakery Page Builder. Place high-quality photos in interactive geometric tiles, and add life to your content with just a few clicks.

Chelsea’s Textile Shop

Having passed down the shop from her father, Chelsea’s offers a wide selection of textiles and fabrics for all your needs. Take your pick from our latest patterned releases today!

Our firm is dedicated to providing quality services to our clients. Proficiency, perseverance, and passion are what drives us to provide you with only the best output.

Our Coffee

We roast only the finest quality coffee beans, serving them to our customers with great care. Each unique cup is meticulously handled by our baristas with skill and precision.

Join the #1 Wedding Network

Contact wedding planners, caterers, reception venues, and more! Join the largest network of professionals in the wedding industry, and find everything you need for your special day.

Tips for Choosing Colors

  • Use the color wheel as reference
  • Contrast between warm and cool
  • Mix in some blacks and whites
  • Look for inspiration online
  • Add a personal touch
  • Don’t forget to have fun!

Shortcode for Non-WPBakery Page Builder Users

[iso_tiles image_ids='1,2,3,4,10,11,12,14']
ParameterRequiredTypeDefaultDescription
heightnumber230The height of the whole tile area (in pixels). You can use this to clip the area of the tiles, to get some nice effects
image_idsyesnumberThe image attachment IDs that will be placed inside the tiles. The links for each image tile can be entered in the media manager’s sidebar
layouttextrectanglesThe tile layout type to use.

Selection:
"rectangles"
"rectangles-arrow"
"squares"
"squares-arrow"
"single-rectangle-left"
"rectangles-left-layered"
"single-rectangle-right"
"rectangles-right-layered"
"single-square"
"squares-layered"
parent_breakoutnumber0Use this breakout feature to force the isometric tiles to stretch outside its current container and occupy the parent container’s width. You will have to test out different values for this parameter depending on your theme. Use this only for full-width pages and when the isometric tiles are laid out in a single column. Also, the background isn’t included in the stretching, only the tiles are adjusted. Value can be from 0-10, or "99"
image_directiontextleftThe direction the images are facing inside each tile.

For "rectangles" and "rectangles-arrow" layouts, the directions are set for you. Values can be either "left", "right" or "random"
sizenumber100The size of each tile (in pixels). Rectangular tiles have one side doubled. The value should be from "100" to "300"
gapnumber20The gap between the tiles (in pixels). The value should be from "0" to "50"
anglenumber40The tilt angle of the tiles (in degrees). The value should be from "0" to "70"
tile_displaytext3dThe look of the tiles. Value can be "3d" (with sides) or "flat" (no sides)
side_heightnumber10The height of the tile (in pixels). The value should be from "0" to "15"
left_side_colorcolor#006c94This is the color of the left side of the 3d tile
right_side_colorcolor#0084b5This is the color of the left side of the 3d tile
hover_directiontextrightFor layered layouts, tiles with links hover either to the "right" or "left"
hover_distancenumber30The distance a tile rises or slides when hovered on (in pixels). If you’re finding that your tiles do not hover, that means you need to put in a Tile Link To value while selecting your images in the Add Images/media manager modal window
el_classtextIf you wish to style particular content element differently, then use this field to add a class name and then refer to it in your CSS file