Problem with Mobile Landscape Layout and Preview

vermau · November 20, 2022, 8:11am

Hello,

I upgraded my Sparkle 3.x pro license to Sparkle 4.x yesterday. I have been using Rapidweaver and Blocs for a while and after working on Sparkle for a day, I can compare that working in Sparkle is more design oriented and easy as compared to Rapidweaver and Blocs. Rapidweaver gives you the power of third party plugins, but its power seems to be only limited to the functionality of the plugins. Blocs is definitely powerful than Rapidweaver as it gives. the power of writing custom code, but Sparkle definitely is a 100% WYSIWYG tool that helps you build websites rapidly.

I have been trying to re-create my food business website (punjabinukkad.au) in Sparkle that I was actually building in Blocs. So far I have only been able to work on two pages (Home and About).

So far so good, but I am facing a weird problem in the Mobile Landscape Layout and Preview. Although I have set it to custom and automatic both, but I still cannot get the Layout blocs to display at full width on the actual mobile device in landscape mode. I have attached the pics for better understanding. The top Layout block and the bottom Layout block are both displaying as a rectangle on the actual mobile phone instead of covering the whole width. In portrait mode they look good.

Also my second question is that is there any possibility of adding custom code in Sparkle. I want to add a zoom out animation on the banner background image only ( not the text on the banner) on home page. I want to animate the banner to scale down from 1.5 to 1 when the home page loads. I know this is possible through CSS. Is this possible in Sparkle ??

I am sure I am missing something. Please help me !!

Thanks,
Ujjwal

primo · November 20, 2022, 8:39am

Hey Ujjwal!

For the first question, have you inserted the images as a “image” widget or a box? You probably will want to convert them to a Box widget and set both these boxes to “full page width” on the Arrange tab.

The second one, there are some animations available for Sparkle - think both you want. You have to go to Scroll Effects > One Time Animation and check them out

vermau · November 20, 2022, 9:04am

Hello Primo,

Thanks for the reply.

For my first question, I am using a Layout Block and the image is set as a background for the Layout Block. I tried the Wide Box with an image fill as stretch and all the options set as advised by you, but the result is exactly the same as in the above picture when I preview the website on the actual mobile device (iPhone 13 Pro Max) in landscape mode.

For my second question, I tried the One time animation option on scroll, but it animates the entire Layout Block and scales it from small to big. I just want to animate (scale from big to small zoom out from 1.5 to 1.0) the background image of the Layout Block and not the whole Block itself.

Thanks,
Ujjwal

FlaminFig · November 20, 2022, 9:38am

Remember @vermau, Sparkle generates websites that have a fixed width.

For me I don’t worry at all with the 480 device.
It is really only used to view videos.

primo · November 20, 2022, 11:15am

Ok

The second one, you can try breaking it up in parts. Create a box within the layout block, place the text and then group (box + text) and then animate only that, not the layout block.

The layer system is your friend in Sparkle, so abuse it, group layers to have control over specific objects and try to be as modular as you can, and you probably will achieve what you want (in whatever situation you get into)

vermau · November 20, 2022, 1:37pm

Hello @primo thanks for the idea. I tried and it worked, however the only problem now is that the zoom effect is positive (going from 0% to 100%), however what I am trying to achieve is negative zoom effect (image scaling from 150% to 100% with initial overflow of the image to be hidden inside the Layout Box)

Please check the live website for better understanding… punjabinukkad.au

Thanks,
Ujjwal

vermau · November 20, 2022, 2:23pm

Hi @FlaminFig so you reckon that I should leave the “Smartphone Landscape” setting to “Automatic Scaling” and only consider “Portrait Mode” for mobile and Tablets and Sparkle will take care of the rest behind the scenes while rendering in real time…

Thanks,
Ujjwal

FlaminFig · November 20, 2022, 9:59pm

The automatic scaling @vermau works quite well and reduces your workload load when creating a fully functional and responsive website.

For me I custom layout the 960 and use it to auto scale the 1200 & 768 devices.
I then custom layout the 320

Saeta · November 21, 2022, 3:19am

Hi @vermau.
To adjust the animation you have to click on the circle with three dots on the right.

This opens a panel from which you can make the adjustments you need for your animation.

Here you have more documentation about it.
https://sparkleapp.com/docs/animation.html

Good luck

vermau · November 21, 2022, 5:50am

Thank you @Saeta, I will try that. Also can you help me understand how to make a full screen hero banner or full screen image slider in Sparkle. I can’t find a way to make the hero banner full screen

Thanks,
Ujjwal

FlaminFig · November 21, 2022, 6:21am

@vermau, when it comes to full-screen width I’m assuming you mean full browser width then it is quite simple when it comes to images…

Select the Image or Image Gallery and go across to the right and under the Arrange tab…

Saeta · November 21, 2022, 7:05am

I imagine you want to replicate the same effect you have on your website.
If so, it seems to me that this zoom effect cannot be done in Sparkle.

But let’s go by parts. A long explanation is coming

A preliminary clarification. I work with the program translated into Spanish, so it is likely that the names of the buttons that I am going to indicate are not exactly the same in English. Even so, I hope it will help you.

Image Hero: You have to use a box to be able to do it, or convert an image into a box (right mouse button).
Once in the work area, select the box and go to the inspector (tools on the right) and in the Style tab you have the first drop-down button with the Content you can insert in that box. Select image and search for it on your computer.

You can also drag the image directly into the workspace, right-click on it and select “convert to box”. It’s faster.

