Pulse CMS Stack Tutorial

Video

Install Pulse CMS

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.

Integration Stacks in Stacks Plugin Library

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

Stacks Image 4640796

Block (Text Content) Integration

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

Slider Integration

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/

Image Integration

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/

Contact Form Integration

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

Blog Integration

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

File Download (Delivery and Drop Zone Button)

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

Newsletter (Sign-Up Form)

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

eCommerce Integration (Paddle, Snipcart, Stripe)

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

Gallery Stack 3 Integration

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

Gallery Stack 3 Integration for Blog Galleries

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

Creating Translated Texts

A copy of Localizer Stack is now part of Pulse CMS. The general workflow is the same:

  • You have a piece of text you want to translate. Lets give it a name: text_module.
  • In Pulse CMS, you store this as text_module.txt file inside the Blocks folder of your admin UI.
  • This text_module acts as standard or fallback text. It will be displayed all the time when no translation variant is available for the text_module.
  • In order to create a translation version for this module, e.g. in German, add a text_module-de.
  • In Pulse CMS, you store this as text_module-de.txt file inside the Blocks folder of your admin UI.
  • In all cases where the visitor of your site is using the German language, text_module-de will be displayed. In all cases the visitor has another language setting, text_module will be displayed.
  • It is possible to create multiple translations at the same time with adding additional text_module variants, all followed by a dash and the 2 letter ISO language code. Check the list of ISO 639-1 codes therefore.
Stacks Image 4640848

In order to translate the piece of text on the page, you have different possibilities:

  • Drop an instance of Localizer Stack on the page and adapt the subfolder path. Enter above mentioned block name text_module in the respective fields of the Stack. The text will be displayed in the translated version after publishment (a preview inside RapidWeaver is not supported).

  • Drop an instance of Localizer Stack and adapt the subfolder path. Afterwards, use tags like {{localizer:text_module}}. With this, you are able to translate titles, slogans, menu items, footers, etc. For this basic configuration, entering the block name is not needed.

Stacks Image 4640852
Stacks Image 4640854

Provide Language Selector

In order to select the language, the page has to be loaded with the URL parameter locale = 2 letter ISO language code. Here are some examples:

  • You add 2 buttons on your home page, both with links to either http://yourpage.com/?locale=de for German, or http://yourpage.com/?locale=en for English (in above example our fallback language). This will trigger a reload of the home page with the selected language.

  • You add 2 navigation items in your menu, both with links to either http://yourpage.com/?locale=de for German, or http://yourpage.com/?locale=en for English. This will also trigger a reload of the home page with the selected language, independend where the user is currently inside the menu structure.

  • You add 2 navigation items in your menu, both with relative links to either ./?locale=de for German, or ./?locale=en for English. This will trigger a reload of the current page with the selected language, independend where the user is currently inside the menu structure. In order to make these relative links working, make sure all your pages are Stacks pages with an instance of Localizer Stack.

Stacks Image 4640862
Stacks Image 4640864

More Videos