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.
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
|height||number||230||The 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_ids||yes||number||The 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|
|layout||text||rectangles||The tile layout type to use.
|parent_breakout||number||0||Use 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_direction||text||left||The 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"
|size||number||100||The size of each tile (in pixels). Rectangular tiles have one side doubled. The value should be from "100" to "300"|
|gap||number||20||The gap between the tiles (in pixels). The value should be from "0" to "50"|
|angle||number||40||The tilt angle of the tiles (in degrees). The value should be from "0" to "70"|
|tile_display||text||3d||The look of the tiles. Value can be "3d" (with sides) or "flat" (no sides)|
|side_height||number||10||The height of the tile (in pixels). The value should be from "0" to "15"|
|left_side_color||color||#006c94||This is the color of the left side of the 3d tile|
|right_side_color||color||#0084b5||This is the color of the left side of the 3d tile|
|hover_direction||text||right||For layered layouts, tiles with links hover either to the "right" or "left"|
|hover_distance||number||30||The 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_class||text||If 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|