Hi,

Thanks for the clarification. That is likely due to something in your content breaking the layout builder, like special characters or shortcodes. You could try to remove anything like that from the content to see when the problem starts again. You can activate debug mode under Enfold->Layout Builder->Show advanced options in order to display the builder shortcodes, then search and remove content that way.

Best regards,
Rikard

Hey icarogioiosi,

Thank you for the inquiry.

You can add this css code to move the title to the right of the image, position it at the top, reduce the font size, remove the borders, and add space below each portfolio entry. Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings, then purge the cache after adding the modification.

#top .isotope-item.special_av_fullwidth .inner-entry {
    text-align: left;
    display: flex;
    flex-direction: row-reverse;
}

#top .grid-entry .inner-entry {
    box-shadow: none;
}

#top .isotope-item.grid-entry {
    margin-bottom: 20px;
}

#top .isotope-item.special_av_fullwidth .av_table_col .entry-title {
    margin: 0 0 20px;
    font-size: 16px;
}

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

Hi,

Thank you for the update.

1.) Try adjusting the top margin of the button layer.

2.) Apply a minimum height to one of the main layers, or go to Project Settings > Layout > Layout Settings > Canvas Height and adjust the value.

3.) Apply a Custom CSS Class name to the element and replace the generic selector with it. You can follow this guide: https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

Hi,

However, I believe there may have been a misunderstanding regarding the issue. The problem is not with the icon itself or its aria-hidden attribute, but with the structure and function of the link that wraps the icon.

If we’re not mistaken, the issue occurs because the SVG icon includes the aria-hidden attribute, which makes it unreadable to accessibility tools. As a result, the parent link is marked as “suspicious” since the icon is hidden and the link lacks any accessible text or description. The span avia_hidden_link_text, which contains the word “Search” also has its display property set to none, making it inaccessible to screen readers as well.

Removing the aria-hidden attribute from the SVG icon or adjusting the visibility of the avia_hidden_link_text should help.

#top .avia_hidden_link_text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

You can also try editing the enfold/includes/config-enfold/functions-enfold.php, around line 125, change the text “Search” to “Click here to search”.

$items .=			'<span class="avia_hidden_link_text">' . __( 'Click Here to Search', 'avia_framework' ) . '</span>';

According to https://wave.webaim.org/, screen readers tend to better interpret buttons or links when it contains more descriptive text.

View post on imgur.com

If this doesn’t help, you can always try the suggestions above.

Let us know the result.

Best regards,
Ismael

Hey mosaic,

Enfold is not responsible for what displayed in search engine result pages. If you have made recent changes, then you would have to wait for a few days at least, if not weeks. You could also ask the search engine in question to crawl your site again.

Best regards,
Rikard

Hi,
I have researched this and while there is a long technical explanation for why the WAVE test tool is flagging this, I found a solution in my research. Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function remove_link_from_search_icon_and_add_it_back_on_click() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function() {
    const searchLink = document.querySelector('#menu-item-search a');
    if (searchLink) {
        // Store the original href
        const originalHref = searchLink.getAttribute('href');
        // Remove the href on page load
        searchLink.removeAttribute('href');
        
        // Add click event to restore href
        searchLink.addEventListener('click', function() {
            if (!searchLink.getAttribute('href')) {
                searchLink.setAttribute('href', originalHref);
            }
        });
    }
});
</script>
  <?php
}
add_action( 'wp_footer', 'remove_link_from_search_icon_and_add_it_back_on_click', 99 );

If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

and ensure that it is activated, then add the above code and save.
I tested this on the WAVE Web Accessibility Evaluation Tool and it removed the error.

Best regards,
Mike

Hi,

Thank you for the update.

What happens when you edit line 120 of the enfold\includes\config-enfold\functions-enfold.php file?

$icon = avia_font_manager::get_frontend_icon( 'svg__search', false, [ 'aria-hidden' => 'true', 'title' => $title, 'desc' => $title ] );

