You can save a lot of time making a high quality website by using a drag-and-drop page builder. Once you’ve chosen the right one for you, the next step is learning how to work with that builder’s features and your own habits to cut down on repetitive behaviors.
The page builder I use is Cornerstone. For almost as long as I’ve been working with it, I’ve found that there are a lot of extremely dumb ways to waste time. For example – Cornerstone automatically adds padding to the bottom of the text element. I can add paragraph tags specifying a zero margin to every text element on the website. Or instead, I can add one line of code to the style file of the website and avoid dealing with it for the remainder of the time I’m editing the website!
This is organized into three sections: things you can do before you start to edit a website, things you can do while editing, and things you can do after editing.
Before editing
Three X Theme templates
Start from a website template
Starting from a website template eliminates the need to do a lot of the standard things you would otherwise do manually to set up a website like adding basic pages (About Us, Services, and Contact for example), choosing appropriate fonts, and coming up with the general structure of your pages.
Sometimes template files for your specific builder can be found from third party websites and sometimes your theme offers them. X theme has a bunch of free demo templates you can use and then edit with Cornerstone. Be careful that you load the template at the very beginning of building your site – once you load them they erase your pages and replace them with their template content, which may actually cause more work with the time it will take to rebuild everything. You can check out the X theme templates here.
Slightly unequal, very disconcerting upper and lower margins
Remove standard padding on headings, text blocks, and images
Automatic margins on an element can make it difficult to create equal spaces between things on your website because you have to either guess or memorize the distance they represent. For example, if you are adding space above and below a paragraph and paragraphs have an automatic margin on the bottom that is 20px but you take a guess and only add 10px, the section may come out looking slightly imbalanced. If you have it memorized, you still have to waste time when removing it for specific sections that require less space.
It’s a lot easier to make the space around an element equal if you can enter the same number for both distances, which you can do if you remove the default padding on elements! Typing out the same number saves time eyeballing these spaces and also gives you a feeling of security that the distances are actually equal, not unlike using a level to figure out whether a painting is hanging up straight instead of arguing about it with a roommate.
In Cornerstone, the code to remove these is:
HEADINGS:
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
margin-top: 0;
padding-top: 0;
}
TEXT BLOCKS:
.x-text p:last-child {
margin-bottom: 0;
}
IMAGES:
img {
margin-bottom: 0;
}
While editing
Draw it out
Most of us don’t have a program that can take our words and decide how to group them on a web page. Yet. Until the day we do, I’ve found that the absolute best way to save time when using a page builder is to draw out the structure of the page on a piece of paper before opening the editor to start building it. A good page builder will allow you the freedom to accommodate pretty much any kind of structure you can dream up, so there shouldn’t be any difficulties translating your notebook sketches into your editor! More info on sketching here.
Use page blocks for repetitive elements on external pages
Patterns are the building blocks of anything making sense, which is why good websites have a fair amount of repetition. Luckily, most page builders let you duplicate things! Often, the pages on a website will share some common characteristics. You can build each new page manually, but if you can clone pages you probably shouldn’t.
For example, I might have 3 pages each detailing one of a company’s services. I would most likely want the header images of these pages to be the same height, and the general shape of everything on the page to stay the same. I could make one page, duplicate it twice, and save the time of adding it all in manually a second and third time.
Duplicating the section named Product Image in Cornerstone
Duplicate sections and rows for repetitive elements on the same page
Similar to the situation in the last paragraph, I might have a group of similar elements on a website. But instead of being on separate pages, it’s a group of things on the same page (like a list of events or frequently asked questions). If I manually add new elements, I’m taking the risk that I’ll miss a small detail that will make each one different from the others and reduce the overall consistency. I’m almost definitely losing time. If I have 10 frequently asked questions, better to design one, duplicate it 9 times, and copy-paste the new text in!
Use an in-browser eye dropper extension
In a page builder’s editor screen, you can probably copy the value of a color picker to use on a different page you’re working on. However, if you don’t have the editor loaded in another tab you have to waste time opening it up so you can get the exact color or, God forbid, guess at the color and transmit to your visitors the eerie sensation that every page is a slightly different blue. I like to use a browser extension for Chrome that allows you to check the color of anything on your browser screen and I use it all the time! Here is the one I use, but there are a lot of them out there.
Keep a post it note onscreen with the hex and rgb values of the website’s colors
Colors are obviously a big part of designing a website (though they shouldn’t be relied on for everything). So here’s a second color-related bulletpoint: you may save time by having the rgb and hex name for your brand colors on a virtual post it note. Once you’ve found your colors, it’s helpful to have them written down nearby! The app I use is called Sticky Notes for Windows. Here is a list of a few apps.
Three different font settings
Create classes for different font variations
Let’s say I want to add some variation to my font choices but I also want the text to remain uniform throughout the site. I have a header font, a body font, and then a version of the body font that is slightly larger, green, and italic. I also have a variation of the header font that is slightly smaller, bold, grey, and all caps. I could write out all of those css rules for every text element. However, it would be much easier to create a CSS class for the first group of text blocks and named something like “green-text” and a second group named something like “grey-text”. Then, I can use the two groups frequently throughout the site without wasting time typing everything out or accidentally getting the style details wrong from page to page.
Frequently check in with different size screens and browsers
Whatever size screen you are using to build your website (mobile, tablet, or desktop), you should be checking what the site looks like at various screen sizes and in different browsers every time you add significant sections of content to the page. I used to build everything in desktop mode in Chrome and then only at the end check to see how everything was working in every screen size and browser. Often, I ended up doing a bunch of work to untangle problems that could have taken much less time to fix if I had checked in with different device settings as I was building the page! It helps a lot to keep checking these things as you go.
After editing
Taking a Contact section and changing the colors for use on other sites
Save sections you like so you can use them in later projects
You’ve finally finished the website! Nice. Now would be a good time to take sections or pages of the website that you like and save them for later use. In Cornerstone, you can save Blocks or Pages as .csl files. You can even save a whole website worth of pages, effectively making your own website template! This can save you time when starting another project because you almost immediately have something that is fully built and in a style you like.
4 Comments on “10 Ways to Save Time Editing with Page Builders like Cornerstone”
In My Cornerstone there is no classical elements How to enable classical elements ?
Take a look in the X Theme / Cornerstone changelog, they may have hidden classical elements by default on a per-user basis. You should be able to find your answer there.
Cornerstone is a great suggestion for a drag-and-drop page builder. When building my portfolio website in Cornerstone, I’d prefer to keep my focus on the graphic design aspect of building the pages, making them eye-catching and attractive, rather than wasting time on the littlest things that could be solved with the most simple solutions. I especially appreciate the suggestion of checking your website in different browsers, just to make sure you can catch the mistakes now, that would be much more difficult to fix later. I am looking forward to using these shortcuts while working on my website!
Great tips and walkthroughs Krista! I love Cornerstone and how creative we can get with it.