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

Hi,
I recommend following our documentation and you can have three buttons in the cookie bar and name them as you wish, just click the green plus sign to add more buttons

Please note that we ask that each thread stays “on topic” and different threads are used for multiple questions, this helps future users find solutions easier and multiple Moderators assist you with a solution, thank you for understanding.

Best regards,
Mike

Hi,

Thank you for the info.

It appears that the code was added to fix the default buttons on WordPress 6.1. You can find the CSS rule in the file located at themes/enfold/css/base.css around line 305:

#top a:where(:not(.wp-element-button)) {
	text-decoration: none;				/*	WP 6.1 fix   */
}

Please maintain the CSS modification that overrides the base style for now.

Best regards,
Ismael

Hey BeeCee,
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function trigger_alb_on_load_for_page(){
	?>
	<script>
	window.addEventListener('DOMContentLoaded', function() {
	(function($){
		if ($('body.wp-admin.post-new-php.post-type-page').length > 0){
			setTimeout(function(){
			$("#avia-builder-button").trigger('click');
			},300);
		}
	})(jQuery);
    });
	</script>
	<?php
}
add_action('admin_head-post-new.php', 'trigger_alb_on_load_for_page');

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
In my test a timeout of 300 ms (less than half a second) is required for the ALB button to be available, so if this doesn’t work for you try increasing the “300” to a higher number.
Also ensure you are not deferring jQuery with a caching plugin or in theme options, such as Enfold Theme Options ▸ Performance ▸ Load jQuery in your footer

Best regards,
Mike