CSS Come trovare ID dell'elemento sulla pagina ? CSS

[MRX.]

Ciao ragazzi ,
nel settore del marketing digitale vengono usate le "landing page" , che mettendo da parte i termini markettari , sono delle semplici pagine web .
Siccome i marketers non sono sviluppatori , esistono software "drag and drop" per creare queste pagine .
Questi software permettono l'utilizzo del CSS basilare , tipo ombre , modificare la dimensione di un elemento ecc
Volevo appunto implementare le ombre ma non riesco a trovare l'ID dell'elemento .
Mi potreste mostrare come fare ?
Questa è la pagina : https://maximrusuconsulting.lpages.co/come-vendere-cassa/
Provo con l'inspector tool del browser (firefox) ma non trovo una sezione concreta che mostra l'ID .
Mi interessa mettere l'ombra all'immagine della guida , ma farei anche altre modifiche ad altri elementi , una volta che capisco come trovare l'id appunto .
Grazie in anticipo !

 

[JunkCoder]

Non c'e' l'ha un ID, non e' obbligatorio averne uno. Puoi selezionare quell'elemento per classe, selettore:

.lp-image-react {
    /* css per quell'elemento */
}

 

[MRX.]

Non c'e' l'ha un ID, non e' obbligatorio averne uno. Puoi selezionare quell'elemento per classe, selettore:

.lp-image-react {
    /* css per quell'elemento */
}

Grande , ha funzionato !
Gentilmente , mi spiegheresti come individuare anche gli altri elementi della pagina ?
Di solito si tratta appunto di immagine , o testo o "form" , cioè quello spazio dove si inseriscono i dati .

 

[JunkCoder]

Grande , ha funzionato !
Gentilmente , mi spiegheresti come individuare anche gli altri elementi della pagina ?
Di solito si tratta appunto di immagine , o testo o "form" , cioè quello spazio dove si inseriscono i dati .

Puoi usare diversi tipi di selettori in CSS, il piu' semplice e' sicuramente l'id che usa il simbolo #, in quanto un solo elemento puo' avere quell'id. Se l'elemento non ha id allora puoi provare con la classe che pero' puo' essere condivisa da altri elementi (ed avere piu' classi contemporaneamente).
Ho fatto ispeziona elemento e l'html dell'elemento e' risultato essere:

<img class="lp-image-react w-b0d8a389-a195-58f8-6283-72a8adf30d4b css-lpragm lazyload" src="...blabla..." data-src="...blabla..." data-image-upload-source="builder3" alt="" style="width:100%">

Le classi sono separate da spazio, per cui questo elemento ha le seguenti classi:

• lp-image-react
• w-b0d8a389-a195-58f8-6283-72a8adf30d4b
• css-lpragm
• lazyload

Le ultime due le ho escluse perche' essendo nomi generici avrebbero potuto usarla anche tanti altri elementi ed avresti applicato il css anche a quelli. Il secondo mi sembrava generato random dal tool quindi ho pensato che se avessi fatto qualche modifica di layout sarebbe potuto cambiare ed avresti dovuto fare la modifica manuale di nuovo. Verificando il primo e' utilizzato solo da quell'elemento.

Ora, se quell'elemento non avesse avuto una classe, avresti potuto comunque selezionarlo per tag, visto che e' l'unica immagine del sito:

img {
    /* css */
}

O, se avessi avuto un'altra immagine, ma questa fosse stata dentro una tabella, avresti potuto selezionare solo quella dentro al div:

div > img {
    /* ... */
}

 

[MRX.]

Puoi usare diversi tipi di selettori in CSS, il piu' semplice e' sicuramente l'id che usa il simbolo #, in quanto un solo elemento puo' avere quell'id. Se l'elemento non ha id allora puoi provare con la classe che pero' puo' essere condivisa da altri elementi (ed avere piu' classi contemporaneamente).
Ho fatto ispeziona elemento e l'html dell'elemento e' risultato essere:

<img class="lp-image-react w-b0d8a389-a195-58f8-6283-72a8adf30d4b css-lpragm lazyload" src="...blabla..." data-src="...blabla..." data-image-upload-source="builder3" alt="" style="width:100%">

Le classi sono separate da spazio, per cui questo elemento ha le seguenti classi:

• lp-image-react
• w-b0d8a389-a195-58f8-6283-72a8adf30d4b
• css-lpragm
• lazyload

Le ultime due le ho escluse perche' essendo nomi generici avrebbero potuto usarla anche tanti altri elementi ed avresti applicato il css anche a quelli. Il secondo mi sembrava generato random dal tool quindi ho pensato che se avessi fatto qualche modifica di layout sarebbe potuto cambiare ed avresti dovuto fare la modifica manuale di nuovo. Verificando il primo e' utilizzato solo da quell'elemento.

Ora, se quell'elemento non avesse avuto una classe, avresti potuto comunque selezionarlo per tag, visto che e' l'unica immagine del sito:

img {
    /* css */
}

O, se avessi avuto un'altra immagine, ma questa fosse stata dentro una tabella, avresti potuto selezionare solo quella dentro al div:

div > img {
    /* ... */
}

Chiarissimo
Io sto usando https://www.cssmatic.com che genera il codice , ma ha giusto un paio di "personalizzazioni" , per caso c'è qualche altro sito che offre più cose ?
Magari oltre alle ombre e i "border color" ci sono altre personalizzazioni che potrei implementare

Edit : ho spostato l'immagine , giusto per provare , ma il testo alla destra dell'img non riesco ... ho provato in tutti i modi..

 

[JunkCoder]

Con CSS puoi creare qualunque tipo di stile, sei limitato solo dalla fantasia. I generatori "punta e clicca" non potranno mai coprire tutti gli scenari e in ogni caso ho sempre preferito creare da zero quindi non saprei suggerirtene uno.

Edit : ho spostato l'immagine , giusto per provare , ma il testo alla destra dell'img non riesco ... ho provato in tutti i modi..

Per selezionare tutto il testo centrale puoi usare la classe .lp-text-react, se invece vuoi selezionare il testo in grassetto .font-scale-6, il testo normale .font-scale-4

 

[MRX.]

Il problema con .lp-text-react è che mi va a spostare qualsiasi testo , non solo quello centrale ..
Con i font stessa cosa , sposta tutti i font che hanno la grandezza "4" .
Siccome è una "riga" con 3 "colonne" , pensavo che ogni colonna la si potesse spostare .
Questo software drag and drop crea le righe e colonne e metto dentro i widget , tipo testo , immagine , ecc
Mi sa che l'intera colonna non si può spostare .. anche se nell'inspector vedo che c'è il widget id , ma appunto è del widget

Edit : ho fatto una magia ..
ho notato che nella colonna piu piccola dell'inspector mostra il codice css della sezione che scelgo sulla pagina , con larghezza , lunghezza ecc quindi vedendo la stessa sinstassi che serve anche a me , ho pensato che "l'id" che mostra lui sia quello giusto , e infatti ha funzionato
quell ".css-1g6febl.column" ha funzionato