How to Use Source Code Widget

element pack

How to Use Source Code Widget

The people who belong to a web community know well what is the importance of source code. In web development, developers help each other providing sources code. If you want to share and show your source code to others, you can use our Source Code Widget. This widget will take you to the right way.

I’ll include step by step instructions and detailed pictures to help you get started.

To Insert Widget

Inserting widget, it is just a matter of drag and dropping. As you see in the screenshot above.

Content Tab

Using the Content tab, you’ll be able to make a layout of a particular part of a website. And in this regard, some handy sections in the tab will assist you a lot.

Source Code Content

There are a few controls. Select Style is here to help you choose the style like Dark, Coy, Funky, etc. If you want your user to copy the code by one click, Copy Button control is completely fit for that.

Especially, from the Select Language control, you can determine that the code of which language(PHP, C, C++, etc.) along with markup language(HTML) will be shown.

Look at the Source Code, this field will allow you to write code or paste manually.

Therefore, go to the Content tab > Source Code Content.

Style Tab

Now, let’s work with Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you require to design. 

Styling with the Style tab in Elementor will always give you a fantastic experience.

Let’s have a look.


Along with the default design, go to the Style tab > Items > and check all the controls.

Video Assist

In conclusion, it seems that you’ve read this article and found very useful. If you want to know more about the widget, you can watch the video on Source Code Widget by Element Pack and also go to our demo page.

About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.

A first-ever all-in-one web solution with essential widget, extensions, and features for Elementor WordPress.

Your complete web development partner.


Copyright © 2022 BdThemes.
All Rights Reserved. Site built with Element Pack & Rooten Theme.

Be cool in Summer with up to 40% OFF on our product | Coupon: SUMMERSALE

Ready to buy Element Pack Pro?

Don’t miss 230+ essential Elementor widgets and 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest to us how to improve

Up to 40% OFF

Grab the best summer deal and enjoy awesome Elementor web design tools in your hands now! This is a limited-time offer so get it before time runs out.