analogwp / analogwp-templates Goto Github PK

Optionally, remove all typography data from Elementor data during import.

We can add a button for exporting and importing tokens, the same way we do for templates?

Accordingly it should say All text Sizes All Heading styles, etc

As discussed at slack, the two panels are an overkill. Lets have one single for the text and name it Body Text

Right before import process, show a notice if the target template contains Watermarked Images.

• Create has_watermarked_images property for API on source site.

Each column has a default widget spacing (vertical). User can override per column. This is also a global option at elementor settings. Default is 20px.

Can we have this option as well as "default spacing between widgets in columns" [ ]px

I think we can fit it under the style tab as well, under Column Gaps.

Right now, the Font family for the Headings does not have to cascade from somewhere. Can we add a Default Heading Font control? Users will still be able to override families if needed from the h1-h6 controls. Mockup follows:

This is a huge task. Basically tweaking over 80 Elements that have a "Typography" control. We inject a Size dropdown.

I have created a database of all the widget, and the related parts of them where they need the size added.

https://www.notion.so/analogwp/Elementor-Components-276fc09343d541298cfda0de9775307e

Update plugin design, as per Figma design.

When an element's style is saved as global style, all future and previous versions of widgets in use across all posts, will be overridden with this new style.

In @JohnPixle's words:

if you want to make a global change to ALL instances, you just need to update the styling of one, and then they will cascade

As discussed, we can have an export CSS thing to automatically download the css. If we can offer the option for min or unmin it would be good. I think users would like to explore and play a bit with the code.

I think we missed the controls for the default value. The default value for the column gap must be configurable for sure.

There are a couple of more widgets that we should remove typography from regarding this: https://docs.analogwp.com/article/544-remove-styling-from-typographic-elements

• accordion (title and content)
• toggle (title and content)
• contact form
• buttons
• Testimonial content

Shall we maintain a list of all the widgets with typography? Let me know how I can help.

The idea is about adding a custom set of Typography and spacing controls under the Page Settings panel of the Elementor Editor.

These settings will apply on the whole layout, eliminating the need of manually adding styles to Typographic elements.

The panels we are going to introduce are:

- Headings Typography Typography styles for headings h1-h6
- Body and p typography Typographic styles for body and p
- Sizes Targets Elementor's built-in sizes small-medium-large-XL-XXL
- Column Gaps Targets Elementor's built-in column gap controls.
- Colours Gives options for a number of custom labeled color codes.

Tokens

A collection of custom settings on those values is referred to as a token. Tokens can be saved and applied to any template. Additionally, a token can be applied globally.

Token = Page styling settings { Typography + Sizes + Column Gap + Colors }
Assigning a token on a page will auto-populate the setting values with the ones of the token.

A video is worth a thousand words: https://www.useloom.com/share/3d96c0a5b07345e5a9f8f8208bcb96b4

For beta testing the page styling features, we need to add a checkbox at ate settings page along the following lines:

I think the beta feature would be good to be one at a time, so it is good to put a read more link to a post where we explain the feature.

There is a slight gap between iFrame preview is shown and leaves wondering if something is wrong there. To avoid, lets consider adding a loading indicator before preview is shown.

I think we need to add a "Read more" link at the "Usage data Tracking" checkbox. Same style as we do with the text link under the typographic strip-off below.

Here is the doc: https://docs.analogwp.com/article/547-what-data-is-tracked-by-the-plugin

Different sizes need different line height. Let's please add those under the panels of headings and Text sizes.

We could probably use a collections view. Where templates can be divided into a set of categories for easy filtering and pre-personalized distribution.

This can definitely wait until we have a large collection of templates but would definitely like to make some progress on it feature-wise if we are going to include it.

Could probably use react-waypoint here, to avoid loading extra images and save bandwidth.

I dont know where to put it and is not urgent.. But it would be great to have a custom default value at the spacer element./

Can we have the page auto refresh? Or find a workaround?

Text sucks, but it's a great way for discovery

Apart from the email address at the settings page signup form, the data that is pulled into mailchimp includes the first name and last name of admin user. Can we isolate it to only the email address?

Should help in cases where a plugin is necessary to get a template working.

This has two parts actually.

1. Declutter with tooltips. Let's use Elementor's native popup pattern for this.
2. Tweak the layout AFTER a token has been applied through the page. Along with the "make this stylekit global" checkbox that appears after a stylekit has been applied on the page, let's please make the button as per following screenshot. We need to emphasize the Save As thing.

We need to add a tooltip trigger next to the labels. We can either use the info one or the triangle one. Your call.

Figma: https://www.figma.com/file/WewTsQAjGvzRQahddcH0KK6m/Analog-Templates?node-id=212%3A2053

Text for tooltips

• Style Kit: A style kit is a collection of all the custom styles added at page styling settings. Your style kit is saved every time you update your layout.
• Save Styles as Style kit: Save all the styles as a Style Kit that you can apply on other pages or globally. Please note that only the custom styles added in the styles page are saved with the stylekit.
• Reset All Styling: Resets only the Styles that have been added at the Style panel
• Export the custom CSS: Export styles as custom CSS text.

tooltip Trigger svgs:

svg triggers.zip

As discussed, let's do this, its easier to grasp.

These annoying scrollbars makes the whole UI look stupid.

To avoid multiple imports at once.

I see that you did the Size cpontrol UI with sliders, I initially liked it but I think we should better replace with the solution below:

The reason is because these sizes are typographic sizes only, and at smaller sizes, the line height will need to be adjusted, as well as other properties. Can we revert back to the mockup?

We will have plenty of chances to use sliders.

hey @ram proud to report my first bug: https://www.useloom.com/share/af2c58fe5af74db79a9e6bd9e73c84d9

To replicate, head to Settings > Preview a template > Insert layout > Import to library.

Add a separate tab/view for Design Systems in Elementor.

One important characteristic of a consistent design is the wise use of a limited number of typographic ontologies in terms of styling and size.

Looking at any conventional elementor layout we see that there is a common usage pattern of text entities that can be categorized through segmentation.

A first basic approach would be to roughly create the following groups:

• Headings (h1-h6)
• Primary text (main text)
• Secondary text
• Meta (=h6 in terms of style)
• Secondary Meta

Secondary Text

• elementor-post__excerpt
• elementor-image-box-description
• elementor-icon-box-description
• elementor-image-box-description
• elementor-blockquote__content
• elementor-price-list-description
• elementor-author-box__bio
• elementor-testimonial-content
• elementor-tab-content
• elementor-flip-box__layer__description
elementor-cta__description

Meta

• Overline
• elementor-countdown-label
• elementor-testimonial__name
• elementor-testimonial-name
• elementor-blockquote__author
• Progress bar title (elementor-title)
• elementor-icon-list-text
• elementor-counter-title
• elementor-tab-title
• elementor-field-label
• elementor-post__read-more
• Post meta (single)
• elementor-post__badge

Secondary Meta

• elementor-post__meta-data
• elementor-testimonial-job
• elementor-testimonial__title
• elementor-progress-text
• elementor-progress-percentage

What we can do is to optionally provide a deeper level of stying of those typographic elements
at the page settings. For example, if we add secondary text typography and provide controls, we can then target the above classes respectively.

Again as discussed here: https://codestag.slack.com/archives/CEZU5M8G7/p1555406406042400 can we avoid the insert button and have the style kit take effect as soon as the dropdown selection occurs?

https://www.loom.com/share/5c5d9eae3a1b43a48f95003d35224f9a