• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2662

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

Full Screen Overlay Effect Widget In Genesis Sample Theme

This theme includes one of the effects from Codrops you can demo here and installed in a fresh copy of the Genesis Sample child theme by StudioPress.

Simply add any content you like to the Layout Widget area added to this theme and your content will display when the overlay button is clicked.

In the following sample, the button has been named Download eBook and added to the genesis nav menu as seen in the following image:

overlay-widget-genesis

The above example shows the Genesis eNews widget added to the Layout Widget area with some basic styling. Here’s the widget settings:

overlay-widget

Add any widget you want displayed when the button is clicked or change the button to an icon. You can easily change the position of the button and style the overlay background and widget using basic CSS.

Here’s the theme you can download and use “as is” or take the code out and add it to another genesis child theme.

Register for full access

Related Themes

  • Drop Down Full Screen Overlay Search Widget
  • Full Width Popout Animation Video Template for Genesis
  • Genesis Full Screen Slide Down Overlay for Search Box

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems