# Visual hightlight

1. Select the **visual hightlight** option from the theme editor.
2. Click on **Add block**. Select **Slide** from **Theme Block** dropdown.

<table><thead><tr><th width="242">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Type banner</td><td><p>Select the type banner for the section:</p><ul><li><strong>Half</strong></li><li><strong>Full</strong></li></ul></td></tr><tr><td>Image primary</td><td>Set up an image primary</td></tr><tr><td>Image second</td><td>Set up an image second<br><em><mark style="color:red;">(The second image only works on type half banner)</mark></em></td></tr><tr><td>Mobile image</td><td>Set up an image on mobile</td></tr><tr><td>Heading</td><td>Add text to display as a <strong>block heading</strong><br><em><mark style="color:red;">(Leave the field blank to hide the</mark><mark style="color:red;"> </mark><mark style="color:red;"><strong>heading</strong></mark><mark style="color:red;">)</mark></em></td></tr><tr><td>Heading size</td><td><p>Font size of text:</p><ul><li><strong>Default</strong></li><li><strong>XX-Small</strong></li><li><strong>X-Small</strong></li><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li><li><strong>X-Large</strong></li><li><strong>XX-Large</strong></li><li><strong>XXX-Large</strong></li></ul></td></tr><tr><td>Subheading</td><td>Add text to display as a <strong>block subheading</strong><br><em><mark style="color:red;">(Leave the field blank to hide the</mark><mark style="color:red;"> </mark><mark style="color:red;"><strong>subheading</strong></mark><mark style="color:red;">)</mark></em></td></tr><tr><td>Subheading size</td><td><p>Font size of text:</p><ul><li><strong>XX-Small</strong></li><li><strong>X-Small</strong></li><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li><li><strong>X-Large</strong></li><li><strong>XX-Large</strong></li><li><strong>XXX-Large</strong></li></ul></td></tr><tr><td>Description</td><td>Add text to display as a <strong>custom content</strong> for this block. You can use <strong>HTML</strong> format to fill in this field.<br><em><mark style="color:red;">(Leave the field blank to hide the</mark><mark style="color:red;"> </mark><mark style="color:red;"><strong>custom content</strong></mark><mark style="color:red;">)</mark></em></td></tr><tr><td>Text size</td><td><p>Font size of text:</p><ul><li><strong>XX-Small</strong></li><li><strong>X-Small</strong></li><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li><li><strong>X-Large</strong></li><li><strong>XX-Large</strong></li><li><strong>XXX-Large</strong></li></ul></td></tr><tr><td>Choose button style</td><td><p>Select the style button from the dropdown menu:</p><ul><li><strong>Default</strong></li><li><strong>Transparent</strong></li></ul></td></tr><tr><td>Button label</td><td>Add text to display as a <strong>button</strong> on the section <br><em><mark style="color:red;">(Leave the field blank to hide the</mark><mark style="color:red;"> </mark><mark style="color:red;"><strong>link</strong></mark><mark style="color:red;">)</mark></em></td></tr><tr><td>Button link</td><td>Set the link, for example the customer service page</td></tr><tr><td>Content alignment</td><td><p>Select the alignment of content from the dropdown menu:</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul></td></tr><tr><td>Image overlay opacity on hover</td><td>Determines the image overlay opacity on hover of the block. Can be from <strong>0%</strong> to <strong>100%</strong>, in <strong>10%</strong> arithmetic increments</td></tr><tr><td>Background</td><td>Set the background color for image overlay opacity on hover</td></tr></tbody></table>
