AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
![]() ![]() If you are looking to include something that like that on your Genesis site…read on! It could even be used to include a widget area which is most likely where I will be going next so that clients can manage it. You may use it to add some quick contact information or social icons. A utility bar is an area that you can use for whatever floats your boat. One that I thought would be useful to share and that I’ve added to my child theme of Genesis, adds a “utility bar” above the header. Mostly they are quick code snippets that either add/remove or filter functionality. I hope you find this article useful.As I’ve started to exclusively use the Genesis Framework for all of my sites I’ve started to compile a small bag of tricks. If you used this on one of your projects, please share a link below so we can see how you used it. The ID I am creating for it in the PHP is #custom-header-above But in the snippet above, I am adding a custom ID you can use to target the whole layout. ![]() Go back to Appearance> Editor and open the functions.php where you added the snippet above and in this shortcode, replace the number with your own.įor this tutorial, I am not using any custom CSS. This is the URL in my example: 27434&action=editġ1. For example in my case, the number sequence that I want to grab is 27434. You are going to want to grab the numbers as we will need that for the next steps. Go to your Divi Library and open up the layout you just created. Once you have the layout open, check out the URL and you will see a sequence of characters and numbers. Now we are going to grab the layout shortcode and insert it into the PHP snippet above.ġ0. Inserting the Divi Library Section into the PHP snippet Your functions.php page should look like this after you have copied and pasted the snippet above. Go to Appearance>Editor and open your functions.php file and you are going to insert the function below. Unfortunately my Syntax plugin does not know how to read the shortcode without messing up this page so you will have to write the code yourself or grab the snippet from the txt file below. If your Divi Builder font styles are being overwritten, you might have to check the Customizer or apply some custom CSS. *Note: Divi applies any default Theme Customizer settings that may have been set in the Customizer. If you plan on enabling the Fixed Header, you will have to assign the following ID to the Layout section otherwise the section will show beneath the fixed header/menu. ![]() In my demo I am creating a section for a social media module, and tagline, and a button module.ħ. Give it a name and choose Layout as the the Layout Type.Ħ. Go to your Divi Library and add a new layout.ĥ. If you prefer to keep the Fixed Header enabled, you can assign a custom ID to the layout. Go to Divi Theme Options and disable the fixed navigation.ģ. ![]() In order for this to work like the demo, you will need to disable the fixed navigation. Go to the Customizer>Header & Navigation>Header Elements and make sure the boxes are not ticked and there is no phone number or email.Ģ. If you’re using a fixed navigation bar, the injected layout is displayed below the main menu, and it scrolls with the rest of the page. Since we are replacing the top header with a Divi Layout, you want to make sure you are not currently using the Divi default top header. Let’s Get Started Setting up the Divi Header Section.ġ. UPDATE: If you are using a child theme that with an older version of Divi’s header.php and footer.php, before they added the hooks, then you will need to update those files. To do this you will need a basic child theme with a functions.php file. So in this tutorial, I will show you how to inject a custom Divi library layout above your Default Divi Main Header. This is great if you want to add more content, call to actions, advertisements, and more, above your default main header just like on the Elegant Themes website. Have you ever wanted to replace the Divi Top Header with Divi Page Builder Layout from the Divi Library? Now you can inject a custom Divi layout from your Divi Library above your Default Divi Main Header using the new Divi Hooks. All we have to do is add a simple snippet of PHP to your functions.php file. ![]()
0 Comments
Read More
Leave a Reply. |