To create a landing page, you’ll want to add a new WordPress page and assign the Full width template for it (a template that comes with ska-theme). Template can be changed from the right sidebar when editing a page:
Choose Swap template and pick the Full width template.
Once created, you can make the page your front page from the WordPress settings at Settings -> Reading -> Your homepage displays -> A static page.
Patterns
You can use some pre-packaged block patterns to construct the landing page. Patterns can be inserted from the top left corner block inserter -> Patterns.
HTML to blocks
Lots of websites offer free (and paid) Tailwind HTML for various landing page sections. The Tailwind block can be used to convert these to blocks.
To maintain consistency, first add the Section block (it’s actually a block variation) that comes with ska-theme – it will contain the Container block by default. Add the Tailwind block inside that, giving you Section -> Container -> Tailwind:
<!-- wp:ska/element {"skaBlocksAs":{"element":"section"},"skaBlocks":{"p":[{"id":"ska-theme:section","isStatic":true}],"cx":"","t":1709756495,"css":""},"skaBlocksVariation":"ska-theme:section"} -->
<section class="wp-block-ska-element"><!-- wp:ska/element {"skaBlocks":{"p":[{"id":"ska-theme:container","isStatic":true}],"cx":"","t":1709756495,"css":""},"skaBlocksVariation":"ska-theme:container"} -->
<div class="wp-block-ska-element"><!-- wp:ska/tailwind -->
<!-- Tailwind HTML goes here -->
<!-- /wp:ska/tailwind --></div>
<!-- /wp:ska/element --></section>
<!-- /wp:ska/element -->Note: if you don’t see anything inside the Section block, expand it from the List view, select the Container block inside of it and click “Type / to choose a block” to add any blocks into the container.
Now paste your custom HTML to the Tailwind block and take a look at the first 2 HTML elements that wrap your code – typically they are used to add vertical spacing with py-16 sm:py-32 and such, as well as to create a container with classes such as px-4 sm:px-6 mx-auto max-w-7xl. If you find these, you may delete these elements and their closing tags from the end, so that you only convert the contents directly into ska-theme’s Section and Container – this will keep all your landing page sections consistent and allows to modify the spacing and widths from their respective Presets, all at once. You can also keep them and re-arrange or unwrap the blocks using the List view, or simply remove any classes that may be performing the job that the Container or Section already provide.
Hit “Convert to blocks”, and if you’re happy with the result, remove the Tailwind block itself.
Next, you’ll probably want to go over any button-like elements that the custom HTML introduced. Create a duplicate of them, remove all classes from them and add the Button and Primary button or Outline button presets instead, keeping your buttons consistent across the site. Now go back to the original and pick out any classes you might have wanted to keep, such as additional padding, increased font size or min-width. But overall the button appearance should rely on the Button preset.
If the resulting UI included a lot of repeating elements, such as a list, you may wish to “hoist” the Tailwind classes upwards using selectors and the “Move classes to parent” feature, and then remove the classes from all the other child elements that now receive it from the parent. That way you can edit all the child elements appearance from 1 place which makes it less tedious to make changes later.