Please provide steps for having same layout frontend as in backend

[JacobDK]

@Louis I am very impressed with Cwicly and the Components-feature just released.

But I am still so frustrated with the level of documentation and lack of helpfulness in using that awesomeness Cwicly provides. I am not bitter or anything, but I am very disappointed.

Right now - I just want to know the steps so that something as basic as having the frontend look the same as in the backend - and posting content becomes a reasonable experience.

For a simple blog post, a page and a custom post type, I need steps to achieve a pleasant post creation experience. Would someone from the team please help ?

These posts do not help me at all:

Sharing stylesheet between frontend and backend (post editor) - General - Cwicly

Making Posts editor client friendly - General - Cwicly

Support please … General helpfulness …

[StrangeTech]

@JacobDK

For a simple blog post, a page and a custom post type, I need steps to achieve a pleasant post creation experience. Would someone from the team please help ?

Hi @JacobDK, I’m sure one of the team will respond to this, in the meantime, I am wondering if you could provide a bit more information about what is not working for you in terms of backend vs. frontend styling.

I know you said those previous posts didn’t help, so as they contain several messages that show the basic strategy that Cwicly allows you to share the styles in both places, I want to make sure that you get what you need.

@StrangeTech

When you style the post content block within a template for a particular post type, those styles are automatically applied to the post editor for that post type! This works with relative styles as well, which makes it incredibly powerful!

So no need to add any custom stylesheets or use any third-party tools to style the admin interface, just apply your styles in Cwicly directly to the post content block and they are reflected in the editor, simple.

In summary, any styling you want on the backend and frontend for post content, you can apply to the Post Content block within your template. This even works with global classes applied to the Post Content block.

This post provides some screenshots showing the process and general tips for achieving commonly used styling (such as a max-width and centring).

Making Posts editor client friendly

Hi @smontreuil , As I happily found out myself, through doing exactly what @Louis described, yes, any styles you apply to the post content block are indeed reflected perfectly in the admin interface. This allows you to customise each post types editing experience individually to reflect the front-end display. Cwicly global styles are also automatically applied to the editor, so you don’t need to do anything special or extra to make that work. One trick that I recommend that really worked wel…

If there is something still unclear or any steps that you are missing, if you post your specific needs, I am sure they will be addressed and that will help the Cwicly team also improve the documentation.

[JacobDK]

This is not working - and if I try with a Page-template it is not working either.

But I need a step-by-step as with many other awesome features. For filters there is only a video showcasing a couple of categories … For the awesome Fot Managr I have to find out about adding Helvetica or the basic fonts … somewhere … The list goes on …

[JacobDK]

Maybe related - Font Manager is not working either - as when I installed latest woocommerce - everything went … not so good. I have downloaded some fonts to use locally - But I can not choose them.

Starting from scratch with a blank install.

[StrangeTech]

@JacobDK

Maybe related - Font Manager is not working either - as when I installed latest woocommerce - everything went … not so good. I have downloaded some fonts to use locally - But I can not choose them.

The issue with WooCommerce is being worked on:

Issue with WooCommerce 7.9.0

Hello everyone, Thank you for this report and my apologies for the inconvenience. It seems that the WooCommerce team has decided to include a store that normally belongs on the Site Editor (and that Gutenberg keeps separate), that we rely on for numerous functions. I have sent messages in several directions and am hopefully waiting for a reply before we review our logic here. Please bear with me while we get to the bottom of this, and once again, I’m terribly sorry if this has caused issues …

For now, reverting to WooCommerce 7.8.2 will allow you to use Cwicly normally.

@JacobDK

For the awesome Fot Managr I have to find out about adding Helvetica or the basic fonts … somewhere

Ask and you shall receive:

How to use standard web fonts with Cwicly

These days, with the availability of high quality variable weight fonts, most sites we create will probably use custom fonts and with the Cwicly Font Manager we can easily make these locally loaded. On some occasions we may find we need to use standard web fonts (.e.g if mandated by a company style guide or for licensing reasons). Cwicly allows us to do this with ease: Open the Cwicly Font Manager [Screenshot 2023-06-25 at 12.29.07] Click “Add” and type in the name of the standard font…

[JacobDK]

Yes, I found out about woo and also the Helvetica. Not the problem, but thank you anyways.

The steps you provide in the post with the relative styling is a good example. The steps are not detailed enough and simply does not meet the simple instructions that I need.

There are steps you presuppose in order to do that. Also - it does not say if Relative Styling is necessary. Also the solution is bloated with complexity if I simply want a 700 px centered post content.

