artisteer-france.fr

Le Site Officiel Français d'Artisteer

Newsletter

ChargementChargement


Remplacer l’Image d’Arrière-Plan du Template Artisteer en Mode RWD

Changement de l’Image d’Arrière-Plan en Mode RWD

Le Responsive Web Design (RWD) recouvre une approche et des solutions techniques permettant de concevoir le Design (template) pour de multiples supports pourvus d’écran, passant de l’ordinateur de bureau, à l’ordinateur portable, à la tablette tactile et au smartphone.

Les templates Artisteer sont par défaut responsive, mais certaines images ne le sont pas complètement, comme par exemple l’image d’arrière-plan du template. Une solution consiste alors à remplacer l’image d’arrière-plan par une couleur d’arrière-plan, dès lors que la taille de l’écran est inférieure à une taille donnée.

Ajout de Code CSS Personnalisé

Vous pouvez ajouter du code CSS personnalisé à votre template Artisteer directement dans Artisteer.

Cliquez sur le menu Fichier > Exporter > Options… puis sur Options CSS pour afficher la fenêtre vous permettant d’ajouter du code personnalisé.

Le code ajouté dans les Options CSS (Styles CSS supplémentaires) est alors sauvegardé avec votre projet Artisteer (fichier .artx). Lorsque vous réouvrez votre projet Artisteer, le code est toujours présent et il peut être modifié à tout moment.

Remplacement de l’Image d’Arrière-plan du Template par une Couleur

Si vous voulez supprimer l’image d’arrière-plan du template pour tous les supports dont la taille de l’écran est inférieure à 799 pixels et la remplacer par une couleur d’arrière-plan, il vous faut ajouter le code personnalisé suivant (menu Fichier > Exporter > Options… > Options CSS) :

@media (max-width: 799px)
{
#art-main
{
background-image: none !important;
background-color: #DBBEA5;
}
}

ajout de code CSS personnalisé dans Artisteer

Le paramètre max-width détermine la largeur maximum de l’écran. Vous pouvez changer cette valeur.

Renseignez le code couleur voulu pour le paramètre background-color.

Lorsque vous visualiserez le site sur un écran dont la largeur de l’écran est supérieure à 799 pixels, l’image d’arrière-plan du template s’affichera. Dès lors que vous le visualiserez sur des supports (tablettes, smartphones…) dont la largeur de l’écran est inférieure à 799 pixels, l’image d’arrière-plan sera remplacée par la couleur de remplissage paramétrée.

Vue Responsive

Vous pouvez vérifier ce comportement avec la Vue Responsive disponible dans Artisteer. Le menu Responsive View se situe dans l’angle supérieur droit de la fenêtre Artisteer (juste avant l’icône ?)

Elle permet de prévisualiser le template en mode de conception responsive et de personnaliser le template responsive directement dans Artisteer.

Achat/Mise à jour du logiciel Artisteer

Le logiciel Artisteer est proposé en deux éditions :

  • Edition Standard
  • Edition Personnel

Si vous disposez d’une ancienne version d’Artisteer, vous pouvez mettre à jour votre licence en souscrivant au Service Annuel de Mises à Jour.

Insertion d’Images dans Artisteer

Un Template créé avec Artisteer comprend 2 parties :

  • Le Design, qui spécifie la forme, à savoir l’apparence des pages web (la manière dont le contenu est présenté)
  • Le Contenu, qui spécifie le fond, à savoir le contenu de la page web (textes, images, liens, etc.)

A partir de la version 4.0 d’Artisteer, il est possible de créer des templates avec du Contenu, et de les importer dans le CMS. La création de Contenu dans Artisteer est facultative.

Insertion d’Images

Lorsque vous insérez des images dans votre projet Artisteer, vous veillerez à toujours les optimiser/compresser au préalable, Artisteer n’étant pas un programme d’édition d’images.

Insertion d’Images dans le Contenu

Lorsque vous insérez des images dans le Contenu (onglet Editer > groupe Insérer > Image), vous veillerez (si possible) à les ajouter en utilisant l’option Depuis une URL

insertion d'images dans le contenu du template Artisteer

Cela permet de réduire la taille du projet Artisteer, et ce surtout lorsque vous avez beaucoup d’images. Mais cela implique que vous hébergiez (uploadiez) au préalable vos images sur un serveur web, puisque dans ce cas vous devez renseigner l’URL de l’image (adresse web de l’image) : http://

