Earlier today I had a Zoom screen share meeting with a user who wanted to know how to set up a custom homepage in Genesis that looks like this: You can find below recordings of the session which cover these topics: creating a site from scratch on localhost using DesktopServer, activating Genesis Sample, creating a […]
Search Results for: youtube
Using Flexbox for displaying widgets in columns
A common question I see being asked is, “How do I display widgets placed in a widget area in columns?” In this tutorial, I provide basic Flexbox CSS code for arranging three child elements of a container side by side in columns. Screencast: Given the HTML structure of we begin by declaring display property of […]
Custom Listings Carousel in AgentPress Pro using Slick and Flexible Posts Widget
In Genesis Slack chat, a user asked: Seeking a carousel slider plugin that will work in a widget for the home page of the StudioPress AgentPress Pro theme. Tried a few, searched Google for hours and nothing really fits the bill. It is for a real estate website. Thanks. The effect I am seeking is […]
Video Background in AgentPress Pro
This tutorial provides the steps to replace the full-screen background image in AgentPress Pro’s homepage with a background video using the Video Background plugin. Summary of steps: Set a static Page as front page Wrap .site-header and .home-featured in a custom div on the front page if Home Featured widget area is populated Specify this […]
Custom Video Insert with Image Fallback in Genesis
A website I recently worked on had the following requirement: The site owner should be able to enter the ID of a YouTube video when editing Posts. For posts that have video ID provided, the thumbnail should automatically be pulled from YouTube and shown on the archives with a video icon overlayed. Clicking on the […]
Replacing standard Image Control with Cropped Image control in the Customizer in Altitude Pro
In the members-only forum, a user asked: Hi, Now that WP has native support for responsive images – wouldn’t it be great to be able to use srcset for the big beautiful background images often used in the widgets area. (For example in Altitude Pro) At the moment it looks at whatever image is selected […]
How to add an additional non-front page customizer setting in Parallax Pro
I finished a customization work yesterday whose inputs was: I created a new page template for parallax pro in order to make a salespage. The only thing is I would like to add the possibility to upload a background image in customizer for the top widget (.product-name) on this page only. In this tutorial, I […]
How to fade in widgets using ScrollMagic in Genesis
This tutorial provides the steps to fade in widget areas on a custom full-width front page in Genesis using the ScrollMagic javascript library. We are going to create 5 front page widget areas and display these on a static front page using this method. Then enqueue ScrollMagic and initialize it like so: create a new […]
Grid Based Responsive Tabs in Genesis using GridTab
GridTab is a lightweight jQuery plugin to create grid based responsive tabs. In this tutorial, we shall display a grid of featured images of posts which when clicked will slide reveal details panel showing a larger image, title and read more button linking to their respective single post. When the panel is open, users can […]
Posts grid on single posts in Genesis
This tutorial provides the steps to display a grid of posts’ featured images below content on single posts in Genesis. We shall exclude the current post from appearing in the custom WordPress query. A fallback image will be set for posts that do not have a featured image. On hover: Screencast: As the viewport width […]
Recent Comments