Hi,
Just make sure that the custom class is only added to the third odd items.
Shall we close this thread then?

Best regards,
Mike

Hi,
Glad we were 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

Hi,
Thanks for the screenshot, it looks like you are using the ALB for your single posts and currently the post body is a single column and you want to add a 1/5 column on both sides to reduce the post content width, but instead of editing each post you could use css.
So your two empty 1/5 columns would be about 40% of the page, so we will set the page width to 60% and we will have it only work on screens larger than 1024px.
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (min-width: 1024px) { 
.responsive #top.single-post .container_wrap_first > .container {
	max-width: 60%;
}
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.
feel free to adjust to suit.

Best regards,
Mike

Hi,
To remove the sidebar please see the options at Enfold Theme Options ▸ Sidebar Settings and for the footer, it looks like you using a footer page at Enfold Theme Options ▸ Footer if you are using a footer page then the regular footer won’t show.
If this doesn’t help please include an admin login in the Private Content area so we can examine closer.

Best regards,
Mike

Hi,
Yes the odd items will not center on mobile, this is not the intended behavior of two columns on mobile, we may be able to help you customize for this behavior but you will need to manually do this for each odd item on each page, this is why I asked if this is the final design for the page or if you will be adding more items, because if you add more items you will need to remove the customization to center the odd items, I can show you how so you can do it to your other pages, or do you want to leave them like they are?

Best regards,
Mike

Hi,
Glad that we could help, you can easily add more pages to the Freelancer demo, you can add new blank pages and add the elements you want or you can duplicate your homepage and change the images and text to suit:

For payments you can use the free version of WooCommerce, and there is a free version of Bookings for WooCommerce – Schedule Appointments, I have not used this plugin but you could try it.

Best regards,
Mike

