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

Nifticious

building seriously nifty websites, minus the geekery

  • Genesis
  • Rainmaker

Genesis Framework

Making your Genesis theme Gutenberg ‘compatible’ pt 7

You may have noticed that left and right aligned images are not showing with text wrapped around them.

In this final video of the series, I will show you how to adjust the design of your Genesis theme to fix the display of left and right aligned images in our Gutenberg content.

Watch The Tutorial

Filed Under: Genesis Framework Tagged With: Gutenberg

Making your Genesis theme Gutenberg ‘compatible’ pt 6

Now that we have set up containers for non-wide and non-full width content, we need to adjust the way the images appear in the content.

This video will show you how to adjust the design of your Genesis theme for wide and full-width images in Gutenberg.

Watch The Tutorial

Filed Under: Genesis Framework Tagged With: Gutenberg

Making your Genesis theme Gutenberg ‘compatible’ pt 5

The next step in styling Gutenberg content in the Genesis Sample theme, is to take the non-wide and non full-width content and place them back into a container.

This video will take you through how to add CSS code to your stylesheet to set up a new content container set to be narrower than the wide and full-width content.

Watch The Tutorial

Filed Under: Genesis Framework Tagged With: Gutenberg

Making your Genesis theme Gutenberg ‘compatible’ pt 4

To first step in adjusting the design of any full-width Gutenberg content we publish, is to reset any container widths in our Genesis theme.

This video will take you through how to look at the structure of your site to determine what containers need to be adjusted, and the CSS code to use.

Watch The Tutorial

Filed Under: Genesis Framework Tagged With: Gutenberg

Making your Genesis theme Gutenberg ‘compatible’ pt 3

To adjust the design of any full-width Gutenberg content we publish, we are going to add a custom class in our Genesis theme to make adding the CSS code easier.

This video will take you through the code to add to your theme’s function file that adds a custom class for Gutenberg created content only.

Watch The Tutorial

Filed Under: Genesis Framework Tagged With: Gutenberg

Making your Genesis theme Gutenberg ‘compatible’ pt 2

The first step in adding the Gutenberg full and wide align options when creating content, is to add support for those features in our Genesis theme.

This video will take you through the code to add to your theme’s function file that enables the Gutenberg full and wide feature.

Watch The Tutorial

Filed Under: Genesis Framework Tagged With: Gutenberg

  • Go to page 1
  • Go to page 2
  • Go to Next Page »

Primary Sidebar

Hi There 👋, it's great to see you!

I promise I'm not spying on you, but I've noticed you've watched a few tutorials on how to do more with the Rainmaker Platform.

If you are looking to hire someone that can help you with your Rainmaker website, head over to my Contact page and send me an email.

But if you just want to keep watching the free tutorials, that's absolutely fine.

Happy Browsing 😀

Copyright © 2023 · Genesis Sample on Genesis Framework · WordPress · Log in

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.