Web page builder for marketing specialist.
Meet Quarkly.
Choose from one of many pre-made blocks. Complete design control, supports Grid and Flexbox. Unlimited customisation possibilities, no-code tools of a classic editor
Create Project
Ultimate control over the design.
Primitives
Text, Image, Box — the most basic components similar to HTML tags.
Themes
Create a professional-looking design easily by using themes.
Extended Styling
Give your website the edge it deserves with innovative layouts, engaging animations, and transforming effects.
Adaptive design
Fine-tune your adaptive design
Components
Choose an element or elements on the page or Layer panel, convert them into a component, and add copies to the page for seamless inheritance of all properties.
Ready-made Content
You can also add ready-made blocks: maps, videos, pop-ups and much more.
Customizing design with breakpoints
You can make sure your site is mobile-friendly by designing different solutions for elements at breakpoints.
Adding and editing breakpoints
In the project theme, you may want to add custom breakpoints or edit existing ones.
Drag'n'Drop
Have complete control over arranging elements on the page — drop them, nest them, or move them to your desired location.
Multiselect
Use the multi-select feature to apply styles, move, remove, or perform other actions on multiple elements.
Text editor
You can link certain passages of text, make them bold or italic, or both. You can choose the font face, size, and color as well.
Deep select
Navigate the hierarchy of elements with a double click. Hold down Ctrl on Windows or Cmd on MacOS to dive deeper.
Support of Flexbox and Grid
Quarkly supports the most modern methods of frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the appearance of an element, such as changing its behavior on hover, just enable "hover" and set up the desired props.
Google Fonts Connection
Give your website a more vibrant look by using fonts from a library that contains over 990 font families.
Unsplash images
Quarkly is integrated with Unsplash, a high-quality image stock that makes it easy to find and use great photos.
Props panel
Enjoy a friendly interface with categorized styles and useful properties.
Layout
This is where you can locate element display properties.
Typography
Check out this section to take advantage of text style properties.
Indents
To configure margins and paddings, open these settings.
Background
Here you'll find some props to help you set up element backgrounds.
Borders
Here you can adjust borders and border radius.
Position
With this category, you can fine-tune element position and z-index settings.
Transition
This property makes an element transition smoothly from one state to another.
Transform
This property gives you the power to transform your element in a variety of ways, like rotating or zooming.
Development capabilities.
Supercharged.
Create custom React components using the code editor
In the Quarkly code editor, you can create your own React components and add them to the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules to your component with ease, if needed.
SEO
Optimize your site to promote it on search engines.
Export CRA
Easily complete or host your project on your server by exporting it into an archive with a create-react-app project.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
With just a few clicks, export your projects to Gatsby, a well-known static site generator.
Pushing commits to your GitHub repository
You can establish a GitHub repository for your project and submit updates there.
Publication on Netlify
Publish your site on Netlify when it's ready. A technical domain will be generated automatically, for instance: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The editor displays all the entities of the page.
Debugger
Monitor component code and page errors using the debug console.
Tooltips in the code
Start typing and the editor will correct you if you don't know how to spell a particular property.
Synched pages and code editor
Any adjustments you make to the pages will also be reflected in the code, and vice versa.
Remarkable opportunities for business.
Collaboration
Work on projects with your teammates using the Quarkly collaboration tool, just send them an invite.
Semantic tags
Any element can serve as a tag. Simply select the "as" property value you require.
Schema.org
You can give elements the desired attributes through the code editor.
Image ALT
This is an individual property that belongs to the “Image” element.
Favicons
You can install different icons for different devices, and you can also set a unique background color for Windows 10.
Open graph and meta tags
These settings will help your website look its best on social networks and in search engines.
User-friendly URL
It's a good idea to use human-readable URLs to improve your site's search engine optimization.
Robots.txt and sitemap.xml
These files are there for you to use. But you can change them and add to them as you see fit.
Web page builder for marketing specialist.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project