It is not clear to me how I then go about having the image being 850 px wide where as the text in the blog post should only be 700px. That is probably where the relative styling becomes awesome.

[StrangeTech]

@JacobDK

This is not working - and if I try with a Page-template it is not working either.

But I need a step-by-step as with many other awesome features

I don’t have a lot of time this evening, but I will do a quick summary to help you get started:

1. Create a “Default” template of “Single Item: Post” in Cwicly Themer > Templates
2. Give it the visibility conditions shown in this post:

@StrangeTech

Can you please try setting the visibility conditions for the Single Item: Post template to the following:

3. Edit the template (as per your design requirements) and where you want the post content to appear, add a Cwicly Post Content block
4. With the Post Content block selected, add a global class called “default-post-content”
5. Edit that global class by clicking its chip in the block inspector (so it is highlighted with a light border)
6. Add whatever background colours and styles you require for the entire block (with the class still selected)
7. For individual elements (e.g. paragraphs and headings) add relative styles to the global class as per this post:

@StrangeTech

Here are the settings I used to centre the content within the editor to a max-width using a relative style (named All elements).

I hope this gives you some inspiration.

The obvious caveat is that any styles, including max-width you set must also work correctly on the front-end. This is relatively straightforward because the intention is usually to match the editing experience to the front-end display, so as long as you apply those styles using the post content block, everything just works in both places.

You have complete control over the styling of any and all blocks within the post content and these styles will be applied to the editor and the front-end display.

Please note: Some screenshots in that post show relative styles directly on the post content block, I am recommending applying them to the global class instead, let me know if you need further clarification on this.

[JacobDK]

clicking its chip ? like so ?

Should this not be working after step 3, if I set width:700px; and left/right margin to auto on the post content-block and nothing else and have it in the default section ?

[JacobDK]

@Louis I think we have a language-related bug here again - as with the post content appearing twice - switching back and forth between danish and english seems to make it work as intended - this is indeed frustrating to say the least - a waste of time … EDIT _ not angry … just frustrated

I send you a PM to confirm and test out with login and pass.

[Louis]

Hi @StrangeTech,

Thanks for helping out here, much appreciated.

@JacobDK, sorry to see you’re having trouble here once again. If you’re going to want to set a specific width to your post content, can you try going with max-width instead and see if that helps?

[JacobDK]

just tried with max-width bfore I wrote to you also - and it does work - but the thing is - it should not be necessary - and switching languages somehow interfers.

Or max-width is necessary ? Is that what you are saying ?

And yes, @StrangeTech - much appreciated (too busy to acknowledge)

[Louis]

@JacobDK, agreed, it should not be necessary, but currently is (won’t be from WordPress 6.3).

[JacobDK]

@Louis Which is why a tutorial on this and so other many of Cwiclys awesome features step by step would be really nice right ?

[Louis]

@JacobDK, you have a point here, it isn’t standardised. My apologies for the wasted time.
And playing with this does make me think a specific width setting for the post editor itself would be more than useful.

[JacobDK]

No, it is not standardized and streamlined and mainstreamed for me. But this is not making sense to me. Such an awesome builder - although an HTML-builder (that accidently uses wordpress :)) more than a pagebuilder for wordpress - and then you do not really offer support in ters of helpful instructions and guidance for it. Maybe it is meant to be a secret how to use Cwicly.

A mystery to me more than anything these decisions.

Anyways … Much respect for your talents and vision.

[JacobDK]

@StrangeTech

Edit the template (as per your design requirements) and where you want the post content to appear, add a Cwicly Post Content block

but remember to set a max-width if you need to center the post content element. Otherwise you will just get frustrated …

[Lefteris]

Cwicly is my first WP builder. I tried many but never adopted one. I’m used in designing custom WP sites with Figma and coding in VSC. A simple Pro bono project landed about a charity organisation and I thought it was the time to use that Cwicly license I got last November. I was advised that it has a steep learning curve but was lured by its capabilities. Two weeks on and still learning basic functionality. It’s not a rant, it’s how things are.

[JacobDK]

Also it shold be tested by others and confirmed/rejected and perhaps included in the how-to/tutorial, that if you have set a maintenance and coming soon page with a template override of 99 as in the tutorial - see youtube-link - the template for the post type you want to layout and design should be a higher number than 99, thus taken presedence over the other template apparently - that was at least one way I got it to work.

Coming Soon and Maintenance Page