How Did They Build That?
We’ve all heard the quote “Imitation is the sincerest form of flattery” and website design is no exception.
A question that comes up regularly on our helpline is, “If I see something that I like on another department’s page, how can I find out the name/style of block they are using so that I can create it on our page?”
The short answer is by using the Inspect Element in your browser.
Inspect Element is a feature of modern web browsers that allows you to view a website’s source code. This tool allows you to see exactly what blocks – and what, if any - helper classes are being used. While I am most familiar with Chrome browser (and will explain the steps using what I know), both Safari and Firefox also use this feature.
- Using Chrome browser, navigate to the block you would like to identify and right click on it.
- Select “Inspect” option on the menu.
- This action opens developer tools and the inspector, where you can see exactly what block is being utilized, by matching it to the blocks within your site.
If you are having a hard time finding the class visually, you can search for the word in the code by using the shortcut Control F (on a PC, or Command F on a Mac) and typing in the word class= .
Once you become familiar with the names of all the blocks that Western’s web theme offers, you will be able to easily identify the blocks and any styled helper classes being used, so you can replicate the block on your own site.
Curious about what all the blocks are? Visit the Drupal Blocks Reference page on Brand.wwu.edu to see all the blocks available on the Ashlar theme.
It's fun to peek behind the curtain, then reimagine how your site may be improved using your new insights.
Questions? Please feel free to reach out to webhelp@wwu.edu.