Try to set aria-hidden to false:

$icon = avia_font_manager::get_frontend_icon( 'svg__search', false, [ 'aria-hidden' => 'false', 'title' => $title, 'desc' => $title ] );

Or remove the attributes completely.

$icon = avia_font_manager::get_frontend_icon( 'svg__search', false, [ ] );

Let us know the result.

Best regards,
Ismael

Hey syberknight-tb,
Unfortunately, we don’t have an element that will achieve this for you in the theme, while there are many plugins that may work for you, when I check some of them they don’t quite match, but if you spend more time testing each one you may find one.
I was able to create something that may work for you using javascript and HTML in a shortcode, on mobile it shows 1 1/2 team member cards with prev & next arrows and loop when you click to the end:

on tablet it shows 2 1/2 cards:

and on desktop it shows 3 1/2 cards:

As is it holds 8 cards, you can add more or have less, you will need to edit the HTML to add your images and text, hopefully you will be able to do this:

Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor, If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

and ensure that it is activated, then add the code below and save.

function team_carousel_shortcode() {
    ob_start(); ?>
    
    <div class="carousel-container">
        <button id="prevBtn">←</button>
        <div class="carousel">
            <div class="carousel-track">
                <!-- START: Team Members -->
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 1"><p>Member 1<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 2"><p>Member 2<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 3"><p>Member 3<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 4"><p>Member 4<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 5"><p>Member 5<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 6"><p>Member 6<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 7"><p>Member 7<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 8"><p>Member 8<br>A short bio for the team member</p></div>
        <!-- END: Team Members -->
            </div>
        </div>
        <button id="nextBtn">→</button>
    </div>

    <style>
    .carousel-container {
        position: relative;
        width: 80%;
        overflow: visible;
        margin: auto;
    }

    .carousel {
        overflow: hidden;
        width: 100%;
    }

    .carousel-track {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }

    .card {
        box-sizing: border-box;
        padding: 10px;
        background: #e8e8e8;
        margin: 5px;
        border-radius: 8px;
        text-align: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    @media only screen and (max-width: 767px) { 
        .card { flex: 0 0 62%; }
    }

    @media only screen and (min-width: 768px) and (max-width: 1800px) { 
        .card { flex: 0 0 38%; }
    }

    @media only screen and (min-width: 1801px) { 
        .card { flex: 0 0 28%; }
    }

    .card p {
        color: #000;
     }
	.card img {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 100%;
    }

    #nextBtn, #prevBtn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: #000;
        border: 2px solid #000;
        padding: 10px;
        cursor: pointer;
        z-index: 10;
    }

    #prevBtn { left: -50px; }
    #nextBtn { right: -50px; }
    </style>

    <script>
    document.addEventListener('DOMContentLoaded', function () {
        const track = document.querySelector('.carousel-track');
        const cards = document.querySelectorAll('.card');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');

        let currentIndex = 0;
        let cardWidth = cards[0].offsetWidth + 20;

        function updateCarousel() {
            const shift = currentIndex * cardWidth;
            track.style.transform = translateX(-${shift}px);
        }

        function moveToNext() {
            currentIndex++;
            if (currentIndex >= cards.length) {
                currentIndex = 0;
            }
            updateCarousel();
        }

        function moveToPrev() {
            currentIndex--;
            if (currentIndex < 0) {
                currentIndex = cards.length - 1;
            }
            updateCarousel();
        }

        nextBtn.addEventListener('click', moveToNext);
        prevBtn.addEventListener('click', moveToPrev);

        window.addEventListener('resize', () => {
            cardWidth = cards[0].offsetWidth + 20;
            updateCarousel();
        });
    });
    </script>

    <?php
    return do_shortcode(ob_get_clean());
}
add_shortcode('team_carousel', 'team_carousel_shortcode');

Then add this shortcode in a code block element on your page: [team_carousel]
Feel free to adjust the colors in the css in the code.

Best regards,
Mike