this works on four of my installations: https://de.wordpress.org/plugins/wp-mail-smtp/

aha – you did not mention that it is concerning to an open graph issue.
i think this is not a matter of the embed code but a matter of missing og infos on Enfold pages.
On Enfold there are without plugins no og: entries in the head area of the page. A lot of seo tools will add them (including facebook et.al. entries) – or you can do it manual via functions.php.

content cards i think uses these entries to show a preview of your page.
for a preview image the <meta property=”og:image” … is taken

you can add these infos via functions.php of your child theme:
if you have a seo tool look to your head section what is already placed there and add only the missing infos
on yeost seo f.e. the image is missing

add_action( 'wp_head',  'add_og_site_information', 10);
function add_og_site_information() {
	?>
		<meta property="og:locale" content="de_DE" />
		<meta property="og:type" content="website" />
		<meta property="og:title" content="Guenter Weber - Werbung" />
		<meta property="og:description" content="Guenter Weber, digitale Dienstleistungen" />
		<meta property="og:url" content="http://guenterweber.com/" />
		<meta property="og:site_name" content="Guenter Weber - Werbung" />
		<meta property="og:image" content="https://guenterweber.com/wp-content/uploads/vorschaubild.jpg" />
	<?php
}

see here on the right side of the page a content card of an enfold page:
https://webers-testseite.de/link-to-website-with-live-preview-on-hovering/

i can not confirm to that – your page loads on my end fast enough.
but i have a 200mbit connection

but see here your results: https://gtmetrix.com/reports/fotowalther.ch/L1YaUTiT

it seems that you have no gzip compression enabled ! (this is relevant for performance)
and no leverage browser caching is defined and no expires header is set.

i do always activate it via the htaccess file ( but it depends on your server) but commonly they serve as an apache server.
this is a hidden file ( .htaccess) – but a lot of ftp clients can make them visible on default.
you can download the file ( if you have f.e. a different permalink set – there will be one) via ftp – rename it to htaccess.txt and edit it with a good text editor ( f.e. : sublime text for mac or notepad++ for Windows)

on default there will be something like this:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

this existing entries have to be be untouched and depends on your settings you made in the dashboard.
Most of the caching tools put in a lot of entries here.

