Concepteur

Augmenter texteRéduire texte

Lay-out designLe concepteur vous permet de personnaliser le modèle ou le thème choisi. Le concepteur offre de nombreuses possibilités de personnalisation et est donc moins facile à utiliser que la gestion standard de la mise en page. Cette page décrit les fonctionnalités du concepteur.

Naviguez vers Paramètres > Mise en page et cliquez sur l'onglet Designer. Cliquez ensuite sur Démarrer. Nous vous recommandons d'utiliser un grand écran (au moins 1920x900 pixels) pour travailler de manière optimale avec le designer.

Le designer se compose de l'aperçu en arrière-plan, d'une fenêtre avec la vue mobile de votre site Web et de la fenêtre de conception.

Vue mobile

La plupart des gens visiteront votre site Web avec un smartphone. La vue mobile vous donne un exemple de l'aspect de votre site Web sur un petit écran. Veillez à ce que le site Web ne devienne pas trop large afin qu'une barre de défilement horizontale ne s'affiche pas. Tous les modèles sont adaptés aux mobiles par défaut, mais le concepteur donne beaucoup de liberté, de sorte que cela peut être perturbé.

Les icônes en haut vous permettent de visualiser à différentes résolutions.

L'icône Refresh vous permet de rafraîchir les scripts du site pour voir la dernière version.

Fenêtre de conception

Designs

Le premier bouton vous donne un aperçu de vos designs personnalisés.

Ajouter un design
Avec ce bouton, vous pouvez ajouter un nouveau design ou copier un design d'une autre boutique en ligne.
Publier
Après la publication, le design sera en direct et visible pour vos visiteurs.
Personnaliser
Ceci vous permettra de modifier le nom, les commentaires et les droits de copie du design.
Supprimer
Cette action vous permet de supprimer le design. Cette action ne peut pas être annulée.

Eléments

Les éléments forment la structure HTML de votre site Web. Après avoir choisi un élément, un formulaire web vous sera présenté pour vous permettre de modifier les propriétés de l'élément.

Il existe de nombreux éléments et propriétés qui peuvent être personnalisés avec le formulaire web. L'élément principal est la page Web. Ce formulaire modifiera automatiquement le sélecteur CSS sous-jacent.

Les propriétés qui ont déjà été personnalisées sont indiquées par un fond vert dans le champ du formulaire. Laisser la valeur d'une propriété en blanc supprimera la propriété.

Subelements

Certains éléments contiennent des sous-éléments. En cliquant sur les liens, on fait apparaître un nouveau formulaire qui peut être utilisé pour modifier les propriétés du sous-élément.

Médias

Les propriétés des éléments peuvent ne s'appliquer que pour certaines tailles d'écran ou dans la version imprimée. En cliquant sur les liens, on ajuste les propriétés de l'élément pour un support particulier.

Enregistrer

Utilisez cette icône pour enregistrer le design. Cela ne publiera pas le design.

Structure

Vous permet de modifier la structure HTML du site Web. Vous pouvez ajouter, déplacer et supprimer des objets.

Il existe des objets visibles (fonction de recherche, panier, sélection de la langue, navigation) et des conteneurs invisibles qui sont utilisés pour structurer le site Web. Les conteneurs sont généralement utilisés pour regrouper des éléments ou ajouter des arrière-plans.

Vous pouvez apporter des ajustements à la structure en faisant glisser des éléments ou en utilisant les flèches Haut/Bas. Vous pouvez ajouter un nouvel élément en cliquant sur Ajouter en bas. Pour supprimer un élément, cliquez sur l'icône Delete.

La structure est automatiquement ajustée dans les exemples de conception. Si l'ajustement ne se fait pas automatiquement, cliquez sur Save dans la fenêtre de conception, puis sur Reload dans la vue mobile.

Personnaliser le CSS

Permet de modifier les codes de mise en page (CSS code) du site Web.CSS - Les feuilles de style (Cascading Style Sheets) ne sont pas un langage de programmation mais un langage de style qui peut être utilisé pour définir la mise en forme des éléments d'un site Web.

Personnaliser les CSS, est-ce quelque chose pour un profane ?

Le CSS peut être appris facilement. Nous recommandons cette méthode aux utilisateurs qui veulent personnaliser leur propre site Web et qui investissent du temps pour apprendre le CSS.

