Hi there,
I’d like to make a website like the Ted’s one.
Here is an example of a page I “want” to copy :
https://www.ted.com/talks/tim_ferriss_why_you_should_define_your_fears_instead_of_your_goals#t-29386
When you play the video and then pause it, if the mouse is on the area of the video you’ll have a kind of layer appearing on top of the video with black gradient on the sides and written information to the left. If you remove the mouse from the video area, the layer disappear.
Here are screenshots of this
/Users/blaisejadoul/Desktop/Screen Shot 2017-06-12 at 17.38.33.png
/Users/blaisejadoul/Desktop/Screen Shot 2017-06-12 at 17.38.05.png
You can imagine that if you click the play button, the video starts again.
Is it possible to make this with the Enfold Theme ?
Sorry, I have just noticed that when it becomes responsive the want the logo at the top and the number underneath it next to the navigation..
Regards
Jenzai
-
This reply was modified 8 years, 10 months ago by
jenzai.
Hi,
Add the following to quick css:
@media only screen and (min-width: 767px) {
.phone-info{
position:relative!important;
top:100px!important;
}
strong.logo{
position: relative!important;
top: -50px!important;
overflow:visible!important;
}
#header_meta{
z-index:1!important;
}
}
Let me know if this works.
Best regards,
Jordan Shannon
Hi,
I experienced a problem with one of our customers sites that is a one-pager. We created a menu with anchor links to scroll to the specified sections.
Works fine in Chrome and Safari, but doesn’t work in Firefox unfortunately.
Here is what I tried already:
– updating the theme to the current version (4.0.6)
– We did some modifications on avia.js, that’s why it’s loaded from the child theme, though the part responsible for the scrolling is from the default and current version avia.js. I still tried it with the parent theme’s original avia.js –> didn’t work either.
– deactivated all plugins –> didn’t work
– console.log from the callback of the scrolling animation get’s output, but the animation itself doesn’t do anything
Thanks for your help.
Florian
Hallo Enfold Team,
Ich verwende ein Widget, um Stellenanzeigen auf einer Webseite einbinden zu können. Das Einbinden funktioniert auch, nur überschreibt die ID #top (im body tag) sämtliche input und select Felder des Widget. Lediglich wenn ich die ID #top von der betroffenen Seite entferne (mit Javascript), passt alles. Da ich aber durch das entfernen der ID, den Header, Footer (Header und Footer Responsive) und andere Kleinigkeiten anpassen müsste, hab ich die Frage ob Ihr hierfür eine Lösung hättet, das Problem umgehen zu können. Könnte ich die ID beispielsweise nur für den Content ausblenden? Oder das Stylesheet, das die Input und Select Felder überschreibt durch javascript entfernen?
Vielen Dank für eure Hilfe.
Viele Grüße,
Alicia
Hi,
I have several enfold sites and think the theme is great but currently face a new challenge and want to know if anyone else has some something similar and can provide an example or tips.
I have two separate sites (http://www.rethinkingliteracy.org) and (http://www.rethinkingnumeracy.org). These are similar sites in structure but have distinct branding. These each represent a particular event that we run.
Next year plan to bring these events together so want to create one site and encompasses both (http://www.rethinkinglearning.asia). So ideally i’d like to have one site that has a few high level pages, but also has two essentially sub-sites. I envision clicking on either “rethinkingliteracy” or “rethinking numeracy” in the top menu and when I do so the color scheme is slightly different and perhaps even the site logo changes. This way it will be clearly part of the same site but still allow each section to retain its distinct identity.
I have a few questions
1.) Is there a way to do the sub menu for the different sub sites other than using the full width menu part (which requires adding to each page).
2.) How to change the logo for parts of the site?
3.) How to change the color scheme for part of the site?
Mostly I’d like to see an example of this done with Enfold. I’d prefer to keep using enfold and not get a custom theme
Hi Picante,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (min-width: 768px) and (max-width: 1180px) {
.container.av-logo-container {
padding: 0px;
margin: 0px 30px;
max-width: 95%;
}
#top .av-menu-button > a .avia-menu-text {
padding: 5px;
}
.av-main-nav > li > a {
padding: 0px 11px;
}
.logo img {
padding: 55px 0;
width: 50%;
}
}
@media only screen and (min-width: 1180px) {
.logo img {
padding: 35px 0;
width: 70%;
}
#top .av-menu-button > a .avia-menu-text {
padding: 9px;
}
.av-main-nav > li > a {
padding: 0px 13px;
}
.container.av-logo-container {
padding: 0px;
margin: 0px 30px;
max-width: 95%;
}
}
@media only screen and (min-width: 1365px) {
.logo img {
padding: 30px 0;
width: auto;
}
.av-main-nav > li > a {
padding: 0px 15px;
}
.container.av-logo-container {
padding:0 30px;
margin: 0px 60px;
max-width: 90%;
}
}
This code adjusts the logo and the menu a bit, so that the menu does not overlap the logo. Let me know if this works for you.
If you need further assistance please let us know.
Best regards,
Victoria
Hi,
Please try the following in Quick CSS under Enfold->General Styling:
.html_bottom_nav_header #top .av-logo-container .social_bookmarks {
margin-top: 45px;
}
Best regards,
Rikard
Hi,
when i activate the mobile menu for desktop and tablets, then desktop menu appears also in tablet portrait mode. I think it is a bug…
Best regards,
Sergej Rube
hi,
i woul’d like to use a color section with parallex background image. Everything is nice on desktop. But on mobiles the image size doesn’t fit.
How can i resize it with media queries, that the full image is shown on smartphones?
Hi,
Great, glad you got it working :-)
Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
Rikard
Hello,
i want to ask if its possible to do a iconlist in this style
Screenshot
I was searching for a timeline like this but can’t find something like this. And if i want to build with sections (stacks), the mobile Version looks terrible. If i could hide sections on desktop it would work but i just can hide on mobile devices. Can you help me out with this problem?
Thank you!
-
This topic was modified 8 years, 10 months ago by
bejamedia.
Hi,
Great, glad we could help. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
Rikard
Hello,
I was adding a Content Slider into my Home Page but it wasn’t showing so I searched for “avia-content-slider-active .slide-entry-wrap{position: absolute; top:0; visibility: hidden; margin:0;}” took out the hidden portion and it shows. Now I am having a problem… I have two Slides in it and they “BOTH OVERLAP” and won’t Slide!
I put credentials in Private Content
It would be under Pages > Home. You can’t miss where the Content Slider is!
Thanks
The video icon and the down arrow goes below the fold. Is it possible to have the whole color section to appear the same way it looks on the desktop or make it all appear on the fold?
it looks something like this – https://ibb.co/cs1AOF
Hi,
Glad we could help. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
Rikard
Hi,
Great, glad you got it working and thanks for the feedback. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
Rikard
Hey michael carroll,
I would suggest that you have a look at our top seller Enfold, there are plenty of demos available to import to suit your needs: http://kriesi.at/themes/enfold-overview/
Best regards,
Rikard
well on my page (see above example page) i did it in your way – with a code block and i typed in with keyboard <div id="connect2"></div>
a custom link than to the menu (on my case): https://webers-testseite.de/8-columns/#connect2 thats all. (Even if i mark Deactivate schema.org markup for a clearer code it works.
So there had to be some inconsitances on your installation.
Can you show me your link ? or has it to be secret.
you told us that your site is a one page landing page. If the anchors are on that page it has to scroll. But if you are jumping from a different page to the anchor it never scrolls in this way.
What you like is a loading of the anchor page to the top and than in a time shift scrolling to the anchor.
Maybe this could be realised by a timecodes redirect – but will it be good webpractice?
A javascript solution is the only thing for me that could work
-
This reply was modified 8 years, 10 months ago by
Guenni007.
Hey clairemartindigital,
Try editing this file wp-content/themes/enfold/includes/helper-social-media.php and find this line of code (line 217):
$this->html .= "<div class='av-share-box'>";
replace it with:
$this->html .= "<div class='av-share-box'><span class="share-label">Share</span>";
Then add this css code in Quick CSS (located in Enfold > General Styling):
#top .av-share-box ul {
display: inline-block;
text-align: left;
border: 0;
width: auto;
}
.av-share-box .av-share-box-list {
display: inline-block;
margin-left: 10px;
}
.av-share-box .av-share-box-list .av-share-link {
display: inline-block;
border: 0;
margin: 0 5px;
}
.av-share-box .av-share-box-list .av-share-link a {
padding: 0;
}
span.share-label {
position: relative;
top: -8px;
font-weight: bold;
}
Hope this helps :)
Best regards,
Nikko
Hi,
Please look for the following css codes.
.html_elegant-blog .entry-content-wrapper .big-preview.single-big {
margin-top: 20px;
}
.html_elegant-blog .template-blog .post_delimiter {
margin: 0 0 20px 0;
padding: 20px 0 0 0;
}
Adjust the default values (“20px” and “0 0 20px 0”).
Best regards,
Ismael
Hi,
The modification above is obsolete Please remove it then add the following code in the functions.php file:
// adjust settings on init
add_action('init','ava534345953_init', 50);
function ava534345953_init() {
add_action( 'woocommerce_after_single_product_summary', 'avia_add_sidebar', 25);
}
function avia_close_image_div() {
global $avia_config;
echo "</div>
";
}
function avia_add_sidebar() {
if(is_product()) {
$avia_config['currently_viewing'] = "shop_single";
get_sidebar();
}
}
In the Quick CSS field, add the following css code.
.single-product-main-image {
width: 25%;
}
.single-product-summary {
overflow: hidden;
width: 45%;
float: left;
margin-right: 5%;
}
.single-product .sidebar {
width: 25%;
}
Related thread: https://kriesi.at/support/topic/sidebar-rechts-single-page/#post-580220
Best regards,
Ismael
Hi,
I’m very sorry for the late response. The following css code should change the color of the tab title arrow.
#top .av-tab-arrow-container span {
background-color: red;
}
Best regards,
Ismael
Hey ftt123,
Please try the following in Quick CSS under Enfold->General Styling:
@media only screen and (max-width: 767px) {
.avia-builder-el-0 .slideshow_caption {
padding-top: 0 !important;
}
}
Best regards,
Rikard
Hi,
I logged in and enabled Excerpts in the Screen Options at the top of your page, then went to the very bottom and add a excerpt for
your example post above, go to Direct-to-Consumer Business Model to see it.

