Hi,
The “preview” of a draft page doesn’t always work correctly, you are always best to publish the page and view it to see an accurate result of your page.
Do you mean the “element preview” shown next to the text element? This is enabled by default in the theme, go to Enfold Theme Options ▸ Layout Builder ▸ Disable Advanced Layout Builder Preview In Backend to see if it is disabled:

Best regards,
Mike

Hi,
On your second page in the source code the word “Batliner” has ­ twice in the word:

this causes a problem for Guenni007’s script, I pointed this out for you in your other thread. At the time you said you thought it was from the plugin: Data Tables by Supsystic.
Did you try disabling the plugin?

Soft hyphen (­) This character is not rendered visibly; instead, it suggests a place where the browser might choose to break the word if necessary. In HTML, you can use ­ to insert a soft hyphen.

Since your first page doesn’t seem to use the plugin I think that it probably was adding the Soft hyphen.

Best regards,
Mike

Hey Jason,
Thanks for your patience, in the title when you see [av_dynamic_el this looks like the ACF code with the “{” mark is braking the ALB element shortcode, I tested without the ACF code in the title field in the first link below and the ACF code for the answer in the content field which worked. Below the accordion panel I tested both ACF codes which also worked:

I don’t know the cause for this, but I found that the ACF code could be used in the title if the element shortcode is not used, but use the element HTML instead. See link 2 below:

frontend:

Best regards,
Mike

Hi,
To have a smaller font size for the magazine titles, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #wrap_all .all_colors h3.av-magazine-title {
	font-size: 12px;
}

adjust to suit and clear your browser cache

Best regards,
Mike

Hi,
Thank you for your patience, when I test your snippet above I find that the quotes have been converted to curly quotes which break the code.
If I correct them first, they work correctly in the code block element:


when using a code snippet like this the code block element is the correct element to use because the PayPal snippet is calling a function from the PayPal site which will run in the backend editor where you don’t want it to. The visual mode of the text editor will run the code, but the code block element will not.
If you really want to use the text block element, then use the code tab and do not switch to the visual tab. Here I show that this works, in the code tab you see the code and the preview shows the button:

at this point click “save” and not the visual tab and the button is shown in the editor, which means that WordPress is running the code in the text element in the backend.
Now you can update the page and view the frontend:

This is the corrected code snippet that I used:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="H87UB2HDHP3GS" />
<table>
<tr>
<td>
<input type="hidden" name="on0" value="Options for Brondanw & Nantclwyd only"/>
Options for Brondanw & Nantclwyd only
</td>
</tr>
<tr>
<td>
<select name="os0">
<option value="Member">
Member £17.00 GBP
</option>
<option value="Guest">
Guest £19.00 GBP
</option>
<option value="2 Members">
2 Members £34.00 GBP
</option>
<option value="1 Member + 1 Guest">
1 Member + 1 Guest £36.00 GBP
</option>
<option value="Child under 16">
Child under 16 £10.00 GBP
</option>
</select>
</td>
</tr>
</table>
<input type="hidden" name="currency_code" value="GBP" />
<input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_LG.gif" border="0" name="submit" title="PayPal – The safer, easier way to pay online!" alt="Add to Cart" />
</form>

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
To prevent your code snippet from changing if you want to edit the text block element in the future, such as adding text around the button, we will create a shortcode for your button, by adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function paypal_button_shortcode() {
    ob_start(); ?>
    
    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
        <input type="hidden" name="cmd" value="_s-xclick" />
        <input type="hidden" name="hosted_button_id" value="H87UB2HDHP3GS" />
        <table>
            <tr>
                <td>
                    <input type="hidden" name="on0" value="Options for Brondanw & Nantclwyd only" />
                    Options for Brondanw & Nantclwyd only
                </td>
            </tr>
            <tr>
                <td>
                    <select name="os0">
                        <option value="Member">Member £17.00 GBP</option>
                        <option value="Guest">Guest £19.00 GBP</option>
                        <option value="2 Members">2 Members £34.00 GBP</option>
                        <option value="1 Member + 1 Guest">1 Member + 1 Guest £36.00 GBP</option>
                        <option value="Child under 16">Child under 16 £10.00 GBP</option>
                    </select>
                </td>
            </tr>
        </table>
        <input type="hidden" name="currency_code" value="GBP" />
        <input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_LG.gif" border="0" name="submit" title="PayPal – The safer, easier way to pay online!" alt="Add to Cart" />
    </form>

    <?php
    return ob_get_clean();
}
add_shortcode('paypal_button', 'paypal_button_shortcode');

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
Then in your text block element use this shortcode [paypal_button]

in the backend you will only see the shorcode:

and on the frontend the button shows:

Best regards,
Mike

Hey Anne,

Thank you for the inquiry.

Please check the links below for possible solutions:

— https://kriesi.at/support/topic/frontend-how-to-hide-image-title-on-hover/#post-1469760
— https://kriesi.at/support/topic/disable-image-title-tooltip-on-hover/#post-1467149

Let us know if you need more info.

Best regards,
Ismael

Hi,

Please replace the script with this:

function av_inline_popup_enabler() { ?>
    <script>
    (function($){
        $(document).ready(function() {
            $('[class*="group-"]').each(function() {
                $(this).magnificPopup({
                    delegate: 'a.inline_popup',
                    type: 'image',
                    gallery: { enabled: true },
                    midClick: true,
                    callbacks: {
                        elementParse: function(item) {
                            var href = item.el.attr('href');
                            if (href.match(/\.(jpg|jpeg|png|gif|webp)(\?.*)?$/i)) {
                                item.type = 'image';
                            } else {
                                item.type = 'iframe';
                            }
                        },
                        open: function() {
                            var title = this.st.el.attr('title') || this.st.el.attr('alt') || '';
                            if (title) {
                                var $caption = $('<div class="mfp-title" style="text-align:center; padding:10px 0;">' + title + '</div>');
                                this.contentContainer.append($caption);
                            }
                        }
                    }
                });
            });
        });
    })(jQuery);
    </script>
<?php }
add_action('wp_footer', 'av_inline_popup_enabler', 9999);

This will group the items based on the parent container (group-1, group-2) and also parse the element format and return the correct type, so you don’t need to add the iframe parameter to images.

<div class="group-1">
  <a alt="CUSTOM ALT HERE" title="CUSTOM TITLE HERE" class="inline_popup" href="image.jpeg" title="Image 1">Image 1</a>
  <a alt="CUSTOM ALT HERE" title="CUSTOM TITLE HERE" class="inline_popup" href="video.mp4?iframe=true" title="Video 1">Image 2</a></div>
<div class="group-2">
  <a alt="CUSTOM ALT HERE" title="CUSTOM TITLE HERE" class="inline_popup" href="image.png" title="Image">Image</a></div>

Best regards,
Ismael

Hi,

We just noticed that you’re trying to load jpg images. What happens when you remove the iframe=true parameter completely? Make sure that link contains the “lightbox” class name.

<div class="isotope">
  <a alt="CUSTOM ALT HERE" title="CUSTOM TITLE HERE" class="lightbox" href="xxx.jpg"> 01 </a>
  <a alt="CUSTOM ALT HERE" title="CUSTOM TITLE HERE" class="lightbox" href="xxx.jpg"> 02 </a></div>

The title or alt attribute should automatically display without the custom script.

View post on imgur.com

Best regards,
Ismael

Hey Bob,

Thank you for the inquiry.

If you want the default configuration (Appearance > Customize > WooCommerce) to apply to product images, you can add the following code to the functions.php file:

add_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'avf_wc_before_shop_loop_item_title_img_size_mod', 10, 1 );
function avf_wc_before_shop_loop_item_title_img_size_mod( $thumbnail_size ) {
    return 'woocommerce_thumbnail';
}

