Modelli di annunci immobiliari

[Discourse]

House Ad Templates

This guide provides templates for creating house ads using the Official Discourse Ad Plugin.

Important: Disable ad blockers (including those built in to browsers, e.g. Brave) before working with these ad customizations.

Before You Start

1. Create a “House Ads” theme component to store:
   • CSS for your house ads
   • Uploaded images used in ads
2. Add the component to all active themes where ads will appear
3. Optimize images using TinyPNG to reduce file size while maintaining quality

Template Options

1. Simple Logo and Text Ad

A clean design featuring a square logo with accompanying text. The colors automatically adjust to match your site’s color scheme.

Specifications:

• Image Type: PNG or JPEG
• Image Size:
  • Desktop & Mobile: 500x500px (1:1 aspect ratio)
  • Retina: 1000x1000px recommended
• Additional Notes:
  • Square aspect ratio must be maintained
  • Colors automatically adapt to site theme
  • Image appears left-aligned with text on right

HTML

<a href="DESTINATION_URL" class="h-creative" target="_blank">
    <div class="container">
        <div class="product-image">
            <img src="IMAGE_URL">
        </div>
        <div>
            <p class="big">LARGER_TEXT</p>
            <p>SMALLER_TEXT</p>
        </div>
    </div>
</a>

CSS

.h-creative {
  display: block;
  clear: both;
  max-width: 500px;
  color: var(--primary) !important;
  background-color: var(--secondary);
  
  .container {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 6px 0;
  }
  
  p {
    margin: 0 20px;
  }
  
  .product-image {
    width: 150px;
    height: 150px;
  }
  
  img {
    max-width: 150px;
    max-height: 150px;
  }
  
  .big {
    font-size: 24px;
    line-height: normal;
    padding-bottom: 10px;
  }
}

.mobile-device .house-creative {
  .product-image {
    width: 120px;
    height: 120px;
  }
  
  img {
    max-width: 120px;
    max-height: 120px;
  }
}

2. Responsive Banner Ad - Style 1

A full-width banner that adapts between desktop and mobile views.

Specifications:

• Image Type: PNG or JPEG
• Image Size:
  • Desktop: 690x90px (7.67:1 aspect ratio)
  • Mobile: 320x90px (3.56:1 aspect ratio)
  • Retina: 1380x180px (desktop) and 640x180px (mobile) recommended
• Additional Notes:
  • Requires two separate images for desktop/mobile
  • Banner adjusts width to container
  • Text remains readable at all sizes
  • CTA button maintains consistent size across devices

Desktop:

Mobile:

HTML

<a href="DESTINATION_URL" class="banner-ad" target="_blank">
    <img class="desktop" src="DESKTOP_IMAGE_URL">
    <img class="mobile" src="MOBILE_IMAGE_URL">
    <div class="container">
        <div>
            <p class="big">A responsive banner ad</p>
            <p class="small">Customize to your liking.</p>
        </div>
        <button class="btn btn-default cta">
            <span class="d-button-label">Click Here!</span>
        </button>
    </div>
</a>

CSS

$cta-background-color: #FE4644;
$cta-text-color: #FFFFFF;

.banner-ad {
  display: flex;
  clear: both;
  max-width: calc(var(--topic-body-width) + var(--topic-avatar-width) + (var(--topic-body-width-padding) * 2));
  background-color: #FEF25E;
  border: 1px solid var(--primary);
  box-sizing: border-box;

  img {
    height: 90px;
    &.desktop {
      display: block;
    }
    &.mobile {
      display: none;
    }
  }

  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    p {
      margin: 0;
      &.small {
        font-weight: bold;
        text-align: right;
        padding: 1px 5px;
        background-color: #000000;
        color: #FFFFFF;
      }
      &.big {
        font-size: 24px;
        line-height: normal;
        padding-bottom: 5px;
        color: #434343;
        font-weight: lighter;
      }
    }

    .cta {
      color: $cta-text-color;
      background-color: $cta-background-color;
      &:hover {
        background-color: darken($cta-background-color, 20%);
      }
    }
  }
}

