You are here: Home  >  Test 2pm

You successfully created your own template. Start editing it by hovering the "Manage" button and opening the "Edit Template" dialog.

Error rendering template

Test Bearbeitung Edge

Dies ist ein Test der Bearbeitung im neuen Edge-Browser.

Discover 2sxc

We love it and use it for so many things because it's so simple, elegant and powerfull. And we know you'll love it as well!

Note: these videos show 2sxc 7 - we haven't found time to create new ones yet. 2sxc 10 is way cooler 😎.

Discover 2sxc 7 in 100 Seconds

Get to see what the exitement is all about and why everybody loves 2sxc 7.

See results here

Finally: Web Sites with Beautiful Content

Finally we get amazing content that is still easy to edit. It's so simple even with semantic markup - and your customer won't break it!

Manage Content - not Data

We love content-management and hate the data-approach used by other modules. Once you understand the difference you'll be hooked.

Simple: HTML/CSS/JS + Tokens

Very easy for web designers to use because it's built on existing technologies. Templating uses Tokens or Razor or JavaScript.

Multi-Language that's actually fun!

We're from Switzerland. We have 4 national languages + English. We really, really care about Multi-language - you'll love it!

Rapid Prototyping and Site-Wide Redesign ?

Using demo-content you can quickly prototype a web site and the designer can redesign the elements on the fly.

> Details

Discover Lists

Lists are a very powerfull enhancement, enabling you to create and customize things like galleries, image-sliders, references and more. 

> Details

Discover Multilanguage

2sxc has the best multi-language implementation available. You'll simply love it. Discover it here. 

Our older Intro-Videos

We've created a few videos showing the technology, the user experience and specific topics like multilingual content. Please watch and be inspired :).

Introducing 2sxc 4

Watch this to understand 2sxc, our vision, the philosophy and how it actually works.

Editor User Experience

Our primary focus is the content editor/author. If she loves to edit the content, then we've achieved all of our goals.

Designer User Experience

The designer needs simple tools to enhance a template; simple mechanisms like [Tokens] and @Razor. Watch the designer UX here.

Explaining the Back End.

See how the back end works, how things work together.

Look inside

Content Item

These are the values a content-editor can manage.
Name Type Value
Title System.String Discover 2sxc 7 basics in 100 Seconds
Body System.String <p>Get to see what the exitement is all about and why everybody loves 2sxc 7.&nbsp;</p>
PreviewTitle System.String Discover 2sxc 7 in 100 Seconds
PreviewText System.String Get to see what the exitement is all about and why everybody loves 2sxc 7.
YouTubeCode System.String BL5AcHX6Y6U
PreviewImage System.String File:1812
ResultsLink System.String https://youtu.be/BL5AcHX6Y6U


Presentation Item

These are additional, optional presentation instructions a content-editor can manage. If none are entered, a default set (predefined by the designer) will be used.

No Presentation parameters specified, using default presentation for this item.


Template file

@RenderPage("_Shared - Assets.cshtml", new { parts = "fancybox,styles,scripts"})

