How can I make the header appear instantly. Is taking like a couple of seconds to load, while the rest of the page is already there. I'd like to load it first of all (load the page top to bottom)
If you want the main menu be at the top of your content and not over it, make sure that box is unselected when you edit your page: https://d.pr/i/UEMQ6b
for the menu, we hide it till the rest of the page is completely loaded to avoid glitch with the menu animation but you can try to show it faster by adding this custom css in wp-admin > Theme Options > Custom CSS
Thanks. It looks better. ALthough I'd like the menu to appear instantly. Is there a setting to disable all animations and even the loading page? It gives the feeling that is a slow page.
But I still have some issues with the way the image is shown.
I have a podcast already live, with more than 150 episodes and I'm trying to adapt what I have to this theme. So, the images, they already exist.
My issue with the podcast episode image display, is that it's not adapting and displaying correctly if I change the screen size. So, now, with my current adjustments, I see the image in my desktop computer, but cut and with some grey space before it in tablet or phone screens.
How could I tell the page to display the image full screen, independent of the screen. So it shows completely, from margin to margin in any screen?
The problem with an image background and its responsive is the ratio. Your image is very landscape. On desktop, its fine because a desktop screen is landscape.
On mobile however, the screen is portrait. So if you want to fit the image (and see everything of it) in a mobile screen, we will have to scale it. No problem here. However, if we scale it, the image will be very small. I've prepared you a quickscreenshot of how it would react if we show it fullwidth on mobile:
If you want to have an image BACKGROUND (in the banner), we always recommend to use an abstract image background WITHOUT text embeded into the image..The text can be put in the content of the banner here: https://d.pr/i/pMlyqK
Yes, that's exactly what I want. I'm aware the logo text won't be readable, but that litthe text is of no importance to me (it's the logo text, and it's already visible in the header page).
I'd really like to have it scaled as you showed in the picture.
Those images are the same I use in my youtube channel when publishing the content, so it makes sense to us to maintain the same image across different content platforms.
How could I achieve that result you show in the demo?
No, precisely I don't want to assign specific css to specific pages. What I mean is if I can do this css setting global to every episode page, globally.
How can I push the main image so the menu does not cover part of it? (see here: https://staging.librosparaemprendedores.net/podcast/100-despertando-al-gigante-interior-parte-2/)
Plus,
How can I make the header appear instantly. Is taking like a couple of seconds to load, while the rest of the page is already there. I'd like to load it first of all (load the page top to bottom)
Thx in advance
Luis
Hi,
If you want the main menu be at the top of your content and not over it, make sure that box is unselected when you edit your page: https://d.pr/i/UEMQ6b
for the menu, we hide it till the rest of the page is completely loaded to avoid glitch with the menu animation but you can try to show it faster by adding this custom css in wp-admin > Theme Options > Custom CSS
.classic-menu{
opacity: 1!important
}
thanks
Thanks,
Max from the Sonaar.io Crew
Thanks. It looks better. ALthough I'd like the menu to appear instantly. Is there a setting to disable all animations and even the loading page? It gives the feeling that is a slow page.
But I still have some issues with the way the image is shown.
I have a podcast already live, with more than 150 episodes and I'm trying to adapt what I have to this theme. So, the images, they already exist.
My issue with the podcast episode image display, is that it's not adapting and displaying correctly if I change the screen size. So, now, with my current adjustments, I see the image in my desktop computer, but cut and with some grey space before it in tablet or phone screens.
How could I tell the page to display the image full screen, independent of the screen. So it shows completely, from margin to margin in any screen?
Thx in advance
Luis
Unfortuntely, there is no option to disable all animation / page loading.
For the image size, can you provide me a screenshot of what you mean exactly ? how are they different from mobile to desktop?
Thanks,
Max from the Sonaar.io Crew
Hope this helps explain the problem:
https://www.useloom.com/share/03320b40c5154c9783ef6ac7afa3ebb6
Hi Luis,
The problem with an image background and its responsive is the ratio. Your image is very landscape. On desktop, its fine because a desktop screen is landscape.
On mobile however, the screen is portrait. So if you want to fit the image (and see everything of it) in a mobile screen, we will have to scale it. No problem here. However, if we scale it, the image will be very small. I've prepared you a quickscreenshot of how it would react if we show it fullwidth on mobile:
https://d.pr/i/aO1ifX
If you want to have an image BACKGROUND (in the banner), we always recommend to use an abstract image background WITHOUT text embeded into the image..The text can be put in the content of the banner here: https://d.pr/i/pMlyqK
Thanks,
Max from the Sonaar.io Crew
Yes, that's exactly what I want. I'm aware the logo text won't be readable, but that litthe text is of no importance to me (it's the logo text, and it's already visible in the header page).
I'd really like to have it scaled as you showed in the picture.
Those images are the same I use in my youtube channel when publishing the content, so it makes sense to us to maintain the same image across different content platforms.
How could I achieve that result you show in the demo?
Hello Luis,
Please add this code in the custom css field:
.postid-3330 #page-banner.fullscreen-banner {
height: 56vw;
}
Thanks,
Alexandre from the Sonaar.io Crew
If it doesnt work, please provide a login credential to the wp-admin.
Thanks,
Alexandre from the Sonaar.io Crew
I think it works now. Makes more sense visually. Just one more thing:
Do I understand that this fix is only for a single post (bacause of the post id in the code)?
If that's true, how can I extend this same fix to any podcast episode post?
You right.
You can also remove the postid and add the custom css in a specific page or post
Thanks,
Alexandre from the Sonaar.io Crew
No, precisely I don't want to assign specific css to specific pages. What I mean is if I can do this css setting global to every episode page, globally.
Yes,
If you remove the postid class, this will be applied on all banners.
But this code is only good if the image background has the same size ratio (25:14)
#page-banner.fullscreen-banner {
height: 56vw;
}
Thanks,
Alexandre from the Sonaar.io Crew
Roger that. Makes sense.
Thx!!!!