Communauté francophone - Jimdo
Bienvenue sur le nouveau forum de discussion officiel de la communauté francophone des utilisateurs de Jimdo.

Ce forum annule et remplace le précédent forum Jimdo, qui a malheureusement dû être fermé pour raisons techniques.

Vous avez un ou plusieurs sites Jimdo ? Enregistrez vous sur le forum, posez vos questions et prenez part aux discussions !

Vous êtes simple visiteur ? Vous pouvez consulter nos pages, mais vous ne pourrez pas laisser de message.

Insérer du texte dans une image

Voir le sujet précédent Voir le sujet suivant Aller en bas

Insérer du texte dans une image

Message par Trodatt le Dim 24 Sep 2017 - 16:19

Bonjour,
Ma question concerne le texte qui apparaît au milieu d'une image.
Je souhaiterais pouvoir insérer du texte dans une image insérée dans un effet de défilement d'image.
A aujourd'hui, j'ai bien suivi le tutoriel Jimdo, j'ai de jolies images qui défilent mais sans texte au milieu de ces images.
Pourriez vous me donner svp un exemple de code html et où l'insérer dans le code html pour le défilement?

2ème question : je souhaiterais aussi mettre du texte au milieu d'une image mais cette fois ci dans une page classique, sans défilement. Est-ce le même code et à quel endroit le mettre SVP?

Merci beaucoup pour votre aide!

Trodatt

Messages : 16
Date d'inscription : 04/07/2015

http://www.madeleinejeux.fr

Revenir en haut Aller en bas

Re: Insérer du texte dans une image

Message par FredVig le Dim 24 Sep 2017 - 18:56

Je ne connais pas ce tuto jimdo, mais s'il s'agit du texte figurant en regard de chaque image de la galerie d'image, vous pouvez utiliser quelques balises html simples pour formater le texte, ou directement récupérer l'identifiant du texte et changer son style en CSS.
Pour mettre du texte sur une image, vous devriez essayer de déplacer le titre de l'image à l'aide du css. (voir les tutos de ce forum "http://www.jimdoforum.fr/t746-apprendre-a-modifier-le-head-les-bases-actualisees-2016

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

Messages : 1824
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: Insérer du texte dans une image

Message par Trodatt le Dim 24 Sep 2017 - 19:45

Bonsoir et merci pour votre aide.
Pour le tuto c'est celui-ci : https://aide.jimdo.com/aller-plus-loin-avec-jimdo/cr%C3%A9er-un-effet-de-d%C3%A9filement-d-image/
Ma 1ère question est liée au code HTML à ajouter dans le widget utilisé pour le défilement d'image : j'aimerais intégrer du texte, au centre de l'image et je pense qu'il y a un code spécifique à entrer et où?

Par ailleurs, vous répondez à ma 2ème question qui concerne une page classique, mais je ne saisis pas car si je créé une image et y met un sous-titre, puis vais dans le CSS et essaye de choisir un style, il n'est pas indiqué de mise au centre du texte (qui se situe en bas de l'image).

Merci pour votre aide, et votre patience.

Trodatt

Messages : 16
Date d'inscription : 04/07/2015

http://www.madeleinejeux.fr

Revenir en haut Aller en bas

Re: Insérer du texte dans une image

Message par FredVig le Dim 24 Sep 2017 - 20:32

