Ticketor - Conception de votre site

Concevoir le site signifie sélectionner des thèmes et des couleurs pour l'ensemble de votre site, télécharger un logo et déterminer le design qui affectera l'ensemble de votre site et toutes les pages.

À l'aide de l'outil de conception de Ticketor, vous pouvez créer presque n'importe quel design ou site que vous pouvez imaginer ou vous pouvez faire correspondre le site pour avoir la même apparence qu'un autre site ou votre site officiel.

Même si vous intégrez ou incorporez la billetterie à un site existant, vous devez toujours utiliser l'outil de conception pour que le site ait la même sensation et apparence que votre autre site et téléchargez vos logos et images d'arrière-plan.

Vous pouvez lancer l'outil de conception depuis Panneau de configuration > Compte et paramètres > Conception . Vous pouvez suivre l'assistant pour les paramètres de base ou ignorer l'assistant pour accéder au panneau principal.

Le panneau principal s'ouvre sur votre page afin que vous puissiez voir immédiatement l'effet des modifications que vous apportez sur la page. Vous pouvez naviguer vers d'autres pages pour voir l'effet sur toutes les pages.

Toutes les modifications apportées à ce panneau sont automatiquement enregistrées et appliquées et ne nécessitent pas d'enregistrement. Vous pouvez utiliser Ctrl+Z pour annuler.

Remarque importante : la convivialité est plus importante que l'apparence

La considération la plus importante lors de la conception d'un site est la convivialité.

Vous ne voulez jamais sacrifier la convivialité pour le design ou la beauté de votre site. Voici quelques points auxquels vous souhaitez accorder une attention particulière :

1. Contraste des couleurs : la couleur de votre texte et la couleur de votre arrière-plan doivent être suffisamment contrastées pour être facilement lisibles, non seulement par un œil sain, mais également par les utilisateurs handicapés.
2. Convivialité mobile. Tenez toujours compte des cas d'utilisation des appareils mobiles et des petits écrans lors de la conception du site. Essayez d'éviter les gros rembourrages et les marges autour de la page qui rendront la zone du contenu principal si petite. Essayez également d'éviter les conceptions à 2 colonnes ou à plusieurs colonnes, car elles pourraient ne pas convenir aux petits écrans comme prévu.

Avec ces éléments à l'esprit, commençons à concevoir le site :

Sélectionnez un thème

Commencez par sélectionner un thème. Le thème dicte la couleur générale du site. Sélectionnez un thème qui correspond le mieux à votre logo et à votre image de marque. Vous pouvez modifier ultérieurement les couleurs, les arrière-plans, les bordures et d'autres paramètres pour différentes zones. Alors ne vous inquiétez pas si vous ne trouvez pas un thème parfait. Sélectionnez simplement celui qui utilise les couleurs les plus proches de votre image de marque ou de vos goûts.

Assurez-vous de choisir un thème avec une couleur de texte claire si vous envisagez de concevoir un site de couleur sombre et choisissez un thème avec une couleur de texte sombre si vous envisagez de créer un site avec un fond clair.

Téléchargez votre logo

Ensuite, accédez au panneau du logo du site et téléchargez votre logo. Si vous n'avez pas de logo, vous pouvez utiliser le logo textuel à la place.

Le logo ainsi que la navigation du site sont les 2 éléments qui résident dans la zone d'en-tête du site.

Vous pouvez redimensionner le logo et la navigation supérieure en faisant glisser la poignée dans le coin inférieur droit de ceux-ci et vous pouvez déplacer le logo et la navigation supérieure n'importe où dans la zone d'en-tête.

Vous pouvez également ajuster la hauteur de la zone d'en-tête en faisant glisser le bas de l'en-tête.

Sélectionnez les paramètres de mise en page et d'en-tête

Sélectionnez ensuite votre mise en page. Tenez compte des très grands écrans ainsi que des très petits écrans mobiles lors de la sélection de la mise en page. La mise en page pleine largeur peut ne pas être belle sur les écrans larges. La disposition de la largeur fixe (au centre) peut gaspiller beaucoup de surface d'écran sur les grands moniteurs.

Je voudrais aller avec "Pleine largeur avec contenu au centre". Ils utilisent toute la largeur de l'écran sur les petits écrans et ont fière allure sur un écran large.

