Grassroots Featured Video-Hero-Button-Menu

[Omar Dobson]

Featured Video Widget

I am currently using the video hero for this page. Is it possible to use the Featured Video widget? I don’t want to mute the audio on this video, but I also don’t want the video to loop continuously as it may become annoying to my visors.

Distance Between Hero and Content

How do I decrease the distance between the Hero Video and the Content Area? Please see attachment.

Customize Buttons

Can I customize the buttons on the site to round ghost buttons? How do I add a Requests Prayer Now button at the end of this page? (Call to Action)

Sub-Menu

How can I adjust the sub-menu so I can click it

http://www.oneaccord.tv/pray-together

Attachments:

1. 

   Prayer-Wall.png
   

2. 

   Request-Prayer-Now.png
   

3. 

   Sub-Menu.png
   

[Bill Robbins]

Good Afternoon Omar,

Let’s see if we can find answers for you.

Featured Video Widget

You’re welcome to use the featured video widget on the home page. You can add it to any widget area there and it’ll display your video for you. You could then place an image in the hero section at the top. In this theme, the video in the hero is really just for background and isn’t quite as good for videos that you really want people to watch closely.

You can also add a video to the content area of any page. WordPress has video support built into the media library so if you insert a video file or add the URL to a video from YouTube or similar service on its own line, WordPress will grab the video and display it for you.

I will add an option in the next update that lets users turn off the auto loop. That could be useful.

Space After Hero

You can change the margin there. Here’s how:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   #wrap {
   	margin-top: 50px;
   }
   

3. Update your settings.

The default top margin is 100px so that should cut it in half. Feel free to adjust that value until you find the right fit.

Ghost Buttons

You can use ghost buttons. Add this to your custom CSS too:

#hero-section .hero-copy .button.hero {
	background: transparent;
	border: 3px solid #ffffff;
	border-radius: 20px;
	color: #ffffff;
}

You can change the color of the buttons by changing out the #ffffff that’s in the snippet above. Typically they match the border to the text color, but you’re welcome to make them different if you’d like to. You can also adjust the border radius by changing the 20px to a different number of pixels.

Sub-Menu

Sometimes different logo heights make clicking the sub-menus tricky. Go to the theme options page and choose the Header tab. Scroll down a ways until you see a field for “Drop Down Distance.” You can enter a number here to set the distance between the menu and the drop-downs below.

I would try this first:

-50

and see if that does the trick. You can move the drop-down closer to the top by making the number more negative (like -60). You can move it further from the top by making it less negative.

If you have any questions or trouble, just let me know.

Thanks,
Bill

[Author]

Posts