Hi,
Glad to hear that you find this helpful, thanks to Guenni007 for pointing out that the needed css may not always be loaded correctly, so I added the css into the shortcode and I changed the date attribute to include a time so you can better choose a start date & time. I also added a format attribute so you can choose what will show, like the “Smallest time unit” and “Largest time unit”
So the shortcode to use on the page is now like this: [custom_countup date=”2024-03-01 00:00:00″ format=”weeks,days,hours,minutes,seconds” color=”#000″ background=”#f8f8f8″] you can remove the time units that you don’t want to show.

But please note that if you only show hours & days, the day element will only show up to 7 days even if you have the week element hidden, so you will not see “13” days, the same is for the calculation on all of the elements. This is the new code:

function wp_custom_countup_shortcode($atts) {
    $a = shortcode_atts(array(
        'date' => '2020-01-01 00:00:00',
        'color' => 'black',
        'background' => 'white',
        'format' => 'weeks,days,hours,minutes,seconds', 
    ), $atts);

    $uid = uniqid('countup_');
    wp_enqueue_script('jquery');

    $formatParts = array_map('trim', explode(',', $a['format']));
    $htmlParts = array();

    foreach ($formatParts as $part) {
        if (in_array($part, ['weeks', 'days', 'hours', 'minutes', 'seconds'])) {
            $htmlParts[] = "<span class='av-countdown-cell av-align-center' style='color: {$a['color']};'><span class='av-countdown-cell-inner' style='background-color: {$a['background']};'><span class='av-countdown-time {$part}'></span><span class='av-countdown-time-label'>" . ucfirst($part) . "</span></span></span>";
        }
    }

    $html = "<div id='{$uid}' class='av-countdown-timer-inner'>" . implode("\n", $htmlParts) . "</div>";

    $serverTimeAtPageLoad = current_time('timestamp', true) * 1000;

    $jsParts = [];
    foreach ($formatParts as $part) {
        $jsParts[] = "'{$part}': Math.floor(" . ($part == 'weeks' ? "distance / (1000 * 60 * 60 * 24 * 7)" : ($part == 'days' ? "(distance % (1000 * 60 * 60 * 24 * 7)) / (1000 * 60 * 60 * 24)" : ($part == 'hours' ? "(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)" : ($part == 'minutes' ? "(distance % (1000 * 60 * 60)) / (1000 * 60)" : "(distance % (1000 * 60)) / 1000")))) . ")";
    }

    $html .= "<script>
                jQuery(function($) {
    var countUpDate = new Date('{$a['date']}').getTime();
    var serverTimeAtPageLoad = {$serverTimeAtPageLoad};
    var x = setInterval(function() {
        var now = new Date().getTime();
        var elapsedTime = now - serverTimeAtPageLoad;
        var serverNow = serverTimeAtPageLoad + elapsedTime;
        var distance = serverNow - countUpDate;

        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        var weeks = Math.floor(days / 7);
        days -= weeks * 7; 

        var timeParts = {
            'weeks': weeks,
            'days': days,
            'hours': hours,
            'minutes': minutes,
            'seconds': seconds
        };

        Object.keys(timeParts).forEach(function(key) {
            $('#{$uid} .' + key).text(timeParts[key]);
        });
    }, 1000);
});
</script>";

    $html .= "<style>
    .av-countdown-timer-inner { display: table; width: 100%; table-layout: fixed; }
    .av-countdown-cell { display: table-cell; }
    body .av-align-center { text-align: center; }
    .av-countdown-cell-inner { display: block; vertical-align: baseline; border-style: solid; border-width: 1px; margin: 2px; padding: 20px; }
    .av-countdown-time { display: block; font-size: 40px; line-height: 1em; font-weight: 100; text-decoration: none; }
    .av-countdown-time-label { display: block; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; line-height: 1.65em; }
    @media only screen and (max-width: 767px) {
        .responsive .av-countdown-cell-inner { padding: 12px 7px; }
        .responsive .av-countdown-time { font-size: 30px; }
        .av-countdown-time-label { text-transform: none; }
    }
    @media only screen and (max-width: 989px) {
        .responsive .av-countdown-cell-inner { padding: 10px 10px; }
    }
    </style>";

    return $html;
}
add_shortcode('custom_countup', 'wp_custom_countup_shortcode');

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hi,

Glad that we could help.
If you have any further questions please open a new thread

Best regards,
Mike

Hi,
This was caused by a server setting, if it was caused by the theme we would be able to reproduce this. Unfortunately we don’t have any other ideas to assist you with your specific server issue.

Best regards,
Mike

Hi,
Ok, earlier you wrote that you couldn’t create it on your staging site.

Best regards,
Mike

Hi,
Thanks for the links, both go to the same page, so it seems that your Maintenance Mode option is disabled, if you include a admin login in the Private Content area we would be happy to examine closer.

Best regards,
Mike

Hi,
Glad that you have sorted it out using width: 100vw; height: 100vh
The javascript option above only works on same domain iframes
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,
Ok, since you have it installed you are certainly correct, I have not looked at WPFC for quiet a while, nonetheless I think you get my general points about issues when you have multiple things minifing, compressing, & merging the same files, it’s just something to keep in mind.
Anyways glad that this is 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,
Thanks for the login, I see that your Advanced Layout Builder post has a three image easy slider element and I believe this is an example of what you want to add to plain WordPress posts, so I cloned one of your plain posts as an example, linked below.
Then I used the shortcode wand to add a slider:

when it opens it looks just like the ALB element, just add your images like normal:

when you save the element you will see the shortcode:

then save your page, on the frontend you will see the slider:

Please give this a try.

Best regards,
Mike

Hey calebcuster,
Unfortunately the Animated Countdown element datepicker will not allow you to choose a past date so this will not work, the post that you linked to was from 2015.
Instead try this shortcode count up clone, add this code to the end of your child theme functions.php file in Appearance ▸ Editor or if you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

then add this code and save.

function wp_custom_countup_shortcode($atts) {
    // Extract shortcode attributes
    $a = shortcode_atts(array(
        'date' => '2020-01-01', // Default date
        'color' => 'black', // Default font color
        'background' => 'white', // Default background color
        'offset' => '0', // Default timezone offset in hours
    ), $atts);

    $uid = uniqid('countup_');

    // Enqueue jQuery if it's not already included
    wp_enqueue_script('jquery');

    // Output HTML
    $html = "<div id='{$uid}'  class='av-countdown-timer-inner'>
                <span class='av-countdown-cell av-align-center'><span class='av-countdown-cell-inner' style='color: {$a['color']}; background-color: {$a['background']};'><span class='av-countdown-time weeks'></span><span class='av-countdown-time-label'>Weeks</span></span></span>
<span class='av-countdown-cell av-align-center'><span class='av-countdown-cell-inner' style='color: {$a['color']}; background-color: {$a['background']};'><span class='av-countdown-time days'></span><span class='av-countdown-time-label'>Days</span></span></span>
<span class='av-countdown-cell av-align-center'><span class='av-countdown-cell-inner' style='color: {$a['color']}; background-color: {$a['background']};'><span class='av-countdown-time hours'></span><span class='av-countdown-time-label'>Hours</span></span></span>
<span class='av-countdown-cell av-align-center'><span class='av-countdown-cell-inner' style='color: {$a['color']}; background-color: {$a['background']};'><span class='av-countdown-time minutes'></span><span class='av-countdown-time-label'>Minutes</span></span></span>
<span class='av-countdown-cell av-align-center'><span class='av-countdown-cell-inner' style='color: {$a['color']}; background-color: {$a['background']};'><span class='av-countdown-time seconds'></span><span class='av-countdown-time-label'>Seconds</span></span></span>
             </div>";

    // Adjust the current time for the timezone offset
    $offsetMilliseconds = $a['offset'] * 3600 * 1000; // Convert hours to milliseconds

    // JavaScript to update the countdown
    $html .= "<script>
                jQuery(function($) {
                    var countUpDate = new Date('{$a['date']}').getTime();
                    var x = setInterval(function() {
                        var now = new Date().getTime() + {$offsetMilliseconds}; // Adjust for timezone offset
                        var distance = now - countUpDate;
                        var weeks = Math.floor(distance / (1000 * 60 * 60 * 24 * 7));
                        var days = Math.floor((distance % (1000 * 60 * 60 * 24 * 7)) / (1000 * 60 * 60 * 24));
                        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                        
                        $('#{$uid} .weeks').text(weeks);
                        $('#{$uid} .days').text(days);
                        $('#{$uid} .hours').text(hours);
                        $('#{$uid} .minutes').text(minutes);
                        $('#{$uid} .seconds').text(seconds);
                    }, 1000);
                });
              </script>";

    return $html;
}
add_shortcode('custom_countup', 'wp_custom_countup_shortcode');

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
Then use this shortcode on the page to display:
[custom_countup date="2024-03-10" color="#fff" background="#000" offset="-4"]
the first attribute is the date in the past, then the font color, then the cell background color, and then the time offset, this is the difference between your server time and the time you want to use, since our servers are not always in the same timezones as we are. The default is zero if you don’t add this attribute.
This is the result:

This uses the same classes as the countdown element so the style is pretty close, here is what the two together look like:

Best regards,
Mike