Sections (also known as segments) are the building blocks of your website within Webigniter. A section consists of 2 core pieces, the section file (or view file) and the elements to connect the section file to the CMS.

If your website has many recurring sections but with other content per page or per section, you only have to build this section once and then add it to all the pages you want.

The section file is the place where you will put all of your frontend code. This can be any frontend language and PHP. No restrictions here.

In this section you will make references to the elements you want to attach to this section. This means that that's the place where your CMS content is placed. Let me demonstrate this with a simple example.

<h1><?=$title;?></h1>
<h2><?=$description;?></h2>
<p><?=$content;?></p>
<img src='<?=$image['link'];?>' alt='<?=$image['alt'];?>'>

As you can see this is some pretty basic HTML, but you will also notice the PHP echo's in it. $title, $description, $content and $image are the references to the elements you have attached to this section. This means that on these places, the content from the CMS will be included. You can name these variables whatever you want, but they have to match how you name the elements on this section.

Each element can have a different way of providing information to the partial (see the difference between $content and $image for example). Refer to the documentation of the element you want to attach to the sectionin order to see how it should be included.

Elements are used to facilitate interaction between the content manager and the section.

There are many different types of interaction, but the most common are the text, wysiwyg, media or toggler element. For example when you add a text element, the content manager gets a input field where they can input text on every page where this specific section is added.

If you name this text element title for example, the input of this field will be available in the section file under the variable name $title.

When adding an element, you have the option to specify a tooltip.

This field is not required, but can help content managers to know what's the purpose of a specific element.

The tooltip is presented to the content manager as a circle with a question mark, when the content manager hovers over it, they will see your message.

User input can also be validated before they can submit their changes.

When you add or edit an element within a section, you can switch to the tab validation. There you have some types of validation which can be used on input of the element. Some types of validation require extra input (like minimum and maximum characters), if that's the case, an extra input field will be presented where you can specify this extra dimension.

By default a generic error message is presented in the language of the user that triggers the validation error, but if you want to, you can specify a custom error message.

There may be occasions where you want to show a certain element only if a certain condition is met.

If that's the case, switch to the conditions tab and switch to 'show if'. Then select another element in this section and set a value. Now if this other element is or reaches the set value, the element will be shown, and dissapear when the value is changed again.

This can be usefull in combination with a toggler element, if you want to use it to show elements when a toggler is selected, set the value to on.