Site Designer V3 Tips and Tricks -...

User 379556 Photo


Registered User
1,533 posts

Stonecherub wrote:
... first I put up a scaffolding using spacer-containers that have a single heading to hold text that I can use to keep track of things. ... Then I insert my components in the scaffolding. If one falls into another container at the second or third level, dragging it between two first-level spacers sets it right.

1. If I've understood the scaffold system correctly, I'm wondering whether a duplicated series of 'Heading 1' at the top level might work even more efficiently than spacer containers, as nothing could end up accidentally inside a Heading 1.
2. The manner in which one chooses to position elements may be influenced not only by personal preference, but also by the resolution of the screen on which one is working.
3. The new 'Collapse All Nodes' button at the foot of the Elements Tree helps a great deal for positioning at the top level in that tree. I find myself using that button a lot.

Frank
User 2906089 Photo


Registered User
222 posts

This tip is about not having the ability to use percentages in the border-radius option.

In this case I wanted to create a pill shaped div. The first method uses px's as the only option when setting the radius properties.First, find the height of the item and make the radius half the size of the height. Instant pill shape.

The second method is my Tip. Forget about knowing the height, and just enter a large amount(up to 500 px ) in the X/Y boxes and all four of the corners will be pulled in. No math or knowledge needed. However, there is a problem.

If you have a picture, the radius option can be used to make the trendy round people images. This is a perfect case where a 50% / 50% X/Y would help but it does not exist in Coffee Cup current line up.

The problem is the limitation of 500 px for the X/Y values. This limit appears to have no consideration of the picture size. This a perfect case where using 50% in the x and 50% in the y would work on all sizes. However using px method, you can't make large images round.

I hope this makes sense and might help them in the future. On the other hand, if I'm missing something, please let me know.




Learn something, Share something.
User 2699991 Photo


Registered User
4,782 posts
Online Now

Bosco wrote:
This tip is about not having the ability to use percentages in the border-radius option.

In this case I wanted to create a pill shaped div. The first method uses px's as the only option when setting the radius properties.First, find the height of the item and make the radius half the size of the height. Instant pill shape.

The second method is my Tip. Forget about knowing the height, and just enter a large amount(up to 500 px ) in the X/Y boxes and all four of the corners will be pulled in. No math or knowledge needed. However, there is a problem.

If you have a picture, the radius option can be used to make the trendy round people images. This is a perfect case where a 50% / 50% X/Y would help but it does not exist in Coffee Cup current line up.

The problem is the limitation of 500 px for the X/Y values. This limit appears to have no consideration of the picture size. This a perfect case where using 50% in the x and 50% in the y would work on all sizes. However using px method, you can't make large images round.

I hope this makes sense and might help them in the future. On the other hand, if I'm missing something, please let me know.


Yes you can
insert a container
give it a size (in pixels) same height/width
give it a border radius all around same no of pixels
give the container a background image (set position/dimensions as preferred) pixels or %
boom a square JPEG into a round hole !!!
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2695940 Photo


Registered User
148 posts

This might be obvious to everyone else but I had always been frustrated that I couldn't see the entire path of a Picture when in the Element pane.... then I left the cursor on the path for a few seconds and the entire path showed up in a separate box. Magic! Hope at least 1 or 2 people out there had the same issue :)
John Ferguson
Website Design and Development
www.jf1.co
User 2699991 Photo


Registered User
4,782 posts
Online Now

John Ferguson wrote:
This might be obvious to everyone else but I had always been frustrated that I couldn't see the entire path of a Picture when in the Element pane.... then I left the cursor on the path for a few seconds and the entire path showed up in a separate box. Magic! Hope at least 1 or 2 people out there had the same issue :)


It's been like that since the beginning of time :D
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2695940 Photo


Registered User
148 posts

It's finding those little things in life that make me happy Wayan! :cool:
John Ferguson
Website Design and Development
www.jf1.co
User 2699991 Photo


Registered User
4,782 posts
Online Now

John Ferguson wrote:
It's finding those little things in life that make me happy Wayan! :cool:

Did you know that the same thing happens if you hover over an image in your resources folder?
Also did you know that you can drag and drop an image direct from your desktop or a folder on your desktop or even from the downloads folder directly into a container on the canvas within site designer, it will then put it into the folder that you choose within the resources and into the container, that's pretty cool as well. :cool:
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2695940 Photo


Registered User
148 posts

Very cool indeed. Thanks for sharing Wayan!
John Ferguson
Website Design and Development
www.jf1.co
User 3157014 Photo


Guest
1 post

As per my opinion below are the top Site Designer V3 Tips
    Plan Your Layout: Before you start designing, create a wireframe or outline of your website's layout. This will help you visualize the structure and organization of your content.

    Choose a Clean and Responsive Design: Opt for a clean and modern design that is visually appealing and easy to navigate. Also, ensure that your design is responsive, meaning it adapts well to different screen sizes and devices.

    Prioritize User Experience (UX): Keep the user experience in mind throughout the design process. Make sure your website is easy to use, with clear navigation and intuitive interactions.

    Optimize for Speed: Page load time is crucial for user satisfaction and SEO. Compress images, minimize HTTP requests, and leverage browser caching to improve site speed.

    Use High-Quality Images: Invest in high-quality images that enhance your website's aesthetics and resonate with your brand or content.

    Maintain Consistent Branding: Use consistent colors, fonts, and imagery to maintain your brand's identity throughout the website.

    Keep Content Readable: Ensure that your text is easy to read by using legible fonts, appropriate font sizes, and suitable line spacing.

    Use Whitespace Effectively: Whitespace, also known as negative space, can help improve the overall readability and visual appeal of your website. Don't overcrowd elements on the page.

    Implement Call-to-Action (CTA) Buttons: Encourage user engagement and conversions by strategically placing CTA buttons throughout your site.

    Test Your Design: Before launching your website, test it on different devices and browsers to ensure it functions correctly and looks good on all platforms.

    Monitor Analytics: Use analytics tools to track user behavior and engagement on your website. This data can provide insights into areas for improvement.

Selecting an Site Designer V3 is possess a combination of innate talent, technical skill, creativity, adaptability, and a user-centric approach. Their dedication to continuous improvement and ability to create impactful and visually stunning designs set them apart as industry leaders. Let me know your thoughts or suggestions.
User 3157442 Photo


Guest
3 posts

    Use gridlines and snap-to-grid feature for precise alignment.
    Utilize the template library for quick design inspiration.
    Experiment with different color palettes and fonts to create a unique look.
    Optimize images for faster loading times and better user experience.
    Keep the design simple and intuitive for easy navigation.
    Test your site on multiple devices to ensure responsiveness.
    Add interactive elements like buttons or sliders to engage users.
    Use white space strategically to avoid clutter.
    Regularly save and back up your work to prevent data loss.
    Seek feedback from others to improve your design.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.