Silex Documentation https://video.silex.me/c/docs/videos Short, silent, subtitled screencasts for the Silex website builder — one per documentation page. Getting started, layout & styling, responsive design, symbols, and publishing. Full written docs: docs.silex.me Fri, 10 Jul 2026 01:16:05 GMT https://validator.w3.org/feed/docs/rss2.html PeerTube - https://video.silex.me Silex Documentation https://video.silex.me/lazy-static/avatars/8346d4ce-5682-4511-b0c1-963c8fd40d9c.png https://video.silex.me/c/docs/videos All rights reserved, unless otherwise specified in the terms specified at https://video.silex.me/about and potential licenses granted by each content's rightholder. https://video.silex.me/feeds/podcast/videos.xml?videoChannelId=622 <![CDATA[Silex — Symbols (reusable, synced components)]]> https://video.silex.me/w/6hygZpF5XfHo5rwBVssMaq https://video.silex.me/w/6hygZpF5XfHo5rwBVssMaq Mon, 06 Jul 2026 22:21:05 GMT A Symbol is a reusable component that stays synchronized everywhere it appears — build a header or footer once and it stays consistent across your whole site. This demo builds a header bar, turns it into a Symbol, places a second instance, then edits one instance — and every instance updates together. Unlike copy-paste, all instances mirror the same component.

Silent demo with English on-screen visuals. Subtitles are available in English and French — turn them on in the player.

📖 Full guide
• English: https://docs.silex.me/designer/symbols/symbols/
• Français : https://docs.silex.me/fr/designer/symbols/symbols/

Silex is free and open source: https://www.silex.me

— — —

Un Symbol est un composant réutilisable qui reste synchronisé partout où il apparaît — construisez un header ou un footer une fois et il reste cohérent sur tout le site. Cette démo construit une barre de header, la transforme en Symbol, place une seconde instance, puis édite une instance — et toutes les instances se mettent à jour ensemble. Contrairement au copier-coller, toutes les instances reflètent le même composant.

Démo muette, visuels à l'écran en anglais. Sous-titres disponibles en anglais et en français — activez-les dans le lecteur.

]]> Silex Documentation nonadult Silex — Symbols (reusable, synced components) A Symbol is a reusable component that stays synchronized everywhere it appears — build a header or footer once and it stays consistent across your whole site. This demo builds a header bar, turns it into a Symbol, places a second instance, then ed... <![CDATA[Silex — Selectors & classes (reusable styles, BEM, :hover)]]> https://video.silex.me/w/irbQkgFxTMdg6YTFfZqV2V https://video.silex.me/w/irbQkgFxTMdg6YTFfZqV2V Mon, 06 Jul 2026 22:07:27 GMT Selectors decide exactly what gets styled. In Silex you style reusable classes, not one-off elements. This demo creates a BEM class on a button, styles the class itself, then reuses it on a second button — edit the class once and every button updates together. It adds a modifier class for a variant, and a :hover pseudo-class that reacts to the mouse live.

Silent demo with English on-screen visuals. Subtitles are available in English and French — turn them on in the player.

📖 Full guide
• English: https://docs.silex.me/designer/styling/selectors/
• Français : https://docs.silex.me/fr/designer/styling/selectors/

Silex is free and open source: https://www.silex.me

— — —

Les sélecteurs décident exactement de ce qui est stylé. Dans Silex, on style des classes réutilisables, pas des éléments isolés. Cette démo crée une classe BEM sur un bouton, style la classe elle-même, puis la réutilise sur un second bouton — on modifie la classe une fois et tous les boutons suivent. On ajoute un modifier pour une variante, et une pseudo-classe :hover qui réagit à la souris en direct.

Démo muette, visuels à l'écran en anglais. Sous-titres disponibles en anglais et en français — activez-les dans le lecteur.

]]> Silex Documentation nonadult Silex — Selectors & classes (reusable styles, BEM, :hover) Selectors decide exactly what gets styled. In Silex you style reusable classes, not one-off elements. This demo creates a BEM class on a button, styles the class itself, then reuses it on a second button — edit the class once and every button upda... <![CDATA[Silex — Publish your website to GitLab Pages]]> https://video.silex.me/w/u36Dnmctg2v2iwnAY8Xmie https://video.silex.me/w/u36Dnmctg2v2iwnAY8Xmie Mon, 06 Jul 2026 14:59:46 GMT GitLab Pages gives your Silex website free, fast hosting — storage and hosting in one place. This demo shows the whole flow: click Publish, pick GitLab.com, and Silex commits your site to a Git repository and triggers a build. GitLab Pages builds it in under a minute, then Silex shows your live links — View your website opens it at your gitlab.io URL.

Silent demo with English on-screen visuals. Subtitles are available in English and French — turn them on in the player.

📖 Full guide
• English: https://docs.silex.me/designer/publishing/gitlab/
• Français : https://docs.silex.me/fr/designer/publishing/gitlab/

Silex is free and open source: https://www.silex.me

— — —

