Hey collinsfgc2025,

Thank you for the inquiry.

You have to look for the View icon in the top right corner of the editor. Please check the screenshot below:

Let us know if you have more questions.

Best regards,
Ismael

Hey ti2media,
Try adding this snippet to your child theme functions.php:

function add_sticky_info_box() {
    ?>
    <style>
        .sticky-info-box {
            position: fixed;
            bottom: 120px;
            right: 20px;
            width: 300px;
            height: 300px;
            background: #ffffff;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            padding: 20px;
            box-sizing: border-box;
            transition: opacity 0.3s ease;
        }
        
        .sticky-info-box.hidden {
            display: none;
        }
        
        .sticky-info-box-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15px;
        }
        
        .sticky-info-box-title {
            font-size: 20px;
            font-weight: bold;
            color: #333;
            margin: 0;
            flex: 1;
        }
        
        .sticky-info-box-close {
            background: none;
            border: none;
            font-size: 24px;
            color: #999;
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.2s ease;
        }
        
        .sticky-info-box-close:hover {
            color: #333;
        }
        
        .sticky-info-box-message {
            flex: 1;
            color: #666;
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 20px;
            overflow-y: auto;
        }
        
        .sticky-info-box-button {
            background: #0073aa;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            text-align: center;
            transition: background 0.2s ease;
        }
        
        .sticky-info-box-button:hover {
            background: #005a87;
        }
        
        .sticky-info-toggle {
            position: fixed;
            bottom: 120px;
            right: 50px;
            width: 50px;
            height: 50px;
            background: #0073aa;
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 24px;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 9998;
            display: none;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease;
        }
        
        .sticky-info-toggle:hover {
            background: #005a87;
        }
        
        .sticky-info-toggle.visible {
            display: flex;
        }
    </style>
    
    <div class="sticky-info-box" id="stickyInfoBox">
        <div class="sticky-info-box-header">
            <h3 class="sticky-info-box-title">Important Information</h3>
            <button class="sticky-info-box-close" id="closeInfoBox" aria-label="Close">×</button>
        </div>
        <div class="sticky-info-box-message">
            <p>This is your information box! You can customize this message to display any content you'd like to share with your visitors.</p>
        </div>
        <a href="/your-page-url" class="sticky-info-box-button">Learn More</a>
    </div>
    
    <button class="sticky-info-toggle" id="infoToggle" aria-label="Show information">ℹ</button>
    
    <script>
        (function() {
            var infoBox = document.getElementById('stickyInfoBox');
            var closeBtn = document.getElementById('closeInfoBox');
            var toggleBtn = document.getElementById('infoToggle');
            
            // Close the info box
            closeBtn.addEventListener('click', function() {
                infoBox.classList.add('hidden');
                toggleBtn.classList.add('visible');
            });
            
            // Show the info box again
            toggleBtn.addEventListener('click', function() {
                infoBox.classList.remove('hidden');
                toggleBtn.classList.remove('visible');
            });
        })();
    </script>
    <?php
}
add_action('wp_footer', 'add_sticky_info_box');

Then adjust the title, message, buttone text & link to suit. You can also adjust the CSS to change colors, etc.
It places the box & info button 120px from the bottom so they are above the scroll-top button, ratio than have them move if the scroll-top shows, which would not be so good.

Best regards,
Mike

Hi,

Please continue here: https://kriesi.at/support/topic/color-section-not-showing-color-or-image-background/#post-1492088

Best regards,
Ismael

Hi,

Thank you for the link.

Add this code in the functions.php file to load the Cairo font:

function av_load_google_fonts() {
    wp_enqueue_style(
        'google-fonts-cairo',
        'https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap',
        array(),
        null
    );
}
add_action('wp_enqueue_scripts', 'av_load_google_fonts');

After that, add the following css to make the font the default body text:

#top, body, p, span, li, a, h1, h2, h3, h4, h5, h6, input, textarea, button {
    font-family: 'Cairo', sans-serif;
}

Let us know the result.

Best regards,
Ismael

Hey ti2media,

Thank you for the inquiry.

The color of the email field is different due to this css code:

#top .kontaktformular input[type='text'] {
    background-color: #ffffff !important;
    border: none !important;
    color: #0d3c63 !important;
}

To correct it, please replace it with the following css:

#top .kontaktformular input[type='text'], #top .kontaktformular input[type='email'] {
    background-color: #ffffff !important;
    border: none !important;
    color: #0d3c63 !important;
}

Then add this css code to adjust the width of the form fields:

#top fieldset {
    margin-bottom: 20px;
    overflow: hidden;
}

Best regards,
Ismael

Hey ti2media,

Please try this CSS as well:

#scroll-top-link.avia-svg-icon svg:first-child {
  margin-top: 7px;
}

Best regards,
Rikard

Hey jimmiemoreland,

Thank you for the inquiry.

You can add this css code to make the header sticky on mobile. Make sure to adjust the top padding based on the header’s height.

@media only screen and (max-width: 989px) {

  /* Add your Mobile Styles here */
  .responsive.html_mobile_menu_tablet #top #wrap_all #header {
    position: fixed;
  }

  .responsive.html_header_top #top #main {
    padding-top: 120px !important;
    margin: 0;
  }
}

Let us know the result.

Best regards,
Ismael

Hi,

Thank you for the update.

Try to add this css code to show the full image:

#top .fullsize .template-blog .big-preview img {
    min-width: 300px;
    background-size: contain;
}

Best regards,
Ismael

Hey Eleina,

Thank you for the inquiry.

Please add this code in the Quick CSS field to adjust the layout of the top bar on mobile view:

@media only screen and (max-width: 768px) {

  /* Add your Mobile Styles here */
  #top #header_meta .phone-info>div>div {
    display: flex !important;
    align-items: center !important;
    justify-content: start !important;
    flex-direction: column;
    gap: 4px !important;
  }
}

Result:

Best regards,
Ismael

Hi,

Thank you for the inquiry.

Adding this code in the Quick CSS field should correct the layout issue on mobile view:

@media only screen and (max-width: 768px) {

  /* Add your Mobile Styles here */
  #commentform label {
    position: relative;
    left: auto;
    top: 0;
  }

  #top .comment-form-cookies-consent label {
    top: -30px;
  }
}

Screenshot:

Best regards,
Ismael

Hi,
For mobile add this css:

#top #wrap_all .header_color .menu-item-30.av-menu-button-colored > a .avia-menu-text {
    background-color: #6c0f1b;
    border-color: #6c0f1b;
}
#top #wrap_all .header_color .av-menu-button-colored > a:hover .avia-menu-text {
    color: #000;
}

Please note that mobile devices don’t have a hover rule, but the color changes on click, like the desktop hover, adjust to suit.

Best regards,
Mike