Un Upload (téléchargement d’un fichier depuis un poste local vers un serveur web) est le contraire de Download (téléchargement d’un fichier depuis un serveur web vers un poste local). Pour « uploader » un fichier, on utilise généralement un client ftp (logiciel permettant d’envoyer le fichier sur le serveur web). FileZilla est un client FTP gratuit.

Insertion d’Images dans l’En-têteinsertion d'images dans l'en-tête du template Artisteer

L’En-tête est un élément du Design. C’est un élément de type conteneur qui contient plusieurs éléments : le logo de la société, un slogan, une image, etc.

Lorsque vous insérez des images dans l’En-tête (onglet En-tête > groupe Insérer > Image), vous pouvez insérer des images disponibles dans la galerie Artisteer, ou des images stockées sur votre ordinateur (option Depuis fichier…).

Mais vous ne pouvez pas renseigner l’URL d’une image.

Vous pouvez également insérer des images dans l’En-tête en utilisant le contrôle ImageLink (onglet En-tête > groupe Insérer > Contrôles > ImageLink). Cette option vous permet de paramétrer un lien cliquable sur l’image, et aussi de définir la visibilité de l’image, à savoir sur quel(s) type(s) d’écran elle doit s’afficher (utile pour le Responsive Design).

Remarques

1. Artisteer ne conserve pas les fichiers images originaux dans le fichier projet .artx, mais uniquement les fichiers redimensionnés.

2. Le projet Artisteer est enregistré dans un format binaire natif propre à Artisteer. Le fichier .artx contient tous les composants du Design du projet et le Contenu.

Disponibilité de la Version 4.3 Officielle d’Artisteer pour Windows

La Version 4.3 du logiciel Artisteer pour Windows est officiellement disponible.

Nouveautés d’Artisteer 4.3

  • Support de Joomla 3.3
  • Support de WordPress 3.9
  • Possibilité de désactiver la Lightbox pour toutes les images dans le projet (menu Fichier > Exporter > Options… > Général)
  • Correctifs de bogues qui persistaient dans la version 4.2

Lightbox

La Lightbox est une technique JavaScript utilisée pour afficher des images ou un autre contenu web avec des boîtes de dialogue modales. Lorsque vous cliquez sur une image, une boîte de dialogue affiche alors l’image au centre de votre écran, et le reste de la fenêtre est grisée. Si la page web contient plusieurs images, vous pouvez alors faire défiler les images en cliquant sur les flèches se trouvant à droite et/ou à gauche de la fenêtre modale.

Lightbox

Plates-formes Supportées

La version 4.3 est uniquement disponible pour les systèmes d’exploitation Windows. Aucune information concernant la plate-forme Mac n’est disponible à ce jour.

Note Importante

A partir de la version 4.2, Artisteer requiert de disposer d’une connexion internet lors de l’export des templates Joomla, WordPress et Drupal.

Aussi, lors de l’export des templates, Artisteer est automatiquement mis à jour (sous réserve que votre souscription au service de mise à jour soit valide). L’éditeur n’a plus besoin de publier des nouvelles versions mineures d’Artisteer pour procéder à de petites améliorations ou encore pour corriger certains bogues.

Mettre à jour sa Licence Artisteer

Vous pouvez télécharger Artisteer version 4.3 build 60745 à partir du lien de téléchargement qui vous a été fourni au moment de votre achat, ou en passant par le formulaire d’évaluation.

Important - Si le service de mise à jour de votre licence a expiré, cette version fonctionnera en mode EVALUATION. Une fois votre souscription au service annuel de mises à jour expirée, vous devez alors renouveler votre souscription à ce Service pour continuer à bénéficier des nouvelles versions (mineures et majeures) d’Artisteer :

  • référence SMJ1A-ART-SE-SUPL pour l’édition Standard
  • référence SMJ1A-ART-PE-SUPL pour l’édition Personnel

Support et Formation

Nous rappelons que Kapitec Software est le distributeur du logiciel Artisteer en France et que nous ne sommes pas une filiale de l’éditeur.