GitLab Pages offre à votre site Silex un hébergement gratuit et rapide — stockage et hébergement au même endroit. Cette démo montre tout le flux : cliquez sur Publish, choisissez GitLab.com, et Silex commite votre site dans un dépôt Git et lance un build. GitLab Pages le construit en moins d'une minute, puis Silex affiche vos liens — View your website l'ouvre à son URL gitlab.io.

Démo muette, visuels à l'écran en anglais. Sous-titres disponibles en anglais et en français — activez-les dans le lecteur.

]]> Silex Documentation nonadult Silex — Publish your website to GitLab Pages GitLab Pages gives your Silex website free, fast hosting — storage and hosting in one place. This demo shows the whole flow: click Publish, pick GitLab.com, and Silex commits your site to a Git repository and triggers a build. GitLab Pages builds ... <![CDATA[Silex — Responsive breakpoints (device preview & media queries)]]> https://video.silex.me/w/npPW4F4bBA46wrxtBTDkBu https://video.silex.me/w/npPW4F4bBA46wrxtBTDkBu Mon, 06 Jul 2026 14:48:37 GMT Breakpoints let your design adapt to any screen. Silex is desktop-first: your base styles apply everywhere, and when you switch to a narrower device in the toolbar, the styles you change are scoped to a max-width media query — only affecting that width and below. This demo sets a heading on desktop, switches to Mobile Portrait (the 480px breakpoint), shrinks the heading there, then returns to desktop to show the base styles stay intact.

Silent demo with English on-screen visuals. Subtitles are available in English and French — turn them on in the player.

📖 Full guide
• English: https://docs.silex.me/designer/responsive/breakpoints/
• Français : https://docs.silex.me/fr/designer/responsive/breakpoints/

Silex is free and open source: https://www.silex.me

— — —

Les breakpoints permettent à votre design de s'adapter à chaque écran. Silex fonctionne en desktop-first : vos styles de base s'appliquent partout, et quand vous basculez sur un appareil plus étroit dans la barre d'outils, les styles modifiés sont limités à une media query max-width — n'affectant que cette largeur et en dessous. Cette démo définit un titre en desktop, bascule sur Mobile Portrait (le breakpoint 480px), y réduit le titre, puis revient en desktop pour montrer que les styles de base restent intacts.

Démo muette, visuels à l'écran en anglais. Sous-titres disponibles en anglais et en français — activez-les dans le lecteur.

]]> Silex Documentation nonadult Silex — Responsive breakpoints (device preview & media queries) Breakpoints let your design adapt to any screen. Silex is desktop-first: your base styles apply everywhere, and when you switch to a narrower device in the toolbar, the styles you change are scoped to a max-width media query — only affecting that ... <![CDATA[Silex — Flexbox layout (rows, centering, wrapping)]]> https://video.silex.me/w/n9Gs9JFj5JRCQE2BwX8abZ https://video.silex.me/w/n9Gs9JFj5JRCQE2BwX8abZ Mon, 06 Jul 2026 13:16:22 GMT Flexbox is how you arrange layout in Silex — placing elements side by side, centering them, and wrapping them into a responsive grid. This guide follows the core idea: the parent container defines the layout and its direct children follow. Set Display to Flex to line items up in a row, use Justify-content on the main axis and Align-items on the cross axis, then Flex-wrap for multiple lines.

Silent demo with English on-screen visuals. Subtitles are available in English and French — turn them on in the player.

📖 Full guide
• English: https://docs.silex.me/designer/styling/flexbox/
• Français : https://docs.silex.me/fr/designer/styling/flexbox/

Silex is free and open source: https://www.silex.me

— — —

Flexbox est la façon d'agencer la mise en page dans Silex — placer des éléments côte à côte, les centrer, et les faire passer à la ligne en grille responsive. Ce guide suit l'idée centrale : le conteneur parent définit la mise en page et ses enfants directs suivent. Passez Display à Flex pour aligner les éléments en ligne, utilisez Justify-content sur l'axe principal et Align-items sur l'axe transversal, puis Flex-wrap pour plusieurs lignes.

Démo muette, visuels à l'écran en anglais. Sous-titres disponibles en anglais et en français — activez-les dans le lecteur.

]]> Silex Documentation nonadult Silex — Flexbox layout (rows, centering, wrapping) Flexbox is how you arrange layout in Silex — placing elements side by side, centering them, and wrapping them into a responsive grid. This guide follows the core idea: the parent container defines the layout and its direct children follow. Set Dis... <![CDATA[Silex — the box model (content, padding, border, margin)]]> https://video.silex.me/w/4BpR22BDQ7fTih7JoVHKXv https://video.silex.me/w/4BpR22BDQ7fTih7JoVHKXv Mon, 06 Jul 2026 13:05:47 GMT Every element in Silex is a box made of four layers: content, padding, border and margin. This short guide shows the box in the editor — sizing the content with Width, giving it a background, and adding padding to space the content from the edge. Understanding these layers is the foundation of CSS layout and spacing.

Silent demo with English on-screen visuals. Subtitles are available in English and French — turn them on in the player.

