Source Code Element

The Master Addons Source Code Widget is the easiest way to display programming codes like HTML, CSS, PHP, Java or JavaScript. You can display source code in your post or page with just a few clicks, making it easier than ever to showcase your work.

Before jumping into the text documentation, enjoy the following Video guideline.

How to add Source Code Element?

If you have installed Master Addons properly in your website, you will get a element called “Source Code“, Just drag this element inside your editor and you will get the default Source Code preview.

Source Code element

Default Source Code for Elementor

After dragging the element, you will get something similar layout like the following screenshot. Now you have to start your customization journey. 

Source Code for elementor

Source Code Content Modification

There are 50+ different types of programming code structures available. First, select your code, then select the perfect Theme based on your requirement. You will get total 8 pre built theme available.

Then inside the “Source Code” text field, place your code. By default the “Copy To Clipboard” button is enabled, if you like to disable the button and line number, just use the switcher and disable it.

You can also control the button visibility as always or on hover, then control the button position on “Top right corner, or “Bottom right corner”. 

The final part is button text customization. You have the control to set your desired button text and after copied button text. Feel free to change it as you need. 

Container Customization for Source Code

Define the Source Code container height, Padding, Margin, Border, Border Radius from this option. You can individually set the different border-radius to make it more stylish. 

Copy to Clipboard Button Customization

Change your button typography, text color, Background Color, Padding, Border, Border Radius from this button customization area. With the help of color picker, you can easily define your desire color for text and BG. 

If you still have any problems while working with this element, feel free to Contact Us.