My settings for example are in front of that existing entries: ( means in front of # BEGIN WordPress):

# Secure your wp-config
# Disallow access to important files
<FilesMatch "(^\.|wp-config\.php|xmlrpc\.php|(?<!robots)\.txt|(liesmich|readme)\.*)">
   Require all denied
</FilesMatch>

# secure htaccess-file
<files ~ "^.*\.([Hh][Tt][Aa])">
order allow,deny
deny from all
satisfy all
</files>

# Keep-Alive
<ifModule mod_headers.c>
   Header set Connection keep-alive
</ifModule>
 

# Gzip
<IfModule mod_mime.c>
    AddType application/javascript          js
    AddType application/vnd.ms-fontobject   eot
    AddType application/x-font-ttf          ttf ttc
    AddType font/opentype                   otf
    AddType application/x-font-woff         woff
    AddType application/x-woff              woff
    AddType image/svg+xml                   svg svgz 
    AddEncoding gzip                        svgz
</Ifmodule>
 

# GZip Kompression
<IfModule mod_gzip.c>
 mod_gzip_on       Yes
 mod_gzip_dechunk  Yes
 mod_gzip_item_include file      \.(html?|txt|css|js|svg|php|pl)$
 mod_gzip_item_include handler   ^cgi-script$
 mod_gzip_item_include mime      ^text/.*
 mod_gzip_item_include mime      ^application/x-javascript.*
 mod_gzip_item_exclude mime      ^image/.*
 mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

 
# Browsercache
<IfModule mod_expires.c>
 ExpiresActive On
 ExpiresDefault "access plus 1 month"
 ExpiresByType text/css "access plus 1 month"
 ExpiresByType text/javascript "access plus 1 month"
 ExpiresByType text/html "access plus 1 month"
 ExpiresByType application/javascript "access plus 1 month"
 ExpiresByType application/x-javascript "access plus 1 month"
 ExpiresByType application/x-font-ttf "access plus 1 month"
 ExpiresByType application/x-font-woff "access plus 1 month"
 ExpiresByType application/x-woff "access plus 1 month"
 ExpiresByType application/xhtml-xml "access plus 600 seconds"
 ExpiresByType application/pdf "access 1 month"
 ExpiresByType image/gif "access plus 1 month"
 ExpiresByType image/jpg "access plus 1 month"
 ExpiresByType image/jpeg "access plus 1 month"
 ExpiresByType image/svg+xml "access plus 1 year"
 ExpiresByType image/svg "access plus 1 year“
 ExpiresByType image/png "access plus 1 month"
 ExpiresByType image/x-icon "access plus 1 month"
</IfModule>

 
# Deflate by FileType
<IfModule mod_deflate.c>
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE text/javascript
 AddOutputFilterByType DEFLATE image/svg+xml
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/atom_xml
 AddOutputFilterByType DEFLATE application/x-woff
 AddOutputFilterByType DEFLATE application/x-font-ttf
 AddOutputFilterByType DEFLATE application/x-font-woff
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/x-javascript
 AddOutputFilterByType DEFLATE application/x-shockwave-flash
</IfModule>
 
# ETag
Header unset ETag
FileETag None

you see here both the older gzip and the more modern mod_deflate module.
on mod_expires you can set different time settings – optimized for your website.

After uploading this htaccess.txt file – rename the existing .htaccess to htaccess.bak ( to have a fallback)
then rename the new file to .htaccess(be carefull to set the dot before the file) – maybe it is a good advice to set the file permissions to 640.

in addition to that – that is the right way.
Important : no space between tel: and number
By the way the input field of Enfold phonenumber accepts html. (as copyright input field too)
And you can set as link your correct number with your contrycode etc

<a href="tel:+492289768293"> get in touch etc. pp anything you like</a>

if you let the background-image determine the height of the color-section (yes this is possible) you will have troubles on small screens to have all content in that color-section. ( that is the reason why the content normaly determines the section height)

see here – i gave to the color section a custom-class: responsive-container

and did this to quick css:

.responsive-container {
    background-size: contain;
    padding-top: 56.25vw;
    width: 100vw;
    height: 56.25vw !important;
}
.responsive #top #wrap_all .responsive-container .container {
    margin-top: -56.25vw
}

see result here – and see for smaller screens what i mean with troubles: https://webers-testseite.de/responsive-colorsection/

so better is to have background-images which could be cropped or to have interesting gradients

ja und nimm die Original Bilder: Slideshow Image and Video Size : no scaling

wenn du möchtest, dass die Bilder oben unten nicht über den Screen gehen. kann man das erzwingen:
gib der full-width slideshow eine Custom Class. ich habe das mal mit zweien deiner Bilder gemacht, und der Slideshow die klasse: vollehoehe
gegeben.

dann habe ich ins quick css folgendes eingegeben:

.vollehoehe img {
    max-height: calc(100vh - 170px);
}

die minus 170px sind dem Header-bereich geschuldet. Da kannst du noch ein wenig dran drehen.
https://webers-testseite.de/slide-show/

wenn du es gesehen hast – nehme ich die Bilder wieder raus.

Wenn du es nur auf der startseite hast kannst du es auch so selectieren:

.home .avia-slideshow img {
    max-height: calc(100vh - 170px);
}

sure :lol

video

2a) and to have the images not full-width you can do that for smaller screens:

@media only screen and (max-width: 767px) {
.av_one_fourth img {
    width: 50vw;
    float: left;
}
}

PPS: what kind of plugin is it on your image gallery? – very nice !

hey Ismael i think you misunderstood him – he is concerning to 768 til 989px 2b
and he likes to have the 4th entry not on 24% but as all the other on 48%

the result is caused by an old “bug” of maybe wpautop function.
on the source i see that there is a <p></p> construct inserted between the flex-columns.:

if you like to show your site as iframe a lot of Boards only allows to show in a lightbox:

https://gorgeconnect.com/
this you can have with url-parameter iframe=true
( depends on how many and the postion if it is added to the url by ? or & )

it is not so hard to insert that little icon for search on that place but to have the direct form there is a bit more complex.

