CP Blocks vs Custom CSS for Elementor

CP Blocks main features: Multiple blocks of code in the users’ websites Integration with the Calculated Fields Form plugin Integration with the Contact Form 7 plugin Allows the insertion of blocks in the website’s posts and pages Constant development including many new blocks … and more features CP Blocks is an easy way to insert cool buttons, styles, scripts, payment / donation buttons and features into your WordPress website without requiring programming knowledge. With CP Blocks you can access many resources like design elements, form’s fields, new features, and more. The use of CP Blocks is very simple, just press the “Insert Block” button in the controls of the “Contact Form 7” or the “Calculated Fields Form” plugin (Screenshots: 2. Contact Form 7 integration and 3. Calculated Fields Form integration), the “Insert Block” button is available beside the “Add Media” button too over the content of the pages/posts (Screenshot: 4. Integration with pages and posts) Some of the free blocks included are: Text Length: To calculate the number of characters in a text Print Form: For printing a form Lorem Ipsum Generator: Lorem ipsum text generator PayPal Donation Button: For inserting PayPal donation buttons Disable Text Selection Hightlighting: Disable the text selection hightlighting on the page Disable Right-click on the Page: Disable the mouse right-click menu Display current date: display the current date on the page Autorefresh page: Autorefresh the page every a specified number of seconds Tooltips: Allows associating tooltips to the form’s elements Grow Effect: Design effect Rounded Button: Button design Animated Border Button: Button design Corner Tab Button: Button design Border Effect Button: Button design Animated Border Button 2: Button design Button With Fold Effect: Button design Corner Tab Button 2: Button design Corner Tab Button 3: Button design Animated Border Button 3: Button design Slide Down Fill Button: Button design Slide Up Fill Button: Button design Slide Left Fill Button: Button design Dark Button With Icon: Button design Dark Button With Icon 2: Button design Beveled Dark Button: Button design Curtain Effect Button: Button design Button With Scaled Icon: Button design Image With Overlaying Testimonial: Information box design Testimonial Card with Icon, Quote and Title: Information box design Testimonial Card with Image, Title and Quote: Information box design Testimonial with Profile Image: Information box design Testimonial Card with Image, Title and Quote: Information box design Testimonial with Quote and Profile Image: Information box design Dark Themed Testimonial with Tile Quote and Profile Image: Information box design Some of the additional commercial blocks are: Words Counter: To calculate the number of words in a text Read CSV File: For reading an online CSV file and use it into form PayPal Payment Button: Inserts a PayPal one time payment button PayPal Subscription Button: Inserts a PayPal recurrent payment button Skrill Payment Button: Inserts a Skrill one time payment button Address Field: Inserts an autocomplete address field integrated to Google Places Prevent framing: Inserts a block to find out if the page is embedded as a frame to other site and will prevent that by redirecting to the correct page without framing Detect HTTP or HTTPS then force HTTPS: Inserts a code block to detect HTTP or HTTPS and then force usage of HTTPS to be sure that the page is loaded over a SSL secure connection. Ad Blocker Alert: Displays a pop-up window if there is an Ad Blocker active in the browser and limits the access to the page’s content in that case. How to insert the blocks? Press the “Insert Blocks” button in the toolbar of the forms builder in the “Calculated Fields Form” (Screenshot: 3. Calculated Fields Form integration), or the toolbar of the “Contact Form 7” (Screenshot: 2. Contact Form 7 integration). The button is available too beside the “Add Media” button in the posts and pages (Screenshot: 4. Integration with pages and posts) CP Blocks opens a popup window (Screenshot: 5. Blocks popup), that includes at top-right the list of blocks categories, and below it, the list of blocks. Selecting a specific category the blocks list is refreshed with their blocks. After selecting a block, its description, assets and insertion options are displayed in the right column (Screenshot: 6. Inserting the block) Pressing the “Insert Block” button the piece of code corresponding to the block is inserted in the website (Screenshot: 7. Block in the CFF form)

