In this documentation, we will show you how to customize the Source Code widget presented by the Element Pack Pro add-on.

Inserting Widget

1. Go to the Elementor Editor Page and Search by the ” Source Code “ widget name.
2. The widget will appear, Check the Element Pack Pro logo on top right corner.
3. Select the widget then Drag and Drop it on the editor page.

The Default view of Widget

Display codes from the console with customizations.

Content Tab Customization

Source Code Content section

Go to Content > Source Code Content

1. Select Style: Ready made presets are available. Select any of them.e.g.: Default, Dark, Coy , Funky, Tomorrow Night etc.
2. Copy Button: Enable the switcher to Copy the button.
3. Select Language: Choose the language for the code. e.g.: HTML markup, CSS, JS, PHP, C, C++, Bash etc.
4. Source Code: Input the source code here.
5. Line Highlight: Refers to the act of applying a background color to a line of text, similar to using a physical highlighter pen on paper.

Hovering over the content, the Copy Button will appear.

Style Tab Customization

Item Section

Go to Style Tab > Items

1. Height: Set the height for the Items to be appear.
2. Border Type: Choose the border type and Set width the select the Color for the border.
3. Border Radius: Make the border corner edges rounded by setting the radius.
4. Padding: Set the padding for the inner space.
5. Margin: Set the margin for the Text.
6. Typography: Set the typography for the text. e.g: Font size, Weight, Line Height etc.

Copy Button

Normal

1. Color: Set the color for the Copy Button.
2. Background Type: Choose the background type color and select the color.
3. Border Type: Set the border type. e.g.: Default, none, double, dashed.
4. Border Radius: Set the border radius.

5. Padding: Set the inner spacing by padding.
6. Margin: Set the margin for outer space.
7. Box Shadow: Make a shadow for the Box.
8. Typography: Choose the typography for the Copy Button.

Hover

1. Color: Choose the text Color for the copy button.
2. Background Type: Set the background type color and select the color.
3. Border Color: Set the border color for the text.
4. Box Shadow: Make a shadow for the box.

Video Assist

Watch the Source Code video tutorial here. Please visit the demo page for examples.

Thanks for being with us.