How to Use the Source Code Element Addon by Master Addons #
The Master Addons Source Code Widget is the easiest way to display programming codes like HTML, CSS, PHP, Java, or JavaScript directly within your post or page. It enables you to showcase code snippets with professional syntax highlighting and includes helpful features like a Copy to Clipboard button, making it easier than ever to present your work.
Using the Source Code Element Addon, you can:
- Select your code language from 50+ different programming code structures.
- Choose from 8 pre-built themes for syntax highlighting.
- Easily enable or disable features like the Copy to Clipboard button and Line Numbering.
- Customize the text, position, and visibility of the Copy button.
- Fully control the styling, borders, and dimensions of the code container.
So, let’s see how to do that.
Adding the Source Code Element in Elementor #
Follow these steps to add and customize the Source Code Element Addon on any page of your website.
Step 1: Create or Edit a Page #
From your WordPress dashboard, go to Pages → Add New to create a new page. You can also select an existing page and click Edit.
Next, click the “Edit with Elementor” button. This will open the Elementor editor, a visual page builder where you can drag and drop elements easily.
Step 2: Find the Source Code Element Addon #
If you have installed Master Addons properly, you will get an element called “Source Code.”
Drag this element inside your editor. You will see the default Source Code preview appear on your page, and you can now start your customization journey.
Step 3: Customize the Source Code Settings #
After placing the addon, you’ll find the customization sections in the left-hand panel, primarily under the Content and Style tabs.
Content Tab #
This is where you add your code and configure its functionality.
Source Code: #
- Code: Choose the programming language for syntax highlighting. The list is extensive, including HTML, CSS, PHP, JavaScript, Python, C++, React JSX, YAML, and many more.
- Theme: Select the visual style for your code block: Default, Dark, Funky, Okaidia, Twilight, Coy, Solarized light, Tomorrow, or Custom.
- Source Code: Enter or paste your code snippet here. You can also use the Edit with AI feature.
- Enable Copy Button: Toggle this to add a “Copy” button to the code block.
- Enable Line Number: Toggle to show or hide line numbers.
- Button Visibility: If the copy button is enabled, choose when it appears: Always or On Hover.
- Button Position: Set the button’s location: Top Right Corner or Bottom Right Corner.
- Copy Button Text: Set the text for the copy button (e.g., “Copy”).
- After Copied Button Text: Set the text that appears after clicking (e.g., “Copied!”).
#
Style Tab #
This is where you control the appearance of the code block and copy button.
Container: #
- Height: Adjust the maximum height of the code container.
- Padding: Control the inner spacing of the code container.
- Margin: Control the outer spacing of the code container.
- Border Type: Choose a border style: Default, None, Solid, Double, Dotted, Dashed, or Groove.
- Border Radius: Set the rounded corners for the container.
Button: #
- Typography: Control the font settings for the button text.
- Text Color: Set the color of the button text.
- Background Color: Set the background color of the button.
- Padding: Adjust the inner spacing of the button.
- Border Type: Choose a border style for the button: Default, None, Solid, Double, Dotted, Dashed, or Groove.
- Border Radius: Set the rounded corners for the button.
Step 4: Save and Publish Your Page #
Once you’ve customized everything to your liking:
- Click the “Publish” button (if it’s a new page) or “Update” (if editing an existing page).
- Visit your page on the frontend to preview the Source Code block live.
