Pulse CMS Stack Tutorial

Table of Content

In order to be able to use Pulse CMS Stacks, a running Pulse CMS installation is required.

This tutorial is based on the 1-click-install project, which you are able to donwload after purchasing a Pulse CMS license. Check the install.txt in your Pulse CMS license download for the link to that project. This 1-click-install project already contains all required Pulse CMS installation files and demo content inside the resources area (subfolder pulse). On the published server, Pulse CMS then will be located under http://yourdomain.tld/resources/pulse, the admin area under http://yourdomain.tld/resources/pulse/admin.

Previewing the included demo content is working in RapidWeaver 7.

In all integration stacks, the Pulse CMS installation subfolder name must be entered. During the tutorial, we will refer to the installation folder resources/pulse.

For more information refer to the Pulse CMS documentation https://www.pulsecms.com/docs/ and https://www.pulsecms.com/docs/settings.

Using tags https://www.pulsecms.com/docs/tags directly on a RW page, or inside a block or blog post in Pulse CMS in order to display them inside RW is not supported. The corresponding functionality is only available via the below described stacks.

The integration stacks can be found when searching in the Stacks Plugin library for pulse.

Stacks Image 4640796

Blocks are sections of content that you can edit with an easy to use WYSIWYG editor. Blocks are useful for sections of content that repeat or if you just want to make editing easier for someone who prefers not to edit pages in html or markdown.

For more information refer to the Pulse CMS documentation https://www.pulsecms.com/docs/blocks.

To place a block on a page, add a Pulse Block Stack. Insert the Block Name to the stack settings:

  • e.g. home/home for a Block within the folder name home and the file name home.txt
  • about/about-left for a Block within the folder name about and the file name about-left.txt

Demo: http://pulsedemo.instacks.com/components/

Stacks Image 4640798

Galleries are a great way to show photos in a grid with light box. To create a lightbox image gallery, just create a new folder in the Pulse CMS Admin area and upload images into it.

For more information refer to the Pulse CMS documentation https://www.pulsecms.com/docs/media.

In order to use the inbuilt Gallery integration, add a Pulse Gallery Stack to the Stacks Plugin Page. Insert the Gallery Name to the stack settings:

  • e.g. gallery1

Demo: http://pulsedemo.instacks.com/components/photos/

Stacks Image 4640800

Sliders are the same as Galleries, but the pictures are displayed in a slideshow. To create a slideshow, just create a new folder in the Pulse CMS Admin area and upload images into it.

For more information refer to the Pulse CMS documentation https://www.pulsecms.com/docs/media.

In order to use the inbuilt Slider integration, add a Pulse Slider Stack to the Stacks Plugin Page. Insert the Gallery Name to the stack settings:

  • e.g. gallery1

Demo: http://pulsedemo.instacks.com/components/image/

The Image Integration just displays the first image of a Gallery in an img tag. Add a Pulse Image Stack to the Stacks Plugin Page. Insert the Gallery Name to the stack settings:

  • e.g. gallery1

Demo: http://pulsedemo.instacks.com/components/image/

The form feature in Pulse allows you to easily create and customize a simple form for your website.

For more information refer to the Pulse CMS documentation https://www.pulsecms.com/docs/form.

To place a form on a page, add a Pulse Form Stack.

  • Include Source CSS will include form.css on the page

Demo: http://pulsedemo.instacks.com/components/form/

Stacks Image 4640802

The Pulse CMS blog feature allows you to add a basic blog to any page on your site.

For more information refer to the Pulse CMS documentation https://www.pulsecms.com/docs/blog.

To place a blog on a page, add a Pulse Blog List Stack.

  • The Pulse Blog Post Stack has to be added onto another page. Link that other page inside the stack settings.
  • Include Source CSS will include blog.css on the page

Demo: http://pulsedemo.instacks.com/components/blog/

Stacks Image 4640804
Stacks Image 4640806

The Delivery Stack will display all files in a media folder as an icon, so that it is possible to download them. Just specify the folder name for this.

