Hi,
Thank you for the link to your example codepen, in order to do this you will have to place a code block element inside the color section because you need to create 4 div’s with the classes, it’s not just 4 classes.
If you Enable the Avia Layout Builder Debugger on your site you can add this shortcode for a working example:

[av_section min_height='100' min_height_pc='25' min_height_px='500px' padding='no-padding' custom_margin='0px' custom_margin_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' color='main_color' background='bg_color' custom_bg='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' shadow='no-border-styling' bottom_border='no-border-styling' bottom_border_diagonal_color='#333333' bottom_border_diagonal_direction='' bottom_border_style='' custom_arrow_bg='' id='' custom_class='' template_class='' aria_label='' element_template='' one_element_template='' av_element_hidden_in_editor='0' av_uid='av-kv4ew82l' sc_version='1.0']

[av_codeblock wrapper_element='' wrapper_element_attributes='' codeblock_type='' alb_description='' id='' custom_class='' template_class='' av_uid='av-kv4er17g' sc_version='1.0']
<style>
.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 {
  animation-duration:5s;
}

.contentbox {
  background-color:rgba(255,255,255,.8);
  border-radius:.25em;
  box-shadow:0 0 .25em rgba(0,0,0,.25);
  box-sizing:border-box;
  left:50%;
  padding:10vmin;
  position:fixed;
  text-align:center;
  top:50%;
  transform:translate(-50%, -50%);
}

h1 {
  font-family:monospace;
}

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}
</style>

<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="contentbox">
  <h1>Sliding Diagonals Background Effect</h1>
</div>
[/av_codeblock]

[/av_section]

the result:

Best regards,
Mike

Hey Veronika,
Thank you for the link to your site I see that you added a menu item with the image url, but I’m not sure which solution you were trying to follow so I added this css to have your logo show where the menu item was, please clear your browser cache and check.

#av-burger-menu-ul .menu-item-4053:before {
content: "";
background-image: url(https://your-site.com/wp-content/uploads/2019/10/Logo.png);
background-size: 100%;
background-repeat: no-repeat;
width: 300px;
height: 130px;
display: inline-block;
}
#av-burger-menu-ul .menu-item-4053 a .avia-menu-text {
	opacity: 0;
	pointer-events: none;
}
#av-burger-menu-ul .menu-item-4053 a {
	pointer-events: none;
}

Best regards,
Mike

Hi,
Thank you for the login I was able to add another slide and save then view the frontend, and then go back and remove without any errors. I then tried creating the element on my demo site and didn’t have any issues there.
I see that you don’t have any titles which is fine, but are you getting the error when you add shortcode or html tags in the titles, because that would cause an error and you should not do that.
I see that your theme editor and plugins page are hidden, if you are using a plugin to hide admin elements then you could also get strange errors and should not do that. If you continue to have issues please unhide these areas and consider deactivating your plugins, for typically strange errors are a result of plugin conflicts.

Best regards,
Mike

Hi,
Thank you for the screenshots this one looks like you are using the advanced tiny editor plugin, this is not the correct default WordPress editor:

this screenshot shows the correct default WordPress editor:

I also note that you have two more additional buttons over your editor so I would recommend deactivating your plugins one at a time and clear your cache and try testing, I believe your issue is related to a plugin conflict.

Best regards,
Mike

Hi,
Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Thank for the gif, the reason the page turned gray was because the search field was being moved 1322px from the left which is off your page, I didn’t find what was moving it but you site acts strangely in the background. You also had an issue with the menu and search links overlapping. I adding this css to your Quick CSS and it works for desktop but you may need to fine-tune it for mobile.

.html_burger_menu_active #top #wrap_all #header #avia-menu .av-burger-menu-main.menu-item-avia-special > a{
	width: 58px;
	position: fixed;
	right: 20px;
	top:40px;
}

.html_burger_menu_active #top #wrap_all #menu-item-search > a {
	height: 56px;
	top: 100px;
	position: fixed;
	right: 20px;
	display: inline;
}
#menu-item-search .avia-search-tooltip.avia-tt {
	left: -136px!important;
	top: 120px!important;
}

Please clear your browser cache and check.
I see that you are using Elementor so I wonder if that is the issue with your site acting strangely in the background, typically other page builders conflict with Enfold.

Best regards,
Mike

Hey Veronika,
Thank you for the screenshot, try adding margin-top to your css to this:

.html_burger_menu_active #top #wrap_all .menu-item-search-dropdown > a {
    position: fixed;
    margin-top: 30px;
}

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

Best regards,
Mike

Hey KevinDuy2605,
To remove this from only the homepage please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#top.home .av-siteloader-wrap {
    display: none !important;
    visibility: hidden !important;
}

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

Best regards,
Mike

Hi,
This screenshot https://imgur.com/5FuA2zT is pointing to your container max-width is 1310px which is picked at Enfold Theme Options ▸ General Layout ▸ Dimensions

Try changing this to 100%

Best regards,
Mike

Hey Arend,
Thank you for your patience and for the link to your site, I tested the Feeds for YouTube on my localhost and found that it conflicts with the built-in lightbox script. I tried many approaches to get them to work together but couldn’t, I also tried having the gallery images open in the Feeds for YouTube lightbox, but it was not dependable and caused other issues with the video lightboxes. The only working solution I could find was to disable the built-in lightbox and use the Simple Lightbox plugin for the gallery images, these two lightboxes work together.
Please give this a try.

Best regards,
Mike

Hi,
I found that I see if I’m not logged in, but it works when I was logged in. I cleared your WP Fastest Cache and then I could see it on Chrome & Edge when logged out, please clear your browser cache and check.

Best regards,
Mike

Hi,
I believe you will need to refresh the cache when you create new posts, I don’t believe there is a way around that and it is why there is this option in WP Rocket.
A cache is a “snapshot” of your page at a certain time so the database doesn’t need to be called, by adding a new post you have changed the database but not the cache, so for your cache to show the latest version of your page it needs to be updated.

Best regards,
Mike

Hi,
I linked the child theme that should have been included with the latest version, in the full theme and docs download from Theme Forest, you can replace yours with this or copy the function I mentioned above to yours.
It is key that you create a /shortcodes/ directory in your child theme to place your modified shortcode directory, like I described above.

Best regards,
Mike

Hi,
Glad to hear this helped, if you are using the child theme that came with the theme then you should see this near the top of the functions.php:

function avia_include_shortcode_template( $paths )
{
	if( ! is_array( $paths ) )
	{
		$paths = array();
	}
	
	$template_url = get_stylesheet_directory();
	array_unshift( $paths, $template_url . '/shortcodes/' );

	return $paths;
}

add_filter( 'avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1 );

then when you copy the tab sortcode folder from \wp-content\themes\enfold\config-templatebuilder\avia-shortcodes\tabs\ you should put it in the /shortcodes/ directory in your child theme, like this \wp-content\themes\enfold-child\shortcodes\tabs\ ok so now please try adding this function to your child theme functions.php:

function wp_change_aviatabjs() {
   wp_dequeue_script( 'avia-module-tabs' );
   wp_enqueue_script( 'avia-module-tabs-child', get_stylesheet_directory_uri().'/shortcodes/tabs/tabs.js', array('jquery'), 2, true );
}
add_action( 'wp_print_scripts', 'wp_change_aviatabjs', 100 );

Then clear your browser cache and any cache plugin, a couple on times, and check.

Best regards,
Mike

Hi,
Glad Yigit was able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike