Little Known Tools to Design a Dazzling Blog
Do you like to tweak your blog design and dabble into some code? Are you a blogger looking for some secret web tricks to help you understand how your blog design comes all together?
These tricks and tools are for you–some fun tips that you can try when you find inspiring website designs or want to build your own. From browser extensions to looking under the hood into the CSS of your website, these hacks can help you in the process of picking colors, fonts, and design elements for your blog. These tools below have been game changers for my design projects and workflow.
1. Find out the WordPress theme of your favorite blogger. (Plus which plugins they use!)
What WordPress Theme is That? is a free website where you can type in any website (that is hosted on the WordPress platform) and it will give you details about the theme, where you can buy the theme, and a list of detected WordPress plugins. I was really excited when Madison of Wetherills Say I Do showed this during one of her blog design workshops.
2. Use developer tools to fix and learn code for your blog design.
Don’t freak out if you hear the word, “code” or “developer”! If you’re not a designer, but perhaps you know a little bit of HTML or CSS, you can use developer tools to find out details about certain elements of your design.
If you’re using Google Chrome, right click on an element such as a headline or image. Click on “Inspect.” This brings up a panel in your browser of the HTML of the current webpage and the associate CSS rules that are associated with a certain element.
How does this help you? It helps you determine what color an element is, what font it is, how much margin or padding there is, etc. You can even write your own code under the “styles” option to experiment with different CSS rules.
In short, this is an under cover way to find out what’s going on with certain specific areas of your site. The limits to using developer tools on your web browser are endless.
[bctt tweet=”Designing your blog? You must check out these awesome tools you NEED in your life >>”]
3. Find out the name of any font!
Let’s say you’re on your favorite travel blog or fashion blog and they have a beautiful paragraph font. Want a quick and easy way to find out what that is? If you don’t want to go through developer tools and into the CSS of the page, you can install the WhatFont browser extension. This lets you determine a font with a click of a button – from any website you visit. This has saved me so many times! WhatFont is available for Safari extension, Google Chrome, or as a bookmarklet.
4. Automatically find the HEX color code for any color on your screen.
ColorZilla color picker is another browser extension I love for Chrome and Firefox. It allows you to use an eye dropper tool to pick a color off of any website and saves the code in a library for you to use later. I keep important color swatches for my brand saved in the library, so it’s easy to return to them when necessary. Also, if you want to make CSS gradients for your design, ColorZilla has a gradient generator, too.
Related Post: 6 Secrets for Easy & Awesome Blog Graphics
5. Create a simple landing page with Beaver Builder.
Have you ever wanted to create a page with a completely unique look on your website or blog? Perhaps a landing page for your next product or a home page? Or even create a signature “about” page or “start here” page with a cool design—different from the rest of your website? Creating a new page design may not be the most intuitive task for WordPress beginners, but Beaver Builder, a visual interface for creating pages in WordPress, makes it a lot easier.
Install the Beaver Builder Lite version and start to create various pages by adding image backgrounds, photos, text and other content, all while seeing a preview before you publish. Beaver Builder has a lot of capabilities, even in the free version, that I was impressed with. You can place any HTML or WordPress widget in the exact columns or rows you create on the page. You can easily adjust the margins and placements of elements and backgrounds. I experimented with video backgrounds, something that can make your website design pop, while tell the story of your brand.
Related Post: Blogger to WordPress: Customizing Your Design
[bctt tweet=”Want some blog design tricks up your sleeve? Check out these time-saving tools!”]
6. Measure the pixel length of an image or object on your blog or website.
Page Ruler is another browser extension I often use when determining the size of photos, post widths, margins or various other elements on a website. It allows you to draw a square or grid onto the website and see how many pixels it is. This comes in handy when determining the size of different elements like icons or images or the spacing of various parts of a website.
If you would like to see more of my favorite blogging tools, check out my top creative resources for lifestyle bloggers. It’s always good to have the right tools in the toolbox to make your creative projects come together easily and quickly. In the end, it’s all worth it with a beautiful and strategic product!
Do you have any blog design tools you like to use? Let me know in the comments!
Want to boost your blog graphics with InDesign? Sign up to receive a FREE bundle of 10 InDesign Templates for Bloggers.