Posts Tagged: Web Development - Page 5
Want to Receive Email Updates of New Articles About Web Development?
Join My Email NewsletterHubSpot HubL Code Snippet Collection – Filters, Functions, and Macros
Category: Code Snippets
Below is a list of my commonly used HubSpot CMS HubL filters, functions, and Macros. Email me if you have one you would like to add to this list. Create a slug from a text string I used this when I wanted to add a CSS class name to the li of a menu using […]
How to Create a Landing Page in HubSpot CMS Using a Blank Page
Category: Tutorials
Are you trying to create a landing page using a blank page in HubSpot? HubSpot’s drag and drop templates make it incredibly simple to create landing pages that generate leads or promote webinars. The user-friendly drag and drop editor allows you to easily add or update text and images within the landing page layout. What […]
How to Make CSS Style Customizations to HubSpot CMS Pages
Category: Articles
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 […]
How do you change the styling of a HubSpot pop up form?
Category: Articles
I recently tried adding a HubSpot popup form but I noticed I didn’t like the styles. It wasn’t exactly what I was looking for. The form admin does not provide extensive customization options, but if you are comfortable adding CSS styles you can adjust the popup to fit your needs. Below are the changes I […]
What are the Best Image Size Dimensions for Responsive Web Design?
Category: Common Questions
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 […]
WooCommerce Product Category and Terms Select Filters [code snippet]
Category: Code Snippets
The code below will help you add a form select filter for Woocommerce online shop on WordPress. <?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 […]
How to Remove Default HubSpot CTA Styles
Category: Code Snippets
HubSpot allows marketers to create custom styled CTA buttons. This can be a problem if you have a large team who may not know how to follow brand guidelines. This creative freedom can make buttons look inconsistent across your website. You could educate all of your users to never create custom styles. Or you could […]
How to Get a Wistia Video Thumbnail Without the API
Category: Code Snippets
Wistia video provides some handy embed codes for your videos but what if you want to create a custom player or use the thumbnail image by itself. You can use their API but the setup could me more complicated than you need. Thankfully Wistia provides Oauth url’s used in WordPress to grab the data for […]
How Do You Get the URL Parameters and Append to Href or Src of Another Element?
Category: Code Snippets
Do you want to grab the url parameters and pass them to a button href or iframe src? This is common when you are running a paid ad campaign to a landing page that links to a form on another page. You want to track the source of the form submission by duplicating the url […]
Throttle or Delay JavaScript Functions When Window is Resized [code snippet]
Category: Code Snippets
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.