Réglages communs des blocks

Chaque block Flexipow possède tout un panel de réglages permettant de gérer :

• son contenu
• ses fonctionnalités
• son apparence

Pour ce dernier volet, les réglages sont de deux types : les réglages spécifiques à chaque type de block, et les réglages communs à tous les blocks. Ces réglages communs se retrouveront donc pour tous les blocks différents.

Visibility (choix)

Définit la visibilité du block. Quelque soit la valeur définie, les blocs sont toujours visibles dans le wp-admin.

• yes (défaut) : block visible
• no : block masqué
• connected users : block masqué aux utilisateurs non connectés
• non connected users : block masqué aux utilisateurs connectés

Global width (choix)

Définit la largeur de la zone de contenu : Fullwidth pour toute la largeur, Bootstrap container pour le container auto-centré classique (voir ici pour en savoir plus).

Device display (choix) new

Définit la visibilité du block selon les types de terminaux : all (défaut) pour tous les terminaux, only desktop uniquement pour les ordinateurs, et only mobile uniquement pour les téléphones mobiles.

Custom section identifier (identifiant)

Permet de définir un identifiant personnalisé pour l’ensemble du block. Cela ne supprime pas l’identifiant unique automatique défini par Flexipow (le Content ID), mais cela rajoute en amont cet identifiant. Très utile pour mettre en place un système de navigation par ancres avec des noms lisibles et évocateurs. Vous devez définir cet identifiant, assurez vous qu’il soit bien unique dans la page.

Classes container global, Classes container central et Section title classes (identifiants)

Définit respectivement une ou plusieurs classes css pour le container global, le container central (si Global width est défini sur Bootstrap container) et le titre de la section.  Séparer les classes par un espace. Possibilité d’utiliser des classes Bootstrap.

Global horizontal padding (choix) new

Définit les marges internes latérales du container global, en rem. Par défaut, cette valeur est à 0. Il peux être utile de modifier cette valeur dans le cas, par exemple, de Blocks columns en pleine largeur, afin de laisser un espace de respiration horizontal latéral autour du block.

Modify text section color (choix)

Permet de faire apparaitre trois sélecteurs de couleurs permettant de modifier la couleur :

• des titres principaux de la section (h1,h2) : Section title color (choix couleur)
• des titres secondaires de la section (h3,h4,h5,h6) : Secondary section title color (choix couleur)
• du texte courant de la section : Text color (choix couleur)

Sticky slide mode (choix)

Permet d’activer un comportement « sticky » de la section, avec un certain nombre d’options :