@media only screen and (max-width: 672px) {
  .banner-ad {
    img.desktop, p {
      display: none;
    }
    img.mobile {
      display: block;
    }
    .container {
      justify-content: center;
      .cta {
        margin: 0 5px;
        font-size: 12px;
      }
    }
  }
}

3. Responsive Banner Ad - Style 2

Specifications:

• Image Type: SVG preferred, PNG/JPEG supported
• Image Size:
  • SVG: 75x75px viewBox
  • Raster Alternative: 150x150px (2x for retina)
  • Container height: 90px on desktop
• Additional Notes:
  • Background uses CSS gradient (no image required)
  • Banner width automatically adjusts to container
  • SVG logo maintains crisp display at all sizes
  • Round CTA button maintains proportions

Desktop:

Mobile:

HTML

<a href="DESTINATION_URL" class="banner-ad" target="_blank">
    <div class="container">
        <svg xmlns="http://www.w3.org/2000/svg" width="75" height="75" viewBox="0 0 103 104" data-ember-extension="1">
            <g fill="none" fill-rule="nonzero">
                <path fill="#000" d="M51.87 0C23.71 0 0 22.83 0 51v52.81l51.86-.05c28.16 0 51-23.71 51-51.87C102.86 23.73 80 0 51.87 0z" />
                <path fill="#FFF9AE" d="M52.37 19.74c-11.1380058.0065739-21.451097 5.8725864-27.1495582 15.4424743C19.5219805 44.7523623 19.2787009 56.6145192 24.58 66.41l-5.72 18.4 20.54-4.64c11.7619991 5.29926 25.5640682 2.9191757 34.8718647-6.0134445 9.3077965-8.9326201 12.2534008-22.6251484 7.4422692-34.5951021C76.9030023 27.5914997 65.3006488 19.7462906 52.4 19.74h-.03z" />
                <path fill="#00AEEF" d="M77.45 32.12c8.765 11.492 8.616 27.467-.363 38.794C68.11 82.24 52.59 86.03 39.4 80.12l-20.54 4.7 20.91-2.47c13.862 8.12 31.61 4.547 41.25-8.304 9.64-12.851 8.105-30.89-3.57-41.926z" />
                <path fill="#00A94F" d="M75.32 64.909C67.571 77.11 52.533 82.5 38.8 78l-19.94 6.82 20.54-4.65c14.629 6.608 31.887 1.199 40.127-12.576 8.24-13.776 4.844-31.54-7.897-41.304 9.917 10.514 11.436 26.417 3.69 38.619z" />
                <path fill="#F15D22" d="M26.47 67.11c-5.725-13.8-1.007-29.722 11.31-38.176 12.319-8.453 28.873-7.128 39.69 3.176-10.018-13.147-28.474-16.356-42.342-7.363C21.26 33.741 16.662 51.901 24.58 66.41l-5.72 18.4 7.61-17.7z" />
                <path fill="#D0232B" d="M24.58 66.41c-7.103-13.12-4.065-29.421 7.288-39.102 11.353-9.68 27.929-10.105 39.762-1.018-11.351-11.952-29.982-13.176-42.798-2.81-12.817 10.366-15.517 28.84-6.202 42.44l-3.76 18.9 5.71-18.41z" />
            </g>
        </svg>
        <div>
            <p class="big">A responsive banner ad</p>
            <p>Customize to your liking.</p>
        </div>
        <button class="btn btn-default">
            <span class="d-button-label">Click Here</span>
        </button>
    </div>
</a>

CSS

$cta-background-color: #D70751;
$cta-text-color: #FFFFFF;

.banner-ad {
  display: block;
  clear: both;
  max-width: calc(var(--topic-body-width) + var(--topic-avatar-width) + (var(--topic-body-width-padding) * 2)) !important;
  background: linear-gradient(#d7d9e2 0%, #ffffff 75%);
  border: 1px solid #808080;
  box-sizing: border-box;

  .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 90px;
  }

  svg, img {
    margin-left: 5px;
    height: 75px;
  }

  p {
    color: #222;
    margin: 0 20px;
    font-family: Verdana, Geneva, sans-serif;
    &.big {
      font-size: 20px;
      line-height: normal;
      padding-bottom: 5px;
    }
  }

  .btn {
    width: 20%;
    height: 45px;
    margin-right: 5px;
    background-color: $cta-background-color;
    color: $cta-text-color;
    font-weight: lighter;
    white-space: nowrap;
    border-radius: 50px;
    &:hover {
      background-color: darken($cta-background-color, 5%);
    }
  }
}

@media only screen and (max-width: 575px) {
  .banner-ad {
    p {
      font-size: 10px;
      &.big {
        font-size: 12px;
        font-weight: bold;
      }
    }
    .btn {
      width: 120px;
      height: unset;
      font-size: 12px;
    }
  }
}

4. Between Posts Text Ad

Specifications:

• Image Type: No images required (text-only design)
• Image Size: N/A
• Additional Notes:
  • Container automatically sizes to content
  • Consistent padding (10px 5px)
  • “Ad” label always visible
  • Adapts to mobile view through fluid width
  • Background color adjusts to theme

Desktop:

Mobile:

HTML

<a class="between-posts-ad" target="_blank" rel="noopener" href="https://discourse.org">
    <div class="ad-container">
        <span class="ad-label">Ad</span>
        <strong>Discourse</strong> - A community platform for civilized discussion on the web
    </div>
</a>

CSS

.house-creative {
  margin-left: 0 !important;
  
  a.between-posts-ad {
    color: var(--primary-med-or-secondary-med);
    
    strong {
      color: var(--primary);
    }
    
    .ad-container {
      max-width: calc(var(--topic-avatar-width) + var(--topic-body-width) + (var(--topic-body-width-padding) * 2));
      padding: 10px 5px;
      text-align: center;
      background-color: var(--primary-very-low);
      border: 1px solid var(--primary-low);
      box-sizing: border-box;
      
      .ad-label {
        margin-right: 2px;
        padding: 2px 5px;
        color: var(--primary-very-low);
        font-weight: bold;
        background-color: #EAC34E;  // Sets color of "Ad" label
        border-radius: 5px;
      }
    }
  }
}

Common Issues and Solutions

1. Mobile Display Issues: Ensure both desktop and mobile images are properly defined in HTML and CSS is correctly handling the responsive breakpoints
2. Color Scheme Problems: Use CSS custom properties (var(--primary), var(--secondary)) instead of hard-coded colors
3. Image Loading: Verify images are correctly uploaded and URLs are properly referenced

Each template can be customized to match your site’s branding and specific needs. Remember to test thoroughly on both desktop and mobile devices before deployment.

Last edited by @tobiaseigen 2025-03-11T00:31:17Z

Check document

Perform check on document:

[Johnny_McIvor]

Cosa devo fare? Ho trovato l’articolo specifico, ma non ha avuto alcun senso.

Quale parte del codice devo modificare?

[osioke (Osioke Itseuwa)]

Non capisco molto bene la tua domanda: di cosa hai bisogno? Se ti stai chiedendo dove aggiungere il codice per l’annuncio, consulta la sezione Suggerimenti qui sopra:

@tshenry

Crea un componente tema denominato “House Ads” per contenere tutti i CSS relativi ai tuoi annunci interni. Puoi anche utilizzarlo per caricare eventuali immagini che desideri utilizzare per gli annunci. Assicurati di aggiungere il componente a tutti i temi attivi pertinenti!

[tshenry (Taylor)]

@Johnny_McIvor grazie per aver sollevato la questione! Ho aggiornato le parti CSS di tutti i modelli per utilizzare le proprietà CSS personalizzate.

Nello screenshot vedrai $primary utilizzato alla riga 5. Cambialo in var(--primary)

Allo stesso modo, alla riga 6 vedrai $secondary. Cambialo in var(--secondary)

Fammi sapere se continui ad avere problemi.

[Dawn (Dawn Albrecht)]

Se voglio caricare due grafiche di dimensioni diverse per i miei annunci domestici, uno per desktop e uno per mobile, devo utilizzare il componente CSS per il Banner Ad Responsive 1?

Abbiamo risorse tecniche molto limitate, quindi sto cercando di capire come risolvere questa situazione per generare più ROI per la Community e così aumentare le risorse tecniche dedicate (al momento è proprio un paradosso).

Riesco a far funzionare l’annuncio su desktop con l’HTML, ma non su mobile, e la maggior parte dei nostri utenti utilizza dispositivi mobili.

Qualsiasi aiuto sarà molto apprezzato! Grazie!

[cocococosti (Constanza Abarca)]

Ciao @Dawn

Ho controllato il codice che avevi in Responsive Banner Ad 1 e ti mancano alcune cose. Devi includere entrambe le immagini (una per desktop e una più piccola per mobile) nell’HTML dell’annuncio.

Guarda questo esempio dal mio sito:

Prova con questo codice:

<a href="DESTINATION_URL" class="banner-ad" target="_blank">
    <img class="desktop" src="DESKTOP_IMAGE_URL">
    <img class="mobile" src="MOBILE_IMAGE_URL">
</a>

Ricorda di sostituire la variabile DESTINATION_URL. Per DESKTOP_IMAGE_URL e MOBILE_IMAGE_URL, ti consiglio di caricare le immagini in un argomento privato e prendere gli URL da lì.

Poi crea un componente del tema e aggiungi gli stili CSS. Dovrebbe funzionare:

    .banner-ad {
        display: flex;
        clear: both;
        max-width: calc(#{$topic-body-width} + #{$topic-avatar-width} + (#{$topic-body-width-padding} * 2));
        box-sizing: border-box;
        img {
            height: 100%;
            &.desktop {
                display: block;
            }
            &.mobile {
                display: none;
            }
        }
    }

    @media only screen and (max-width: 672px) {
        .banner-ad {
            img.desktop, p {
                display: none;
            }
            img.mobile {
                display: block;
            }
        }
    }

Ho testato tutto questo sul mio sito e funziona come previsto

[clayg (Clay)]

Esiste un modo per avere annunci interni diversi per le diverse categorie? Abbiamo categorie Discourse che corrispondono a diversi ruoli professionali dei nostri membri e vogliamo mostrare annunci per eventi educativi in linea con il loro ruolo professionale.

[Dawn (Dawn Albrecht)]

@clayg esiste un modo, credo abbia a che fare con il CSS – ci sto ancora lavorando anch’io. Ecco un riferimento:

House Ads in the official Ad Plugin

Can you explain your solution with an example? What html/css code did you use?

[Mr.X_Mr.X]

@tshenry

Annuncio in stile “Codefund” tra i post

Questo template creerà un annuncio discreto che può essere utilizzato come annuncio interno “tra i post”. È fortemente ispirato allo stile dell’annuncio Codefund.

Vorrei usare questo banner nelle posizioni in alto e in basso (prima dei suggerimenti). Attualmente l’HTML e il CSS sono solo per la posizione tra i post. Qualcuno può aiutarmi a farlo funzionare anche in altre posizioni?

[spdegabrielle (Stephen De Gabrielle)]

Come hai ottenuto lo sfondo sfumato del testo bianco molto semplice nel video demo degli annunci della casa?

Ho una sfumatura

background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);

Devo creare un componente tema h-creative

e aggiungere css

.h-creative {

    font-variant: small-caps;
    font-weight: bold;
    .container {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 6px 0;
        background: rgb(131,58,180);
        background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
    }

    .big {
        font-size: 24px;
        line-height: normal;
        padding: 10px;
        color:lightgrey;
    }
}

<a href="https://con.racket-lang.org/" class="h-creative">
    <div class="container">
        <span class="big">(twelfth  RacketCon) October 28-30, 2022</span>
    </div>
</a>

Funziona

Correzione: il mio testo è in maiuscoletto e blu, ma lo sfondo non funziona. Né è del colore specificato: blu.

---

copiato da

il mio css in situ:

[hoangphuctran93 (Hoàng Phúc Trần)]

Ho un suggerimento sull’aggiunta di una posizione di visualizzazione “sopra l’intestazione” simile.

[thaidb]

Sul mio dispositivo Android il testo non viene visualizzato come impostazione
Sul laptop funziona,
Come posso risolvere? Grazie

[thaidb]

Ecco il mio video

[tobiaseigen]

Ho appena testato la configurazione degli annunci utilizzando i modelli descritti in questo argomento, e sono davvero fantastici!

@Discourse

4. Annuncio “stile Codefund” tra i post

Non sono riuscito a far apparire il css per questo, anche se sono abbastanza sicuro di aver seguito attentamente le istruzioni. Gli altri tre funzionano come previsto.

[Arkshine]

@Discourse

.house-creative.house-post-bottom {

Puoi rimuovere la classe .house-post-bottom.
Stranamente, non vedo alcun riferimento nel codice (a parte nel CSS).

[tobiaseigen]

Ha funzionato!! Grazie. Aggiornerò anche l’OP.

[Arkshine]

@tobiaseigen In realtà era corretto, colpa mia!
Il template è per tra i post.
Il codice aggiunge la classe house-<placement> e in questo caso house-post-bottom.

Il template si aspetta che questa impostazione sia configurata:

Inoltre, correlato:

[tobiaseigen]

Hmm.. Ho selezionato quell’annuncio sia per “tra i post” che per “tra gli argomenti”. Dopo aver rimosso quel codice, ha funzionato?

Appariva in quei posti prima, ma solo senza il CSS corretto.

Ho impostato house ads after nth post su 2, quindi viene visualizzato.

Quindi, cosa fa house-post-bottom?

[Arkshine]

.house-post-bottom aggiunge questo CSS per impostazione predefinita:

assets/stylesheets/adplugin.scss

Tra gli argomenti, aggiunge la classe house-topic-list-between ma nessun CSS per impostazione predefinita.
Puoi regolare e avere CSS condiviso con:

.house-creative {
  &.house-topic-list-between,
  &.house-post-bottom {
    margin-left: 0 !important;

    a.between-posts-ad {
      color: var(--dynamic-color);

      strong {
        color: var(--primary);
      }

      .ad-container {
        max-width: calc(
          #{$topic-avatar-width} + #{$topic-body-width} +
            (#{$topic-body-width-padding} * 2)
        );
        padding: 10px 5px;
        text-align: center;
        background-color: var(--primary-very-low);
        border: 1px solid var(--primary-low);
        box-sizing: border-box;

        .ad-label {
          margin-right: 2px;
          padding: 2px 5px;
          color: var(--primary-very-low);
          font-weight: bold;
          background-color: #eac34e; // Imposta il colore dell'etichetta "Ad"
          border-radius: 5px;
        }
      }
    }
  }
}

[kiefferr (Ryan Kieffer)]

Che ne dici di questo: c’è un modo per collegare gli annunci agli utenti e controllare la visibilità in base a gruppi di utenti personalizzati (Oro/Argento/ecc.) e/o allo stato del singolo utente (ad esempio, se è sospeso o attivo)? Ad esempio: diversi livelli di partner su un sito di appartenenza ottengono diversi vantaggi pubblicitari. I partner “Oro” ottengono 3 annunci in 3 posizionamenti di visualizzazione; “Argento” 2 e 2, ecc.

Nello specifico, sto valutando la fattibilità di farlo su un sito sincronizzato Wordpress => Discourse, in cui Discourse è il client e Wordpress il provider. Dati utente, posizionamento di gruppo personalizzato e stato attivo/sospeso vengono già passati con payload SSO personalizzati. Allora perché non passare anche alcuni dati pubblicitari aggiuntivi?