<div class="co-container-outer co-video">
    <div class="co-container-inner">
        <div class="row">
            
            @foreach(var c in List)
            {
                var Content = c.Content;
                <div class="col-12 col-sm-6 col-md-4 mb-2 mb-md-3 sc-element">
                    @Edit.Toolbar(Content)
                     @if(!String.IsNullOrEmpty(Content.PreviewImage))
                    {
                        <a data-fancybox data-src="#FancyDetail-@Content.EntityId" href="javascript:;">
                            <div class="co-play"><i class="fal fa-play"></i></div>
                            <img src="@Content.PreviewImage?w=1080&amp;h=607&amp;scale=both&amp;mode=crop&amp;quality=70" class="img-fluid mb-3 rounded" />
                        </a>
                    }
                    <h3>@Content.PreviewTitle</h3> 
                    <div class="co-preview-text">
                       <p> @Html.Raw(Content.PreviewText)</p>
                        @if(!String.IsNullOrEmpty(Content.ResultsLink))
                        {
                            <span><a href="@Content.ResultsLink" target="_blank">See results here</a></span>
                        }
                    </div>
                   
                    <div style="display:none;" id="FancyDetail-@Content.EntityId" class="co-fancy-detail">
                        <h3>@Content.Title</h3> 
                        <div style="margin-bottom:10px; max-width:720px; width:720px; min-width:280px;">@Html.Raw(Content.Body)</div>
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe class="embed-responsive-item" src="//www.youtube.com/embed/@Content.YouTubeCode?&autoplay=0" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

Look inside

Content Item

These are the values a content-editor can manage.
Name Type Value
Title System.String Our older Intro-Videos
Body System.String We've created a few videos showing the technology, the user experience and specific topics like multilingual content. Please watch and be inspired :).
Image System.String


Presentation Item

These are additional, optional presentation instructions a content-editor can manage. If none are entered, a default set (predefined by the designer) will be used.
Name Type Value
TitleTag System.String h2
ImageAction System.String none


Template file

@RenderPage("_Shared - Assets.cshtml", new { parts = "fancybox,styles,scripts"})

<div class="co-container-outer">
    <div class="co-container-inner clearfix sc-element co-content co-content-image-right co-text-beside-image mb-4">
        <div class="row">
        @Edit.Toolbar(Content)
            <div class="col-12">
    			@RenderPage("_Shared - header tag.cshtml")
    			@* call sub-template to show the image with all possible options *@
    			@RenderPage("_Shared - image and optional Lightbox.cshtml", new { img = Content, width = 600 })
    			@* call sub-template to show the title with the correct H1-H6 tag *@
    			<div class="co-text">
    				@Html.Raw(Content.Body)
    			</div>
    		</div>
        </div>
    </div>
</div>

Look inside

Content Item

These are the values a content-editor can manage.
Name Type Value
Title System.String Introducing 2sxc 4
Body System.String Making beautiful web sites possible. Screen-Candy included.
PreviewTitle System.String Introducing 2sxc 4
PreviewText System.String Watch this to understand 2sxc, our vision, the philosophy and how it actually works.
YouTubeCode System.String NOl7IiPVZv0
PreviewImage System.String /Portals/0/Content/Discover/Videos/ConceptBehind2SexyContent.png
ResultsLink System.String


Presentation Item

These are additional, optional presentation instructions a content-editor can manage. If none are entered, a default set (predefined by the designer) will be used.

No Presentation parameters specified, using default presentation for this item.


Template file

@RenderPage("_Shared - Assets.cshtml", new { parts = "fancybox,styles,scripts"})

<div class="co-container-outer co-video">
    <div class="co-container-inner">
        <div class="row">
            
            @foreach(var c in List)
            {
                var Content = c.Content;
                <div class="col-12 col-sm-6 col-md-4 mb-2 mb-md-3 sc-element">
                    @Edit.Toolbar(Content)
                     @if(!String.IsNullOrEmpty(Content.PreviewImage))
                    {
                        <a data-fancybox data-src="#FancyDetail-@Content.EntityId" href="javascript:;">
                            <div class="co-play"><i class="fal fa-play"></i></div>
                            <img src="@Content.PreviewImage?w=1080&amp;h=607&amp;scale=both&amp;mode=crop&amp;quality=70" class="img-fluid mb-3 rounded" />
                        </a>
                    }
                    <h3>@Content.PreviewTitle</h3> 
                    <div class="co-preview-text">
                       <p> @Html.Raw(Content.PreviewText)</p>
                        @if(!String.IsNullOrEmpty(Content.ResultsLink))
                        {
                            <span><a href="@Content.ResultsLink" target="_blank">See results here</a></span>
                        }
                    </div>
                   
                    <div style="display:none;" id="FancyDetail-@Content.EntityId" class="co-fancy-detail">
                        <h3>@Content.Title</h3> 
                        <div style="margin-bottom:10px; max-width:720px; width:720px; min-width:280px;">@Html.Raw(Content.Body)</div>
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe class="embed-responsive-item" src="//www.youtube.com/embed/@Content.YouTubeCode?&autoplay=0" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

Look inside

Content Item

These are the values a content-editor can manage.
Name Type Value
PreviewTitle System.String Discover Lists
PreviewText System.String <p> </p> <p>Lists are a very powerfull enhancement, enabling you to create and customize things like galleries, image-sliders, references and more.&nbsp;</p>
PreviewImage System.String
Link System.String
Target System.String Page:624
LinkText null


Presentation Item

These are additional, optional presentation instructions a content-editor can manage. If none are entered, a default set (predefined by the designer) will be used.

No Presentation parameters specified, using default presentation for this item.


Template file

@RenderPage("_Shared - Assets.cshtml", new { parts = "fancybox,styles,scripts"})

<div class="co-container-outer">
    <div class="co-container-inner sc-element">
        <div class="row">
            @foreach(var c in List)
            {
                var Content = c.Content;
            
                @:<div class="col-12 col-md-6"@(!String.IsNullOrEmpty(Content.Link) ? "co-click-box co-box-link" : "")">
                        @Edit.Toolbar(Content)
                        <figure>
                            <img src="/DesktopModules/ToSic_SexyContent/Extensions/Thumbnailer.aspx?Image=@Content.Image&Width=540&Height=5000" style="rounded shadow"/>
                        </figure>
                        @:<h3>@Content.Title</h3> 
                        <div>@Html.Raw(Content.Body)</div>
                    
                        @:@if (!String.IsNullOrEmpty(Content.Link)) {   
                            <a href="@Content.Link" class="co-link" target="@(Content.Link.StartsWith("http") ? "_blank" : "_self")"><span class="co-row">></span> Details</a>
                        }
                    
                        @:@if (!String.IsNullOrEmpty(Content.PreviewTitle)){
                            <p>@Content.Position</p>
                            <a href="#FancyDetail-@Content.EntityId" class="fancybox"><span class="co-row">></span> Details</a>
                            <div style="display:none;">
                                <div id="FancyDetail-@Content.EntityId" style="width:620px;">
                                    <h3>@Html.Raw(Content.PreviewTitle)</h3>
                                    <div @if (!String.IsNullOrEmpty(Content.PreviewImage)) {<text></text>}>
                                        @Html.Raw(Content.PreviewText)
                                    </div>
                            
                                    @if (!String.IsNullOrEmpty(Content.PreviewImage)) {
                                        <figure>
                                            <img src="/DesktopModules/ToSic_SexyContent/Extensions/Thumbnailer.aspx?Image=@Content.PreviewImage&Width=532&Height=5000" style="" />
                                        </figure>
                                    }
                                </div>
                            </div>
                        }
                @:</div> 
            }
        </div>
    </div>
</div>
2serve . 2invent . 2create is 2be.