Dans le cas du tuto que vous indiquez, ce n'est pas une galerie d'image. il faut tout faire en html (tuto + texte sur l'image) et l'insérer dans le widget html.
Le tuto vous explique comment créer une image, il suffit de rajouter du texte dans une div. Ce sont des manipulations qu'il ne faut entreprendre qu'après avoir étudié les bases de l'html.
ça, c'est les 2 div du tutojimdo qui contiennent l'image. Il faut rajouter du texte dans une div, après celle de l'image.

Code:

<div style="display: block!important;margin-left: -1000px;margin-right: -1000px;">
        <div style=
        "background-image: url(http://www.meduana.fr/app/download/9921424998/panodev.jpg?t=1423782118); background-size: cover; background-attachment: fixed; background-position: center; width: 100%!important; max-width: 100%; margin: 25px 0;height:500px;">
    </div>
<div>
            <p style=" [ici le style du texte]">
Le texte
            </p>
        </div>
</div>

   
Le texte est à "remonter" sur l'image à l'aide du style. Cela fait intervenir diverses propriétés, qui différent selon ce que vous voulez obtenir. (display, position, margin et padding, principalement) C'est à la fois assez simple, mais il existe beaucoup de possibilités pour parvenir au résultat.

Pour l'aspect du texte, une des méthodes consiste à le créer à l'aide d'un module texte, et copier son html à l'aide du dernier outil de la liste "modifier le html". Il suffit de coller le tout entre les balises <div> et >/div>, dans l'autre module.

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

Messages : 1824
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: Insérer du texte dans une image

Message par Trodatt le Dim 24 Sep 2017 - 21:57

J'ai du mal, à priori il faudrait que j'intègre ceci : img {
 vertical-align:top;
}
Mais où et avec quelles virgules, points, parenthèses.....
J'ai essaye de le mettre à la suite du code que vous m'avez transmis, code que j'avais déjà utilisé jusqu'à ....n: 25px 0;height:500px;"> conformément au tuto Jimdo.
J'ai aussi utilisé le code <p style="margin:150px"> mais le texte reste en bas.
Pourriez vous me donner, svp, si cela vous est possible, un exemple de code pour l'alignement horizontal et vertical du texte, ajouté à mon code actuel (ci-dessous) que je recopierai, je souhaite simplement que le texte soit situé au milieu de l'image verticalement et horizontalement et rien d'autre.... Rolling Eyes
Mon code entier est :
<div style="display: block!important;margin-left: -1000px;margin-right: -1000px;">
   <div style=
   "background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d7/Carri%C3%A8res_d%27Ocre%2C_Roussillon%2C_Vaucluse.jpg); background-size: cover; background-attachment: fixed; background-position: center; width: 100%!important; max-width: 100%; margin: 25px 0;height:500px;">
   </div>
           <p style="text-align: center;"><span style="font-size: 34px;">Ceci est un test</span></p>
   </p>
</div>

Je vous demande juste 1 petite ligne de code car là c'est un peu dur et je souffre en ce Dimanche soir....

Trodatt

Messages : 16
Date d'inscription : 04/07/2015

http://www.madeleinejeux.fr

Revenir en haut Aller en bas

Re: Insérer du texte dans une image

Message par tachi300 le Mar 26 Sep 2017 - 10:05

Moi j'ai du texte avec bouton de lien si ça peut aider Very Happy

<div style="display: block!important;margin-left: -335px;margin-right: -335px;">
   <div style=
   "background-image: url(https://image.jimcdn.com/app/cms/image/transf/dimension=origxorig:format=jpg/path/s7f509d59e0e1454c/image/i7896b11efc0c888a/version/1495028775/image.jpg);
    background-size: cover; background-attachment: fixed; background-position: center; background-position: center; box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.9); width: 100%!important; max-width: 100%; margin: 25px 0;height:500px;">
   <div class="j-calltoaction-wrapper j-calltoaction-align-2 centragebouton">
           <a class="j-calltoaction-link j-calltoaction-link-style-2 centragebouton" data-action="button" href="/news" data-title="news">NEWS</a>
       </div>

tachi300

Messages : 127
Date d'inscription : 12/10/2016

http://www.lachsportfactory.com

Revenir en haut Aller en bas

Re: Insérer du texte dans une image

Message par Trodatt le Mar 26 Sep 2017 - 12:55