Le support est réservé aux clients ayant acheté le logiciel Artisteer ou renouvelé le Service Annuel de Mises à Jour en France, via le site artisteer-france.fr, Kapitec Software, ou l’un de nos revendeurs, et également aux personnes évaluant le logiciel Artisteer. Les clients ayant acheté par un autre biais doivent se rapprocher du support de leur revendeur.

Le support n’est pas une formation à l’utilisation d’Artisteer.

Kapitec Software propose une formation payante à Artisteer.

Artisteer 4.2 : Mises à Jour Mineures

Mises à Jour Mineures

A partir de la version 4.2, Artisteer requiert de disposer d’une connexion internet lors de l’export des templates Joomla, WordPress et Drupal. Aussi, lors de l’export des templates, Artisteer est automatiquement mis à jour.

L’éditeur n’a plus besoin de publier des nouvelles versions mineures d’Artisteer pour procéder à de petites améliorations, pour proposer le support des nouvelles versions de votre CMS (comme par exemple Joomla 3.2), ou encore pour corriger certains bogues.

Vous noterez qu’il est toujours nécessaire de télécharger les nouvelles versions majeures.

Une fois votre souscription au service annuel de mises à jour expirée, vous devez alors souscrire au Service Annuel de Mises à Jour pour continuer à bénéficier des nouvelles versions (mineures et majeures) d’Artisteer :

  • référence SMJ1A-ART-SE-SUPL pour l’édition Standard
  • référence SMJ1A-ART-PE-SUPL pour l’édition Personnel

Artisteer 4.3 Beta

Artisteer 4.3 est actuellement en version beta pour Windows.

Nous vous communiquerons des informations relatives à Artisteer 4.3 prochainement.

Support et Formation

Support

Le support est réservé aux clients ayant acheté le logiciel Artisteer ou renouvelé le service annuel de mises à jour en France, via le site artisteer-france.fr, Kapitec Software, ou l’un de nos revendeurs, et également aux personnes évaluant le logiciel Artisteer. Les clients ayant acheté par un autre biais doivent se rapprocher du support de leur revendeur.

Le support n’est pas une formation à l’utilisation d’Artisteer.

Formation

Kapitec Software propose une formation payante à Artisteer.

Thèmes WordPress et les Langues

Thèmes WordPress créés avec Artisteer et les Langues

Création de Thèmes Localisés

Lors de l’export de thèmes, Artisteer inclut automatiquement plusieurs fichiers de langues obtenus à partir du site WordPress.

Les traductions en Français, Allemand, Italien et Espagnol sont exportées par Artisteer dans le format de fichier compatible WordPress, dont la convention de nommage est la suivante :

<country>_<lang>.mo

Par exemple le fichier de langue Français est : fr_FR.mo

Prise en Charge de Langues Supplémentaires

Pour inclure la prise en charge d’une langue différente ou supplémentaire dans votre thème WordPress, vous devez copier le fichier de langue souhaité dans votre dossier thèmes WordPress.

Vous trouverez les fichiers de langue dans le dossier thèmes par défaut, à savoir : \wp-content\themes\default ou sur le site WordPress.

Pour sélectionner une langue autre que celle définie dans votre installation actuelle de WordPress, vous devez changer la fonction “define” dans le fichier wp-config.php, par exemple :

define(‘WPLANG’, ‘fr_FR’)

Edition des Traductions

Pour éditer les traductions pour une langue, vous devez télécharger et installer le plug-in de Localisation Codestyling.

Vous pourrez alors gérer la localisation depuis votre administration WordPress.

Ressources Utiles

Création d’un Template Artisteer : Onglet Editer (partie 4)

Mise en Forme de Contenu et Styles (suite)

Options Ligne et Cellule

Les options Ligne et Cellule vous permettent d’aller plus loin dans la personnalisation de la mise en forme. Vous pouvez insérer une texture à partir de la galerie Artisteer ou en insérant un graphique (fichier image), changer la couleur, la transparence et les bordures, personnaliser la marge, l’espacement, les séparateurs et les colonnes des lignes sélectionnées, insérer et supprimer des lignes, modifier la largeur, le remplissage et l’alignement vertical des cellules. N’oubliez pas de toujours sélectionner dans la Zone de Prévisualisation la Cellule (qui sélectionne également une ligne) que vous voulez modifier avant de faire une sélection.

Le style de contenu définit certains des éléments du Design qui font partie de vos Lignes et Cellules. Les options Toutes les pages définissent comment ces éléments de Design, tels que les bordures et les couleurs de surbrillance, sont censés s’afficher.