The Drop Zone Button Stack allows to drop an own styled button into it, for referencing a distinct file in the media folder, or a subfolder of it.

Demo: http://pulsedemo.instacks.com/components/delivery/

Stacks Image 4640808

The newsletter sign-up stack will display an input field and a button, so that users are able to enter their email address. All these email addresses will be collected in a file (default inside blocks/sb_email_list.txt.

For more information see https://www.pulsecms.com/blog-44.

Demo: http://pulsedemo.instacks.com/components/emaillist/

Stacks Image 4640810

The eCommerce Stack in current Pulse Stack is the beginning of further Shop integration, and we need your feedback what we can improve.

In current version, you are able to define the vendor information in the Pulse CMS Stack side, e.g. for Paddle, Snipcart, or Stripe. With that, all the required initialization is done on the RapidWeaver page.

In Pulse CMS, you define a Block with HTML markup for different buttons, see below for an example.

Demo: http://pulsedemo.instacks.com/components/emaillist/

<h1 class="headline">eCommerce Integration</h1>
<p class="intro">
	Just add your HTML markup for Paddle, Snipcart, or Stripe Buttons into Pulse CMS, and you are ready to sell.
</p>
<div class="feature">
	<h3>Paddle</h3>
	<p>
		Grab your copy of Pulse CMS Stack for just <span class="paddle-gross" data-product="506348"></span>
	</p>
	<p>
		<a href="#!" class="paddle_button" data-product="506348">Buy Now!</a>
	</p>
</div>
<div class="feature">
	<h3>Snipcart</h3>
	<p>
		<button class="snipcart-add-item" data-item-id="3" data-item-name="Chops" data-item-price="9.00" data-item-weight="20" 
data-item-url="https://pulsedemo.instacks.com/components/ecommerce" data-item-description="Juicy chops">Buy Porkchop</button>
	</p>
	<div class="snipcart-summary">
		<a href="#" class="snipcart-checkout"> 🛍 Bag: <span class="snipcart-total-items"></span> item(s)
 			   Total price: 
		<span class="snipcart-total-price"></span></a>
	</div>
</div>
<div class="feature">
	<h3>Stripe</h3>
	<form action="success" method="POST" id="payment-form">
	<script
		src="https://checkout.stripe.com/checkout.js" class="stripe-button"
		data-key="pk_test_2pDl6KDQMsggQIxTTiGdKffP"
		data-image="content/media/gallery1/6.jpg"
		data-name="AirBnC"
		data-description="1 Night under the stars"
		data-amount="90000"
		data-currency="usd"
		data-locale="auto"
		data-panel-label="Pay"
		data-label="Buy a night of your dreams"
		data-zip-code="false"
		data-allow-remember-me="false"
		data-billing-address="false"
		data-shipping-address="false"
		data-bitcoin="false"
		data-alipay="false"
		data-alipay-reusable="false">
	</script>
	<input type="hidden" name="amount" value="90000">
	</form>
</div>
Stacks Image 4640812
Stacks Image 4640814

In addition to the inbuilt Galleries, an integration into Gallery Stack 3 is also available.

In order to use the Gallery Stacks 3 integration, add Gallery Stack 3 to the Stacks Plugin Page. Inside Gallery Stack 3, select the Pulse CMS Gallery Integration, and enter the Gallery Name

  • e.g. gallery1

Demo: http://pulsedemo.instacks.com/components/gallery/

Stacks Image 4640816

It is possible to display images inside a blog post in a Gallery with Gallery Stack 3.

In order to use the Gallery Stacks 3 integration into blog posts, add Gallery Stack 3 inside the Pulse Blog Post Stack. Inside Gallery Stack 3, select the Pulse CMS Blog Gallery Integration.

Demo: http://pulsedemo.instacks.com/components/post/?blog=1&title=A-Very-Nice-Blog-Post

Stacks Image 4640818



© Futural UG (haftungsbeschränkt) | Imprint | Contact