Liens utiles contenant des informations sur CSS :

  • W3Schools - des tutoriels pour apprendre le CSS
  • CSS-Tricks - notre préféré avec de nombreuses informations sur les CSS

Aide sur la personnalisation CSS

Pour les modifications de code CSS, notre service d'assistance ne peut pas fournir de soutien. Ajouter un support CSS signifierait faire du web design personnalisé et cela rendrait EasyWebshop beaucoup plus cher. Cependant, nous avons de bons contacts avec des concepteurs web qui peuvent aider à la personnalisation CSS moyennant des frais.

Nous ne recommandons pas de laisser les concepteurs web se connecter à votre boutique en ligne directement ou avec un compte administrateur. Cela entraîne parfois des discussions sur des modifications qui n'étaient pas souhaitées. Ne laissez se connecter à votre boutique que les personnes en qui vous avez confiance ! Au lieu de cela, le concepteur web peut créer une boutique en ligne de base et concevoir la mise en page dans cette boutique en ligne. Vous pouvez ensuite copier la mise en page sur votre boutique en ligne avec la fonction de copie.

Préférences

Ici, vous pouvez activer et désactiver le mode sombre, le plein écran et la coloration syntaxique du code CSS. Il existe également une option permettant de rendre la fenêtre de conception transparente. Les préférences concernent la fenêtre de conception ; donc, pas le site Web.

Comment puis-je modifier la propriété X?

Changer l'arrière-plan

Choisissez l'élément que vous voulez, par exemple Webpage. À Image d'arrière-plan, cliquez sur l'icône Modifier l'image. Choisissez une image dans la liste ou Transférer une nouvelle image.

Vous pouvez également acheter une image en utilisant la Galerie. Si vous voulez utiliser l'image sur une page, nous recommandons le Format Web. Pour les arrière-plans, nous recommandons le format Large.

Cliquez sur Insérer pour définir l'image comme arrière-plan. Une fois l'image d'arrière-plan définie, une icône Supprimer l'image apparaît également.

Changer les boutons

Choisissez l'élément Webpage et le sous-élément Buttons. Dans le formulaire, il est possible de régler des propriétés telles que la couleur, la taille, le style de bordure, etc.

Le sous-élément Buttons mouse-over permet de modifier le style des boutons lorsque la souris les survole. Par exemple, on peut donner au bouton une couleur plus claire.

Personnalisation des couleurs

La façon la plus simple de modifier les couleurs est dans le code CSS. Les codes de couleur ressemblent à #ffffff ou rgba(255, 255, 255, 0,5). Avec cette dernière notation, le dernier paramètre (0,5 dans l'exemple) est la transparence.

Liens utiles pour composer des couleurs :

Personnalisation des polices

Vous pouvez changer la police en sélectionnant un élément et en ajustant Font dans le formulaire.

Par défaut, tous nos modèles ont une police définie pour l'élément principal Webpage. Il est possible de définir des polices différentes pour différents éléments. Nous ne le recommandons pas afin de garder les choses épurées.

Problèmes possibles

Je vois toujours la version ancienne du site Web
Cela est dû généralement au fait que les anciennes images sont toujours dans le cache du navigateur Internet. Un navigateur Internet (Internet Explorer, Firefox, Google Chrome,...) enregistre les pages Web et les images sur votre disque dur. Ainsi, lors de votre visite suivante, la page se charge plus rapidement. Lorsque vous visiterez la page, vous verrez la version ancienne de la photo sur votre disque dur et non la nouvelle version de votre site Web.

Pour régler ce problème : rendez-vous sur la page de la boutique et cliquez sur Actualiser la page ou Recharger la page.

Vous pouvez également utiliser les touches de raccourci : F5 ou CTRL + R (Pomme + R sur Mac). La version la plus récente de votre page web et maintenant chargée.
La favicon n'est pas affichée
Utilisez un navigateur récent. Dans certaines anciennes version d'Internet Explorer, aucune favicon n'est affichée.
Connectez également un nom de domaine à votre boutique. Certains navigateurs affichent la favicon de EasyWebshop si aucun nom de domaine n'est connecté.

Page suivante: Modifier les textes et pages web

Wiki de démarrage



Foire aux questions Contact