don’t know why$form = (ob_get_clean()) ; has to be and not $form = htmlspecialchars(ob_get_clean()) ; stays a miracle :lol

so try ismaels code without that htmlspecialchars

add_filter( 'wp_nav_menu_items', 'avia_append_search_nav', 10, 2 );
add_filter( 'avf_fallback_menu_items', 'avia_append_search_nav', 10, 2 );

function avia_append_search_nav ( $items, $args )
{	
        if ((is_object($args) && $args->theme_location == 'avia2') || (is_string($args) && $args = "fallback_menu"))
	{
		global $avia_config;
		ob_start();
		get_search_form();
		$form =  (ob_get_clean()) ;

		$items .= '<li id="menu-item-search2" class="noMobile menu-item menu-item-search-dropdown">'.$form.'</span> ';
	}
	return $items;
}

add this to your quick css:

#avia2-menu #menu-item-search2 {
    vertical-align: top !important;
    position: relative;
    top: -12px;
}

but the uggliest thing is that the created ajax search will resize the header meta
edit:

#top #searchform .ajax_search_response {
    position: absolute;
    background-color: #fff;
    box-shadow: 2px 2px 6px #333;
}

• This reply was modified 6 years, 11 months ago by Guenni007.

here is the method mentioned above :

register a new social_bookmark via functions.php of your child theme
here i take the lock but find a different icon on enfold

function avia_add_custom_icon($icons) {
    $icons['register']  = array( 'font' =>'entypo-fontello', 'icon' => 'ue825');
    return $icons;
}
add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);

function avia_add_custom_social_icon($icons) {
    $icons['Register'] = 'register';
    return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);

goto your Enfold options and add that newly added “social media” (it is at the end of the list) and insert your desired link

this turns the social_media to the left of hamburger menu – put it in functions.php of your child theme too

function change_menu_position() { 
?>
<script>
(function($){
	$('.main_menu ul.social_bookmarks').insertBefore($('.main_menu div.avia-menu'));
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'change_menu_position');

now style your newly social media button!:

/*** this is for the new button not to have same behavior as social_bookmarks buttons ***/
.social_bookmarks_register.av-social-link-register {
    margin: 0 15px;
    width: auto !important;
    padding: 0 15px !important;
    background-color: #42ab96 !important;
}

#top .social_bookmarks li.social_bookmarks_register a {
    width: auto !important;
    color: #fff;
}

.social_bookmarks_register .avia_hidden_link_text {
    display: inline !important;
    padding-left: 10px;
    text-decoration : none !important
}

#top #wrap_all .av-social-link-register:hover  {
    color: #fff;
    background-color: #BD5469 !important;
}

/*** rules for the left-hand social_bookmarks buttons ***/
#top nav .social_bookmarks { margin-top: -20px !important; overflow: visible !important; height: 40px !important }
.avia-menu.av_menu_icon_beside { padding-right: 0; margin-right: 0; border-right-width: 0; border-right-style: none }
.social_bookmarks li a { height: 40px !important; line-height: 40px !important; width: 40px !important }
#top .social_bookmarks li { width: 40px; height: auto !important }
#top .av-logo-container .social_bookmarks li a {  border-radius: 50% }
.av_header_transparency .social_bookmarks li a { color: #969696 !important;}

I think this will be the better and better understanding way:
Result – same as above: https://webers-testseite.de/cynthia/

https://kriesi.at/support/topic/change-the-order-of-the-social-bookmarks-icon/#post-986302

is it this you like to obtain?

the whole function can be used for more replacements – just add a new line – semicolon separated

replaceElementTag('.slideshow_caption h2.avia-caption-title', '<h1></h1>');
replaceElementTag('#footer h3.widgettitle', '<h2></h2>');  

etc.pp

take a fullwidth-slideshow.
you can add to the image on caption a manual link (choose apply link to image) – add to the video link at the end a &iframe=true f.e.:

https://player.vimeo.com/video/262210925?autoplay=1&loop=1&title=0&byline=0&portrait=0&iframe=true

see here: https://webers-testseite.de/huawei/

to pimp the whole thing a bit you can give to the hover effect some scalings – (get rid of the overlay white)