Super merci beaucoup c'est très sympa, j'ai changé le lien de destination pour celui-ci : href="/boutique-en-ligne" au lieu de "news" pour mon site web.
En revanche petit souci, le bouton de lien est situé tout en haut de l'image : sais tu quelle valeur de "px" dois-je changer?
Merci beaucoup
Par contre tu devrais pas le faire un peu plus grand le bouton de lien sur ton site pour qu'il soit + visible?

Trodatt

Messages : 16
Date d'inscription : 04/07/2015

http://www.madeleinejeux.fr

Revenir en haut Aller en bas

Re: Insérer du texte dans une image

Message par tachi300 le Mar 26 Sep 2017 - 13:29

<div style="display: block!important;margin-left: -335px;margin-right: -335px;">
  <div style=
  "background-image: url(https://image.jimcdn.com/app/cms/image/transf/dimension=origxorig:format=jpg/path/s7f509d59e0e1454c/image/i7896b11efc0c888a/version/1495028775/image.jpg);
   background-size: cover; background-attachment: fixed; background-position: center; background-position: center; box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.9); width: 100%!important; max-width: 100%; margin: 25px 0;height:500px;">
  <div class="j-calltoaction-wrapper j-calltoaction-align-2 centragebouton">
          <a class="j-calltoaction-link j-calltoaction-link-style-2 centragebouton" data-action="button" href="/news" data-title="news">NEWS</a>
      </div>

le centragebouton souligné tu l'as mis ...

tachi300

Messages : 127
Date d'inscription : 12/10/2016

http://www.lachsportfactory.com

Revenir en haut Aller en bas

Re: Insérer du texte dans une image

Message par Trodatt le Mar 26 Sep 2017 - 14:23

Tout à fait, j'ai fait copier/coller de tout le code html et le bouton reste tout en haut de l'image.
J'ai essayé sur un autre site que j'ai créé et c'est pareil.

Trodatt

Messages : 16
Date d'inscription : 04/07/2015

http://www.madeleinejeux.fr

Revenir en haut Aller en bas

Re: Insérer du texte dans une image

Message par tachi300 le Mar 26 Sep 2017 - 16:06

<div class="j-calltoaction-wrapper j-calltoaction-align-2 centragebouton">
         <a class="j-calltoaction-link j-calltoaction-link-style-2 centragebouton" data-action="button" href="/news" data-title="news">NEWS</a>
     </div>

Le nom de mes boutons ... les tiens ne doivent pas s'appeler de la même manière !

Sur ton site c'est plutôt : j-calltoaction-link j-calltoaction-link-style-3


tachi300

Messages : 127
Date d'inscription : 12/10/2016

http://www.lachsportfactory.com

Revenir en haut Aller en bas

Re: Insérer du texte dans une image

Message par Trodatt le Mar 26 Sep 2017 - 16:39

J'ai essayé toujours pas.
Quand je change <div class="j-calltoaction-wrapper j-calltoaction-align-2 centragebouton">
Et y met 1 à la place de 2 le bouton se met en haut à gauche et si je mets 3 ils e met en haut à droite.
Bon, c'est pas grave, pour le texte au milieu de l'image, je créerai une image avec texte dans un logiciel de retouche d'images et pour le bouton je ferai sans mais c'est vrai que ça peut apporter un plus.
Merci quand même pour ton aide!

Trodatt

Messages : 16
Date d'inscription : 04/07/2015

http://www.madeleinejeux.fr

Revenir en haut Aller en bas

Re: Insérer du texte dans une image

Message par tachi300 le Mar 26 Sep 2017 - 16:42

Non c'est pas ça ...

met à la place de <div class="j-calltoaction-wrapper j-calltoaction-align-2 centragebouton">

j-calltoaction-link j-calltoaction-link-style-3 centragebouton Cool

tachi300

Messages : 127
Date d'inscription : 12/10/2016

http://www.lachsportfactory.com

Revenir en haut Aller en bas

Re: Insérer du texte dans une image

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum