Modelos de Anúncios Imobiliários

[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]

O que eu faço? Encontrei o artigo específico, mas não fez nenhum sentido.

Qual parte do código eu devo alterar?

[osioke (Osioke Itseuwa)]

Não entendi muito bem sua pergunta aqui, com o que você precisa de ajuda? Se você está se perguntando onde adicionar o código para o Anúncio, consulte a seção de Dicas acima:

@tshenry

Crie um componente de tema de “Anúncios da Casa” para conter qualquer CSS relacionado aos seus anúncios internos. Você também pode usá-lo para carregar qualquer imagem que deseje usar nos anúncios. Certifique-se de adicionar o componente a todos os temas relevantes e ativos!

[tshenry (Taylor)]

@Johnny_McIvor obrigado por trazer isso à tona! Atualizei as partes CSS de todos os modelos para usar propriedades CSS personalizadas.

Na sua captura de tela, você verá $primary usado na linha 5. Altere isso para var(--primary).

Da mesma forma, na linha 6, você verá $secondary. Altere isso para var(--secondary).

Avise-me se continuar a ter algum problema.

[Dawn (Dawn Albrecht)]

Se eu quiser fazer upload de duas imagens de tamanhos diferentes para meus anúncios da casa, um para desktop e outro para mobile, preciso usar o Componente CSS para o Anúncio em Banner Responsivo 1?

Temos recursos técnicos muito limitados, então estou tentando resolver isso para gerar mais ROI para a Comunidade e, assim, aumentar os recursos técnicos dedicados (uma situação de catch-22 neste momento).

Consegui fazer o anúncio funcionar no desktop com o HTML, mas não no mobile, e a maioria dos nossos usuários acessa pelo celular.

Qualquer ajuda será muito apreciada! Obrigado!

[cocococosti (Constanza Abarca)]

Olá @Dawn

Verifiquei o código que você tinha em Responsive Banner Ad 1 e faltam algumas coisas lá. Você precisa incluir ambas as imagens (uma para desktop e uma menor para mobile) no HTML do anúncio.

Confira este exemplo do meu site:

Tente com este código:

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

Lembre-se de substituir a variável DESTINATION_URL. Para DESKTOP_IMAGE_URL e MOBILE_IMAGE_URL, recomendo que você faça o upload das imagens em um tópico privado e pegue os URLs de lá.

Em seguida, crie um componente de tema e adicione os estilos CSS. Isso deve funcionar:

    .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;
            }
        }
    }

Testei tudo isso no meu site e funciona conforme o esperado

[clayg (Clay)]

Existe alguma maneira de exibir anúncios internos diferentes em categorias distintas? Temos categorias no Discourse que correspondem a diferentes funções profissionais dos nossos membros, e queremos mostrar anúncios de eventos educacionais alinhados à função profissional de cada um.

[Dawn (Dawn Albrecht)]

@clayg existe uma maneira, acredito que tenha algo a ver com o CSS — ainda estou trabalhando nisso. Aqui está uma referência:

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

Anúncio no estilo “Codefund” entre posts

Este modelo criará um anúncio sutil que pode ser usado como um Anúncio Interno “Entre posts”. É fortemente inspirado no estilo do anúncio Codefund.

Gostaria de usar este banner nas posições superior e inferior (antes das sugestões). Atualmente, o HTML e o CSS são apenas para o espaço entre posts. Alguém pode me ajudar a fazê-lo funcionar em outras posições também?

[spdegabrielle (Stephen De Gabrielle)]

Como você obteve o fundo gradiente de texto branco muito simples no vídeo de demonstração dos anúncios da casa?

Eu tenho um gradiente

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%);

Eu crio um componente de tema h-creative

e adiciono 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>

Funciona

Correção: meu texto está em versalete e azul - mas o fundo não está funcionando. Nem a cor especificada: azul.

---

copiado de

meu css in-situ:

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

Tenho uma sugestão sobre adicionar uma posição de exibição “acima do cabeçalho” semelhante.

[thaidb]

No meu dispositivo Android, o texto não é exibido como configuração.
No laptop está tudo bem.
Como posso corrigir isso? Obrigado.

[thaidb]

Aqui está o meu vídeo

[tobiaseigen]

Acabei de testar a configuração de anúncios usando os modelos descritos neste tópico, e eles são muito bons!

@Discourse

4. Anúncio Estilo “Codefund” Entre Posts

Não consegui fazer o CSS aparecer para este, embora tenha certeza de que segui as instruções atentamente. Os outros três estão funcionando como esperado.

[Arkshine]

@Discourse

.house-creative.house-post-bottom {

Você pode remover a classe .house-post-bottom.
Estranhamente, não vejo nenhuma referência no código (além do CSS).

[tobiaseigen]

Isso funcionou!! Obrigado. Atualizarei o OP também.

[Arkshine]

@tobiaseigen Na verdade, estava correto, falha minha!
O template é para entre posts.
O código adiciona a classe house-<placement> e, neste caso, house-post-bottom.

O template espera que esta configuração seja definida:

Também, relacionado:

[tobiaseigen]

Hmm.. Selecionei esse anúncio para aparecer entre posts e entre tópicos. Depois de remover esse código, funcionou?

Ele estava aparecendo nesses locais antes, mas apenas sem o CSS adequado.

Defini house ads after nth post para 2, então ele está aparecendo.

Então, o que house-post-bottom faz?

[Arkshine]

.house-post-bottom adiciona este CSS por padrão:

assets/stylesheets/adplugin.scss

Entre os tópicos, ele adiciona a classe house-topic-list-between, mas nenhum CSS por padrão.
Você pode ajustar e ter CSS compartilhado com:

.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; // Define a cor do rótulo "Ad"
          border-radius: 5px;
        }
      }
    }
  }
}

[kiefferr (Ryan Kieffer)]

E quanto a esta: existe alguma maneira de vincular anúncios a usuários e controlar a visibilidade com base em grupos de usuários personalizados (Ouro/Prata/etc) e/ou status individual do usuário (ou seja, se ele está suspenso ou ativo)? Como exemplo: diferentes níveis de parceiros em um site de associação recebem diferentes benefícios de anúncios. Parceiros ‘Ouro’ recebem 3 anúncios em 3 posições de exibição; ‘Prata’ 2 e 2, etc.

Especificamente, estou investigando a viabilidade de fazer isso em um site sincronizado Wordpress => Discourse, onde o Discourse é o cliente e o Wordpress o provedor. Dados do usuário, posicionamento de grupo personalizado e status ativo/suspenso já são passados com cargas úteis SSO personalizadas. Então, por que não passar alguns dados adicionais de anúncios também?