joanballester

<p>This is a plugin that allow you to put a banner (skin, an image and a link) behind the divs in your home page. Initially developed by http://embat.es to use in http://theventan.com, but it’s free to use now.</p>
<h3>Arbitrary section</h3>
<p>None</p>
<h3>A brief Markdown Example</h3>
<p>None</p>


WP Skin @ Home

This is a plugin that allow you to put a banner (skin, an image and a link) behind the divs in your home page.

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.

WP Skin @ Home vs Fundamento