Posts Tagged: Responsive Web Design
How to Make CSS Style Customizations to HubSpot CMS Pages
Are you creating a HubSpot landing page or website page but want to make a small design style adjustment? Sometimes you just have to dig in and get your hands dirty writing some code. But don’t worry it isn’t as bad as it looks. And if this is your first time, afterward you will think… Read more »
Category: Articles
10+ Best HubSpot Website Themes and Templates of 2022
The HubSpot theme marketplace contains a variety of themes to choose from. Below are 10 of the best HubSpot website themes to consider when choosing one for your business. What are themes in HubSpot CMS? Prior to themes, the HubSpot marketplace contained only templates and template packs. Themes are very similar to template packs with… Read more »
Category: Articles
The Top 5 HubSpot CMS Benefits and Advantages vs WordPress – HubSpot CMS Review
As a website designer and developer, I have built themes for various content management systems. The biggest is WordPress. For the past six years, I have been building templates for HubSpot and I have seen some great advantages which alleviate the major pain points of building WordPress sites. Below is my list of five benefits… Read more »
Category: Articles
Website Templates for Industrial Manufacturers Added to the HubSpot Asset Marketplace
Jacob Lett of Bootstrap Creative designed a website theme for manufacturing businesses to promote their brand and products online using the HubSpot CMS. DETROIT (PRWEB) JANUARY 07, 2021 When strategic marketing consultant and website designer Jacob Lett entered HubSpot’s first-ever Themes Challenge hackathon, his vision was to design a website theme specifically to help manufacturers increase… Read more »
Category: Press Releases
What are the Best Image Size Dimensions for Responsive Web Design?
When building image carousels, jumbotrons, or full background sections you will often need to properly size an image. Below are some recommendations based on the most common device screen sizes and if you are using parallax or fixed background images. Desktop (1920×1080) 2000px x 360px, 4000px x 720px (retina) Parallax (images need to be as… Read more »
Category: Common Questions
WooCommerce Product Category and Terms Select Filters [code snippet]
The code below will help you add a form select filter for Woocommerce online shop on WordPress.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <?php $categories = get_terms( ['taxonomy' => 'product_cat', 'hide_empty' => true] ); ?> <div class="product-categories"> <h3>Categories</h3> <select class="form-control shop-filter" onchange="location = this.value;"> <option selected value="/shop/">All</option> <?php foreach ( $categories as $category ) { ?> <option value="<?php echo get_term_link( $category->term_id ); ?>"><?php echo $category->name; ?></option> <?php } ?> </select> </div> <?php $terms = get_terms(array('taxonomy' => 'product_tag', 'hide_empty' => true)); ?> <div class="product-tags" > <h3>Template Tags</h3> <select class="form-control shop-filter" onchange="location = this.value;"> <option selected value="/shop/">All</option> <?php foreach ( $terms as $term ) { ?> <option value="<?php echo get_term_link( $term->term_id, 'product_tag' ); ?>"><?php echo $term->name; ?></option> <?php } ?> </select> </div> <script> jQuery(document).ready(function() { var queryString = window.location.href; console.log(queryString); jQuery(".shop-filter > option").each(function() { if (this.value == queryString) { this.selected = 'selected'; } }); }); </script> |
Category: Code Snippets
Scale Up and Crop an Image WordPress [code snippet]
In WordPress you may need to increase the size of all thumbnails but WordPress does not res up the images to prevent distortion. Using the method outlined in this example you can use object-fit to make undersized images fit your desired aspect ratio. .img-crop__polyfill image is sized to the desired dimensions. This will help keep… Read more »
Category: Code Snippets
HubSpot Themes vs Templates – What is the Difference?
Previously it was possible to download HubSpot template packs from the HubSpot marketplace. These were a collection of landing page, website page, blog, and email templates. The downside of these packs is they did not share any unified settings and they were not very portable between accounts. Now a group of templates, custom modules, and… Read more »
Category: Common Questions
10 Benefits of the HubSpot Website Builder for Your Business
Your website is the front door to your business. Choosing the right content management system (CMS) is essential for your business growth. HubSpot CMS consists of tools that all work together to give control of all your web assets. Basically, it takes the pain out of managing your website. Instead, it helps you focus on… Read more »
Category: Articles
Throttle or Delay JavaScript Functions When Window is Resized [code snippet]
Underscore.js has a popular method for throttling and debouncing functions to prevent them from firing multiple times when a window is resized. I found this delay function that works for times when you don’t need to load the entire underscore library to achieve a similar effect.
Category: Code Snippets