Custom CSS for Elementor is a handy tool for writing CSS codes within different devices like Desktops, Tablets & Mobile for Elementor Widgets. It will help you to not bother with writing media queries several times. Custom CSS for Elementor plugin comes with the default media query system. See the plugin’s GitHub repository Custom CSS for Elementor 📢 Big Announcement – After getting several requests we have added live preview mode while styling with CSS. Now you can see the reflection instantly. No hassle of continual preview checks in the front end. Enjoy styling with CSS without any hassle. Required Tools Elementor Free Only 📘 How to Use Custom CSS for Elementor First of all, it’s a plug-and-play tool. You will not get any setting page. So, after installing the Custom CSS for Elementor tool, just navigate to any Elementor Widget editing panel, then jump on the Advanced tab section; you will get a new accordion of Custom CSS for Elementor. Unfold the accordion, and you will get three different fields to write CSS codes for your widgets. If you want to show different designs for different devices, choose the device panels according to your needs. Direction: Edit any Elementor Widget > Advanced Tab > Custom Css for Elementor Note: According to general CSS logic, if you write CSS for a bigger screen (Desktop), it will be automatically implemented on smaller devices chronologically. If you want to change anything for a smaller screen, you have to write different CSS for smaller screens. In our Custom CSS for Elementor addon, if you want to add global CSS, just write CSS code in the desktop/global panel, and the code will be automatically implied to the other screen. If you want to change the CSS for Tablets, you have to write different CSS in our Tablet CSS panel. And same goes for mobile devices. If you want to change the CSS for Mobile devices, write different CSS in the Mobile CSS panel of our tool. Don’t forget to check the Screenshots below to get a clear overview of the tool. ❓ Why You Need This If you know the Elementor’s plenty of Dom creation issues, you will know the pain. But you can reduce so many bloated codes if you use simple CSS. But writing CSS for various devices, you need to be an expert on CSS as you have to deal with the Media Query every time. But our Custom CSS for Elementor addon will be the savior for you. We are handling the pain part of yours. Moreover, to add custom CSS, you don’t need to go to the Additional CSS of the theme customizer if you are using Elementor Free to manage your site as we build this tool for you. It’s just an advanced version of the Elementor Pro’s Default Custom CSS panel. 🔥 What Are the Key Features of Elementor Custom CSS Plugin As the essential tool, we have shared with you. But in short, here are the other features of the custom CSS addon for Elementor, It’s a lightweight plugin that will use Elementor CSS files to enqueue custom CSS. Won’t generate any new CSS to reduce server requests. You can face lacking options during change style through style control, but our Custom CSS for Elementor Addon will allow you to write CSS to overcome these lackings. We prepared this tool by maintaining a World-class safety methodology. Also, we have run the malicious test, and it passed all the tests. It works with any Elementor widget and other third-party Elementor addons widgets too. 💻 How to Change Breakpoints in WordPress To modify breakpoints for tablet and mobile devices in WordPress, you can add custom code to your theme’s functions.php file. Breakpoints determine when your website layout switches between different screen sizes, ensuring optimal display across devices. Changing Tablet Breakpoint To adjust the breakpoint for tablets, follow these steps: Open your WordPress theme’s functions.php file. Add the following PHP code snippet: add_filter( 'custom_css_for_elementor_breakpoints' , function( $default_breakpoints ) { $default_breakpoints['tablet'] = 768; // change this value return $default_breakpoints; }, 20, 1); Save the file. Changing Mobile Breakpoint To customize the breakpoint for mobile devices, use the following instructions: Navigate to your theme’s functions.php file. Insert the following PHP code: add_filter( 'custom_css_for_elementor_breakpoints' , function( $default_breakpoints ) { $default_breakpoints['mobile'] = 425; // change this value return $default_breakpoints; }, 20, 1); Save the changes. By adjusting these breakpoints, you can fine-tune your website’s responsiveness and ensure a seamless viewing experience across various devices. PRIVACY POLICY We are not collecting any of your personal data or any kind of logs. So there will be no chance to violate your privacy through this plugin. For Technical Support We all know nothing is perfect. But we all make everything perfect for everyone by sharing and caring. If you find any bug before giving us a negative rating, please report us here. We will definitely try to resolve your issue asap. Without your support, we cannot run this project so longer smoothly. ABOUT THE MAKER I am Sayedul Sayem, a Bangladeshi full-stack WordPress developer and free and open source enthusiast. As Custom CSS for Elementor is an open-source project, you can encourage me by giving me a 5* rating. Nothing also, you can contact me on my LinkedIn for consultation or just to say hello. I love talking to new people. So don’t hesitate.