Chaque fois que vous modifiez une option pour une Ligne ou une Cellule, vous substituez la règle définie par le style de contenu sélectionné. Une fois que le changement est effectué, vous ne pouvez pas désélectionner une option, à moins d’utiliser la fonction Annuler (bouton Annuler dans la barre d’accès rapide ou raccourci clavier Ctrl-Z) pour revenir en arrière. De même, lorsque vous sélectionnez un style de contenu (Editer > Style), vous réinitialisez toutes les options que vous avez changées pour une Ligne ou une Cellule.

Supposons que vous définissez l’apparence des bordures (Editer > Styles > Toutes les pages > Bordure), et qu’ensuite vous sélectionnez un style de contenu (Editer > Style) qui inclut des bordures.

Onglet Editer Style de Cellule Artister

Le style de contenu indique d’ajouter une bordure autour de chaque Cellule. Si vous regardez une Cellule donnée, vous voyez que les options de Cellules reflètent cette règle : 6px, solide, noire, bordure.

Onglet Editer Options de Cellule Artister

Maintenant sélectionnez la seconde ligne et changez la couleur de la bordure de la Ligne. Cela ajoute une bordure autour de la seconde ligne et comme les Cellules sont espacées, une marge est ajoutée des deux côtés. Vous voyez donc désormais une bordure distincte autour des Cellules.

Onglet Editer Bordure de Ligne Artisteer

Vous pouvez annuler cette action (bouton Annuler), mais vous ne pouvez pas annuler une sélection que vous avez enregistrée. Vous devrez alors changer le paramétrage pour la Ligne (c’est-à-dire supprimer la bordure), ou sélectionner à nouveau un style (sélectionner à nouveau le style avec les bordures) pour réinitialiser les options de Ligne et Cellule.

Options Avancées Ligne et Cellule

Cliquez sur l’option Ligne (onglet Editer > Contenu) pour afficher le menu déroulant et sélectionnez Options de la Ligne… Cela ouvre la fenêtre Options Cellule qui vous permet d’affiner le paramétrage. Par exemple, si vous définissez une bordure, la bordure s’applique à tous les côtés de la Ligne, mais si vous utilisez les options avancées vous pouvez alors changer l’apparence de chaque côté de la Ligne.

Onglet Editer Options de Ligne Artisteer

Lignes de Quadrillage

L’option Afficher les Lignes de quadrillage (onglet Editer > Contenu > Style) ajoute des Lignes de quadrillage à la Zone de Prévisualisation, ce qui vous permet de mieux voir l’organisation de votre contenu. Elles sont représentées par des lignes en pointillés autour du contenu de votre page.

Les Lignes de quadrillage ne font pas partie de vos pages web ; elles s’affichent uniquement dans Artisteer. Les Lignes de quadrillage ne sont pas des bordures, même si parfois il s’avère difficile de les distinguer visuellement. Si vous devez ajouter des bordures, alors il est judicieux de ne pas afficher les Lignes de quadrillage.

Afficher les Lignes de quadrillage (onglet Editer > Contenu > Style) est différent de Voir les Lignes de quadrillage (onglet Editer > Insérer > Tableau) pour un élément Tableau. Définir la mise en forme du contenu n’est pas la même chose que d’ajouter un Tableau, même si visuellement cela peut s’avérer difficile de faire la différence. La mise en forme (disposition) de contenu est la division physique de votre zone de Contenu. Le Tableau fait partie du contenu que vous ajoutez dans la Cellule de contenu, comme le texte, les images, etc. Un Tableau a ses propres dimensions. Il peut apparaître dans une Cellule de contenu, mais il n’est en aucun cas lié aux options de style définies pour la Cellule de contenu, comme par exemple le remplissage. Comme pour les autres éléments du Design, vous définissez le style (look) du Tableau à partir de l’onglet Contenu. Lorsque vous ajoutez un Tableau à votre contenu avec l’onglet Editer, le tableau s’affiche avec le style de tableau que vous avez défini, mais cela est indépendant de la mise en forme de contenu. Lorsque vous sélectionnez l’une des options de style de contenu, vous définissez comment les Lignes et les Cellules de contenu apparaissent, indépendamment du contenu que vous ajoutez ultérieurement.

Ressources