Call To Action:

A call to action (CTA) is a prompt on a website that tells the user to take some specified action. A call to action is typically written as a command or action phrase, such as ‘Sign Up’ or ‘Buy Now’ and generally takes the form of a button or hyperlink. In digital marketing this can take the form of the text on a button (a CTA button) or a web link and in email campaigns CTAs are often links to a web page where the user can take further action.


Available Options:

  • Call to Action with button aligned right. (default)
  • Call to Action with button aligned bottom.

Call to Action with button aligned right:

  • This is the default alignment for the call to action.

Output:

Darkout helps you to build startup website you dream about

Purchase Darkout Jekyll Theme, that can be your base theme to build your website on. Easy to customise and tons of options

Code:


<div class="darkout-section">
{% include do-call-to-action.html tag="modules" button-alignment="right" %}
</div>


How to add content:

  • Step1: Navigate to the data file for call to action in _data > do-call-to-action.yml
  • Step2: Add content to the data file as shown in the below example.
- title: Join the Static Site Generator/SSG revoloution by geting our jekyll theme  # Use call to action title here
  description:  # Use call to action description here
  button:
    - name: Buy Now  # Use call to action button name here
      href: "#"  # Use call to action url path here
  tag: modules # Use call to action tag here
  • Step3: In the data file tag is a mandatory value. Without using tag call to action will not be displayed.

How to add in page:

  • Step1: Add call to action to the page using the include statement.
  • Step2: On the page use

<div class="darkout-section">{% include do-call-to-action.html tag="modules" button-alignment="right" %}</div>

  • Attributes:
    • Tag:
      • Tag is a mandatory attribute without using tag Call to action will not be displayed. (Mandatory)
    • Button-alignment:
      • Right:
        • If button attribute is set to right the button will be displayed to the right side of the content and title.
    • Class:
      • Use additional class here as include variable.

Call to Action with button aligned bottom:

Output:

Darkout helps you to build startup website you dream about

Purchase Darkout Jekyll Theme, that can be your base theme to build your website on. Easy to customise and tons of options

Code:


<div class="darkout-section">
{% include do-call-to-action.html tag="modules" button-alignment="bottom" %}
</div>


How to add content:

  • Step1: Navigate to the data file for call to action in _data > do-call-to-action.yml
  • Step2: Add content to the data file as shown in the below example.
- title: Join the Static Site Generator/SSG revoloution by geting our jekyll theme  # Use call to action title here
  description:  # Use call to action description here
  button:
    - name: Buy Now  # Use call to action button name here
      href: "#"  # Use call to action url path here
  tag: modules  # Use call to action tag here
  • Step3: In the data file tag is a mandatory value. Without using tag call to action will not be displayed.

How to add in page:

  • Step1: Add call to action to the page using the include statement.
  • Step2: On the page use

<div class="darkout-section">{% include do-call-to-action.html tag="modules" button-alignment="bottom" %}</div>

  • Attributes:
    • Tag:
      • Tag is a mandatory attribute without using tag Call to action will not be displayed. (Mandatory)
    • Button-alignment:
      • Bottom:
        • If button attribute is set to bottom the button will be displayed to the bottom side of the content and title.
    • Class:
      • Use additional class here as include variable.