Prometeo
Account
AP
App
Generale
App
Pagine generate
Pagine generate
Pagine generate
Indietro
Layout
Layout
Layout
Indietro
Blocchi
Blocchi
Blocchi stilati
Blocchi master
Indietro
Stili grafici
Stili grafici
Stili grafici
Varianti grafiche
Indietro
Importa stili grafici
Importa stili grafici
Importazioni
Blocchi importati
Indietro
Immagini
Immagini
Libreria
Indietro
Impostazioni
Impostazioni
Dati per anteprime
Intelligenza artificiale
Siti destinazione
Tipi di campi
Tipi di pagina
Tipi di blocco
Indietro
Demo
Demo
Ricette
Ingredienti
Indietro
Più spazio
Modifica blocco
Salva
Name
Tipo
---------
Content
CTA
FAQ
Features
Hero
Navigation
Descrizione
Sezione due colonne: testo + CTA a sinistra, video YouTube embed a destra
Codice blocco
HTML template
<div class="block-2cols-text-video"> <div class="text-wrapper"> <h2>{{ content.title }}</h2> <p>{{ content.body }}</p> <div><a class="button" href="{{ content.button_url }}">{{ content.button_text }}</a></div> </div> <div class="video-wrapper"> <div class="video-inner"> <iframe width="560" height="315" src="{{ content.youtube_embed_url }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div> </div> </div>
Styleable elements (JSON)
["root", "title", "body"]
Lista slot stileabili, es. [{"slot": "title", "default": "h2"}].
CSS base
.block-2cols-text-video { display: flex; padding: 40px; gap: 40px; align-items: center; justify-content: center; box-sizing: border-box; } .block-2cols-text-video * { box-sizing: border-box; } .block-2cols-text-video .text-wrapper { display: flex; width: 47%; flex-direction: column; gap: 40px; } .block-2cols-text-video .text-wrapper h2 { margin: 0; font-size: 22px; line-height: 26px; font-weight: 400; color: #AB1E24; } .block-2cols-text-video .text-wrapper p { margin: 0; font-size: 26px; line-height: 30px; } .block-2cols-text-video .text-wrapper a { background-color: #AB1E24; font-size: 18px; font-weight: 800; text-transform: uppercase; font-style: normal; text-decoration: none; line-height: 1em; letter-spacing: 0px; word-spacing: 0em; fill: #FFFFFF; color: #FFFFFF; border-style: solid; border-width: 1px 1px 1px 1px; border-radius: 0px 0px 0px 0px; padding: 20px 55px 20px 55px; display: inline-block; } .block-2cols-text-video .text-wrapper a:hover, .block-2cols-text-video .text-wrapper a:focus { background-color: #000000; color: #AB1E24; border-color: #AB1E24; transform: scale(1.1); transition: .4s; } .block-2cols-text-video .video-wrapper { width: 67%; } .block-2cols-text-video .video-wrapper .video-inner { position: relative; overflow: hidden; } .block-2cols-text-video .video-wrapper .video-inner:before { width: 100%; display: block; margin-top: 60.607%; content: ''; } .block-2cols-text-video .video-wrapper .video-inner iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media (max-width: 1024px) { .block-2cols-text-video { flex-direction: column-reverse; } .block-2cols-text-video .text-wrapper { width: 100%; } .block-2cols-text-video .video-wrapper { width: 100%; } } @media (max-width: 767px) { .block-2cols-text-video { padding: 40px 20px; min-height: auto; gap: 20px; } }
JS base (legacy)
Deprecato. Preferire js_shared + js_instance_template.
JS condiviso
Library/behavior, incluso una sola volta per blocco.
JS per istanza
Template con {{ block_id }}, eseguito per ogni occorrenza.
Schema contenuti
Content schema json
{}
Default content json
{"body": "", "title": "", "button_url": "", "button_text": "", "youtube_embed_url": ""}