-
-
Notifications
You must be signed in to change notification settings - Fork 490
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #161 from chrisrhymes/feature/landing-page
Add promo page
- Loading branch information
Showing
13 changed files
with
272 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| <h2 class="title mb-4 has-text-centered">Subscribe to the newsletter</h2> | ||
| <form> | ||
| <label class="label">Email</label> | ||
| <div class="field has-addons"> | ||
| <div class="control is-expanded"> | ||
| <input class="input is-medium" type="text" type="email"> | ||
| </div> | ||
| <div class="control"> | ||
| <button class="button is-medium is-primary">Submit</button> | ||
| </div> | ||
| </div> | ||
| </form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| <!doctype html> | ||
| <html | ||
| dir="{{ site.direction | default: 'ltr' }}" | ||
| lang="{{ site.lang | default: 'en' }}" | ||
| class="{% if site.fixed_navbar %} has-navbar-fixed-{{ site.fixed_navbar }} {% endif %} {% if site.force_theme %} theme-{{ site.force_theme }} {% endif %}" | ||
| > | ||
| {% include head.html %} | ||
| <body> | ||
| {% if site.cookie_policy %} | ||
| {% include cookie-banner.html %} | ||
| {% endif %} | ||
| {% include header.html %} | ||
| <section class="hero hero-banner is-primary"> | ||
| <div class="hero-body"> | ||
| <div class="container"> | ||
| <div class="columns is-centered"> | ||
| <div class="column is-6-tablet is-6-desktop"> | ||
| <h1 class="title is-1">{{ page.title }}</h1> | ||
| {% if page.subtitle %} | ||
| <p class="subtitle is-1">{{ page.subtitle }}</p> | ||
| {% endif %} | ||
|
|
||
| <div class="card mt-6"> | ||
| <div class="card-content"> | ||
| <div class="content"> | ||
| {{ page.snippet | markdownify }} | ||
| </div> | ||
| </div> | ||
| <div class="card-footer"> | ||
| {% if page.hero_link %} | ||
| <div class="card-footer-item"> | ||
| <a href="{{ page.hero_link }}" class="button is-large is-primary"> | ||
| {{- page.hero_link_text -}} | ||
| </a> | ||
| </div> | ||
| {% endif %} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="column is-6-tablet is-6-desktop is-relative"> | ||
| <figure class="image {{ page.hero_image_ratio | default: 'is-4by3' }}"> | ||
| <img src="{{ page.hero_image }}" alt="{{ page.hero_image_alt }}"> | ||
| </figure> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| {% if site.data.reviews[page.product_code] %} | ||
| <section class="section mt-6"> | ||
| <div class="container"> | ||
| <div class="columns is-centered is-multiline"> | ||
| <div class="column is-full"> | ||
| <h2 class="title is-3 mb-3 has-text-centered">Reviews</h2> | ||
| </div> | ||
| {% for review in site.data.reviews[page.product_code] %} | ||
| <div class="column is-4-desktop is-6-tablet"> | ||
| <div class="card"> | ||
| <div class="card-content"> | ||
| {% include review.html %} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {% endfor %} | ||
| </div> | ||
| </div> | ||
| </section> | ||
| {% endif %} | ||
| <section class="hero is-light mt-6"> | ||
| <div class="hero-body"> | ||
| <div class="container"> | ||
| <div class="columns is-centered"> | ||
| <div class="column is-6"> | ||
| {% include newsletter.html %} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section class="section my-6"> | ||
| <div class="container"> | ||
| <div class="columns is-multiline is-centered"> | ||
| <div class="column is-full"> | ||
| <h2 class="title is-3 mb-3 has-text-centered">{{ page.about_title }}</h2> | ||
| </div> | ||
| <div class="column is-4-tablet is-3-desktop"> | ||
| <figure class="image is-square"> | ||
| <img class="is-rounded" src="{{ page.about_image }}" alt="{{ page.about_image_alt }}"> | ||
| </figure> | ||
| </div> | ||
| <div class="column is-8-tablet is-6-desktop"> | ||
| <div class="content"> | ||
| {{ content }} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| {% unless page.hide_footer %} | ||
| {% include footer.html %} | ||
| {% endunless %} | ||
| <script src="{{ site.baseurl }}/assets/js/app.js" type="text/javascript"></script> | ||
| {%- include footer-scripts.html -%} | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| .hero-banner { | ||
| background: $primary; | ||
| background: linear-gradient(180deg, $primary 75%, $white 75%); | ||
|
|
||
| .image img { | ||
| box-shadow: var(--bulma-shadow); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| --- | ||
| layout: page | ||
| title: Creating a promo page | ||
| subtitle: Promo Pages | ||
| menubar: docs_menu | ||
| toc: true | ||
| show_sidebar: false | ||
| --- | ||
|
|
||
| ## Introduction | ||
|
|
||
| A promo page is designed as a standalone landing page to promote something, such as a new product. The example promo page has been designed to promote a book, but it can be used for any product as it is very customisable. | ||
|
|
||
| [View promo page demo](/bulma-clean-theme/promo-page/) | ||
|
|
||
| ## Creating a promo page | ||
|
|
||
| To create a promo page, set the layout as `promo-page` in the page's front matter. | ||
|
|
||
| ```yaml | ||
| title: My promo page title | ||
| layout: promo-page | ||
| ``` | ||
| ## Snippet | ||
| The snippet appears in the hero. It gives you a chance to write a short description about what you are promoting. It can be written in markdown format as per the below example. | ||
| ```yaml | ||
| title: My promo page title | ||
| layout: promo-page | ||
| snippet: |- | ||
| This is my snippet about my promo. | ||
| This is some more detail. | ||
| ``` | ||
| ## Hero link | ||
| The hero link is your main call to action on the page. | ||
| This could link to a product page, or where you are selling your product, (such as Amazon, eBay, etc.). Set the hero_link to where you want the visitor to be sent to, then set the hero_link_text to what the button text should say. | ||
| ```yaml | ||
| title: My promo page title | ||
| layout: promo-page | ||
| hero_link: 'https://my-hero-link.example' | ||
| hero_link_text: Buy now! | ||
| ``` | ||
| ## Hero image | ||
| Unlike standard pages, the `hero_image` on a promo page doesn't cover the whole hero as a background. Instead, this is used to show an image of the product you are promoting. | ||
|
|
||
| Ensure you set the `hero_image_alt` text for improved accessibility to explain what the image contains. | ||
|
|
||
| You can also set the image ratio to best suit your needs. The default is `is-4by3` but can be set to any of bulma's [image ratio classes](https://bulma.io/documentation/elements/image/). | ||
|
|
||
| ```yaml | ||
| title: My promo page title | ||
| layout: promo-page | ||
| hero_image: https://picsum.photos/id/171/800/1000 | ||
| hero_image_alt: The hero image alt text | ||
| hero_image_ratio: is-4by5 | ||
| ``` | ||
|
|
||
| ## Reviews | ||
|
|
||
| Reviews work the same as for [product reviews](/bulma-clean-theme/docs/products/product-reviews/). Set the `product_code` in the promo page's front matter and it will then display the reviews for the product. | ||
|
|
||
| ```yaml | ||
| title: My promo page title | ||
| layout: promo-page | ||
| product_code: ABC123 | ||
| ``` | ||
|
|
||
| ## Newsletter | ||
|
|
||
| {% include notification.html message="The default newsletter.html include file does not work. It is a placeholder only!" | ||
| status="is-danger" | ||
| icon="fas fa-exclamation-triangle" %} | ||
|
|
||
|
|
||
| You can insert your own newsletter sign-up form by creating a new html file in `_includes/newsletter.html`. | ||
|
|
||
| You then need to paste in your own sign-form from your provider of choice, such as [mailchimp](https://mailchimp.com/features/custom-forms/), etc. into the `_includes/newsletter.html` file. | ||
|
|
||
| ## About section | ||
|
|
||
| The about section allows you to provide a bit more background information. For example, if you were selling a book, then you could write about the author. | ||
|
|
||
| The heading is set using the `about_title`. | ||
|
|
||
| The image is set using the about_image, with the alternative text set using `about_image_alt`. | ||
|
|
||
| ```yaml | ||
| about_image: https://i.pravatar.cc/400?img=24 | ||
| about_image_alt: The about image alt text | ||
| about_title: About the author | ||
| ``` | ||
|
|
||
| The main content of the page, i.e. the content not in the front matter, will be used to populate the content for the about section. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| --- | ||
| title: My new book title! | ||
| subtitle: Example promo page | ||
| layout: promo-page | ||
| snippet: |- | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mollis volutpat dignissim. | ||
| Pellentesque facilisis non urna a suscipit. Aenean et accumsan lorem. Donec diam ex, egestas at fermentum at, sagittis at diam. Nulla vitae lectus nec nulla faucibus gravida. | ||
| hero_link: '#' | ||
| hero_link_text: Buy now! | ||
| hero_image: https://picsum.photos/id/171/800/1000 | ||
| hero_image_alt: The hero image alt text | ||
| hero_image_ratio: is-4by5 | ||
| about_image: https://i.pravatar.cc/400?img=24 | ||
| about_image_alt: The about image alt text | ||
| about_title: About the author | ||
| product_code: ABC123 | ||
| --- | ||
|
|
||
| Donec semper nunc quis quam elementum sodales. Vestibulum eget eros vel odio cursus posuere non nec felis. Nunc porta justo odio, in posuere turpis porttitor id. Morbi fringilla, nisi quis facilisis lobortis, eros sem venenatis arcu, vitae varius est felis eu leo. Donec eleifend sapien in arcu mollis egestas. Fusce consectetur nibh in leo elementum cursus. | ||
|
|
||
| Etiam in neque quis quam tristique bibendum eu eu lorem. Nulla facilisi. Morbi cursus lacinia suscipit. Maecenas accumsan purus urna, sit amet finibus ligula pellentesque eu. Vivamus risus dui, sagittis id est nec, volutpat rhoncus orci. Nulla fermentum aliquet lectus at congue. Aenean congue elementum libero nec suscipit. Phasellus sed diam ex. Integer et posuere sem. | ||
|
|
||
| ### Maecenas lacinia lobortis lacus sed gravida | ||
|
|
||
| Nunc in nisl at purus mollis vulputate. Sed tincidunt tincidunt risus eget iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum vehicula maximus. Praesent convallis in lectus sit amet viverra. Etiam nec semper dolor, ut varius tortor. Aliquam at varius erat, non tempor urna. Maecenas porta porta nibh. | ||
|
|
||
| ### Creating a promo page | ||
|
|
||
| See the documentation for [creating a promo page](/bulma-clean-theme/docs/promo-pages/creating-a-promo-page). |