• Sticky z-index (choix) : définit la valeur z-index de la section, par défaut égal à -1, c’est à dire en dessous des autres sections. Une valeur supérieure à 0 définira une position au dessus des autres sections (à conditions qu’elles ne soient pas elle même définies comme « sticky », une valeur supérieure à 10000 définira une position placée au dessus du header, si ce dernier est fixe.
• Sticky direction (choix) : définit la direction vers le haut ou vers le bas lors du scroll

Exemple ici.

Background global et Background central (choix)

Permettent de définir les arrières plans du conteneur global et du conteneur central (si le block a une largeur définie sur « Bootstrap width »).

Background global rule sm et Background central rule sm

Permettent de définir un arrière plan différencié sur mobiles pour le container global et le container central.

Pour chacune de ces quatre options, les choix sont identiques, excepté pour les dégradés, non accessibles pour les règles mobiles.

None : aucun arrière plan.

Color : choisir une couleur pleine ou avec transparence.

Image : choix d’une image en arrière plan, avec plusieurs options

• Image file : le fichier choisi comme arrière plan
• Repeat : règle de répétition de l’image
• Position : le left 0% top 0% définit le coin supérieur gauche, le left 100% top: 100% le coin inférieur droit. C’est la position initiale, relative à l’origine définie par le conteneur parent de l’image d’arrière-plan. C’est plutot utile pour les images d’arrière plan de petite taille, n’occupant pas tout l’espace. Le réglage par défaut à 50% 0% convient dans la plupart des cas. En savoir plus.
• Size : définit la taille relative de l’arrière plan. Auto redimensionne l’image d’arrière-plan afin que ses proportions soient conservées, cover redimensionne l’image pour être aussi grande que possible et pour conserver ses proportions mais si des parties dépassent elles sont rognées, et contain fait la même chose, mais en évitant de dépasser du container parent, les parties vides étant comblées par la couleur d’arrière plan. En savoir plus.
• Fixed : si définit sur yes, l’image d’arrière plan ne suivra pas le scroll et restera fixe.

Gradient : choix d’un dégradé de couleur en arrière plan par le biais de plusieurs paramètres.

• Type (linear ou radial)
• Gradient angle 
• Start color et end color
• Step start color et start end color

En savoir plus sur les gradients et voir un générateur en ligne de gradients.

NB : dans l’état actuel des choses, ce réglage ne permet de ne créer des dégradés que sur deux couleurs.

Patterns ^new : choix d’un motif répété dans les deux dimensions, d’après heropatterns.com.

• Patterns (liste) :  choix du motif désiré
• Background color : couleur du fond
• Foreground color : couleur des motifs, en premier plan
• Pattern opacity : opacité des motifs en premier plan

Particles ^new : choix d’un arrière-plan animé ou non, constitué de motifs définissables de forme, couleurs, trajectoires définissables ou aléatoires. Construit avec particles.js.
Cet outil utilise du javascript et insère un canvas html5 dans votre bloc, traité ensuite comme arrière-plan.

De très nombreuses options vous permettent de définir votre animation et vos motifs : densité, forme, bordures, liaisons, mouvement, vitesse, interactions…. Les champs présents dans Flexipow suivent ceux définit dans la documentation officielle de particles.js. Vous pouvez aussi choisir d’utiliser des préréglages : network, bubbles ou snow.

Ces différents réglages permettent de fixer les marges internes (padding) et externes (margin) des containers globaux et centraux.

En modifiant ces ajustements pour les tablettes et les mobiles, il est possible de les ajuster pour ces différentes résolutions.

Les marges externes ne peuvent s’ajuster que dans deux des quatre directions : vers le haut (top) ou le bas (bottom), afin de ne pas perturber le fonctionnement responsive de Bootstrap.

Les marges internes peuvent elles s’ajuster dans les quatre directions.

Cet onglet permet de définir une bordure inférieure et/ou supérieure pour le bloc.

Pour chacune des bordures supérieures ou inférieures :

• top border et bottom border (choix): permet de définir si bordure ou non, et si celle si est étendue au container global ou au container central,
• type (choix): motif de la bordure
  – solid : pleine
  – dotted : pointillés
  – dashed : tiretée
  – double : doublée
  – groove : 3d interne
  – ridge : 3d externe
•  color (palette)
• width (nombre): épaisseur en px

Shape divider (choix).
Permet de définir une forme de contour en bas ou en haut du bloc. Inspiré de l’outil de génération en ligne shapedivider.
L’activation de ces motifs entraine la génération d’une image vectorielle svg permettant d’ornementer la transition entre vos sections, à l’aide de plusieurs facteurs.

• shape (choix) : forme du motif,
• fill color (palette) : couleur de remplissage. attention à bien la faire concorder avec la couleur de fon du bloc précédent ou suivant,
• height (nombres) :  hauteur en pixels du motifs, pour la version deskop, tablette et mobile,
• global width (choix) : appliquer le motif au container global ou au container central
• shape width (nombre) : fait varier l’intensité des motifs. Par exemple, les vagues d’un motif wave seront bien plus saillantes à 100% et très amples à 300%,
• flip horizontaly (choix) : appliquer une rotation horizontale de 180 degrés au motif

Permet de créer une ou plusieurs animations sur un élément du bloc. La plupart de ces animations utilisent uniquement des animations css3 issues de la bibliothèque animate.css.

Chaque animation n’appartenant pas à la catégorie « _misc_ » est définie par un ensemble de réglages, et vous pouvez en créer autant que vous voulez (attention à bien respecter l’adage trop d’animations tue l’animation).

Pour chacune d’entre elles :

• title (texte) : donnez un titre technique à votre animation pour vous y retrouver. Ce nom n’a aucune influence sur le reste,
• element (choix), permet d’associer l’animation à
  – section bloc central : l’ensemble du container central,
  – section title : au titre de la section si ce dernier est défini,
  – header section : à l’en-tête de la section si il est défini,
  – footer section : au pied de la section si il est défini,
  – element class : à un classe css,
  – element id : à un identifiant html

• animation type (choix) : type d’animation, se référer à animate.css
• delay (nombre) : délai d’éxécution de l’animation, en secondes (aucun ou de 2 à 5 secondes),
• speed (nombre) : vitesse de l’animation en ms
• repeat : répétition de l’animation (1 = pas de répétition)

Il faut savoir qu’une animation est lancée lorsque l’élément associé est visible à l’écran.

Autres animations n’utilisant pas animate.css :

• « changeBackgroundOnScroll » ^new : permet de modifier la couleur de fond du site au passage du block, en choisissant une couleur ‘background on’ (obligatoire) et la possibilité, lorsque le block n’est plus dans la zone de vision, de revenir à une autre couleur via le paramètre ‘background off’ (facultative).

Cette section permet d’ajouter du code CSS et/ou du code Javascript à votre block, ainsi que d’appeler des bibliothèques internes ou externes. Pour les scripts et fichiers Javascript, assurez vous préalablement de l’intégrité de vos sources afin de limiter des risques de codes malicieux.

Elle est destinée aux utilisateurs ayant déjà une connaissance du code, et elle permets de compléter les autres réglages du block, de les personnaliser, voire d’y ajouter des fonctionnalités.

On retrouve plusieurs champs :

• Custom css (texte) : saisissez ici les règles css générales du block. Vous pouvez utiliser les alias {{block}} et {{blockinner}} pour appeler automatiquement les identifiants respectifs du container global et du container central.  Ces alias sont aussi utilisables dans les deux champs suivants.
• Custom CSS (md) (texte) : saisissez ici les règles css du block appliquées aux résolution intermédiaires (largeur maximum de 768px),
• Custom CSS (sm) (texte) : saisissez ici les règles css du block appliquées aux résolution réduites(largeur maximum de 576px),

• external CSS files (texte) : renseignez ici les fichiers css nécessaires d’être appelées par le block. Cela peut être des fichiers externes, ou des fichiers internes. Dans ce dernier cas, vous pouvez utiliser l’alias {{THEMELIBS}} pointant vers le répertoire /localfiles/libs/ du thème Flexipow.
• custom js (texte) : indiquez ici du code javascript utile pour votre block. Ce code sera inséré dans une déclaration globale jQuery $( document ).ready() automatiquement.
• external JS files (texte) : renseignez ici les fichiers js nécessaires d’être appelées par le block. Cela peut être des fichiers externes, ou des fichiers internes. Dans ce dernier cas, vous pouvez utiliser l’alias {{THEMELIBS}} pointant vers le répertoire /localfiles/libs/ du thème Flexipow.