Cloning my HTML landing pages to Sparkle

So I need to copy/clone pixel perfect my already made HTML landingpages.

I tried Page import feature, but the fonts, layer sizes and positions are all messed up and by adjusting it manually takes a lot of time.

Now I am trying to create a screenshot of my pages and import it into Sparkle, lock it in background to manually build elements over the screenshot. Seems to work somewhat ok.

Question, is there a better workflow of how to copy my already made pages in HTML?

Yes @Emilly, that is the correct way to import a page or a website into Sparkle.

What happens is that Sparkle converts the html page into a Sparkle canvas page allowing you to interact with the import on your Sparkle canvas. The best device to import your website page on is the 960 and as you mention it could do with improvement.

Sparkle does a really good job, but I would love to see Sparkle…

  • ask me to import missing font(s) that the imported web page has, reducing the substitute text which is always to big
  • detect vertical text and places it at a 90 degree angle on the canvas
  • detect browser width graphics and places it in a widebox instead of a box
  • instead of a button becoming a text box on a box that it converts it into a button
2 Likes

Does Sparkle support Vertical Text at all? I assume not since unable to find it mentioned anywhere though I would love to see such.

@googull, In a particular way it does…

If you have a line of text and rearrange the text box so it is narrow enough to force the text to one per line. This will give you upright vertical text.

What I was referring to is text at a 90 degree angle to the canvas be honoured when imported.

I was referring to the same as you- Text 90° turned. I saw your reference to wanting to import such and was trying to get clarification if Sparkle supported 90 degree text natively - independent of the wish to import such. I guess the answer is no for 90 degree text and then of course no support for importing such. Sound right?

@googull you can have text 90 degrees to the canvas if you click onto the text box, then in the right panel select Arrange and under Position & Size / Rotation.

2 Likes

@FlaminFig: looking how elements in Sparkle can be rotated I found your contribution, thank you for providing the solution!

1 Like