--- title: Topic slug: topic docTags: createdAt: 2024-04-18T08:40:06.992Z --- # Overview The '**Topic**' block is the subject of the '**body**' section and can be used to display content that needs to be extra visible. You can set it apart by adding a background color, use and image or video, etc.. ::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/LjUlH2g2umROskEKGr1F9_image.png" size="52" width="426" height="135" position="center" caption="Topic block - Page structure" alt="Topic block - Page structure" darkWidth="426" darkHeight="135" showCaption="true"} ## Sample Topic block ![Topic block - Preview](https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/iXreo7mtWAGVXb-ctqx_O_image.png "Topic block - Preview") ## Text The text settings to the right of your screen allow you to add or edit content ::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/rB8sV4Vib33H06PQpdG0D_image.png" size="50" width="347" height="685" position="center" caption="Topic block - Text settings" alt="Topic block - Text settings" showCaption="true"} ### Prefix ::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/79N0kCbu0vf1TYaFvNi0O_image.png" size="44" width="355" height="88" position="center" caption="Topic block - Text settings - Prefix" alt="Topic block - Text settings - Prefix" showCaption="true"} This is the very first text line visible in the Topic block, it's visible above the title in a small fontsize. ### Title ::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/vMSDMw15RqjpklirU7CR0_image.png" size="44" width="340" height="71" position="center" caption="Topic block - Text settings - Title" alt="Topic block - Text settings - Title" showCaption="true"} This is the second text line, it's visible underneath the Prefix and printed in a large fontsize. ### Subtitle ::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/23jxdzfwe43uRJb5eVpji_image.png" size="44" width="347" height="75" position="center" caption="Topic block - Text settings - Subtitle" alt="Topic block - Text settings - Subtitle" showCaption="true"} This is the third text line, it's printed underneath the Title in a semi large fontsize. ### Text ::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/vjWTInL2Pqh14ESvKEGG5_image.png" size="44" width="345" height="311" position="center" caption="Topic block - Text settings - Text content" alt="Topic block - Text settings - Text content" showCaption="true"} This is the main Topic content. It's printed in a small fontsize. Depending on the length of your content the image to the left of the text will be automatically enlarged to fit the full size of the Topic block column. ### Text align ::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/ysCAUjHY2PiqdU9u3Pjmf_image.png" size="44" width="330" height="82" position="center" caption="Topic block - Text settings - Text align" alt="Topic block - Text settings - Text align" showCaption="true"} This setting will align your text/content to the **Left** or **Right**. ## Background To customize the Topic block you can choose what will be displayed, you can pick an image, use a solid color or play a video. ::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/cOT41xYMuOmS6JY8ao8sQ_image.png" size="50" width="327" height="746" position="center" caption="Topic block - Background settings" alt="Topic block - Background settings" showCaption="true"} ### Media Type ::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/I9uRCVQgERTFa90EmCf6R_image.png" size="44" width="324" height="174" position="center" caption="Topic block - Media type" alt="Topic block - Media type" showCaption="true"} Select a still **image** or **video** from your media library. ### Media url ::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/Ma_WNv7mTFui751bpc-9z_image.png" size="50" width="326" height="282" position="center" caption="Topic block - Media url" alt="Topic block - Media url" showCaption="true"} Upload a new image or use an existing image from your library. Click the "**Open Media Library**" button and choose your image or video. ### Media width ::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/joI7ZvjmGcOfPZxqDH5aQ_image.png" size="44" width="327" height="206" position="center" caption="Topic block - Media width" alt="Topic block - Media width" showCaption="true"} Set the size for your chosen image or video. You can select **40%**, **50%** or **60%. **The image or video will be visible in a column to the left or the right of the **Text** content. You can change the **alignment** in the **Text settings**. ### Enable sticky animation ::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/GkQ9fzaW4HPW6xuJ8jdWG_image.png" size="44" width="321" height="65" position="center" caption="Topic block - Sticky animation settings" alt="Topic block - Sticky animation settings" showCaption="true"} When scrolling down the page the whole Topic block will stick to the top of your screen all other content blocks will scroll underneath. This feature can be used to give the block some extra visibility. ### Background color ::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/mG9Hk9B8Hhban6hEakOZe_image.png" size="44" width="321" height="74" position="center" caption="Topic block - Background color" alt="Topic block - Background color" showCaption="true"} Click the rectangular box to pick a solid **background color**. ### Text color ::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/kKIi_ywXZweRMElk6qyJN_image.png" size="44" width="320" height="73" position="center" caption="Topic block - Text color" alt="Topic block - Text color" showCaption="true"} Click the rectangular box to pick a** text color**. ### Media type -> Video -> Video autoplay ::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/4s7AQycPoSjeBamL1wgI__image.png" size="44" width="329" height="60" position="center" caption="Topic block - Video autoplay settings" alt="Topic block - Video autoplay settings" showCaption="true"} When enabled the video will start playing when opening the page. If not enabled play/stop buttons will be added. ### Show controls ::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/kd_4FVPnAvr0waIT97QEn_image.png" size="44" width="328" height="67" position="center" caption="Topic block - Video controls settings" alt="Topic block - Video controls settings" showCaption="true"} When enabled this will add **play/pauze buttons** to the **Video**. ### Background type ::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/Or2sBYSH8t6-syCumJtDW_image.png" size="44" width="326" height="78" position="center" caption="Topic block - Background type" alt="Topic block - Background type" showCaption="true"} **Full** will display the Topic across the full width of your screen. When you set this to **Reduced** it will add spacing/padding to the left and right side of your Topic block. # Supplements Use the supplements tab to activate more features ### Conditional media : Use this when you want to show different images for different retailer locations. ::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/HoOK8DbTfmU7yC3Oxq4j4_image.png" size="50" width="330" height="448" position="center" caption="Topic block - Supplements - Conditional media" alt="Topic block - Supplements - Conditional media" showCaption="true"} . 1. **Url parameter name** : add parameter name here, for example 'retailerId' 2. **Url parameter value** : Add the parameter value here, for example 'FZKTA' 3. **Display media** : Select images from Media Library or upload new images Click "**+ Add**" to add multiple conditional images to this page. ## Buttons ### Buttons orientation ::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/zy_Uum82X0tmSYNNb02Ab_image.png" size="50" width="328" height="181" position="center" caption="Topic block - Buttons orientation" alt="Topic block - Buttons orientation" showCaption="true"} Buttons can be placed **horizontal **or **vertical** ### Buttons align ::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/ZGQMqc22BsdWZ_A5Im3rn_image.png" size="50" width="328" height="202" position="center" caption="Topic block - Buttons align" alt="Topic block - Buttons align" showCaption="true"} Buttons can be aligned **left, center **or **right.** ## Buttons -> Cards ::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/wg_hyEet-qLleJt5gi4PU_image.png" size="50" width="332" height="388" position="center" caption="Topic block - Button card" alt="Topic block - Button card" showCaption="true"} Cards are used to fill out the display, content, and link of each button. Click the **+ Add** button to add more buttons. ### Button style Choose between 6 different button styles. Depending on the chosen style you will have to change the text color to make the button text visible on your screen/button. ::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/g23DtcrD_Wq73iEc05oQX_image.png" size="44" width="289" height="339" position="center" caption="Topic block - Button style setting" alt="Topic block - Button style setting" showCaption="true"} ![Topic block - Buttons styling example](https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/-4qnTA6xIckwL6uBC9YAH_image.png "Topic block - Buttons styling example") ### Button text This is the text displayed on the button, when using multi-languages make sure to also enter the translations. ::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/1rZSuJfzWcj43L2axjusy_image.png" size="44" width="303" height="88" position="center" caption="Topic block - Button text setting" alt="Topic block - Button text setting" showCaption="true"} ### Button url : First, use the dropdown and select "**internal**" or "**URL**". When using internal links make sure to make those relative. When using "URL" add the full URL to the website you want to link, so "https\://your-website.com"