Selon que vous souhaitez que les couleurs d'en-tête et d'arrière-plan du module, que nous ajusterons dans les prochaines étapes, couvrent toute la largeur de l'écran ou seulement le centre, vous devez sélectionner l'une des dispositions qui maintiennent le contenu au centre.

En outre, vous pouvez choisir la conception de la navigation supérieure. Vous pouvez choisir des liens simples ou différents styles de boîtes.

Ensuite, vous pouvez ajuster l'alignement des éléments dans l'en-tête du site. L'en-tête du site contient votre logo et la navigation supérieure.

Vous pouvez faire glisser et déposer le logo ou la barre de navigation supérieure pour les déplacer n'importe où dans la zone d'en-tête. Vous pouvez redimensionner le logo ou le menu de navigation à l'aide de la poignée en bas à droite. Si le menu de navigation est trop étroit, les éléments de la navigation s'afficheront sur une deuxième ligne.

Vous pouvez également ajuster la hauteur de la zone d'en-tête en faisant glisser le bord inférieur.

Redimensionnez votre navigateur pour vous assurer que la zone d'en-tête s'affiche bien sur toutes les tailles et largeurs d'écran et qu'elle ne provoque pas de défilement.

Télécharger le logo du billet

Téléchargez ensuite le logo de votre billet électronique. C'est le logo qui est imprimé sur vos billets. N'oubliez pas que les billets sont imprimés sur du papier blanc, de sorte que le logo du billet électronique doit contraster avec le blanc.

Lorsque vous créez un événement, vous pouvez prévisualiser les billets et le logo du billet électronique que vous téléchargez ici.

Télécharger l'en-tête et le pied de page de l'e-mail

Tous les e-mails sortants du système, y compris les e-mails de bienvenue, les e-mails de confirmation et toute newsletter que vous envoyez, seront envoyés avec l'en-tête et le pied de page que vous téléchargez ici.

Remarque : Vous pouvez également ajouter une signature d'e-mail à partir de Panneau de configuration > Compte et paramètres > Modifier les e-mails et les confirmations > Signature d'e-mail.

Personnalisez les thèmes et les couleurs pour chaque section de page

À ce stade, vous pouvez personnaliser le thème sélectionné, modifier certaines couleurs, bordures ou télécharger des images d'arrière-plan.

Allez dans l'onglet "Sections". Cet onglet comprend plusieurs panneaux, pour différentes sections de la page. Le contenu des panneaux est assez similaire pour chaque section et vous permet de personnaliser cette section.

Chaque page de votre site se compose des sections suivantes :

1. Page : est la page globale. Vous pouvez utiliser cette section pour définir une image ou une couleur d'arrière-plan pour la page et effectuer d'autres réglages
2. En-tête de page : l'en-tête de la page où se trouvent votre logo et la navigation supérieure. Vous pouvez utiliser cette section pour changer la couleur de la navigation supérieure ou changer l'arrière-plan de l'en-tête de la page
3. Pied de page : contrôle la couleur et la conception du pied de page du site. Le pied de page du site contient normalement les logos de la carte de crédit et un lien vers vos conditions et vous pouvez ajouter n'importe quel contenu au pied de page du site depuis Panneau de configuration > Compte et paramètres > Modifier le contenu > Pied de page du site.
4. Module : Le module est la zone où se trouve le contenu principal de la page. Par exemple, la zone "Trouver des billets", la zone "Panier", la zone "Liste des événements", la zone "Contactez-nous" sont tous des modules. Chaque page peut contenir un ou plusieurs modules. Un module se compose d'un en-tête et d'un corps. L'en-tête contient le titre du module et le corps contient le contenu principal du module. La largeur du module peut être la largeur totale de l'écran ou elle peut être limitée à la zone centrale selon la disposition que vous choisissez. Si vous souhaitez avoir une image de fond pour les modules qui couvrent toute la largeur de l'écran ou si vous souhaitez que l'en-tête du module aille jusqu'aux bords de l'écran, choisissez la disposition « Pleine largeur - Contenu du module au centre " Ainsi, seul le contenu du module (corps) est limité au centre tandis que l'en-tête et le module sont en pleine largeur. Sinon, si vous souhaitez que l'en-tête du module soit limité à la zone centrale, choisissez « Pleine largeur - Module au centre » ou « Pleine largeur - Tout le contenu au centre » pour limiter également l'en-tête du site au centre.
5. Corps du module : est la partie du module avec le contenu principal, à l'exclusion de l'en-tête du module (titre)
6. En-tête du module : est la zone supérieure du module avec le titre du module. Vous pouvez ajuster la hauteur de l'en-tête du module en faisant glisser le bord inférieur et vous pouvez ajuster la taille de la police du titre du module ou la couleur et la couleur d'arrière-plan.
7. Contenu : Il ne s'agit pas d'une zone ou d'une section spécifique de la page mais fait référence au contenu général de la page. Vous pouvez modifier la couleur principale du contenu et la couleur « Surlignage et compliments » utilisée comme couleur secondaire pour les titres ou les surlignages du texte.
8. Éléments cliquables : vous pouvez définir ici les couleurs et les paramètres des zones cliquables de la page, y compris les liens, les boutons, les onglets et les en-têtes de panneau. Vous pouvez définir «l'état par défaut» ou l'apparence normale des éléments cliquables, «état de survol» lorsque vous passez la souris sur une zone cliquable, «état actif», tel que l'onglet actif dans un panneau, «bouton principal» et «utilitaire Couleurs et styles des boutons utilisés sur l'ensemble du site.

