Turn Your Minimum Efforts Into Maximum Results
  • Products
      Explore package advantages
  • Support
  • Blog
  • Contact

Table Of Contents

How to use Source Code Widget by Element Pack Pro

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

Inserting Widget

Open your page in the Elementor editor, search by the Source Code widget name, then drag and drop it.

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

Find the Select Style (8 styles) Selector, Copy Button, Select Language (32 languages) Selector, Source Code, Line Highlight, and Line Number options.

Hovering over the content, the Copy Button will appear.

Style Tab Customization

Item Section

Go to Style Tab > Items

Find the Height, Border Type, Width, Color, Border Radius, Padding, Margin, and Typography options.

Video Assist

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

Thanks for being with us.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 14-days money-back guarantee.
BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins. This website is powered by Element Pack Pro and Rooten Theme.

Subscribe to newsletter

Get Tips & Tricks, Updates, Fresh Blogs & Offers.
Join Now

Join Thousands of Happy Users

Get Tips & Tricks, Updates, Fresh Blogs & Offers.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge