Drag and Drop

  • Unknown's avatar
    taralouisekenny · Member ·

    I want to build a website using wordpress.com
    Are there any drag and drop builders that can be used, so i’ve found Headway, Ultimatum and Builder which I believe are only for self hosted wordpress.org sites
    Any suggestions please?

  • Unknown's avatar
    designsimply · Member ·

    There aren’t drag and drop builders for WordPress.com. What we have are beautiful themes already setup for you. You can find examples of all of them at http://theme.wordpress.com/

    Some themes have options to let you make adjustments such as moving the sidebar from one side to the other, but options like that are totally dependent on the theme. Check out the link above to see if you can find something that looks good to you! That would be the best starting point.

    Let us know if you have any other questions as you go!

  • Unknown's avatar
    taralouisekenny · Member ·

    Thank you, yes I have seen them and have a blog http://www.stonedesignblog.com using a theme, but I would like to build a site which has the option of different full width backgrounds on different pages and i’m not sure how or what I need to look for in the theme descriptions to spot this function! I have no CSS or code knowledge – yikes! Can you help?

  • Unknown's avatar
    designsimply · Member ·

    Certainly. I can show you how to target specific pages using body classes and CSS selectors so that you can have different background images for different pages.

    Let’s start with the home page as an example:
    http://stonedesignblog.com/

    If you use your browser to view the page source, you’ll see this for the body tag in the HTML:

    <body class="home blog logged-in admin-bar custom-background mp6 typekit-enabled debug-bar-maximized theme-menu-maximized highlander-enabled highlander-light custom-colors infinite-scroll customize-support" style="" data-twttr-rendered="true">

    You can use any of the class names to target different types of pages. In this case, the first tag listed is “home” so we can use that.

    In CSS, to target based on a class name, you start it with a dot like this:

    .home

    I picked the first image from your blog to use as the image in this example. It’s not big enough to be full-width, so I’m just going to let it repeat. Here’s the CSS code:

    .home {
	background-image: url("http://stonedesignstudio.files.wordpress.com/2014/01/print_longdog.jpg");
}

    Try changing out the image URL to a different one from your media library to experiment.

    The background property is a shorthand property for several different ones like background-color, background-image, background-repeat, etc. Here’s a good resource page that has links that will take you to pages that explain how each one works:
    http://htmldog.com/reference/cssproperties/background/

    Also, if you want to get started learning more CSS, I think this is a good starting out tutorial:
    http://www.htmldog.com/guides/cssbeginner/

  • The topic ‘Drag and Drop’ is closed to new replies.