Let us know the result.

Best regards,
Ismael

Hi,

Looks like you’ve replaced the logo with a smaller image. Let us know if you need more assistance.

Best regards,
Ismael

Hi,
#3: try unselecting “Unstick Topbar”

Best regards,
Mike

Hi,

The images are smaller because they are constrained within the section area using the css rule “background-size: contain !important;”. You can try changing it back to “cover”, but this may cause the “zoomed-in” issue to return.

Try this css code in place of the recent one, then make sure to purge the cache or clear your browser history.

@media only screen and (max-width: 1366px) {
  /* Add your Mobile Styles here */
  .avia-full-stretch, .avia-bg-style-fixed  {
      background-attachment: scroll !important;
      background-size: cover !important;
  }
}

Best regards,
Ismael

Hi,
Perhaps you didn’t see the css for the logo overlapping the buttons that I posted above:

@media only screen and (max-width: 767px) { 
#av_section_1 .container.av-section-cont-open,
.page-id-910 #av-layout-grid-1 {
	padding-top: 130px !important;
}
}

it would be easier if you disabled the plugin that is blocking me from making changes

Best regards,
Mike

Hey a_edemirci,

Thank you for the inquiry.

You can add this css code to hide the default image overlay.

#top .image-overlay {
    display: none !important;
}

Make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings afterwards.

Best regards,
Ismael