Best regards,
Mike
Hi
I’m trying to hide an element from desktop/laptop screens so it shows ONLY on mobile/tablets – i’ve tried having a play around with some CSS but nothing has worked so far so hoping someone can help.
The element I’m referring to is the partner/logo element (the slider part only) at the bottom on the home page.
Thanks
Farzan
I think there is a bug with my website. The blog links have stopped linking to the blog posts. They just take you to the home page:
https://www.innergyresources.com/blog
Credentials below.
Hi, i’ve combined these codes to find a customized solution. I’ve reduced the min/max height to 700 because i had a big blank space on desktops with 2200px and the problem on mobile wasn’t solved. Then i decided to hide the slider for mobiles. Now it works well on desktops, because the up and down has stopped; no problems on mobiles cause they don’t see it; NOT OK on tablets because some texts are cutted (but i don’t want to increase the px number because of bigger blank space on desktops).
So the last question, can you please telle how to modify the first ccs you give me to hide the slider even for tablets?
PS: for any other user, don’t work with the preview cause it doesnt correctly show the changes.
Thanks
Hey Semoore,
1: The only way to block GoogleBot from seeing that caption is to watermark text in the image. Try this one: https://www.watermarquee.com/
2: Try this code in the General Styling > Quick CSS field:
.av-image-caption-overlay-position {top: 30%!important; }
Best regards,
Mike
Hey Carine,
Yes, we are using the_content but we work on top of it, as every other builder.
You can give them access to your installation and they will help you find the problem.
Thank you
Best regards,
Basilis