Divshot: An Awesome Way to Design and Build Bootstrap Pages
Recently, we took a close look at Easel, a web-based site builder that leverages Twitter Bootstrap. Today we’re following that up with a tour of a very similar tool: Divshot.
With Divshot, you can quickly and easily build clean, responsive web page layouts using a combination of visual tools and hand coding. It’s a really slick tool and I think you’re going to enjoy using it.
2 Million+ Digital Assets, With Unlimited Downloads
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
Meet DivShot
If you read our article on Easel, Divshot will seem super familiar. The concept here is exactly the same. You’re provided with a visual, drag and drop style interface that is built on top of Twitter’s wildly popular Bootstrap framework.
As you can see, just like with Easel, we have a large canvas occupying most of the screen and a sidebar where all of the tools, UI elements and customization options reside. Everything you see here is super straightforward and quite easy to use. Let’s jump in and build a page.
Create a New Page
At the top of the interface, you’ll see a horizontal bar containing two controls: one to create folders and one to create files. First, create a new folder with drop down menu on the right, then a new page with the drop down menu on the right.
Creating a new page brings up the screen shown below. Here you can choose from a few different starter layouts (a key feature missing in Easel), clone the current page or start from scratch.
Let’s be adventurous and start a new blank page so that we can really get a feel for how it is to build something with this tool.
Add a Navigation Menu
Once you’ve started your new page, take a gander at the sidebar on the left and find the “Components” section. This is where you’ll find all of the Bootstrap UI pieces that you’re familiar with if you’ve ever used the framework.
Scroll through the various options until you find the Navigation Bar. Drag this out into the area with the dashed border (the Bootstrap page container).
With that little bit of effort, we have ourselves a nice little pre-styled navigation menu at the top of our page. It comes with a space for a company name and two pages.
Customizing this menu is easy. Double click on a piece of text to type in a replacement value and Option-drag a menu item to duplicate it. I changed the company name to “Design Shack” and copied out a few more menu items. Here’s the result:
The Hero Unit
This is basically how the workflow goes. Now we’ll simply continue dragging and customizing elements from the sidebar. Next, let’s drag in a “Hero Unit.”
Once again, customization is super easy. All I did was double click on the text and type in something new. Now we have a nice looking header for our page.
Layout
Now let’s engage in a little more of a freeform layout exercise. I want to create three columns of content. To do this, I drag out a “Layout” module and this is what I get:
As you can see, by default, this is split into two columns. If I check out the Inspector in the sidebar, I can customize this either by typing numbers in manually or by clicking one of the pre-fab layouts.
I clicked the three column layout and checked the “Fluid Columns” box. Now my layout module looks more like what I want and is ready to receive some content.
Core Content
Now that we have these nifty layout boxes that define where our content will go, we need only drag out some items into them. I tossed in a heading, paragraph and image into each, tweaking the available customization options as I went.
Custom CSS
My favorite feature in Divshot is the ability to add in your own custom code. This is absolutely key if you’re going to get any real developers to even consider using some sort of WYSIQYG. If I can’t customize something that I don’t like, I’m simply not going to use your app.
One thing that I don’t like in my layout currently is the lack of space between those placeholder images and the paragraphs below them. This is easy to fix though. First, I’ll add a class to each of the boxes using the “Structure” options.
Now if I hit the “Edit CSS” button in the bottom left, a bar will pop up from the bottom of the screen and allow me to add some custom CSS. I especially like that I can use preprocessors here. Everything is compiled live, complete with error reporting. Awesome!
With this code, my navigation bar and my images now have a little room to breathe. Much better! If you need it, there’s also a module to add in custom HTML, so you really do have complete freedom to do what you want.
More Tools
Near the top right of the screen, you have a few different tools that are worth mentioning. There’s a standard Undo/Redo, a code download, a live preview and a button to change your viewport
Remember, this is all built on top of Boostrap, which means that your designs should be fully responsive. This is an amazing bonus that shouldn’t be glossed over. This is one of the easiest ways that I know of to build yourself a nice looking responsive websites. There’s even a menu that allows you to set whether an item is hidden or visible in a given viewport size.
Easel or Divshot? Which Is Better?
So now I’ve tried and reviewed two of these tools. The question is, which should you turn to if you’re looking to build a Bootstrap site? To be honest, there’s no clear cut winner overall. If we look at individual features though, I do have strong opinions about which is better.
Workflow & Layout: Divshot
In general, I found the workflow and layout process to be much better in Divshot than Easel. The Easel workflow was clunky and I made several suggestions for improving it in my review. Interestingly enough, when I tried Divshot, I found that it very closely matched what I imagined Easel should be like.
I loved the column layout module and how easy it was to tweak to suit my own needs. Easel has something similar, but it’s not as smooth or intuitive.
Type and Icons: Easel
This is one place where Easel is the clear winner. It has full Google Web Fonts support and allows you much greater customization over your type. In fact, even without the custom fonts, the type tools were far better in Easel.
In addition, Easel also has integration with FontAwesome so you have access to tons of great icons that you can quickly toss into your work.
One cool thing that Divshot does have though is a theme switcher, which allows you to change the overall look of the entire theme with a few clicks. There are currently thirteen themes and a “Custom” option.
Code Export: Easel
Both apps have a code export feature, but the one for Easel was much more robust and impressive, allowing you to see all the various elements and download a .zip containing everything.
Customization: Divshot
This is literally the most important feature to me as a user and I’m giving this one to Divshot. The custom code tweaking features here are really nice, especially the CSS module. I really felt like I could do just about whatever I wanted and I really appreciated that freedom.
Placeholder Images: Divshot
The placeholder image system was one of my biggest complaints about Easel. Their placeholder images seemed super buggy and difficult to work with. By comparison, Divshot’s are really straightforward and easy to use.
Pricing: ?
Divshot is currently in free public beta, so it’s impossible to tell how the two will compare in price until Divshot releases its pricing plans. They’ll have a lot to live up to because I really like the Easel pricing structure. It’s not super cheap but you do get quite a bit on the free plan:
Divshot Complaints & Feedback
I thoroughly enjoyed using Divshot and think that it’s one of the best rapid prototyping tools that I’ve come across. Bootstrap lends itself so well to this type of app and I’m thrilled to see developers working hard to create tools that make using Bootstrap even easier. That being said, there are definitely some areas that need improvement.
Type Sucks
First, typography customization. Once again, Divshot needs to take a page out of Easel’s book on this one. Their text tools are much more intuitive and powerful.
Better Box Model Tweaking
I think that it’s currently too much work to tweak the spacing of various objects. It’s nice that I have the option to write my own CSS, but for something as simple as padding and margin, I should be able to enter the numbers into a field near where I insert the dimensions.
CSS Download
Currently, the code export feature only gives you the HTML. I definitely need to see an option to package everything together in a download like we saw with Easel.
Buggy Preview
I’m not sure why, but it seemed like my live preview was consistently one change behind, so it almost never reflected the actual current state of my document. This was quite annoying!
Give Me Some Room!
I found it very difficult to add items to the bottom of my layout if it stretched below the bounds of the viewport. Give me a little extra room down there to work with, even if it’s not in the actual output.
What Do You Think?
Divshot is a stellar app and I definitely think that you should give it a shot, especially if you’re a fan of Boostrap, Foundation and other similar all inclusive frameworks.
Now that you’ve seen what Divshot is all about, leave a comment and let me know what you think. Would you use this over Easel? Why or why not? What other similar tools have you come across and how do they compare?