In this tutorial I show how BigVideo.js, a jQuery plugin that uses Video.js for background video can be set up in WordPress. Live Demo In handhelds devices like tablets and mobiles, a poster image (screenshot of one of the video frames, usually the first one) is going to be set to appear in place of […]
Zoom hover effect for images using CSS
Using CSS transform and transition properties we can magnify images upon hover. Example: Adding the following in Minimum Pro’s style.css adds the zoom hover effect for images in the Portfolio archive page. Note: Actual animation will be smoother than what’s captured in the above screencast. To view the full content, please sign up for the […]
How to replace image background with a video for Front Page 1 section of Altitude Pro using BigVideo
In the past I wrote a tutorial on setting up looping video background for the top visible portion of the homepage in Altitude Pro here. Today I am going to show how BigVideo can be used to set up the same. This method is more robust (does not have the “background overlay showing up as […]
Useful TextExpander Abbreviations
Updated on October 14, 2020 TextExpander (20% off coupon code: SK20PERCENTOFFTE) is a Mac software for expanding abbreviations to full text with support for useful features like custom triggers (delimiters) and cursor placements. A must-have tool for increasing my productivity. For example, I type ml followed by ` and TextExpander expands it to margin-left: ; […]
Full Width Page Template in Genesis for Beaver Builder
Update on October 13, 2017: Click here to go to the updated version of this tutorial. Beaver Builder is a pretty good plugin for easily creating content rows for Pages via drag and drop. In this article I share a modification of code from Front Page Template for Full Width Sections in Genesis tutorial for […]
Displaying entries on a CPT archive page in random order in WordPress
Jami asks, Looking for help on where to search for editing Minimum Pro’s Portfolio Archive order… I’d love for it to be done in a random order. I’m familiar with using custom fields to order them alphabetically (having done this for a directory style version of the portfolio archive on another site), but this time […]
Animated Search form in Minimum Pro
This article covers implementing How to set up animated Search form in Genesis tutorial in Minimum Pro. We are going to unregister Header Right widget area and position Primary navigation menu in its place by moving it from genesis_after_header to genesis_header. Step 1 In functions.php replace This file contains bidirectional Unicode text that may be […]
[Video] How to display entries in columns in Genesis
A user asked, I’m trying to add a column grid of the 8 latest portfolio items to my front page (amongst other content) by adding code tin front-page.php. Each item should show the featured image, title and excerpt. I need to keep the standard loop in tact to display the introductory content but just add […]
CSS for matching Simple Social Icons’ Background Color with their networks
Updated on January 13, 2017 Simple Social Icons Genesis plugin provides options for setting icons’ colors in its widget. However these colors apply to all the icons. We can add CSS to style individual social icons with matching colors as that of the network’s official logo/branding. Here’s the CSS: To view the full content, please […]
How to add a Featured Image Background Parallax section on single Posts in Parallax Pro
This tutorial provides details on displaying Post Title and Post Info on Featured Image below header with parallax effect on single Posts in Parallax Pro. For Posts that have a Featured image, the featured image will appear as the background for the section below header. For Posts that do not have a Featured image, a […]
Recent Comments