Did you know that it is possible to make any element sticky or fixed as it is scrolled to and have it “bottom out” so it never leaves its container (no more worrying about accidentally covering the footer) using CSS alone? Thanks to Tim Jensen, today I learned about position: sticky which is quite powerful […]
Search Results for: element pack
object-fit: cover for images
In a recent website that I developed, the requirement was to display an image (via an image widget – i.e., not a background) next to an opt-in form and have the image automatically take up as much height as the form. After setting the display of the parent container of the widgets to flex, both […]
Title and Excerpt upon Hover on Featured image using Display Posts Shortcode and CSS Grid in Genesis
A member asked via email: In this tutorial https://sridharkatakam.com/portfolio-grid-showcase-pros-front-page-title-excerpt-hover/ , you place the portfolio in the Widget 4 section of the front page. I need to be able to place multiple portfolios in different places throughout my site. I believe I can figure out how to replace any of the widget areas on the Front […]
Posts Grid in Genesis using CSS Grid
CSS Grid is a fantastic new feature in CSS supported by all modern browsers (partial support in IE at the time of writing this) since March of this year. Creating a grid is now as simple as declaring display property of the parent container element as grid. The number of columns can be set in […]
How to display ACF Repeater items in a carousel using SlickJS
In the members-only forum, a user asked: I’m wanting to build a site similar to this http://kevita.com/products/master-brew-kombucha/ with a full width top image and slider below with product info using advanced custom fields and slick or soliloquy. Thank you! In this tutorial, I would like to share a custom Page Template that outputs rows of […]
Video Lightbox and Opt-in Welcome Widget section in Infinity Pro
In my tutorial requests Trello board, a user asked: Hello, I’m looking to add to add an opt in form under header using the Infinity Pro theme, and embed a video with image background showing. Does require adding a welcome widget? For example the website that has the look I would like to create is […]
How to modify loop hooks properly with genesis_custom_loop()
Genesis comes with a useful function called genesis_custom_loop() to output elements like entry header, entry content and entry footer when you want to write a custom query. If you would like to make any changes like showing/hiding certain elements in the loop or moving them around, it is not sufficient just to do so and […]
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 […]
Side by side images with centered widget areas in Altitude Pro’s front page
In the comments section of Side by side images Landing page with centered widget areas in Genesis tutorial, a user asked: Hi Sridhar, How can I add this landing page in Altitude Pro? I’ve tried to change the static front page with a custom page having the side-by-side template and it doesn’t work. Any suggestions? […]
Grid of featured images with sliding content panels on a CPT archive in Genesis
In my tutorial requests Trello board, a user asked: I would love a tutorial on how to use cpt and maybe the accordian show/hide to get a result similar to this Team/Staff page: http://www.unified.com/team/ I think this could be used for portfolio pages also. Thank you so much! I think this could be used for […]
Recent Comments