Hey rixi,
Try going to Enfold Theme Options ▸ Advanced Styling then from the dropdown choose Menu Links in overlay/slide out and click the button Edit Element then you will see the options:

Best regards,
Mike

Hey Stilecatalini,
Thanks for your patience and the link to your site, I see your sticky close button at the bottom of your page, but it links to the homepage “Barche” section, so this is more like a “back” button than a “close” button.
Nonetheless to add this button to your three pages venticinque, venticinque-panoramica, ventuno-sport-fisherman and have it hide on scroll down and show on scroll up, add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_back_button() { ?>
  <script>
(function($){
  var button = $('<div class="avia-button-wrap avia-button-right back-button"><a href="https://www.stilecatalini.it/#barche" class="avia-button avia-icon_select-yes-left-icon avia-size-large avia-position-center av-button-notext avia-color-light avia-font-color-white"><span class="avia_button_icon avia_button_icon_left" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span><span class="avia_iconbox_title"></span><span class="avia_button_background avia-button avia-color-theme-color"></span></a></div>');
  if ($("body").hasClass("page-id-738") || $("body").hasClass("page-id-5837") || $("body").hasClass("page-id-5667") == true) {
  $(button).prependTo('#wrap_all');
  } else {}
})(jQuery);
  
(function() {
    var doc = document.documentElement;
    var w = window;
    var prevScroll = w.scrollY || doc.scrollTop;
    var curScroll;
    var direction = 0;
    var prevDirection = 0;
    var backButton = document.querySelector('.back-button');
    var checkScroll = function() {
        curScroll = w.scrollY || doc.scrollTop;
        if (curScroll > prevScroll) {
            direction = 2;
        } else if (curScroll < prevScroll) {
            direction = 1;
        }
        if (direction !== prevDirection) {
            toggleButton(direction, curScroll);
        }
        prevScroll = curScroll;
    };
    var toggleButton = function(direction, curScroll) {
        if (direction === 2) {
            backButton.style.opacity=0;
            prevDirection = direction;
        } else if (direction === 1) {
            backButton.style.opacity=1;
            prevDirection = direction;
        }
    };
    window.addEventListener('scroll', checkScroll);
}
)();
</script>
  <?php
}
add_action('wp_footer', 'custom_back_button');

and this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.back-button {
    position: fixed;
    top: 1%;
    right: 1%;
    z-index: 999;
    background-color: transparent;
}

Best regards,
Mike

Hey Roman,

You can do that by clicking this link , or this button on the support forum: https://imgur.com/a/AnoSPNb

Best regards,
Rikard

Hi,
If you add customizations to the parent theme function it will be lost on updates, but with a child theme they will not be lost.
To add the Microsoft Team logo, I assume that this is not available as a icon so you can add it like we do for TikTok, try following these steps and adjust for your logo.
If you are not using a child theme I recommend the WPcode plugin this plugin supports PHP code snippets, JavaScript code snippets, & CSS code snippets and allows you to export and import your custom code snippets to other sites that you may have or as a backup.

Best regards,
Mike

Hi,

Thank you for the update.

To align the second widget to the right, just remove this css code:

#footer .flex_column:nth-child(2) #nav_menu-2 {
    width: 100%;
    float: none;
}

Then replace it with:

.flex_column:nth-child(2) #nav_menu-2 {
    float: right;
}

And to center align the contact form button, please add this:

#top .wpcf7-spinner {
    position: absolute;
    bottom: 25px;
    left: 15px;
}

Again, please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings in order to ensure that the changes take effect.

Best regards,
Ismael

Hey LiorMaymon,
Thank you for your patience to add a new social profile please see this subject in our documentation: How to add Custom Social Icons to Enfold options.
Here is an example of adding the TikTok social icon with some screenshots that may help explain, if you have any issues please include an admin login to your site in the Private Content area so we can be of more assistance.
For your portfolio to have a gap and have a title overlay:

try using the masonry element to display your portfolio items and set the title as an overlay:

and choose a large gap:

Best regards,
Mike

Hey Nomad,
Thanks for the link to your example, but you can achieve this with a text element below a button element without any extra css:

You can change the font size and color of the text block in the style tab:

or change it with inline css in the text block.

Best regards,
Mike

