w3dev

Isaac

<p>Have you ever wanted to alter the way Elementor renders one of its widgets on your website?</p>
<p>Fundamento provides an easier way to achieve this by allowing you to inject extra CSS classes into Elementor’s widgets.</p>
<h3>Usage</h3>
<p>Tell Elementor that you have a new skin available by utilizing the following code in your <code>functions.php</code> file:</p>
<ol>
<li>
<p>Add an action to initialize Fundamento, then add a call to Fundamento’s <code>register_skin()</code> function:</p>
<pre><code>if(is_plugin_active('fundamento/fundamento.php')) {
    function fundamento_init() {
        // create a new Fundamento instance
        $f = \Fundamento\Plugin::instance(); 

        // register a new skin
        $f->register_skin([
            'name'       => 'Red',                                                      // The name of your new skin, as it will appear in Elementor
            'element'    => 'button',                                                      // The elementor element you are skinning
            'is_default' => true,                                                          // optional - should this skin be set by default on all elements of this type
            'css'        => get_stylesheet_directory_uri() . '/skins/button/red.css',   // optional - have Fundamento enqueue an extra css file
            'js'         => get_stylesheet_directory_uri() . '/skins/button/red.js',    // optional - have Fundamento enqueue an extra js file
        ]);
    }
    add_action('elementor/init', 'fundamento_init');
}
</code></pre>
</li>
<li>
<p>Add the selector to your css file:</p>
<pre><code>/* Class will always be .skin-{element}-{name} */
/* Name is transformed to lowercase and spaces are replaced with "-" */
.skin-button-red {
    background: #f00;
}
</code></pre>
</li>
</ol>
<p>Tell Elementor that you have a new padding preset by utilizing the following code in your <code>functions.php</code> file:</p>
<ol>
<li>
<p>Add an action to initialize Fundamento, then add a call to Fundamento’s <code>register_padding()</code> function:</p>
<pre><code>if(is_plugin_active('fundamento/fundamento.php')) {
    function fundamento_init() {
        // create a new Fundamento instance
        $f = \Fundamento\Plugin::instance(); 

        // register a new skin
        $f->register_padding([
            'name'       => 'Standard',                                                    // The name of your padding preset, as it will appear in Elementor
            'element'    => 'section',                                                     // The elementor element you are skinning
            'padding'    => '30px',                                                        // The value and unit of the amount of padding this preset should apply
            'is_default' => true,                                                          // optional - should this skin be set by default on all elements of this type
        ]);
    }
    add_action('elementor/init', 'fundamento_init');
}
</code></pre>
</li>
</ol>


Fundamento

We made it, and we think it's awesome. Give it a try!

What can I say


Have used it every single day since it was released. Easily one of the best development tools when working with Elementor + custom css.


Use it every day on every site.

Fundamento creates the ability to easily add custom skins and padding-presets into your Elementor-based Wordpress website.

Kleor

<p>Content Switcher allows you to <strong>easily insert</strong> into posts, pages and widgets of your website <strong>random numbers, and random or variable contents</strong>. You can use it, for example, to display <a href="https://www.php.net/manual/en/reserved.variables.php" rel="nofollow ugc">COOKIE, ENV, GET, GLOBALS, POST, REQUEST, SERVER or SESSION</a> variables.</p>
<ul>
<li><a href="https://www.kleor.com/content-switcher/" rel="nofollow ugc">Documentation</a></li>
</ul>
<h4>Translators</h4>
<ul>
<li>Andrew – <a href="https://www.webhostinghub.com" rel="nofollow ugc">WebHostingHub</a> (Spanish)</li>
<li>Ogi Djuraskovic – <a href="https://firstsiteguide.com" rel="nofollow ugc">First Site Guide</a> (Serbian)</li>
</ul>
<h3>Plugins from the same author</h3>
<ul>
<li><a href="https://www.kleor.com/commerce-manager/en/" rel="nofollow ugc">Commerce Manager, to sell your products</a></li>
<li><a href="https://www.kleor.com/affiliation-manager/en/" rel="nofollow ugc">Affiliation Manager, to create your affiliate program</a></li>
<li><a href="https://www.kleor.com/membership-manager/en/" rel="nofollow ugc">Membership Manager, to create your members areas</a></li>
<li><a href="https://www.kleor.com/optin-manager/en/" rel="nofollow ugc">Optin Manager, to build your prospects lists</a></li>
<li><a href="https://www.kleor.com/contact-manager/en/" rel="nofollow ugc">Contact Manager, to create your contact forms</a></li>
<li><a href="https://www.kleor.com/easy-timer/en/" rel="nofollow ugc">Easy Timer, to display count down/up timers</a></li>
<li><a href="https://www.kleor.com/device-detect/en/" rel="nofollow ugc">Device Detect, to detect smartphones and tablets</a></li>
</ul>


Content Switcher

Allows you to easily display a random number, a random or variable content on your website.

Fundamento vs Content Switcher