📖 Full guide
• English: https://docs.silex.me/designer/structure/box-model/
• Français : https://docs.silex.me/fr/designer/structure/box-model/

Silex is free and open source: https://www.silex.me

— — —

Chaque élément dans Silex est une boîte à quatre couches : contenu, padding, bordure et marge. Ce guide montre la boîte dans l'éditeur — dimensionner le contenu avec Width, lui donner un fond, et ajouter du padding pour espacer le contenu du bord. Ces couches sont le fondement de la mise en page et de l'espacement en CSS.

Démo muette, visuels à l'écran en anglais. Sous-titres disponibles en anglais et en français — activez-les dans le lecteur.

]]> Silex Documentation nonadult Silex — the box model (content, padding, border, margin) Every element in Silex is a box made of four layers: content, padding, border and margin. This short guide shows the box in the editor — sizing the content with Width, giving it a background, and adding padding to space the content from the edge. ... <![CDATA[Silex Elements — the building blocks of your page]]> https://video.silex.me/w/fRkLxVJovox5GwEU5wpNUh https://video.silex.me/w/fRkLxVJovox5GwEU5wpNUh Mon, 06 Jul 2026 11:27:11 GMT In Silex, every piece of content is an element — an HTML building block. This short guide shows how to add elements by dragging blocks from the Blocks panel, and how to set each element's semantic tag with the Tag Name selector: turn a paragraph into a heading, a plain container into a section. Same content, clearer meaning for browsers, SEO and screen readers.

Silent demo with English on-screen visuals. Subtitles are available in English and French — turn them on in the player.

📖 Full guide
• English: https://docs.silex.me/designer/structure/elements/
• Français : https://docs.silex.me/fr/designer/structure/elements/

Silex is free and open source: https://www.silex.me

— — —

Dans Silex, chaque contenu est un élément — une brique HTML. Ce guide montre comment ajouter des éléments en glissant des blocs depuis le panneau Blocks, et comment définir la balise sémantique de chaque élément avec le sélecteur Tag Name : transformer un paragraphe en titre, un simple conteneur en section. Même contenu, un sens plus clair pour les navigateurs, le référencement et les lecteurs d'écran.

Démo muette, visuels à l'écran en anglais. Sous-titres disponibles en anglais et en français — activez-les dans le lecteur.

]]> Silex Documentation nonadult Silex Elements — the building blocks of your page In Silex, every piece of content is an element — an HTML building block. This short guide shows how to add elements by dragging blocks from the Blocks panel, and how to set each element's semantic tag with the Tag Name selector: turn a paragraph i... <![CDATA[Silex Quick Start — create and publish your first website]]> https://video.silex.me/w/gsi5pARXjpWQ7rxt6ure1B https://video.silex.me/w/gsi5pARXjpWQ7rxt6ure1B Mon, 06 Jul 2026 10:37:41 GMT Create and publish your first website with Silex — the free, open-source, no-code website builder. This quick start walks you through signing in with a GitLab account, creating a site from the dashboard, adding a heading, text and an image, styling the heading, and publishing to GitLab Pages.

Silent demo with English on-screen visuals. Subtitles are available in English and French — turn them on in the player.

📖 Full guide
• English: https://docs.silex.me/designer/getting-started/quick-start/
• Français : https://docs.silex.me/fr/designer/getting-started/quick-start/

Silex is free and open source: https://www.silex.me

— — —

Créez et publiez votre premier site avec Silex, le créateur de sites web no-code, libre et open source. Ce démarrage rapide couvre la connexion avec un compte GitLab, la création d'un site depuis le tableau de bord, l'ajout d'un titre, de texte et d'une image, la mise en forme du titre, puis la publication sur GitLab Pages.

Démo muette, visuels à l'écran en anglais. Sous-titres disponibles en anglais et en français — activez-les dans le lecteur.

]]> Silex Documentation nonadult Silex Quick Start — create and publish your first website Create and publish your first website with Silex — the free, open-source, no-code website builder. This quick start walks you through signing in with a GitLab account, creating a site from the dashboard, adding a heading, text and an image, stylin... <![CDATA[The Silex editor — a guided tour]]> https://video.silex.me/w/pmygvJEzfEkwwpbUEgwbNu https://video.silex.me/w/pmygvJEzfEkwwpbUEgwbNu Sun, 05 Jul 2026 23:16:45 GMT A guided tour of the Silex editor: the canvas, the left toolbar (Blocks, Layers, Pages, Symbols), the Style Manager, and the top bar.

Silex is a free/libre no-code website builder — visual design, standard HTML/CSS, no lock-in.

Subtitles: English and French (turn on captions).
Docs: https://docs.silex.me/en/designer/getting-started/editor/
Try Silex: https://v3.silex.me

]]> Silex Documentation nonadult The Silex editor — a guided tour A guided tour of the Silex editor: the canvas, the left toolbar (Blocks, Layers, Pages, Symbols), the Style Manager, and the top bar. Silex is a free/libre no-code website builder — visual design, standard HTML/CSS, no lock-in. Subtitles: En...