Edition › Tinymce et gabarits

Deltacms dispose du célébre éditeur WYSIWYG Tinymce (What You See Is What You Get).

Tinymce possède une barre d'icône assez complète, le menu textuel ( Fichier Editer Voir ...) offre des possibilités supplémentaires.

Vous pouvez saisir en mode aperçu ou en code source en cliquant sur '<>'.

Afin que votre site conserve une unité les réglages de police, taille, couleurs se font dans la 'Personnalisation des thémes / Site', et vous choisissez ici le format de vos textes entre Paragraphe, En-tête 1, En-tête 2, etc... Pour mettre en évidence une partie de vos textes agissez sur les paramètres de format ( gras, italique, souligné, etc...) et exceptionnellement sur la taille des caractères en pixels ( '15px'). Si vous utilisez les options du menu 'Inversion des couleurs du site' ou 'Augmenter la taille des caractères', ces options seront sans effet sur des colorations ou des forçages de taille de caractères effectués ici.

Avec Deltacms 6.1.01 vous disposez d'une nouvelle commande "Sélectionner le conteneur" accessible dans le menu éditer ou par un clic droit, elle est destinée à l'alignement horizontal d'une vidéo ou d'un iframe.

Les gabarits

Les gabarits vous permettent de structurer vos pages de façon rapide et propre en utilisant des colonnes préformatées. Ils vous évitent ainsi d'utiliser des tableaux qui posent souvent des problèmes d'affichage sur les écrans de petite taille (sur les téléphones portables notamment). A ne pas confondre avec les barres latérales dont nous parlons par ailleurs.

Le choix d'un gabarit se fait dans l'éditeur :

Choisissez tout simplement dans le menu déroulant le gabarit qui vous intéresse.

Visuellement, cela donne ceci :

Bloc de texte

Titre du bloc

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum, neque non vulputate hendrerit, arcu turpis dapibus nisl, id scelerisque metus lectus vitae nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec feugiat dolor et turpis finibus condimentum. Cras sit amet ligula sagittis justo.

Blocs de texte: 4 - 4 - 4

Titre du bloc

Bloc de texte sans titre

Bloc coloré

Vous pouvez paramétrer les couleurs de la boîte dans l'éditeur CSS accessible depuis la personnalisation des thèmes.

Lien

h2

h3

Bloc coloré pleine largeur

Vous pouvez paramétrer les couleurs de la boîte dans l'éditeur CSS accessible depuis la personnalisation des thèmes.

Lien

h2

h3

Image pleine largeur

Image avec texte superposé

L'écriture du texte et le choix de l'image se font avec Tinymce en mode normal (wysiwyg), l'alignement horizontal de l'image, la position du texte, la couleur et l'opacité de son fond se paramètrent avec Tinymce en mode code source (< >).

Image avec texte superposé peine largeur

Les modifications du texte et le choix de l'image se font avec Tinymce en mode normal (wysiwyg), la position du texte, la couleur et l'opacité de son fond se paramètrent avec Tinymce en mode code source (< >).

Vidéo pleine largeur

Vidéo avec texte superposé

L'écriture du texte, les choix de la vidéo et de sa taille se font avec Tinymce en mode normal (wysiwyg), l'alignement horizontal de la vidéo, la position du texte, la couleur et l'opacité de son fond se paramètrent avec Tinymce en mode code source (< >).

Vidéo avec texte superposé pleine largeur

L'écriture du texte et le choix de la vidéo se font avec Tinymce en mode normal (wysiwyg), la hauteur de la vidéo et sa partie visible en petit écran, la position et la largeur du texte, la couleur et l'opacité de son fond se paramètrent avec Tinymce en mode code source (< >).

Grille symétrique : 6 - 6

Grille symétrique : 3 - 3 - 3 - 3

Grille asymétrique : 8 - 4

Grille asymétrique : 2 - 10

Effet accordeon

Premier bloc

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum, neque non vulputate hendrerit, arcu turpis dapibus nisl, id scelerisque metus lectus vitae nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec feugiat dolor et turpis finibus condimentum. Cras sit amet ligula sagittis justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum, neque non vulputate hendrerit, arcu turpis dapibus nisl, id scelerisque metus lectus vitae nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec feugiat dolor et turpis finibus condimentum. Cras sit amet ligula sagittis justo.
Second bloc

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum, neque non vulputate hendrerit, arcu turpis dapibus nisl, id scelerisque metus lectus vitae nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec feugiat dolor et turpis finibus condimentum. Cras sit amet ligula sagittis justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum, neque non vulputate hendrerit, arcu turpis dapibus nisl, id scelerisque metus lectus vitae nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec feugiat dolor et turpis finibus condimentum. Cras sit amet ligula sagittis justo.

Edition › Tinymce et gabarits

Les gabarits

Bloc de texte

Titre du bloc

Blocs de texte: 4 - 4 - 4

Titre du bloc

Titre du bloc

Titre du bloc

Bloc de texte sans titre

Bloc coloré

h2

h3

Bloc coloré pleine largeur

h2

h3

Image pleine largeur

Image avec texte superposé

Image avec texte superposé peine largeur

Vidéo pleine largeur

Vidéo avec texte superposé

Vidéo avec texte superposé pleine largeur

Grille symétrique : 6 - 6

Grille symétrique : 3 - 3 - 3 - 3

Grille asymétrique : 8 - 4

Grille asymétrique : 2 - 10

Effet accordeon

Premier bloc

Second bloc