Web page maker for marketing managers.
Meet Quarkly.
Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Use pre-made React components or build your own. Choose from one of many pre-made blocks
Create Project
Ultimate control over the design.
Primitives
A website is made up of fundamental elements similar to HTML tags. For example, Text, Image, and Вох.
Themes
Create a professional-looking design easily by using themes.
Extended Styling
Boost your websites' functionality with distinctive layouts, animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
Components are reusable design elements. To create a component, select an element or group of elements on the page or in the Layers panel and group them into component. Add copies of the component to the page, and they will inherit all their properties from the original.
Ready-made Content
Add videos, pop-ups, customized blocks, and much more to your site.
Customizing design with breakpoints
By employing various design solutions for elements at breakpoints, your website functions flawlessly on mobile devices.
Adding and editing breakpoints
You can add custom breakpoints or edit existing ones in the project theme.
Drag'n'Drop
Move elements around, place them however you want on the page, or nest them in other elements.
Multiselect
Use the multi-select feature to apply styles, move, remove, or perform other actions on multiple elements.
Text editor
A portion of the text can be changed by applying any style, making it bold or italic, linking to it or making it a span.
Deep select
You can go up and down the hierarchy of elements using the double click. If you want to dive into the hierarchy, on Windows hold down the Ctrl key and on MacOs the Cmd key.
Support of Flexbox and Grid
At Quarkly, we keep up with the up-to-date frontend coding approaches.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the element appearance, for example, the way it behaves on hover, enable "hover" and apply the desired props.
Google Fonts Connection
To make your site design look more professional go and use a library of more than 990 font families.
Unsplash images
Make use of Unsplash, one of the most popular free image stocks where you can select images directly from the Quarkly interface
Props panel
This offers categorized style and functional properties.
Layout
This section lets you control how elements appear.
Typography
Go to this section to find text style properties.
Indents
Open these settings to configure margins and paddings.
Background
This section offers props for setting up element backgrounds.
Borders
Here you can configure border and border radius.
Position
You can change the element position and z-index settings in this category.
Transition
You can ensure a smooth transition between states of an element with this property.
Transform
Use this property to seamlessly transform your element, for example, by rotating or zooming.
Development capabilities.
Supercharged.
Create custom React components using the code editor
In Quarkly, the code editor provides the ability to build unique 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
You can easily import modules from NPM to your component.
SEO
Optimize your site to promote it on search engines.
Export CRA
You can export a create-react-app project into an archive file that you can host on your own server.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
Export your projects to Gatsby, a highly regarded static site generator.
Pushing commits to your GitHub repository
Want to add modifications to a GitHub repository you've created for your project? Well, you can. With Quarkly.
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
You can monitor all the entities on the page in the Quarkly editor.
Debugger
You can track issues in the component code and pages with the aid of our debug console.
Tooltips in the code
As you type, the editor will suggest possible matches to the property you're looking for.
Synched pages and code editor
The code and the pages are merged, so your changes to the code are visible in the page and vice versa.
Remarkable opportunities for business.
Collaboration
Utilize the Quarkly collaboration tool to work on a project with your teammates; all you need to do is invite them.
Semantic tags
Any element can serve as a tag. Simply select the "as" property value you require.
Schema.org
In the code editor, you can assign necessary attributes to elements.
Image ALT
A separate property belonging to the “Image” element.
Favicons
Install distinctive device icons and a customized Windows tile backdrop color.
Open graph and meta tags
These settings will help your website look its best on social networks and in search engines.
User-friendly URL
Enhance your site's visibility in search engines and ease of use with user-friendly URLs.
Robots.txt and sitemap.xml
These files are created automatically. But you can edit them if needed.
Web page maker for marketing managers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project