Dans chaque panneau, vous pouvez définir ou écraser les paramètres suivants :

1. Couleur ou style d'arrière-plan (Uni ou dégradé). Vous pouvez choisir des couleurs semi-transparentes pour créer des zones transparentes. Par exemple, vous pouvez sélectionner une couleur d'arrière-plan grise ou blanche semi-transparente pour l'arrière-plan du module ou du corps du module afin de séparer la zone du module du reste de la page et de donner suffisamment de contraste à votre texte, tout en affichant l'image d'arrière-plan de votre page. Cette technique peut être utilisée pour créer un module d'aspect moderne sans bordures ni boîtes
2. Image d'arrière-plan que vous pouvez télécharger ou sélectionner dans la galerie
3. Largeur et couleur de bordure paramétrables pour chaque côté de la section : haut, bas, gauche et droite. Pour supprimer la bordure d'une zone qui est livrée par défaut avec une bordure, réglez simplement la largeur de la bordure sur zéro pour les 4 côtés.
4. Le rembourrage est l'espace intérieur vide de la zone, entre le contenu d'une boîte et la bordure de la boîte. Il peut être réglé pour chaque côté de la boîte indépendamment.
5. La marge, qui est l'espace extérieur de la boîte, de la bordure de la boîte à la boîte suivante sur la page. Il peut être réglé pour les 4 côtés de la boîte indépendamment.
6. La couleur et la taille de l'ombre peuvent définir l'ombre de la boîte. Si votre thème est livré avec une ombre et que vous souhaitez la supprimer, définissez simplement la taille sur zéro.
7. Le rayon de coin peut être défini pour créer des boîtes avec un coin arrondi. Le rayon de coin peut être défini indépendamment pour chaque coin. Vous pouvez utiliser un grand rayon sur certains coins pour créer des boîtes irrégulières.
8. Police, couleur de police et ombre de police vous permettent de définir la police de la section.

En utilisant l'onglet Sections, vous devriez pouvoir personnaliser entièrement la conception de votre site.

CSS

Le CSS est une technologie utilisée par les concepteurs de sites Web pour concevoir un site. À l'aide de CSS, un concepteur peut masquer ou modifier le style de chaque élément individuel de la page de manière très granulaire ou générale.

Étant donné que l'onglet "Sections" du panneau de conception vous donne un très bon contrôle sur le style du site, il est très peu probable que vous ayez besoin d'écrire du code CSS. En fait, Ticketor déconseille l'utilisation de CSS sur le site sauf dans de très rares cas.

Si vous êtes un développeur Web et décidez d'utiliser la section CSS pour ajouter du style au site, assurez-vous de limiter soigneusement vos sélecteurs à l'élément spécifique que vous ciblez et n'utilisez pas de sélecteurs génériques pour éviter toute conséquence inattendue pouvant affecter le site. Fonctionnalité.