Un utente ha chiesto
Categoria: GenerateBlocks di WordPress
Domanda: Perché Gutenberg si è completamente dimenticato del layout mobile?

Ciao, una domanda sull’aggiunta di un’immagine al blocco contenitore adatta sia per desktop che per dispositivi mobili.

Le immagini desktop e mobili hanno proporzioni completamente diverse, i desktop sono normalmente orizzontali e i cellulari sono verticali, quindi il ritaglio di queste immagini è diverso.

Quindi, come dovresti lavorare con il cellulare in Gutenberg? Non esiste un’anteprima dal vivo per dispositivi mobili, né contenitori per il design mobile.

Come si aggiunge un’immagine che funzioni per tutti, sia su desktop che su dispositivi mobili?

È una domanda generale, ma davvero non capisco perché Gutenberg si sia completamente dimenticato del layout mobile, quando il 60% o più di tutti i contenuti web oggi viene guardato su dispositivo mobile?

Grazie!

  • Autore del plugin

    (@ edge22)

    Ciao,

    WordPress 5.5 (rilasciato oggi) include metodi per l’anteprima di tablet e cellulari. Stiamo lavorando a un aggiornamento di GenerateBlocks per mostrare le nostre opzioni tablet/mobile durante l’anteprima nell’editor – in arrivo!

    Non so cosa intendi per l’immagine – avrei bisogno di vedere un esempio.

    (@ carsten-lund)

    Ciao, mi fa piacere sapere che stai lavorando a un aggiornamento.

    Per quanto riguarda il ritaglio delle immagini, ecco alcuni esempi

    Immagine originale
    https://imgur.com/aznObts

    vista ufficio
    https://imgur.com/X9JfwyW

    Visualizzazione mobile
    https://imgur.com/wQFRT6D

    1. Perché l’immagine viene ingrandita e ritagliata nel contenitore e non inquadrata come l’originale?

    2. Supponi di voler posizionare l’ape proprio sul desktop come l’originale, ma sul cellulare voglio che l’ape sia centrata nel frame.

    Come posso raggiungere questo obiettivo?

    Saluti

    (@ carsten-lund)

    Ciao, scusa ma le domande a Gutenberg sembrano infinite 😉

    Non sono riuscito a individuare l’anteprima per tablet e dispositivi mobili in WordPress 5.5.

    3. Perché non è consentito aggiungere un motivo come doppi bottoni, in un contenitore, sono consentiti solo blocchi?

    4. Perché c’è uno spazio bianco tra i blocchi per impostazione predefinita e non c’è modo di rimuoverlo?

    https://imgur.com/bS3kCYX

    5. Guarda i pulsanti e il testo, perché i blocchi non sono incentrati sui dispositivi mobili?

    https://imgur.com/CkL3WRY
    https://imgur.com/p9KAjFd
    https://imgur.com/b0GBBQX

    Grazie!

    (@ carsten-lund)

    Ho trovato la panoramica del tablet e del cellulare, grazie

    6. Perché il contenuto del blocco contenitore non rimane in div.entry-content, indipendentemente dalle impostazioni che scelgo nelle impostazioni di allineamento?

    https://imgur.com/7Icb6Rp

    Autore del plugin

    (@ edge22)

    Ciao,

    Meglio lavorare su un problema alla volta. Cominciamo con l’immagine di sfondo.

    Che blocco stai aggiungendo lì? Un blocco contenitore?

    Presumo che l’ape venga aggiunta come immagine di sfondo? In tal caso, quali sono le opzioni per l’immagine di sfondo?

    (@ carsten-lund)

    Ciao, penso di avere ora una panoramica dei diversi modi per aggiungere un’immagine.

    Il pattern aggiunto direttamente a un blocco supera il contenuto div
    https://imgur.com/UeWm2my

    L’immagine aggiunta nel blocco di copertina supera div, impostazioni predefinite
    https://imgur.com/miIAuIf

    Sopra: immagine aggiunta nel contenitore, definizione a dimensione intera, nota margine sinistro destro bianco
    Pulsante: immagine aggiunta direttamente con un blocco immagine, dimensione effettiva, ingrandimento della vista, nessun margine

    https://imgur.com/l35Zunr

    Il mio obiettivo è avere un’immagine di copertina con testo e pulsanti in alto come modelli e offerte di blocchi di copertina, ma queste opzioni hanno il problema del div del contenuto mobile.

    Grazie!

    Autore del plugin

    (@ edge22)

    Non posso parlare molto del blocco Cover, in quanto è un blocco di base che uso poco.

    Il blocco Contenitore con un’immagine di sfondo è sostanzialmente la stessa cosa, ma ha più opzioni.

    Il blocco che va ai bordi dell’area del contenuto è probabilmente dovuto al fatto che l’allineamento è impostato su align-wide. Fare clic sull’icona di allineamento nella barra degli strumenti dei blocchi e assicurarsi che sia deselezionata.

    (@ carsten-lund)

    Ok, quindi voglio un’immagine da bordo a bordo usando il blocco contenitore di GenerateBlocks.
    Oltre a questa immagine, voglio un titolo, paragrafi e pulsanti.

    Quali blocchi mi consigliate di usare nel contenitore?

    Mi piacciono molto i due pulsanti Pattern, ma a quanto pare il contenuto dei pattern non può essere aggiunto in un contenitore o sopra altri blocchi esistenti?

    Autore del plugin

    (@ edge22)

    Cosa farei:

    1. Aggiungi il tuo paragrafo e blocchi di pulsanti all’editor.

    2. Sotto di essi, aggiungi un nuovo blocco contenitore e progettalo.

    3. Evidenzia il blocco contenitore e fai clic sull’icona Allineamento nella barra degli strumenti del blocco – impostalo su Larghezza larga: https://www.screencast.com/t/IWJBscPNge

    Questo lo renderà da bordo a bordo nel tuo contenuto se stai usando un tema che lo supporta.

    (@ carsten-lund)

    Grazie per i suggerimenti, non capisco il tuo consiglio di aggiungere paragrafi e blocchi di pulsanti all’editor, fuori dal contenitore, mentre il mio obiettivo è avere un titolo, blocchi di paragrafo e pulsanti nell’editor. un container.

    Ho perso il punto di utilizzo del contenitore?

    Grazie!

    Autore del plugin

    (@ edge22)

    Se li vuoi all’interno del contenitore, dovresti essere in grado di inserire quei blocchi direttamente all’interno del blocco contenitore. Non funziona?

    L’ho appena fatto velocemente qui: https://www.screencast.com/t/4KkEN5lL

    (@ carsten-lund)

    Sì, grazie, fatta eccezione per i modelli, perché non possiamo aggiungere i modelli?

    Supporto plugin

    (@diggeddy)

    Ciao,

    sarà necessario aggiungere il modello alla pagina.
    Selezionare il blocco del modello, fare clic e tenere premute le frecce di movimento del blocco (su/giù) nella barra degli strumenti del blocco e trascinarlo all’interno del blocco contenitore.

    (@ carsten-lund)

    Salve, grazie per la precisazione, non conoscevo la tecnica del click and hold arrow block move, mi aspettavo che venisse aggiunta al contenitore cliccando il +.

    Quindi ora ho il modello all’interno del contenitore, ma ho questo problema di ritardo.

    https://imgur.com/JfYs5hD

    Ho provato a disabilitare tutti i CSS personalizzati, ma nulla interferisce con questo.

    L’allineamento è impostato su Larghezza ampia

    Con zero imbottitura:
    https://imgur.com/TwNBo3b

    L’allineamento che non voglio per il contenuto del contenitore dovrebbe assomigliare all’immagine gialla qui sotto.

    1. Perché il contenuto non riempie il contenitore?
    2. Perché non è centrato?

    Grazie!

    Autore del plugin

    (@ edge22)

    C’è una pagina dove possiamo vederlo? Non so cosa potrebbe causare questo.

Hai risolto il tuo problema?

0 / 0

Lascia un commento 0

Il tuo indirizzo email non sarà pubblicato. Required fields are marked *