You will see in the right inspector the thumbnail of the image and underneath some options. Check the Stretch box and the Fill button.

Then, in the Arrange tab of the inspector, check the “Full Page Width” checkbox.
Now you should have the image occupying the whole screen in a horizontal band.

The last step is simply to drag the center handle of the image down to the height you want it to be, but you can also do this by entering the height in px you need in the Position and Size tab of the Arrange tab.

Animation. Sparkle is quite limited when it comes to animation, although it has some nice options.
What you would need to replicate the effect of your web, is a point animation control to zoom out, but Sparkle does not offer control over scrolling. The only possible control is over timings and repetitions, the rest is automated in a fairly basic way.

However, for scroll animations, there are more adjustment options, although it must be taken into account that it is intended for the creation of fixed webs. This means that some animations will be affected if the browser window is resized.

A plausible solution is to use a video with this effect. Being so few seconds, it can compensate for that lack, without too much bit overhead. Sparkle allows you to set a video to full width, with practically the same steps as with images but, in this case, you don’t have to convert it to a box since the video treats it as if it were a box.

I hope I have been helpful.

vermau · November 21, 2022, 3:59pm

Thank you @Saeta for such a detailed and step by step explanation…

From all this I can understand that Sparkle is good for small one page websites. For some serious website development one might have to look for other bigger alternatives like Blocs and Rapidweaver. My both sites for both businesses (https://punjabinukkad.co – being developed in Blocs) and (https://kvngroup.au – being developed in Rapidweaver) have quite a couple of features that don’t look possible in Sparkle…

I would like to thank you once again for all your help !!

Thanks,
Ujjwal

vermau · November 21, 2022, 4:12pm

Hello Primo,

I read one of your other posts about full height banner image, implemented it as explained by you but it did not work for me. I also tried to give an overlay effect to the whole banner image by using another box element, the overlay box only displays at the bottom half of the page. It does not cover the full height of the page. My CSS code in the embed element is as follows:

<style>
	#hero_banner_box,
	#hero_overlay_box {
		height: 100vh;
	}
</style>

I have attached a screenshot of the banner image. It has white area at the top and bottom I can’t understand why. The image is quite big in size to cover the whole screen, but I think like Duncan said that the aspect ratio changes as the browser height is changed, it maintains the width, but does not maintain the height.

I wish this could be implemented as an inbuilt feature within Sparkle.

Thanks,
Ujjwal

primo · November 21, 2022, 4:35pm

Hey! Okay, i see

Using images its easier. You can use the popup approach instead of all the code from my other post (was one year ago)!

You will create a Popup and config it as “Fixed in Window”, “Use canvas position and width” and “adjust to browser height”. Also remember to set it to “full page width” and to untick the “Always on Top” option.

Next you’ll want to set it to open automatically and the delay time to 0s, and after that, you’ll move it below everything else in the Layers panel. Now you just have to adjust, but the image will cover the entire browser height.

It’ll be like 2 years since i’ve wanted a way to make full height images available in Sparkle, but i’ve been using the code method and this popup method for the most part. Not ideal, but it works the same (and the popup method is better than the code option since you don’t destroy the layout coordination and structure)

See if it helps you!

duncan · November 21, 2022, 4:40pm

While I respect your opinion, I think it’s ungenerous to say “small one page websites”. Maybe you have not seen some recent Sparkle websites, and many more with hundreds or thousands of pages:

https://damien-lacaze.fr

https://www.socialgreenhub.org

Your argument anchors around a single feature that isn’t built-in in Sparkle, but is in other website builders. Sparkle isn’t about coding, and if that single feature is your filter, I think it’s just a myopic point of view.

Saeta · November 21, 2022, 4:50pm

Wow @vermau , I’m sorry I gave that impression of Sparkle.

Sparkle is a great tool for making websites as large (many pages) and as professional as you want them to be. Look at these two examples:

The thing is, as with other tools (like Bloks) it doesn’t always have what one would like, although support and improvements are ongoing.

Look at this example:

https://damien-lacaze.fr

Of course, everyone is free to set the limit on the features that are essential for the choice of your tool.

From my point of view, based on my personal experience with Bloks, WorkPress and Sparkle, I think the latter is the most versatile, secure and flexible of all. Although it also, for me, has a steeper learning curve, not because of the difficulty of the tool, but because of the change in concept and thinking it requires.

I would give Sparkle a try. And I don’t take any commission, I just think it is a very good tool to create professional, attractive and secure websites.

vermau · November 21, 2022, 11:44pm

Thank you @primo for all your help until now. I will continue to convert and build my food website in Sparkle and see to what extent I can build my site…

Thanks,
Ujjwal

vermau · November 22, 2022, 12:13am

Wow @Saeta the site is indeed amazing and I am thrilled to see what can be done in Sparkle. I will try to convert and build my food website in Sparkle and see to what extent I can build my site…

Could you please help me out with what element did you use to create this divider on the website… Pic attached below

Thanks,
Ujjwal

primo · November 22, 2022, 1:00am

That is a box with content set to “Gradient” and with Rounding set to… 25px maybe?

Thanks, Ujjwal

Thanks, Ujjwal

Thanks, Ujjwal

Thanks, Ujjwal

Thanks, Ujjwal

Thanks, Ujjwal

Thanks, Ujjwal

Thanks, Ujjwal

Thanks,
Ujjwal

Thanks,
Ujjwal

Thanks,
Ujjwal

Thanks,
Ujjwal

Thanks,
Ujjwal

Thanks,
Ujjwal

Thanks,
Ujjwal

Thanks,
Ujjwal