Custom Text

Add paragraphs of static or dynamic copy with variables, formulas, and formatting pipes.

widgets content text

Add a paragraph of static or dynamic text. Supports icon shortcodes, {{ variable }} templates, = formulas, and formatting pipes.

In the builder: ElementsContent WidgetsCustom Text


Widget Settings

Text

UI field Description
Content Paragraph text. Supports [icon] shortcodes.
Formula When the field starts with =, the entire paragraph is computed by the formula engine.

Visibility

Expand Visibility to show or hide the widget based on an active View Mode or a formula. See Show and Hide Fields with Conditional Logic.

UI field Description
Show Always or Conditionally
Active mode is Name of the View Mode that must be active for this widget to appear (when Show is Conditionally).
Formula result is positive Optional formula; evaluated on Calculate

Design

Expand Design to style individual parts of the widget. Prefer project themes for a consistent look; per-widget styling is optional.

Part What it represents
Paragraph The paragraph text (.cp-value inside <p>).

Custom CSS — useful selectors and classes:

Selector / class Targets
#cp-{ID} Entire widget (ID from the Element panel header).
Custom CSS Classes Classes you add in Design; applied to the outer widget container.
.custom_text-widget Outer widget type class.
.cp-value Paragraph content area.

Variables, formulas, and pipes

Custom Text supports three ways to show dynamic content.

1. Template variables ({{ }})

Insert a variable by its Name from any input widget (Number, Text, Result, etc.):

Your monthly payment is {{ monthly_payment }}.

Values refresh after Calculate (or when Calculate on load runs in project options).

2. Formulas (=)

When the entire text content field starts with =, the paragraph is computed by the formula engine — similar to a Result widget, but rendered as flowing text:

= "Estimated total: " & total_cost & " USD"

Use this when the whole block should be one calculated string.

3. Pipes (formatting)

Add a pipe after an expression inside {{ }} to format numbers and text. Calcopolis provides five pipes:

Pipe Syntax Example value Output
number {{ value | number:D }} 1234.5, D=2 1234.50
percent {{ rate | percent:D }} 0.0525, D=1 5.3% (value × 100, then %)
currency {{ amount | currency:D:CODE }} 1000, D=2, CODE=PLN zł1,000.00
capitalize {{ name | capitalize }} monthly report Monthly report
raw {{ html | raw }} HTML string Unescaped HTML — use carefully

Currency arguments (order is flexible):

Syntax Meaning
{{ amount | currency:PLN }} PLN, 2 decimal places (default)
{{ amount | currency:2 }} USD, 2 decimal places
{{ amount | currency:2:EUR }} EUR, 2 decimal places
{{ amount | currency:EUR:0 }} EUR, no decimal places

Expressions inside {{ }} support simple arithmetic with variable names, e.g. {{ loan_amount * 0.1 | currency:2:USD }} or {{ (price + tax) | number:2 }}.

Mixed example

Based on your inputs, the estimated total is {{ total_cost | currency:2:USD }} per month.

Icon shortcodes ([star]) work in literal parts of the text, not inside {{ }} expressions.

See Understanding Formulas and Variables.


Custom Text vs Header vs Section Title

Custom Text Header Section Title
Element Paragraph H1 heading Section divider
Templates {{ var }} Static/formula text Static/formula text
Best for Body copy, disclaimers Page title Step sections

Use Custom Text for explanatory paragraphs with optional dynamic values.


← Back to Reference

Still have unanswered questions?

We are here to help. Reach out and our team will get back to you.

Contact support