Hi,
I am working on that page for our chamber orchestra:
https://www.kgosf.si
I can’t figure out how to get rid of that empty white area at the bottom of the page. It’s the same if I remove the last devider below. Any idea?
Next - is there any way to make hamburger icon to animate?
And is it possible to style the opened menu (in small screen view) - font of menu item, etc?
How could I make a nice footer area, are there some templates, or extra stack for that?
Thank you for your help.
Matic
Hi @Kaktus, welcome to the forum!
Bottom of page: I guess that area is the footer, seems that you’re not using the footer therefore the empty space.
Animation of the hamburger icon is not possible.
Menu: I guess you mean the offcanvas, the mobile menu right? If so the menu takes the font-family from the content option.
Now about the nice footer: I remember a stack by https://rapidweavercentral.info specific designed to make footers, not sure it’s available but you could contact Marten the developer about it.
Cheers,
Lucas
Hi @Kaktus,
I noticed the images used on your pages are not optimised, some are as heavy as 24MB! I strongly advice you to prepare images before uploading on a page and keep them around 200KB the most.
I’ve written a quick guide on optimising images here that you may find useful: https://archetypon.zendesk.com/hc/en-us/articles/360035412691-Optimizing-images
Cheers,
Lucas
Hi @Lucas,
Thank you so much for quick and good reply. I will prepare image size thank you.
Where could footer area be configured?
Configure the footer at settings > general > footer. I’ll also add an option to disable the footer for the upcoming version.
@Lucas I can’t find any usable setting there:
I found one more problem - when using Image stack (UIKit) I add a link to open a webpage and when choosing “Open in new window” - it doesn’t work. I used it there for logos of our sponsors:
It is set to “open in new window” and is not working. The same if it is unmarked…
Hi @Kaktus, on a better look that white space is there because of the extra container 8 and the footer. I’m making an updater removing the extra content 8 padding and adding an option to remove the footer, not only in small displays but on all displays too.
About the image link: yep this is something I’ve already added to the same Image component on the full UIkit-3 and will add to the UIkit Packs as well.
Let me know if you find any other abnormalities so I can add to the upcoming release I’m working on.
Hi @Lucas,
thank you for your help. Great you will add possibility to Image. BTW - I have full UIkit-3 also, but I see only one Image stack (well, I chose Planar2 theme, but I have available also UIkit3 theme, should I change some settings?).
I tried both possibilities for removing footer area - wide screen AND mobile view; both are not working - white space stayed there.
Which stack from UIkit (or Planar2) do you recommend to my page to show photo album?
BTW - your Planar2 theme is really nice, imo. I like that design very much!!
I already contacted Mr. Marten about adding better footer template. Thank you again for your suggestion, he is also very helpful!
Cheers,
Matic
Since you have the full UIkit-3 package you can uninstall the UIkit Packs, then update UIkit-3 to the latest version 3.2.9. In this version the Image accepts attributes. In fact it already accepts attributes from some older versions, if I remember correctly.
I’ve just update Planar including the footer options, you will receive a notification soon.
Cheers,
Lucas
Fantastic, thank you! 🙏
@Lucas sorry to bother you again…
I followed your instructions about unistalling Pack1+2 and updating UIKit3. But - when using Planar2 theme for my project, when I insert Parallax stack from UIkit3, it doesn’t work when I click preview. I also tried to copy/paste Parallax container from your Test project with all examples and it also doesn’t work when preview. After changing Theme from Planar2 to UIKit3, parallax works great. But then I loose all of design of Planar2 theme… What would you suggest me to do?
Thank you,
Matic
Hi Matic,
I’m on a quick vacation until next week and will take a look at it assp. There’s a possibility that the parallax from UIkit does not work in Planar, but will have to take a closer look to be sure.
Cheers,
Lucas
@Lucas Hi, could you please check the upper question - is it possible to use Parallax UIkit in Planar2 theme?
Second, is there a way to change the background in that Planar2 theme from white to something else? Maybe via CSS (gradient) or something?
Third question - where and how could I set the form for subscription to newsletter on Mailchimp? With which stack? Now I set it up via pop-up Malchimp code put in HTML code. I guess I could do also without pop-up, with part of the page form?
My webpage now seems like that:
www.kgosf.si
Hi Matic
Let’s go in parts, how to Parallax first:
Sure we can use UIkit-3 Parallax in Planar. You can use into the extra content area 4, which is 100% width and below the banner area. For this you will need Parallax, Extra Content and Background stacks:
That’s all regarding the Parallax setup.
Now you can add your content into the Background stack and regulate the Parallax settings. In case you wish to vertical center your content enter uk-flex uk-flex-middle in the custom class of the Background. In this example I’ve simply used the Text stack.
Here are some screenshots:
Regarding your page background question: use the Background stack, it comes with detailed gradient settings. Again you can use it inside the EC container 4 for 100% width. Here are some examples:
Regarding the Mailchimp: use the UIkit-3 Form and set it to custom action. I don’t know how Mailchimp works, but most probably like Sendy (that I use) you get the action link that goes into the Form custom action and a list value that you have to insert into an input element of the Form. There’s an example of it in the Tests project: https://uikitstacks.com/projects/tests/form/
Cheers,
Lucas
@Lucas thank you for all of your answers, but (sorry if this is a dumb question) - where did you get “Extra content” stack? I see it nowhere in UIKit stacks list… Is it some special stack? Where can I get it?
The Extra Content stack comes with the theme, you have to install the Parallaxis-3.stack that comes in the package.
Thank you, I will purchase Parallaxis-3 and use your tips. Thanks.