Hi,
Thank you for your patience and the explainion with links to examples, the first example could be achieved by using the Advanced Layout Builder elements to create your product page.
Your first example page starts with class information such as images, table, a slider and text elements, you can use the layout elements for these, and then add your “product price” element under these with your “product purchase button”, and at the botton add the “related products” element.
I’m having trouble understanding your language on your product page example so I’m not so sure what you mean by “placing the city” first, but I think you mean the drop down options for the products:

these can be moved in the product variations in the backend by draging them:

The sign up form on the example page uses the WooCommerce Box Office plugin, I don’t have experience with it but here is a link to it’s documentation. There maybe other free WordPress plugins that will do the same job but I don’t know or tested any. WooCommerce Bookings might be another option, I recommend that you research different plugins to find one that meets your needs and try to test them with Enfold before buying anything expensive as not all plugins work well with Enfold, sometimes you will need to test first to ensure there won’t be a conflict.
I hope this helps.

Best regards,
Mike

Hey laptophobo,
Thank you for the link to your demo site, perhaps using a text element and a image element in the same column with Grid CSS would be a good solution:

Try adding the custom class grid-column to a full width column, and add the custom class grid-image-right to the image element inside the column. Then add your text element inside the column but we won’t use a custom class for it.
Add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (min-width: 768px) { 
.grid-column {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: auto;
    grid-column-gap: 1pc;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.grid-image-right {
	display: grid;
    grid-column-start: 4;
    grid-column-end: span 9;
    grid-row: 1;
}
.grid-column .av_textblock_section {
	display: grid;
    grid-column-start: 1;
    grid-column-end: span 5;
    grid-row: 1;
    padding: 8%;
    color: #000;
    background-color: #eee;
    z-index: 1;
}
}

and adjust the colors to suit.
Now below 767px, for mobile the image and text will be stacked:

and for tablet and above the text offset will be consistent:

I tried to do this with the image caption but it didn’t work well with the image element structure and the caption field doesn’t allow HTML and buttons easily like the text element so this may be more useful.

Best regards,
Mike

Hey laptophobo,
Thank you for the link to your demo site, perhaps using a text element and a image element in the same column with Grid CSS would be a good solution:

Try adding the custom class grid-column to a full width column, and add the custom class grid-image-right to the image element inside the column. Then add your text element inside the column but we won’t use a custom class for it.
Add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (min-width: 768px) { 
.grid-column {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: auto;
    grid-column-gap: 1pc;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.grid-image-right {
	display: grid;
    grid-column-start: 4;
    grid-column-end: span 9;
    grid-row: 1;
}
.grid-column .av_textblock_section {
	display: grid;
    grid-column-start: 1;
    grid-column-end: span 5;
    grid-row: 1;
    padding: 8%;
    color: #000;
    background-color: #eee;
    z-index: 1;
}
}

and adjust the colors to suit.
Now below 767px, for mobile the image and text will be stacked:

and for tablet and above the text offset will be consistent:

I tried to do this with the image caption but it didn’t work well with the image element structure and the caption field doesn’t allow HTML and buttons easily like the text element so this may be more useful.

Best regards,
Mike

Hey ballindigital,
Thanks for your patience and the link to your site, to make the Add to Basket button lager and change it’s style you can try some css like this:

#top.woocommerce-page .main_color .button[name=add-to-cart] {
	 background-color: #ffd1ed;
	 width: 200px;
	 font-size: 16px;
}

I’m not sure how you want to style the button, please explain further if you need more help with it.
#2 where on the page do you want the second Add to Basket button, in the Description?
#3 I don’t see a link to your example site, but even with only 4 images on mobile I don’t believe the info would be “above the fold” perhaps moving the images after the info on mobile would achieve what you would like? If so try this css:

@media only screen and (max-width: 767px) { 
  #top.single-product .product {
  display: flex !important; 
  flex-wrap: wrap !important; 
  }
  #top.single-product .single-product-main-image {
      order: 2 !important; 
  }
  #top.single-product .single-product-summary {
      order: 1 !important; 
  }
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thanks for the feedback, when I checked your site your cookie bar had two buttons:

So I went to the option Enfold Theme Options ▸ Cookie Consent ▸ Cookie Handling ▸ Buttons and clicked the green plus sign to add another button:

and then added the Einstellungen button:

Now on the frontend you have three buttons, feel free to adjust to suit:

Best regards,
Mike