Archived topic
How to create a slider in the header of the Avery template
3 replies · Started by Christina on May 3, 2021
Hi support team,
I just purchased the GPPremium theme and selected the Avery template which I'm struggling to customize. What I would like to do is:
1) place a slider in the header between the primary menu and newsletter component
2) reduce the size of the newsletter component (remove the image in the background and just have a box with title, field for name, email and subscribe button)
Here's an example of how, I'd like it to look: http://preview.themeforest.net/item/aileen-a-personal-blog-shop-theme/full_screen_preview/23069387?_ga=2.77658263.243995066.1620036634-456029209.1620036634
How can I accomplish this? I'd be grateful, if you could make your response for dummies, as I don't have any in-depth html or CSS knowledge. In your documentation I found some information about Header Elements and Page Heros but it directly starts with some html and I didn't know where to start from.
Thanks for your help!
Hi Christina,
1) place a slider in the header between the primary menu and newsletter component
This slider will be on every page or just the home page? Use a hook element for multiple pages (choose generate_after_headeras hook, choose the pages you want it to show as location ), otherwise directly edit the home page and insert the slider shorcode on top of the newsletter section, you can use a shortcode block.
https://docs.generatepress.com/article/hooks-element-overview/
Please be noted that you'll need to install some slider plugin and insert the shortcode they provided to the desired position.
2) reduce the size of the newsletter component (remove the image in the background and just have a box with title, field for name, email and subscribe button)
Go to the home page > edit page. You can reduce the padding under spacing tab, remove the background image under backgrounds tab:
https://www.screencast.com/t/O4L0to017
Hi Ying,
Thank you, I'll try that!
Christina
No problem :)
